Bootstrap によるレスポンシブ Web デザイン

グリッドシステムを理解する

Bootstrap にはグリッドシステムが存在します．これは .container クラスの div 要素など，親要素の幅を12等分したグリッドに合わせてレイアウトを決定するという考え方です．

例えば，コンテナの幅をちょうど左右半分に分割したい場合には「6:6」にします．幅を3等分したければ「4:4:4」が使えます．また必ずしも同じ幅でなく「2:5:4:1」のような設定も可能です．もちろん合計が12になるようにしてください．

グリッドを使うには行に .row クラスを，列に .col クラスを使います．次のようにひとつの行に2つの列を配置すると，左右均等に2分割されるはずです．（サンプルを見る）

index.html（抜粋）<div class="row">
  <div class="col">
    レイアウトを確認するための本文です．レイアウトを確認するための本文です．．．
  </div>
  <div class="col">
    レイアウトを確認するための本文です．レイアウトを確認するための本文です．．．
  </div>
</div>

次のようにひとつの行に3つの列を配置すると，左右均等に3分割されるはずです．（サンプルを見る）

index.html（抜粋）<div class="row">
  <div class="col">
    レイアウトを確認するための本文です．レイアウトを確認するための本文です．．．
  </div>
  <div class="col">
    レイアウトを確認するための本文です．レイアウトを確認するための本文です．．．
  </div>
  <div class="col">
    レイアウトを確認するための本文です．レイアウトを確認するための本文です．．．
  </div>
</div>

画面の幅を1対2対3の比率で分割したい場合には，合計が12になるように「2:4:6」とすると良いでしょう．この数値は次のコードのように col-2，col-4，col-6 などで指定することに注意してください．（サンプルを見る）

index.html（抜粋）<div class="row">
  <div class="col-2">
    レイアウトを確認するための本文です．レイアウトを確認するための本文です．．．
  </div>
  <div class="col-4">
    レイアウトを確認するための本文です．レイアウトを確認するための本文です．．．
  </div>
  <div class="col-6">
    レイアウトを確認するための本文です．レイアウトを確認するための本文です．．．
  </div>
</div>

次はレスポンシブWebデザインを採用します．スマートフォンなどの小さい画面では段落要素を縦方向に配置し，画面の幅が 768px 以上に広くなると横方向に3分割するレイアウトにしましょう．このときは，このときはブレークポイントを -md とすれば良いことに注意して，次のようにクラスを設定すると良いでしょう．（サンプルを見る）

index.html（抜粋）<div class="row">
  <div class="col-md-4">
    レイアウトを確認するための本文です．レイアウトを確認するための本文です．．．
  </div>
  <div class="col-md-4">
    レイアウトを確認するための本文です．レイアウトを確認するための本文です．．．
  </div>
  <div class="col-md-4">
    レイアウトを確認するための本文です．レイアウトを確認するための本文です．．．
  </div>
</div>

上の例では左右均等に3等分しましたが，異なる比率でももちろんレイアウト可能です．今度は画面の幅が 992px 以上で「1対4対1」にします．つまり，合計が12になるように「2-8-2」で設定します．このときは，このときはブレークポイントを -lg とすれば良いことに注意して，次のようにクラスを設定すると良いでしょう．（サンプルを見る）

index.html（抜粋）<div class="row">
  <div class="col-md-2">
    レイアウトを確認するための本文です．レイアウトを確認するための本文です．．．
  </div>
  <div class="col-md-8">
    レイアウトを確認するための本文です．レイアウトを確認するための本文です．．．
  </div>
  <div class="col-md-2">
    レイアウトを確認するための本文です．レイアウトを確認するための本文です．．．
  </div>
</div>

ここで例示した以外にも Bootstrap では様々なレイアウトを作成できます．詳細はこちらを参照してください．

目次に戻る