こんばんは、こずえです。
プログラミング学習記録19日目です。
今日は主にBootstrapのグリッドシステムについて学習しました。
所感：イメージできるかが大事ですね(´ー｀)
合計学習時間
前回までの時間：27.25[h]
今回の時間：1.25[h]
合計時間：28.50[h]
学習内容
Flexbox
隙間時間で下記の記事に目を通しました。
各プロパティ毎にHTML、CSS、表示結果を切り替えながら確認ができる仕組みになっていて、「ここはどうなっているんだろう？」という疑問をソースと表示結果の切り替えで解決することができます。
Bootstrap
Bootstrapのグリッドシステムについて下記の記事を読みました。
画像にあるレイアウトをしたい場合のHTMLの記述は？といった予想させる書き方がされていたのもあって、インプットとアウトプットがいい具合に両立しました。
2つ目の記事は目を通すレベルにしようと思っていたのですが例えがわかりやすくて面白かったです。
カレー愛を感じました。
- Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする
- ラクするWeb制作「フレームワークなにソレ？」な初心者へおすすめの7選
書いたもの
びっくりするくらい簡単にレスポンシブ化できますね。
Bootstrap グリッドシステムのテスト
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSSの練習</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css">
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div class="container">
<div class="row">
<div class=""></div>
<div class="col-md-4">
<div class="row">
<div class="col-sm-6"><img src="img/animal_inu.png"></div>
<div class="col-sm-6"><img src="img/animal_neko.png"></div>
<div class="col-sm-6"><img src="img/animal_usagi.png"></div>
<div class="col-sm-6"><img src="img/animal_kuma.png"></div>
</div>
</div>
<div class="col-md-8"><img src="img/ofuro_onsen_animals.png"></div>
</div>
</div>
</body>
</html>
CSS
body {
background-color: floralwhite;
}
img {
max-width: 100%;
}