Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

  • 可変グリッドレイアウトを実現するための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-*を使う

試しに作ってみよう

http://designup.jp/demo/boot-web/

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした