【Bootstrap v4】レイアウト・グリッドシステムを学ぶ

2017.09.20|サイト構築

Bootstrap v4でのレイアウト方法、
グリッドシステムの解説をしていきたいと思います。

Bootstrapでのレイアウト

下記で紹介するレイアウトはBootstrapの基本となるものです。

コンテナは各ブロックなどをくくるラップとなり、グリッドシステムを使用するのには欠かせません。

コンテナ

コンテナは先にも述べたようにグリッドシステムを使用するのに欠かせません。

コンテナには固定幅(.container)のものと可変幅(.container-fluid)のものと選択することができます。

コンテナ(固定幅)

固定幅はブラウザサイズによってサイズは変わりまが、その名の通り幅は固定されます。

<div class="container">
  <!-- ここにコンテンツを入れる -->
</div>
ブレイクポイント

固定幅に関しては、レスポンシブになっているので、ブレイクポイントが存在します。

対応ブラウザスクリーンサイズが
小さい携帯端末
スクリーンサイズが
大きい携帯端末
タブレットなどパソコンなど標準より大きな
パソコン画面
ブラウザ幅576px未満768px未満992px未満1200px未満1200px以上
メディクリ設定幅max-width: 575pxmax-width: 767pxmax-width: 991pxmax-width: 1199pxmin-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)540px720px960px1140px
クラスプレフィックス.col-.col-sm-.col-md-.col-lg-.col-xl-
列数12
padding30px(列の両はしに15px)
ネスト可能か可能
列の順序可能

3の時は.col-のみでの使用はできませんでしたが、4からは.col-のみの使用も可能となりました。

これ、なにが便利かって、端末関係なく横並びにしたい時とかはこれをとりあえず使っておけばいいと言うことで、ちょっと頭の足りない私とかだと、え、ここはスマホまでこう見えてこうだから、このマークアップにして…とか、めっちゃ考えなあかんかったんですけど、ちょっと気が楽になります。

どう言うことかと言うと、

<div class="container">
  <div class="row">
    <div class="col">
      1/2の等幅(横幅約50%)
    </div>
    <div class="col">
     1/2の等幅(横幅約50%)
    </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の等幅(横幅約50%)
    </div>
    <div class="col-md-6">
      1/2の等幅(横幅約50%)
    </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を導入したため、可能となりました。

クラスプレフィックスは、併用が可能

端末によって見せ方を変更したい時に、たまに、ミディアムサイズはグリッド3で、スモールサイズは5で見せたいのになぁ…などと、このクラスプレックスとこれを合わせて使えないかなと言うことも出てくるかと思います。

できますですよ!

<!-- 一つのフルサイズの幅ともう一つは半分の幅のサイズ -->
<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>
<!--モバイルでは50%の幅、デスクトップでは最大幅が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が重なってめっちゃ狭くなっている!

と言う経験が3ではありました。

3ではこれらを無理やりCSSで消してたんですが、4ではクラスを定義することでその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のグリッド数は12なので、列が合計12になるように組んでいきますが、
右側に5の空間を置いて、左側に7のオブジェクトをおく…といったシュチュエーションも出てくるかと思います。

例えば、ボタン配置などで、左寄せ、右寄せ、中央寄せ以外にグリッドに合わせた配置がしたいとか、シュチュエーションは様々だと思います。

そういった場合、空間をオフセットで指定することによって、可能になります。

が、

3まではオフセット.col-md-offset-*をおくことで可能となっていましたが、4では仕様が変更されていました。

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へ移行した影響は大きいですね。

そう言う意味では3より個人的には使い勝手がすごく良くなっていると思います。
自分でコーディングする場合は、flexboxでレイアウトする方が好きなので。

その他様々なオプションがありますが…

他にも様々なオプションがありますが、本サイトにて確認してください。

多すぎてここでは割愛。

グリッドシステムはできることが豊富で、全て紹介するよりかは、直接本サイトいってもらった方がわかりやすくていいと思うんですが、

英語だし、ちょっと…

と言う方もいらっしゃると思うんで、私チョイスで主な機能をかいつまんで紹介させていただきました!

もっと詳しく!と言う方はこちら

Bootstrap Grid

https://getbootstrap.com/docs/4.0/layout/grid/