Bootstrap3のグリッドシステムの概念を理解して使えるようになる

グリッドシステムとは何か

• 可変グリッドレイアウトを実現するためのBootstrapのCSSの機能

そもそもグリッドレイアウトとは

• Webデザインに使われるレイアウトの手法の一つ

• 「グリッド（grid）」とは方眼(状のもの)という意味で、グリッドレイアウトは画面やページを縦横に分断する直線で格子状に分割し、ブロックを組み合わせて各要素の大きさや配置、余白などの画面構成を決定していく手法のこと

• グリッドは縦を「カラム(column)」、横を「ロウ(row)」で表現する

• グリッドレイアウト用のテンプレートとして有名なサービスに「960 GRID GYSTEM」がある

• http://960.gs/

可変グリッドレイアウトとは

• Webページのレイアウトは「カラム数」と「固定か可変」を組み合わせて決定していく

• 可変レイアウトの代表として、リキットレイアウト(Liquid Layout)とレスポンシブWebデザイン(Responsive Web Design)がある

リキッドレイアウト

• 要素の単位を%で指定することにより、ブラウザの幅に合わせてコンテンツの幅・位置が相対的に変化するレイアウトのこと

• デメリットとして、無制限に可変すると解像度が異常に高いディスプレイの場合は横幅が広がりすぎてしまう

• http://design1.chu.jp/setucocms-pjt/wp-content/uploads/2011/09/index.html

レスポンシブデザイン

• ブラウザの幅に応じてコンテンツの幅が変化するのはリキッドレイアウトと同じ
• ただ、画面サイズに応じて一部のコンテンツを表示したり、消したりなどサイズだけでなく位置や要素そのものも変化する
• http://products.comnico.jp/cms/jp

可変グリッドレイアウト

• 上記の可変レイアウト(リキッドレイアウト・レスポンシブデザイン)にグリッド線に沿って画像や文字を配置するグリッドレイアウトを合わせたのがもののこと

Bootstrapのグリッドシステムの仕組み

• Bootstrapのグリッドシステムは12列のカラムで分割するようにする
• .container or .container-fluid > .row > .colの順番でコーディングしていく

containerとは

• 固定長を指定し、要素をセンタリングさせる

• ウィンドウサイズに応じて固定長サイズが変わる

• containerには左右に15pxのpaddingが設定されており、スマホサイズで画面いっぱいになった時に見た目が綺麗になる

• サイズが変わるポイントをブレイクポイントと呼ぶ

ブレイクポイントについて

• 768px, 992px, 1200pxをそれぞれブレイクポイントと呼ぶ

1200px >= の場合:               高解像度PC用
992px <= && <= 1199pxの場合:    PC用
768px <= && <= 991pxの場合:     タブレット用
767px以下の場合:                 スマホ用

• 上記のようになっており、ブレイクポイントに応じて対応するデバイスが変わる

rowとは

• カラムの区切りを明確にするために設定する
• またcontainerは左右にpaddingを15px設定するため、そのままだと分割できる幅が30px減ってしまう
• そのためrowにネガティブマージンを左右に15px設定することでcontainerの長さと分割できる幅を一致させている

colとは

• 実際に画面幅をグリッドとして分割するために必要なクラス
• 各ブレイクポイント用に利用するクラス名は下記のようになる

1200px >= の場合:               col-lg-*
992px <= && <= 1199pxの場合:    col-md-*
768px <= && <= 991pxの場合:     col-sm-*
767px以下の場合:                 col-xs-*

• スマホとスマホ以外のデバイスで分けたい時はcol-sm-*を使う

試しに作ってみよう