デイトラ学習にっき🌷DAY10-11
学習時間📚2/3(水)2h・2/5(金)復習0.5h
Bootstrapとは
読み込むだけで使えるCSSフレームワーク
CSSを書かなくても、HTMLに特定のclassを入力するだけで見た目を変えられる
①公式サイトからスターターテンプレートをコピーしてhtmlに貼り付け
※利用するテンプレートとclassのVerがあってないと反映がされないので注意。デフォルトのVer5はβ版なので、Ver4.5をおススメ
②htmlにclassを追加すると見た目が変わる
どんなclassが用意されているかはBootstrapの公式サイトで検索
よく使うもの
◆サイズの系統は頭文字＋数字で表す
w-25=width25% h-75=height75%
widthとheightは25/50/70/100/autoの幅で設定ができる
pt-5=padding-top mb-1=margin-bottom
py:縦方向だけのpadding mx:横方向だけのmargin
1-5の幅で設定ができる(1のほうが幅が狭い)
Gridレイアウト
画面の横幅を12本のガイドラインで区切り、これを利用してレイアウトを整える→画面幅が変わっても対応しやすい
Gridレイアウトは、container・row・colの3つのCSSクラスでできている
container:コンテナを表すclass。決められた枠を持っている格納庫のイメージ
row:行を区切るclass。コンテナを水平に分割する
col:列を表すclass。小さな枠のイメージ
ex) col-6：6/12の幅のカラムを作る
col-4：4/12の幅のカラムを作る
※画面のサイズを表すclassをつけることで、スマホの際はこの幅、PCの際はこの幅という設定ができる
ex).col-xs-4：画面のサイズが最小の時は 4/12幅のカラムを作る
Gridレイアウトについては下記のサイトが非常に分かりやすい
この記事が気に入ったらサポートをしてみませんか？