Bootstrapを使ったレスポンシブコーディングについて

2015-03-20

Bootstrapとレスポンシブデザイン

Bootstrapではレスポンシブデザインに対応したCSSクラスが用意され、中でもグリッドシステムが注目を浴びています。一般的に必要となる表示のコントロールがHTMLの簡単な記述で出来るようになるので、Web開発の時間短縮に役立っているのです。

グリッドシステムとレスポンシブコーディング

グリッドシステムとは、ページを格子状（グリッド）に区切ってレイアウトするデザイン手法です。Bootstrapでは横列を12分割し、それを基準にレイアウトすることが基本となります。1行分を
<div class=”row”>要素で括り、
<div class=”col-md-xx”>

のxxの部分でそのブロックを何列分で表示するか指定します。例えば、

という記述だと、12列分を4：4：4に分割、即ち1：1：1の割合で表示されることになります。割合の合計が12を超えた場合は、複数行で表示されます。そして、どの割合で設定した場合も、画面幅が一定より狭くなるとグリッドレイアウトが解除され、そのブロックが縦並びに表示されます。
次に、デバイス別の設定方法ですが、

の「md」の部分を変更させることでデバイスごとの割合を設定出来ます。「xs」はスマートフォンで表示幅が768px未満、「sm」はタブレットで表示幅が768px以上、「md」はデスクトップで表示幅が992px以上、「lg」はデスクトップ（大）で表示幅が1200px以上です。例えば、
<div class=”col-md-4 col-sm-6″>

は992px以上の表示幅では4/12、768px以上992px未満では6/12の割合で表示され、768未満であれば全てのブロックが縦並びに表示されるということになります。