Bootstrapのグリッドシステムの使い方！簡単に綺麗なレイアウトが作れる！

この記事ではBootstrapを使ったグリッドシステムについて紹介をしていきたいと思います。

このグリッドシステムは非常に便利で、簡単に（人気のレイアウト手法である）グリッドレイアウトを実現できてしまいます。ちなみに、グリッドレイアウトは管理がしやすく、見た目も綺麗で、WEBサイト作成の現場でもよく活用されるレイアウトデザインです。この記事でグリッドシステムの使い方を理解して、綺麗なWEBサイトをデザインしてみてはいかがでしょうか。

ちなみにBootstrapって何？という場合にはこちらをまず参考にして下さい。BootStrapの基本についてはこちらの記事で詳しく紹介しています。
⇒Bootstrapの使い方｜初心者でもこれで簡単に綺麗なデザインができてしまう！

コンテンツ

1 Bootstrapのグリッドシステムとは？
2 Bootstrapのグリッドシステムの使い方
3 まとめ

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

ではBootstrapのグリッドシステムについて踏み込んでいきたいと思います。

冒頭でも触れていますが、Bootstrapでグリッドレイアウトのスタイリングを行う仕組みをグリッドシステムと言います。

グリッドレイアウトは格子状にタイルを並べる様にレイアウトを行う手法で、WEB以外（雑誌等）でも使われます。見た目が綺麗に整理された様な印象を与えるデザインで非常に人気があります。

また、実際に使ってみると分かりますが、グリッドレイアウトはレスポンシブデザインとも非常に相性が良く、WEBデザインがスマホやタブレットの画面への対応が当然となる中で、どんどん注目を集めるレイアウト手法になりました。

グリッドレイアウトの詳細についてはこちらの記事を参考にして下さい。
⇒グリッドレイアウトとは？メリットや活用する理由を参考サイトと併せて解説！

Bootstrapのグリッドシステムを使えば、簡単にこのグリッドレイアウトを実現できてしまうのです。

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

Bootstrapのグリッドシステムを使う上での基本的なルールを覚えておきましょう。
※具体的な使い方は段々覚えればOKです。

基本ルール１：class属性値

グリッドシステムの場合、HTMLに記述するclass属性値で画面のデザインを行います。
※classは<div class=”属性値”></div>の様に記述します

この時、class属性に設定するのは基本的に「conteiner」「row」「col」となります。

conteiner：container（固定幅）、container-fluid（可変の全幅）、container-{breakpoint}（ブレイクポイント指定）
row
col：col-{num}、もしくは、col-{breakpoint}-{num}（ブレイクポイント、グリッド数の指定）

※ブレイクポイントとはレイアウトが切り替わる画面幅の事。詳細は後ほど紹介します。

conteinerがグリッド（表）全体、rowが行、colが列の様なものとイメージすると分かりやすいと思います。

■グリッドシステムのイメージ

基本ルール２：グリッド数（１行辺りのcolの数）は最大12個

１行（row）に含まれるグリッド数は12個が最大となります。

これはグリッドシステムを扱う上での重要なルールなのでしっかりと覚えておきましょう。

例えば、１行（row）の中にcolが3つ存在する場合、各colはグリッド4本分（12÷3=4）と計算する事ができます。

■各colのグリッド

実際に見てみた方が分かりやすいので、グリッドシステムで作られたレイアウトを確認してみましょう。

相対指定（等幅で自動調整）

まずはカラム幅を、等幅で自動調整にした場合を見てみましょう。

紹介するのは、１行の中に２つのカラムが並ぶ場合と、３つのカラムが並ぶ場合になります。

headとbodyに追記する内容だけサンプルのコードも載せておきます。

■HTMLコード（head）※グリッドが分かる様にcss背景色と枠線を付けているだけです。

  <style type="text/css">
    .test {border:solid 1px #ffffff; background-color:#ffcc99;}
  </style>

.test {border:solid 1px #ffffff; background-color:#ffcc99;}

</style>

■HTMLコード（body）

    <div class="container">
      <center>等幅サイズ</center>
      <div class="row">
        <div class="col test">col</div>
        <div class="col test">col</div>
      </div>
      <div class="row">
        <div class="col test">col</div>
        <div class="col test">col</div>
        <div class="col test">col</div>
      </div>
    </div>

<center>等幅サイズ</center>

</div>

</div>

■WEB画面

絶対指定（12分割サイズ）

次は12分割した場合を見てみましょう。この場合は自動でカラム幅が調整される事はありません。

上述している通り、col-{num}のnumの部分にグリッドするを指定する事でグリッド幅を設定できます。
※col-1やcol-4といた風に記載します。

実際に見てみた方が分かりやすいと思うので、以下のサンプルコードを参考にしてみて下さい。

今回も追加するコードだけ紹介します。headの内容は相対指定の場合と同じです。

■HTMLコード（body）

    <div class="container">
      <center>12分割サイズ</center>
      <div class="row">
        <div class="col-1 test">size-1</div>
        <div class="col-1 test">size-1</div>
      </div>
      <div class="row">
        <div class="col-2 test">size-2</div>
        <div class="col-2 test">size-2</div>
      </div>
      <div class="row">
        <div class="col-3 test">size-3</div>
        <div class="col-3 test">size-3</div>
      </div>
      <div class="row">
        <div class="col-4 test">size-4</div>
        <div class="col-4 test">size-4</div>
      </div>
      <div class="row">
        <div class="col-6 test">size-6</div>
        <div class="col-6 test">size-6</div>
      </div>
      <div class="row">
        <div class="col-8 test">size-8</div>
        <div class="col-4 test">size-4</div>
      </div>
    </div>

<center>12分割サイズ</center>

</div>

</div>

</div>

</div>

</div>

</div>

■WEB画面

カラムの幅が自動調整されておらず、12分割されたうちの指定グリッド幅になっている事が分かると思います。

グリッドが12以上になった場合は？

グリッドは12分割するとお伝えしましたが、指定グリッド数が12を超えた場合はどうなるのでしょうか？

この場合は行あふれを起こして２行になります。

以下はグリッドの合計が13（8+5）になってしまう場合の例です。こちらを見ていただくと分かると思います。

■HTMLコード（body）

    <div class="container">
      <center>12分割サイズ（行あふれ）</center>
      <div class="row">
        <div class="col-8 test">size-8</div>
        <div class="col-5 test">size-5</div>
      </div>
    </div>

<center>12分割サイズ（行あふれ）</center>

</div>

■WEB画面

基本ルール3：レスポンシブレイアウトとブレイクポイント

今は様々なデバイスでWEBサイトを見る事ができます。逆に言うと、WEBデザイナーは様々なデバイスで見られる事を想定したデザインをしなければなりません。

WEB画面をデザインする場合は基本的に画面の横幅を基準にして画面デザインを切り替える事になります。この基準となる横幅の事をブレイクポイントと言います。

例えば、既にお伝えしている通りグリッドシステムではconteinerでグリッド全体の情報、colで列の情報を指定します。colを指定する際は「col-{breakpoint}-{num}」のフォーマットで記述するとお伝えしましたが、このbreakpointの部分に「Small、Medium、Large」といったワードを記述する事で簡単にブレイクポイントを設定する事ができます。

■ブレイクポイントについて