Bootstrapを使ったフロントエンド開発入門【レイアウト編】

Bootstrapではグリッドシステムと呼ばれるレイアウト手法が採用されています。この概念を知る為にはまずコンテナー "container" やカラム "colum" 、ガター（溝） "gutter" について学ぶ必要があります。

解説の内容は以下Codepenにサンプルを用意しているので適宜見比べながら読んで頂ければと思います。

グリッドシステム

グリッドシステムは横幅12列に分割したレイアウトを主な枠組みとして利用します。まず、グリッドシステム使う際には基本的にコンテナー"container"要素（側）を配置します。
コンテナー"container"はコンテンツを入れる為の箱でコンテンツを水平中央に配置する機能を持ちます。基本的には各要素は"container"というクラスを付与したラッパーに内包されます。固定幅ではなく横いっぱいに広がったコンテナにする場合は"container-fluid"クラスを利用します。

<div class="container">
  コンテンツが入ります
</div>

コンテナーの中には"row"クラスを付与した要素が入ります。rowは「行」という意味の単語で、row「行」の中にカラムが内包されます。

<div class="container">
  <div class="row">
    <div class="col">Col-1</div>
    <div class="col">Col-1</div>
    <div class="col">Col-1</div>
  </div>
</div>

前述のようにグリッドは全部で12分割することができます。列をカラム（Colum）と呼び、各カラムの間には15pxずつガター(Gutter)が左右内側に割り振られています。ガターを削除したい場合は"no-gutters"クラスを利用します。

カラムには"col"というクラスを付与します。カラムは12分割されるうちいくつ分をその列で利用したいかを指定することができます。"col-6"とするとカラム6個分の幅が割り当てられます。またBootstrapのグリッドシステムにはflexboxと呼ばれるレイアウト手法が採用されています。flexboxでは1カラムを指定すると残りのカラム幅は等幅で割り振られます。

レスポンシブ対応したグリッドシステム

Bootstrapではブレイクポイントが５段階で設定されています。col-(*ブレイクポイントのclass)となるクラスの命名規則でブレイクポイントを任意に設定することができます。可変幅のカラムを作りたい際はcol-autoクラスを利用します。

ブレイクポイントは以下の５つに分けられます。例えば画面幅が768px以下であれば「.col-md」を指定します。Bootstrapはモバイルファーストを前提に設計されています。その為、モバイルのスタイルを基準として画面サイズの小さいものからスタイルを上書きしていく仕様となります。

• Extra small (<576px) .col
• Small (>=576px) .col-sm
• Medium (>=768px) .col-md
• Large (>=992px) .col-lg
• Extra large (>=1200px) .col-xl

Flexユーティリティーを用いたカラムの整列

カラムの整列にはFlexユーティリティーを利用するのが一般的です。例えば水平方向の整列では以下のクラスを整列したい要素の親要素に付与することでレイアウトの変更ができます。

• .justify-content-start（左揃え）
• .justify-content-center（中央揃え）
• .justify-content-end（右揃え）
• .justify-content-around（等間隔に配置）
• .justify-content-between（両端から均等に配置）

今回はBootstrapで使われるグリッドの概要とレイアウトの整列について学習しました。次回は要素のスタイリングについてまとめていきたいと思います。