今度こそ覚える、Bootstrap3 グリッドシステムの使い方

Pocket

I've got it

デザインはグリッドに始まりグリッドに終わるといわれるように、Bootstrap3でもグリッドシステムは単なるコーディングにとどまらず、デザインの一部として非常に重要な要素となっています。

グリッドをうまく使えるかどうかがデザイナーとしての評価の分かれ道にもなるため、デザイナーとしてしっかり覚えておきたいBootstrap3のグリッドシステムの使い方を確認しておきましょう。

Bootstrap3のグリッドレイアウトとは?

Bootstrap3にはモバイルファーストで作られたレスポンシブなグリッドシステムが搭載されています。
Bootstrap3のグリッドシステムは、画面幅を12分割して作られており、1〜12のカラムを指定することでレイアウトを作っていきます。

グリッドを作るにはHTMLタグ(divなど)にclassを追加するだけ。

<!-- グリッドレイアウトの例 -->
<div class="col-xs-4"></div>

グリッドはPC画面だけでなく、モバイルやタブレット用にも作ることができます。このように複数の画面サイズに対応したレイアウトをレスポンシブ(可変)レイアウトと呼んでいます(レスポンシブの作り方については次回の記事参照)。

Bootstrap3のグリッドを使ったレイアウトの作り方

Bootstrap3では画面幅を12分割したレイアウトを作ることができます。分割されたグリッドの列をカラムといい、カラムはRow(行)の中に入れて作成します。

例えば、12列のグリッドを作りたいときは以下のようになります。12列なので1カラムのグリッドを12個作ればOK。

<div class="row">
  <div class="col-xs-1"></div>
  <div class="col-xs-1"></div>
  <div class="col-xs-1"></div>
  <div class="col-xs-1"></div>
  <div class="col-xs-1"></div>
  <div class="col-xs-1"></div>
  <div class="col-xs-1"></div>
  <div class="col-xs-1"></div>
  <div class="col-xs-1"></div>
  <div class="col-xs-1"></div>
  <div class="col-xs-1"></div>
  <div class="col-xs-1"></div>
</div>

Bootstrap3を使ったレイアウトの作り方-01

同様に3列のグリッドを作りたいときは以下のようにします。4カラムのグリッドを3つ(4*3=12)作るだけ。簡単でしょ?

<div class="row">
  <div class="col-xs-4"></div>
  <div class="col-xs-4"></div>
  <div class="col-xs-4"></div>
</div>

Bootstrap3を使ったレイアウトの作り方-02

以下のように合計が12を超えてしまう場合は、3つ目のdiv要素が次の行にずれます。横幅は必ず12(以下)になるよう注意が必要ですね。

<div class="row">
  <div class="col-xs-5"></div>
  <div class="col-xs-4"></div>
  <div class="col-xs-5"></div>
</div>

Bootstrap3を使ったレイアウトの作り方-03

逆に、ずれることを利用して3*3のイメージギャラリーのような表示も可能。

<div class="row">
  <div class="col-xs-4"></div>
  <div class="col-xs-4"></div>
  <div class="col-xs-4"></div>
  <div class="col-xs-4"></div>
  <div class="col-xs-4"></div>
  <div class="col-xs-4"></div>
  <div class="col-xs-4"></div>
  <div class="col-xs-4"></div>
  <div class="col-xs-4"></div>
</div>

Bootstrap3を使ったレイアウトの作り方
-04

また、通常のwebサイトのようにメインカラムとサイドカラムを作るとこんな感じになります。以前ならfloatpositionなどを駆使して作ってたものが、簡単に表示できます。

<div class="row">
  <div class="col-xs-8"></div>
  <div class="col-xs-4"></div>
</div>

Bootstrap3を使ったレイアウトの作り方-05

このように横幅は最大12カラムになるということに注意すれば簡単にグリッドを作成できますね。

デモページはこちら

カラムの書き方について

.col-xs-4と何も説明せずに書きましたが、この書き方をもう少し細かく書くとこんな感じ。

  • .col-: カラムを作るときはこれで始める。
  • xs: レスポンシブの際に必要。この場合は「モバイルサイズ以上で」という意味。
  • -4: カラムの数です。横幅が12以下になるようにします。1〜12まで使用可能。

レスポンシブって何か難しそうなイメージですが、やることは簡単。このxsの部分を変更するだけで、タブレットで有効なレイアウトやPC画面のみ有効なレイアウトなどを作ることができるんです。

レスポンシブについてはまた次回。

最後までご覧いただきありがとうございました 🙂