Bootstrap 4 グリッドシステムの使い方

Bootstrapとは、Twitter社が開発したUIフレームワークです。Webサイトをデザインする際に役立つツールで、レスポンシブデザインに対応しています。

この記事では、簡単にレスポンシブWebデザインができるBootstrap 4のグリッドシステムの紹介をします。

Bootstrapのグリッドシステムとは？

グリッドとは「画面を縦横に分割する線」のことで、横の線で分割されたエリアを「行（Row）」、縦の線で分割されたエリアを「列（Column）」と呼びます。この「行」と「列」を使ってボックス（容器）を配置してデザインするのが、Bootstrap 4におけるグリッドシステムです。

Bootstrapグリッドは、CSSやJavascriptなしで使うことができます。”bootstrap-grid.css“にリファレンスするだけで、「Grid」クラスと「Flexbox」クラスへアクセス可能です。

グリッドのもっとも基本的な使い方がこちらです。

<div class="container">
<div class="row">
<div class="col">I'm your content inside the grid!</div>
</div>
</div>

上記のコードによって、下の写真にあるように横1列にコンテンツを表示できます。

なお、2列で表示するためのコードと画面は以下のとおり。

<div class="container">
<div class="row">
<div class="col">Left column</div>
<div class="col">Right column</div>
</div>
</div>

3列で表示するためのコードと画面は以下のとおり。

<div class="container">
<div class="row">
<div class="col">Left column</div>
<div class="col">Center column</div>
<div class="col">Right column</div>
</div>
</div>

ちなみに違いをわかりやすくするために、上記3つの図ではグレーの線が付け足されています。実際のコードは以下から確認できます。

Codeply

ベーシックなコンセプトは割とシンプルですが、「なぜボックスが必要なの？」「異なる幅の列を作れるの？」などと疑問に思う方がいるかもしれません。

その質問には後ほどしっかりとお答えしますが、その前にとても大事なことをご紹介します。それは、コードを描く際の「グリッドの記述ルール」です。これを理解しておくと今後とても楽になるので、注意して読んでみてください。

グリッドの記述ルール

1. 「列」は「行」の直接の子（child）である必要がある
2. 「行」は「列」のみを含み、他の要素を入れてはならない
3. 「行」はコンテナの中に配置されるべきである

この記述ルールはとても大切です。そして「行」と「列」は常に一緒に扱う必要があります。

筆者が見てきたBootstrap関連の質問は、多くの場合がこの記述ルールをフォローするだけで解決できました。とてもベーシックですが、間違いやすいのでしっかり覚えておきましょう。

Bootstrapグリッドシステムの正しい使い方

「Container」

最初の例で気づいた方もいるかもしれませんが、「.container」が「.row」の入れ子になっています。これは、Containerがルート（トップレベル）として働くからです。

<div class="container">
<div class="row">
<div class="col">I'm your content inside the grid!</div>
</div>
</div>

実は、Containerはどんな要素やコンテンツでもその中に含むことができます。

しかもこれが使えるのはグリッドシステムのみではなく、以下のように使うこともできます。

<div class="container">
<h2>My Heading</h2>
<div class="row">
<div class="col">I'm content inside the grid!</div>
</div>
</div>

コードを書く際はContainerを忘れないようにしましょう。主な機能は、レイアウトの幅を決めることで、ブラウザ内での左右バランスも調整してくれます。

そしてContainerにはふたつのタイプがあります。例で使ったのが「.container」で、もうひとつが、全幅を扱うことができる「.container-fluid」です。

「.container」は、表示される画面サイズ合わせた固定幅で、レスポンシブに対応します。

<div class="container"></div>

そして「.container-fluid」では、表示されるレイアウトの全部の幅を使ってレスポンシブに動きます。

<div class="container-fluid"></div>

以下にContainerとContainer-fluidのデモを貼っておくので、参考にしてみてください。

Container demo

ひとつ注意して欲しいのが、Containerの中には必ず「行」を入れることです。

「行」には通常、-15pxのネガティブマージンがあります。これには、余白を作る逆の作用があって、画面をはみ出して表示されます。

場合によっては有効なネガティブマージンですが、Containerを使うとネガティブマージンが相殺されます。

「行」と「列」

rowは、日本語にすると「行」ですが、Bootstrapにおける「行」は必ずしも水平な1列のラインを意味するわけではありません。

「行」を「列」のグループとして考える

Bootstrapのグリッドシステムでは、「.row」内に配置される「列」が横1列に表示されない時があります。同じ「.row」内のコンテンツでも、縦2段や3段に表示されるのです。

そこで、ひとつの「行」のことを、ひとつもしくは複数の「列」を含む容器として考えるとイメージしやすいかと思います。

このようなフレキシブルさは、レスポンシブデザインの本質ともいえます。

「行」の中にはコンテンツを直接配置しない

「row」で記述違反となってしまうのが、以下のコードです。

<div class="row">
This is very bad, wrong way, no bueno!!
</div>

<div class="row">
<p>This is also very bad, the wrong way!!</p>
</div>

<div class="row">
<h2>No headings either! This is the wrong way!!</h2>
</div>

「行」の中に配置していいのは「列」だけです。そしてコンテンツはすべて「列」の中に配置します。

正しい記述コードは以下のとおりです。

<div class="row">
<div class="col">Happy :-) This is the right way.</div>
</div>

また、「.row」は「display:flex」です。つまり、それぞれの「列」はすべて同じ高さで表示され、「align right」「center」「bottom」などは「Flex and Auto-margin Utility」クラスを使うことで、簡単に設定できます。

ここからは、「行」と「列」についてさらに細かく見ていきましょう。

「列」の特徴

• 表示画面内を縦に区切ることができる
• 横幅は変更可能
• 画面幅に応じた横幅の変更も可能（レスポンシブデザイン）
• レイアウトの順番は左から右、そして上から下
• 兄弟列（同じ「列」のボックス）の配置順番を変更可能
• 他の兄弟列と同じ高さに自動設定される
• 横幅の伸び縮みが可能（レスポンシブデザイン）
• 画面幅に対応して、自動的に縦並びに配置される（レスポンシブデザイン）
• 入れ子として、自分の中にさらなる「行」と「列」を含められる

Bootstrapの「列」について知っておくべきこと

「列」は、いかなる時も「行」の直接の子でなくてはいけません。とても重要なルールです。

ウィンドウ内を縦線で区切る「列」と、その「列」で区切られた間のスペースのことを「溝」といいます。

通常、Bootstrapでは全幅を12のユニットに区切ります。

ちなみに、画像のピンクの部分は実際の「列」ではなく、左右のマージンをイメージしやすくするためのものです。

そして、通常は12列に区切るのではなく、ある程度のまとまったユニットをひとつの「列」として使います。

たとえば、6列に区切ると同じサイズに分けられます。（12 ÷ 6 = 2ユニット分の幅）

同じように、4列、3列、2列、1列に分けられます。

ここで覚えてほしいのは、画面を12のユニットに区切ることが、横幅を扱いやすくするポイントだということです。

ひとつの「行」内に合計12ユニット置くと、表示画面の横幅をフルに使えます。さらに、ユニットの数を12以下やそれ以上にもできます。これについてはあとで詳しく解説します。

下の例では、ユニットの合計が12になります。

また、それぞれの列を異なるユニット数（異なるコンテンツの幅）に設定もできます。この柔軟性により、レイアウトのパターンは無限大といえます。

Flexboxによって「列」の幅をユニット以外で決めることも可能です。

そしてBootstrap 4からは、「Auto-layout」機能によってさらに自由に幅を決められるようになりました。

たとえば、同じ幅の「列」を5つ設置するとします。これを12のユニットで均等に分けることはできませんでしたが、新しい機能ではそれが簡単にできるようになりました。

いくつかの例があるので、下のリンクをぜひ参考にしてください。

Codeply – “Bootstrap 4 Auto-layout Grid”

「列」を横1列に表示する方法は理解できたでしょうか？ 実は、まだまだできることは沢山あります。

先ほども紹介した通り、「列」はそれぞれを異なる幅に設定できます。さらに、画面の幅に応じて幅を変更することも可能です。

これをレスポンシブデザインというのですが、ひとつの「行」内に12個以上のユニットを配置するとどうなるでしょう。

「Column Wrapping」といって、1行のユニット数が12を上回ったときに、複数段で表示されます。

たとえば、ひとつの「行」の中に、それぞれの幅が4ユニットの「列」を9つ配置するとします。

すると、12ユニット目以降の「列」は段を変えて表示されます。そして12ユニットごとに次の段に配置されます。

このラッピングは、「ブレイクポイント」を使って細かくコントロールできます。ブレイクポイントについては後ほど説明します。

コード内で書かれる順番とは異なる順番で表示できます。

「列」を入れ子として、その中にさらなる「行」と「列」を配置することも可能です。

そして「列」の幅は、オートレイアウトによって自動で伸び縮みします。

Bootstrapを使ったレスポンシブデザインの方法

ここからは、「列」と「行」を使ったレスポンシブデザインの詳細を紹介します。

キーポイントは幅

Bootstrap 4のブレイクポイントは、異なる画面幅に合わせて5つの階層に分けられており、表示画面の幅に合わせてレスポンシブにデザインが変わります。

ブレイクポイントの幅と階層

これが、小さい画面幅から大きい画面幅まで対応する5つの階層です。

• （xs） – 画面幅が < 576px（デフォルト階層）
• sm – 画面幅が ≥ 576px
• md – 画面幅が ≥ 768px
• lg – 画面幅が ≥ 992px
• xl – 画面幅が ≥ 1200px

xsを括弧にしているのは、Bootstrap 4からは「xs」がデフォルトだからです。

Bootstrap 3.xでは「col-xs-6」のように表記する必要がありましたが、Bootstrap 4では「col-6」とするだけでよくなりました。

▲出典 : qiita.com

また、メディアクエリを使うことで異なる画面幅により対応できるようになりました。

たとえば、ふたつの「列」をそれぞれ同じ幅で表示する際のコードは以下のとおりです。

<div class="container">
<div class="row">
<div class="col-sm-6">Column 1</div>
<div class="col-sm-6">Column 2</div>
</div>
</div>

「col-sm-6」は、小さい画面（768pxと同じもしくは大きい）の場合、12ユニットのうちの6つ（50%）分の幅を使うよう指定するコードです。

もしも画面横サイズが768px以下の場合は、それぞれの「列」が画面の100%の幅となり、2段に重なって表示されます。

50%幅が適用されるのは、「sm」の幅である768px以上の時だけで、もしも768px以下の場合は、デフォルトである「xs」設定が適用されます。

優先すべきはモバイル画面

「xs」がデフォルトなため、下のふたつのコードはまったく同じ意味を持ちます。

<div class="col-12 col-sm-6">Column</div>

<div class="col-sm-6">Column</div>

ブレイクポイントの上書きルール

大きい階層のブレイクポイントは、特別に指定されない限り、小さい階層の設定によって上書きされます。

もし「col-sm-6」と指定された場合、「sm」もしくはそれより上の幅で6ユニットの幅で表示されることになります。

このことから、下のふたつは同じように表示されます。

<div class="col-lg-3 col-md-3 col-sm-3">..</div>

<div class="col-sm-3">..</div>

つまり、一番小さい階層を設定するだけで大きい階層も自動的に設定され、より簡単にデザインできます。

たとえば、「sm」の幅では3ユニットを、「md」とそれより上の幅では4ユニットの幅で設定するとします。すると下のコードが生成されます。「lg」と「xl」の設定は必要ありません。

<div class="col-sm-3 col-md-4">..</div>

もうひとつのレスポンシブデザインが、オートレイアウト機能です。ユニットを使わずに、自動で均等な幅にしてくれます。また、オートレイアウトとユニットを混ぜて使うことも可能です。

オートレイアウトの例

下のコードでは、3つの「col」が同じ幅で表示されます。また、「xs」がデフォルトなので縦に重なって表示されることもありません。

<div class="container">
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
</div>

下のコードでは、「col-sm」を使っているので、画面の幅が「sm」以上（576px）の場合に3つの均等な「列」が表示されます。576pxより小さくなった場合は縦に重なって表示されます。

<div class="container">
<div class="row">
<div class="col-sm">1</div>
<div class="col-sm">2</div>
<div class="col-sm">3</div>
</div>
</div>

このコードは、オートレイアウトとユニットのどちらも使う例です。「col-sm-2」では、「sm」以上の画面幅で16.6%（2ユニット分）の「列」が表示され、もうひとつの「列」は残り画面いっぱいに表示されます。576px以下の画面幅ではひとつ目の「列」が上に表示され、その下にふたつ目が表示されます。

<div class="container">
<div class="row">
<div class="col-sm-2">sidebar</div>
<div class="col">main content</div>
</div>
</div>

下のコードは、左にサイドバー、中央にメインコンテンツ、右に伸縮可能なサイドバーを表示できます。

<div class="container">
<div class="row">
<div class="col-sm-2">sidebar</div>
<div class="col">main content</div>
<div class="col-auto">right</div>
</div>
</div>

レスポンシブデザインのまとめ

• 小さい画面では、「col-*」で指定しない限り、「列」が縦に重ねて表示されてしまう。
• 「<div class=”col-md-6″></div>」が「<div class=”col-md-6 col-lg-6″></div>」と同じであるように、小さい階層は、より大きい階層を上書きできる。つまり、一番小さい階層を指定するだけでいい。
• 「行」は「display:flex」なので、「列」の高さは同じである。「オートマージン」か「justify-content」を使って縦と横の位置を設定できる（centering、bottom、right,、etc..）

（著者：Carol Skelly　翻訳：Juri Andou）