Webデザイン勉強91日目の成長報告！
こちらのWebサイトは移転しました。
[ピュアチャ〜ジ]
はいどうも！
本日も作業を行い、Bootstrapの学習を進めました。
本日の進捗を報告します！
【打ったコード→表示されたページ】 の順番で振り返ります。
btn = ボタン
btn-sm = small ボタン
btn-lg = large ボタン
colは12で設定されているため、記述しなければ12で収まるように表示します。
数値を設定していて、かつ12を超えたものは改行をしていることがわかります。
class="d-none d-md-block col-md-2（一番下の記述）
通常は非表示/ディスプレイがミディアムの時は、カラム2で表示
sm
md
以下は、Bootstrapを使ったHP作成の記述をしたものです。
まず最初にスマホサイズの場合の記述をし、smの指定をしているものはPCのディスプレイ（small）になった際の記述の仕方です。
↓メイン（スマホサイズ）↓
↓ヘッダー＋メイン（PCのsmallディスプレイサイズ）
↓メイン＋テーブル（PCのsmallディスプレイサイズ）
今日やってみて思ったんですが、本当にBootstrapすごいです。笑
classでかなり多くの表現ができます。
種類がすごく多いので、作成しつつ色々なバリエーションが見つけられると思いました。
「table」の5文字をclassに設定するだけで一瞬でスタイルが整うなんて素晴らしすぎます。
そして、今の動画教材でよく使われている構造の理解が深まった気がします。
↓header以降のsection内の記述の順番↓
section<h2<container<div<row<col
一つの大きな塊を定義＝section
そのタイトルを定義＝h2
その下に、複数の要素を囲む役割＝container
containerの中にある、各要素(似ている要素)＝div
複数のcolのまとめ役。画面サイズでcolを横並びにしたり縦並びにしたりが可能＝row
divの中の小さな集まり＝col
こんな感じです。
今日は、ここまで！
