bootstrapのグリッドシステム - 闘うITエンジニアの覚え書き

レスポンシブWebデザインの為の基礎知識 > bootstrapのグリッドシステム

bootstrapのグリッドシステム †

bootstrap はレスポンシブWebデザインに対応したCSSフレームワークで、１からCSS定義するのに比べてコーディング量を大幅に削減できる等のメリットがある。
ここでは bootstrap で特に有用な機能であるグリッドシステムについて記載する。

グリッドシステムについて †

グリッドシステムは、スマートフォンやタブレット等のデバイス幅に応じて表示を切り替える為の仕組みで、
これをうまく使用する事で、比較的容易にレスポンシブWebデザイン対応のWebページを作成する事ができる。

・bootstrap では１行を12個のカラムに見立てて管理する。
・行はclass="row"で表し、その配下にカラムを定義する。
・カラムは class="col-XX-NN"で表す。
・カラムの class="col-XX-NN" の XX はデバイスの種類を設定する。(後述)。
・カラムの class="col-XX-NN" の NN は1行あたり12になるように数値を設定する。

col-XX-NN の XX 部分には、以下の値が使用できる。

col-XX-NNの NN 部分には、1〜12の値が使用できるが、1行あたりの合計が12になるように割り当てる。(12を超える場合は、次の行に表示される)
以下のサンプルは１行あたりに、デスクトップの場合は３カラム、タブレットの場合は２カラム、スマホの場合は１カラムを表示します。

<div class="row">
    <div class="col-sm-6 col-md-4" style="background:red;">カラム１</div>
    <div class="col-sm-6 col-md-4" style="background:blue;">カラム２</div>
    <div class="col-sm-6 col-md-4" style="background:yellow;">カラム３</div>
</div>

実行結果（ウィンドウサイズを変更して確認してみて下さい。）

デバイスに応じて表示/非表示を切り替える †