【Bootstrapその②】グリッドシステムについて【学習積み上げ】
引き続き、Bootstrapの学習をしてます、マサです。
今回はグリッドシステムについてまとめておきました。
学習としてはもう少し進んでいますが、
contentやcomponentsまでやると量が多くなりそうなので、次回の記事にします。
今回はBootstrapでのグリッドレイアウトについてまとめていきます。
では行きましょう！
Bootstrapのグリッド
グリッドレイアウトについて引用。
グリッドレイアウト(グリッドデザイン、グリッドシステム)はホームページのデザイン手法の一つで、画面やページを縦横に分断する直線で格子状に分割し、これを組み合わせてブロック内の要素の大きさや配置を決定していく方法のことです。2019/02/04
グリッドレイアウト - Ferret
https://ferret-plus.com/5540
最近はflexを使ったグリッドも増えてきていたり、Jqueryライブラリなど(Masonryが好き)を使った動きのあるグリッドレイアウトも人気です。
このグリッドレイアウトをより簡単に実装できるのもBootstrapの特徴です。
Bootstrapに頼りすぎるのはいけないですが、グリッドだけでも使うというような使われ方はされているようですので、スキルとして持っておきたいですね。
Bootstrapのグリッドレイアウトは12分割
なぜ、Bootstrapのグリッドレイアウトが楽かというと、Bootstrapのグリッドシステムは12個のboxが並ぶことによって成り立っているため、配置が非常に楽だからです。
このboxの指定はdiv class="row"を指定することで中身の子要素に適用されます。
その場合、子要素にはdiv class="col-1~12"を指定する必要があります。
例えば、
<div class="container my-5"> <div class="row"> <div class="col-4" style="height: 200px; background: #f88;">box1</div> <div class="col-8" style="height: 200px; background: #f66;">box2</div> </div> </div>
中身は省略していますが、こういう風にcolを指定すると、一列に4：8の要素が並びます。
ちなみにmy-5は前回やったmargin-top+bottomで5rem分取っているということでしたね。
また、colはrowの中に含まれないと12個の比率が適用されないので、外れてしまうと違う列から始まることに注意です。
この画像のとき、コードはこんな感じ。
<div class="container my-5"> <div class="row"> <div class="col-3" style="height: 200px; background: #f88;">box1</div> <div class="col-7" style="height: 200px; background: #f66;">box2</div> </div> <div class="col-2" style="height: 200px; background: #f44;">box3</div> <!-- このbox3はrowから外れています。 --> </div>
colの合計を12にしたから3:7:2で要素が並ぶはず、、とはなりませんので注意です。
また、画像を見ているとbox1,2の列とbox3の列に関して、左側に少し余白のズレがあるのが分かるかと思います。
これはcontainerにpaddingが15pxずつ付いているからなのですが、少し複雑な解説になるので、別途記事にします。
また、同じようなケースでcolが12を超えたらどうなるかというと、
この場合は折り返されて違う列から始まります。
<div class="container my-5"> <div class="row"> <div class="col-4" style="height: 200px; background: #f88;">box1</div> <div class="col-8" style="height: 200px; background: #f66;">box2</div> <div class="col-2" style="height: 200px; background: #f44;">box3</div> </div> </div>
とりあえずは 、
- div.row > div.col-○の階層になる
- ○には合計12の数字までが一列に並ぶ
この法則を覚えておけば大丈夫です。
colにはブレイクポイントに合わせて要素の大きさを指定できる
colの大きさはsmall, middium, large, extra largeを指定して次のように省略して書きます。
| extra small <576px | small ≥576px | medium ≥768px | large ≥992px | extra large ≥1200px | |
|---|---|---|---|---|---|
| max width | None | 540px | 720px | 960px | 1140px |
| class名 | col | col-sm | col-md | col-lg | col-xl |
この表のmax-widthとはcontainerの大きさのことです。
どういう意味かというと、例えばsmallのブレイクポイントは576pxと書いていて、同じくmediumには768pxと書いていますね。
この時、576px～767pxまではcontainerのwidthの最大値が540pxになりますよ。
という意味です。
ではウィンドウの幅を広げていって、768pxを超えました。この時は、768px～次のlargeのブレイクポイント前である
991pxまで、containerのwidthが720pxになる、ということですね。
では、例としてこういった指定をしたとしましょう。
<div class="container my-5"> <div class="row"> <div class="col-md-4" style="height: 200px; background: #f88;">box1</div> <div class="col-md-8" style="height: 200px; background: #f66;">box2</div> </div> </div>
col-md-○という指定にすると、画面のwidthが768px以上のときにcolが成り立つという指定になるので、この場合768px以上であれば、一列に4:8のboxが並び、それより小さい幅になるとbox1,2が別の列でそれぞれ並ぶ(＝col-12の指定と同じ)ということになります。
また、containerの幅は先ほど書いたものの応用です。
768px以上のときはcontainerが720pxになりますよね。
この時、box1と2が4:8で一列に並ぶので、box1,2はそれぞれ720pxを4と8で分割した大きさとなります。
対して、767px以下になるときは、col-mdを指定しているので先ほど書いたとおり、box1,2はそれぞれcol-12を指定したのと同じことになります。
そうすると、画面の幅が576px～767pxに該当するため、containerのwidthは540pxとなり、box1,2はそれぞれが540pxとなる訳です。
ちょっとややこしいですが、colの後のサイズ指定はこういった役割があります。
メリットは何かというとレスポンシブ対応が非常に楽だということです。
例えば、PCの画面のときは3カラム、タブレットのときは2カラム、スマホのときは1カラム、といった指定がこれだけでできるということです。
また余談ですが、今書いたようにPC>タブレット>スマホ、のように3段階でサイズを調節したいときは、これを2つ指定することもでき、col-md-○ col-lg-○という風に書くことも可能です。
この場合は、ブレイクポイントがmediumとlargeの間を指定という意味になります。
サイズ指定は慣れないと頭がこんがらがってしまうので、コードを書きながらか、デザインを予め考えてから取り組むと良いかと思います！
おわりに
今回はグリッドシステムについてまとめました。
しかし、リライトしている途中に、｢これはもっと深掘ってまとめた方が良いのでは？｣と感じましたので、あと二記事ほど追加したいと思います。
これを書いたあとはBootstrapのカスタム機能についてまとめているので、その⑪と⑫になると思います。
また、その③からは記事冒頭でも少し触れたBootstrapのメインともいえるカスタムについてまとめています。
さっさと実用的な機能が使いたいという方は③～⑩までを流し読みしていただければ幸いです。
それでは。
