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

このエントリーをはてなブックマークに追加
Pocket

I've got it

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

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

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

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

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

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

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

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

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

例えば、１２列のグリッドを作りたいときは以下のようになります。１２列なので１カラムのグリッドを１２個作れば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

同様に３列のグリッドを作りたいときは以下のようにします。４カラムのグリッドを３つ（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

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

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

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

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

<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サイトのようにメインカラムとサイドカラムを作るとこんな感じになります。以前ならfloatやpositionなどを駆使して作ってたものが、簡単に表示できます。

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

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

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

デモページはこちら

カラムの書き方について

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

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

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

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

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