DAY12の課題は「Bootstrapでレイアウトを作ろう 前編」になります。
DAY11に引き続きドットインストールでBootstrapの学習になります。DAY11で学習したBootstrapの基礎をつかって、架空のWebサイトのレイアウトを作成していきます。
その中で新たに出てきたclassの指定方法などをまとめていきます。
レスポンシブ対応
現在Webサイトを作成しようとするとレスポンシブ対応が必須ですが、Bootstrapでは4つのブレイクポイントが設定されており、ブレイクポイントに対応させるためのclassが用意されています。
- 576px → sm
- 768px → md
- 992px → lg
- 1200px → xl
例えばグリッド列のサイズをレスポンシブ対応させようとすると以下のような指定になります。
-
- グリッドカラムのサイズ
col-[ブレイクポイント(smなど)]-[グリッドのサイズ(1~12)]
-
- グリッドカラムの表示/非表示
d(display)-[ブレイクポイント(smなど)]-[none/block/inlin-block]
displayプロパティの指定なので、もちろんブレクポイントを指定せずにd(display)-[none/block/inlin-block]という指定でも使えますし、グリッド以外の要素でも使用可能です。
- グリッドの順番
- order-[ブレイクポイント(smなど)]-[順番(数値)]
- ブレイクポイントを指定せずにorder-[順番(数値)]とすることで、そもそもの順番を変更できる。
CodePenでも書いてみました。
See the Pen
yLBqYWb by Jyu2 (@Jyu2)
on CodePen.
枠線に丸みをもたせる(border-radius)
ドットインストール内では画像(img)を丸くするという使い方で登場しますが、もちろんimgタグ以外にも使用可能です。
classの指定方法は以下の通りです。
- 四隅に丸みをつける → rounded
- 指定した箇所に丸みをつける → rounded-[top/bottom/right/left]
- 丸くする → rounded-circle
- 四隅に大きい丸みをつける? → rounded-pill
rounded-pillは日本語でどう表現したら良いかわかりません・・・。
こちらもCodePenに例を書いてみます。
See the Pen
Bootstrap_枠線に丸みをつける by Jyu2 (@Jyu2)
on CodePen.
テーブルのレイアウト
テーブルのclass指定はかなり衝撃でした。classに「table」を指定するだけでシュッとしたレイアウトになるなんて・・・。
文章で書くよりも実際に見た方がイメージがわくと思うので、またまたCodePenです。
See the Pen
Table_Bootstrap by Jyu2 (@Jyu2)
on CodePen.
tableタグにtableクラスを指定しただで圧倒的にシュッとなりますね。まじ便利です。
それ以外にも
- 色を反転させる → table-dark ＊tableタグに指定する
- ヘッダー(thead)を反転させる → thead-dark(thead-light) ＊theadタグに指定する
- 行(tbody)の色を交互にかえる → table-striped ＊tbodyタグに指定する
- 各セルの境界線を罫線にする → table-borderd ＊tableタグに指定する
- 隠せるの境界線をなくす → table-borderless ＊tableタグに指定する
- 行・セルを任意の色に変更する → table-[color] ＊tr(行)、td(セル)タグに指定する
などのよくありそうなclassが用意されています。
まとめ
- Bootstrapのブレイクポイントは4種類で「d-[ブレイクポイント]-[none]」のようにプロパティと値の間に定義する
- tableはclass一つ指定するだけで見た目がすごく変わるので、Bootstrapのすごさが分かる
- ドットインストールの学習は講師が「こんなスタイルを指定します」と言ったタイミングで一旦停止させて、まず自分で考えて書くと良い
- もちろんVSCodeのショートカット、Emmetをガンガン使用して書く
