BootstrapのGrid Templateを解説します

khiroWebエンジニア(@khiro14726723)です。

実はわたくし、実用英語検定準1級を持っているため、それを活かして英語ドキュメントの解説を書いてみようかと思いました。

それでは始めていきます。

bootstrapの公式サイトのExampleに、Gridという項目がありました。

Multiple examples of grid layouts with all four tiers, nesting, and more.
全ての4段や入れ子などを備えたグリッドレイアウトの複数の例

(「bootstrapって何？」という方は、こちらの記事が参考になるかと思います。)

こちらの本もおすすめです。私はいつもBootstrapを使うときにこの本を参考にしています。

Bootstrap 4 フロントエンド開発の教科書

bootstrapのグリッドは、レスポンシブデザインを実現するのにとても便利です。

(レスポンシブデザインについては、こちら)

今回は、グリッドの使用例がまとめられた、以下の公式サイトについて解説します。
getbootstrap.com

Bootstrap grid examples (Bootstrapのグリッドの例)

Basic grid layouts to get you familiar with building within the Bootstrap grid system.
あなたにbootstrapのグリッドシステムを構築することに親しんでもらうための、基本的なグリッドレイアウト。

In these examples the .themed-grid-col class is added to the columns to add some theming. This is not a class that is available in Bootstrap by default.
これらの例では、テーマを加えるために「.themed-grid-col」というクラスがカラムに加えられています。これは、Bootstrapに最初から備わっているクラスではありません。

Five grid tiers (5段階のグリッド)

There are five tiers to the Bootstrap grid system, one for each range of devices we support.
Bootstrapのグリッドシステムは、5段階です。それぞれにサポートしているデバイスの範囲があります。

Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.
上書きしない限り、それぞれの段階は最小のビューポートの大きさから自動的により大きいデバイスに適応されます。

ビューポートとは、画面の幅と思ってもらって差し支えありません。
( ビューポートについて詳しく知りたい方は、こちら )

5段階とは、以下の5つのビューポートの範囲のことです。

• 576pxよりも小さい (最小のビューポート)
• 576px以上・・・sm
• 768px以上・・・md
• 992px以上・・・lg
• 1200px以上・・・xl

・・・の後のアルファベット2文字は、「デバイスのビューポートが左の範囲の時に、この2文字がついたクラスが適応されるよ」という意味です。

それでは、Grid Template · Bootstrap をchromeの検証ツールで確認してみます。
(検証ツールは、Macでgoogle chromeを使用している場合、「command + option + i」で開くことができます)

動画でカラムの変化をご覧ください。

最小のビューポート　→　sm
gyazo.com
.col-sm-4というカラムは、最初は3段組です。
しかし、ビューポートが576pxになると1段組になりました。

このサンプルのHTMLは以下のような構造です(最小のビューポートの部分を抜粋)
4 × 3 = 12で1列を構成しています。

<div class="container">
  <div class="row mb-3">
    <div class="col-4 themed-grid-col">.col-4</div>
    <div class="col-4 themed-grid-col">.col-4</div>
    <div class="col-4 themed-grid-col">.col-4</div>
  </div>
</div>

sm　→　md
gyazo.com
.col-md-4というカラムは、最初は3段組です。
しかし、ビューポートが768pxになると1段組になりました。

md　→　lg
gyazo.com
こちらは、.col-lg-4というカラムに注目してください。

lg　→　xl
gyazo.com
最後は、.col-xl-4に注目していただければと思います。
1200pxがブレイクポイントです。

Three equal columns (3つの等しいカラム)

最初の文章

Get three equal-width columns starting at desktops and scaling to large desktops.
デスクトップから大きいデスクトップに拡大する3つの等幅カラムです。

gyazo.com
1200pxになると「.col-md-4」の幅が広くなっているのが確認できます。

２つ目の文章

On mobile devices, tablets and below, the columns will automatically stack.
モバイル、タブレットとそれ以下の幅のデバイスでは、カラムは自動的に積み上がります。

gyazo.com
3つの「.col-md-4」は、最初は1列に並んでいます。
しかし、767pxの時にカラムが積み上がるのが確認できます。

Three unequal columns (3つの等しくないカラム)

Get three columns starting at desktops and scaling to large desktops of various widths.
デスクトップから様々な幅の大きいデスクトップに拡大する3つのカラムです。

Remember, grid columns should add up to twelve for a single horizontal block.
「グリッドカラムは一列あたり、最大12まで」ということを覚えておいてください。

More than that, and columns start stacking no matter the viewport.
それ以上だと、カラムは積み上がってしまいます。

gyazo.com
1200pxで幅が大きくなりました。

Two columns (2つのカラム)

Get two columns starting at desktops and scaling to large desktops.
デスクトップから大きいデスクトップに拡大する2つのカラムです。

gyazo.com
こちらも1200pxになると、カラム幅が拡大するのが確認できます。

Full width, single column (全幅で1つのカラム)

No grid classes are necessary for full-width elements.
全幅の要素に対しては、グリットクラスの必要はありません。

<div class="container">
  <p class="text-warning">
    No grid classes are necessary for full-width elements.
  </p>
</div>

containerで囲めば、デバイス幅に合わせて自動調整してくれます。

Two columns with two nested columns (2つの入れ子カラムを持つ、2つのカラム)

1つ目の文章

Per the documentation, nesting is easy—just put a row of columns within an existing column.
ドキュメンテーションによると、入れ子は簡単です。すでにあるカラムの中に複数のカラムの列を入れるだけです。

<div class="col-md-8 themed-grid-col">
      <div class="pb-3">
        .col-md-8
      </div>
      <div class="row">
        <div class="col-md-6 themed-grid-col">.col-md-6</div>
        <div class="col-md-6 themed-grid-col">.col-md-6</div>
      </div>
 </div>

2つ目の文章

This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.
これは、大きい方のカラムの中にある2つの等幅カラムとともに、デスクトップからより大きいデスクトップに拡大する2つのカラムです。

gyazo.com
入れ子になっていても1200pxになると幅が大きくなりました。
3つ目の文章

At mobile device sizes, tablets and down, these columns and their nested columns will stack.
モバイル、タブレットとそれ以下の幅のデバイスでは、これらのカラムと入れ子カラムは積み上がります。

gyazo.com
767pxになると、カラムが積み上がりました。

Mixed: mobile and desktop (混合: モバイルとデスクトップ)

The Bootstrap v4 grid system has five tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), and xl (extra large).
Bootstrap4のグリッドシステムには5段階のクラスがあります。
xs(extra small、このクラスは使われていません)、sm(small)、md(medium)、lg(large)、xl(extra large)

You can use nearly any combination of these classes to create more dynamic and flexible layouts.
よりダイナミックでフレキシブルなレイアウトを創り出すために、あなたは、これらのクラスのほぼ全ての組み合わせを使うことができます。

Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg and xl, you only need to specify md.
それぞれのクラスの段階は拡大します。これは、もしあなたがmd、lg、xlに同じ幅を設定しようとしたら、mdだけを特定すればいいということになります。

mdに切り替わる時 (768px)
gyazo.com
「.col-md-〇〇」に注目してください。
mdの段階でレイアウトが一度切り替わったら、後のlg、xlの段階では拡大するだけです。

lgに切り替わる時 (992px)
gyazo.com
xlに切り替わる時 (1200px)
gyazo.com

Mixed: mobile, tablet, and desktop (混合: モバイル、タブレット、デスクトップ)

smに切り替わる時 (576px)
gyazo.com
.col-sm-4に注目してください。
576pxで4 × 3 = 12 の一列になるのが確認できます。

lgに切り替わる時 (992px)
gyazo.com
.col-lg-8と.col-lg-4に注目してください。
992pxで8:4の比率になることが確認できます。

Containers (コンテナー)

Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint.
Bootstrap4.4で追加されたクラスによって、特定のブレイクポイントまで100%の幅を保つコンテナーが可能になりました。

gyazo.com
sm、md、lg、xlそれぞれのブレイクポイント( 576px、768px、992px、1020px)までは、幅が100%であることが確認できます。

「.container-fluid」は、最初から最後まで100%の幅を保ちます。