Bootstrap v4でのレイアウト方法、
グリッドシステムの解説をしていきたいと思います。
Bootstrapでのレイアウト
下記で紹介するレイアウトはBootstrapの基本となるものです。
コンテナは各ブロックなどをくくるラップとなり、グリッドシステムを使用するのには欠かせません。
コンテナ
コンテナは先にも述べたようにグリッドシステムを使用するのに欠かせません。
コンテナには固定幅（.container）のものと可変幅（.container-fluid）のものと選択することができます。
コンテナ（固定幅）
固定幅はブラウザサイズによってサイズは変わりまが、その名の通り幅は固定されます。
<div class="container">
<!-- ここにコンテンツを入れる -->
</div>ブレイクポイント
固定幅に関しては、レスポンシブになっているので、ブレイクポイントが存在します。
| 対応ブラウザ | スクリーンサイズが 小さい携帯端末 | スクリーンサイズが 大きい携帯端末 | タブレットなど | パソコンなど | 標準より大きな パソコン画面 |
|---|---|---|---|---|---|
| ブラウザ幅 | 576px未満 | 768px未満 | 992px未満 | 1200px未満 | 1200px以上 |
| メディクリ設定幅 | max-width: 575px | max-width: 767px | max-width: 991px | max-width: 1199px | min-width: 1200px |
// 小さい画面の携帯端末 (ポートレートフォンなど、 576px未満)
// これはbootstrapのデフォルトになるため、メディアクエリはありません
// 画面の小さい端末 (インダスケープフォン, 576px以上)
@media (min-width: 576px) { ... }
// ミディアムサイズの画面 (タブレットなど, 768px以上)
@media (min-width: 768px) { ... }
// 大きい画面 (デスクトップなど, 992px以上)
@media (min-width: 992px) { ... }
// とても大きな画面の端末 (大きい画面サイズのデスクトップなど, 1200px以上)
@media (min-width: 1200px) { ... }CSSでのメディクリに関しましては細かい設定方法がいくつかあり、それらに関しましては本サイトに詳細がありますので、そちらを参考にしてください。
コンテナ（可変・流動幅）
ほぼ横幅100％のコンテナです。
ほぼ、というのはpaddingやmarginによって100%ではなくなるので本サイトでもそのような表記になっていると思われます。
<div class="container-fluid">
<!-- ここにコンテンツを入れる -->
</div>グリッドシステムに関して
グリッドシステムに関して、簡単に言うと、
Bootstrapはグリッドレイアウトを基本としています。
グリッドレイアウトは横12に分割しています。
その分割された12をうまいことは位置してレイアウトしていくというものです。
簡単に言えてるかしら？
4からflexboxも取り入れたシステムになっています。
基本的な使い方
基本的には先に述べた.containerや.container-fluidで.row .colを囲って使用します。
固定幅にしたいときは.containerを使用して、フルマックスの流動幅にしたいときは.container-fluidを使います。
<div class="container">
<div class="row">
<div class="col">...</div>
<div class="col">...</div>
<div class="col">...</div>
</div>
</div>3の時は.colを入れる場合、グリッドの数を表す数字を入れないといけませんでしたが、
4からはFlexboxを採用したため、.colのみで、幅が設定されていないグリッド列は自動的に等幅でレイアウトされるようになりました。
これはめちゃめちゃ楽ですね。
ですが今まで通り.col-sm- .col-md- .col-lg- .col-xl-の使用も可能です。
いきなり出てきたこの.rowはなに？
これ、3の時もすっごい謎だったんですが、
本サイトの英語をちゃんと読めばちゃんと書いてありました。
英語苦手なんでめっちゃさらっと読み流してました。
.colが列に与えるクラスとしたら、.rowは行に与えるクラスでコンテナを水平に分割し上から下へと並びます。.rowの中に.colを定義しレイアウトを組みます。
また、Bootstrapにおいて.rowは左右両端の余分なガターをネガティブマージンで相殺する役割を持っています。
つまり、行を.rowで、列を.colで表し、
コーディング順序としては
.container(全体のラップ) ＞ .row（行を囲う） ＞ .col（列を囲う）
となります。
ので.rowも結構大事になってきます。
入れましょう
グリッドオプション
端末の画面サイズが豊富なため、ブレイクポイントごとにレイアウトを調整できるオプションが用意されています。
| 極小 <576px | スモール ≧576px | ミディアム ≧768px | ラージ ≧992px | 特大サイズ ≧1200px | |
| コンテナの最大幅 | ナシ（auto） | 540px | 720px | 960px | 1140px |
|---|---|---|---|---|---|
| クラスプレフィックス | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
| 列数 | 12 | ||||
| padding | 30px（列の両はしに15px） | ||||
| ネスト可能か | 可能 | ||||
| 列の順序 | 可能 |
3の時は.col-のみでの使用はできませんでしたが、4からは.col-のみの使用も可能となりました。
これ、なにが便利かって、端末関係なく横並びにしたい時とかはこれをとりあえず使っておけばいいと言うことで、ちょっと頭の足りない私とかだと、え、ここはスマホまでこう見えてこうだから、このマークアップにして…とか、めっちゃ考えなあかんかったんですけど、ちょっと気が楽になります。
どう言うことかと言うと、
<div class="container">
<div class="row">
<div class="col">
1/2の等幅（横幅約５０％）
</div>
<div class="col">
1/2の等幅（横幅約５０％）
</div>
</div>
<div class="row">
<div class="col">
1/3の等幅（横幅約33.3%）
</div>
<div class="col">
1/3の等幅（横幅約33.3%）
</div>
<div class="col">
1/3の等幅（横幅約33.3%）
</div>
</div>
</div>このコードだけで頭幅ができるんです。
3だと
<div class="container">
<div class="row">
<div class="col-md-6">
1/2の等幅（横幅約５０％）
</div>
<div class="col-md-6">
1/2の等幅（横幅約５０％）
</div>
</div>
<div class="row">
<div class="col-md-4">
1/3の等幅（横幅約33.3%）
</div>
<div class="col-md-4">
1/3の等幅（横幅約33.3%）
</div>
<div class="col-md-4">
1/3の等幅（横幅約33.3%）
</div>
</div>
</div>こう記述しないといけなかったので、
なんか、めっちゃ記述がスッキリしています！
これらは、bootstrapで新しくflexboxを導入したため、可能となりました。
クラスプレフィックスは、併用が可能
端末によって見せ方を変更したい時に、たまに、ミディアムサイズはグリッド３で、スモールサイズは５で見せたいのになぁ…などと、このクラスプレックスとこれを合わせて使えないかなと言うことも出てくるかと思います。
できますですよ！
<!-- 一つのフルサイズの幅ともう一つは半分の幅のサイズ -->
<div class="row">
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!--モバイルでは５０％の幅、デスクトップでは最大幅が33.3％になる -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- 列はモバイル・デスクトップどちらとも50％の半分のサイズ-->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>このように、携帯端末とタブレット、デスクトップで幅を調整したり、どれをみても同じように見え流ようにすることができます。
実際にレイアウトしていらないと感じる列のpaddingを消す
ページのデザインによっては、グリッドが入れ子になっていって、気づいたらテキストを入れる部分がpaddingが重なってめっちゃ狭くなっている！
と言う経験が３ではありました。
３ではこれらを無理やりCSSで消してたんですが、４ではクラスを定義することでそのpaddingを消すことができます。
また、CSSで設定することによって任意のpaddingにすることもできます。
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}<div class="row no-gutters">
<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>列のオフセット
基本的にBootstrapのグリッド数は１２なので、列が合計１２になるように組んでいきますが、
右側に５の空間を置いて、左側に７のオブジェクトをおく…といったシュチュエーションも出てくるかと思います。
例えば、ボタン配置などで、左寄せ、右寄せ、中央寄せ以外にグリッドに合わせた配置がしたいとか、シュチュエーションは様々だと思います。
そういった場合、空間をオフセットで指定することによって、可能になります。
が、
３まではオフセット.col-md-offset-*をおくことで可能となっていましたが、４では仕様が変更されていました。
Flexboxへの移行に伴い、.mr-autoを使用して配置します。
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>Flexboxへ移行した影響は大きいですね。
そう言う意味では３より個人的には使い勝手がすごく良くなっていると思います。
自分でコーディングする場合は、flexboxでレイアウトする方が好きなので。
その他様々なオプションがありますが…
他にも様々なオプションがありますが、本サイトにて確認してください。
多すぎてここでは割愛。
グリッドシステムはできることが豊富で、全て紹介するよりかは、直接本サイトいってもらった方がわかりやすくていいと思うんですが、
英語だし、ちょっと…
と言う方もいらっしゃると思うんで、私チョイスで主な機能をかいつまんで紹介させていただきました！
もっと詳しく！と言う方はこちら