BootstrapでレスポンシブなWebサイト制作

第2回 グリッドシステムとブレイクポイントを理解する

この記事を読むのに必要な時間:およそ 4 分

HTMLコードを書いてみる

Bootstrapのグリッドシステム基本型

まず基本型のコードを見てみましょう。

コンテンツをセンタリングするための.container要素(class名がcontainerの要素)の中に,一行を表す.row要素を入れて,その中にカラムを表す「col-[ブレイクポイント]-[カラム数]」をclass名にもった要素を12カラム分になるように入れていきます。

<!--コンテンツセンタリング用のブロック要素「.container」-->
<div class="container">
  <!--一行を表すブロック要素「.row」-->
  <div class="row">
    <!--一カラムを表すブロック要素「.col-ブレイクポイント-カラム数」-->
    <div class="col-md-1">
    1カラム
    </div>
    :
    :
    :
  </div><!--/.row-->
</div><!--/.container-->

.row要素と.container要素についてはブロック要素(つまり「display:block」の要素)である必要があります。

なお,Bootstrapではブラウザ間でのレンダリング差異を吸収するため従来のCSSリセットに当たるCSSノーマライズが行われてます。

それによりIE8/9で表示が異なる,HTML5で追加された次の要素を「display:block」として定義しています。

  • article
  • aside
  • details
  • figcaption
  • figure
  • footer
  • header
  • hgroup
  • main
  • nav
  • section
  • summary

行(row)内の合計カラムが12個を超える場合は折り返しが入ります。このため,で1つの行に3カラムの要素を5個入れた時点で折返しがかかります(その場合,8個でピッタリ2行になります⁠⁠。

画像

カラムを飛ばすときに使うオフセット

カラムは基本的にはHTMLで上のものから順番に左詰めで配列されていきます。そして,カラムとカラムの中間を開けたい場合はオフセットを使ってカラムを飛ばすことができます。

追加するclass名は「col-[ブレイクポイント]-offset-[スキップしたいカラム数]」です。

<div class="container">
  <div class="row">
    <div class="col-md-3">
      3カラム
    </div>
    <!--[.col-ブレイクポイント-offset-スキップしたいカラム数]-->
    <div class="col-md-4 col-md-offset-5">
      4カラム オフセット5カラム
    </div>
  </div><!--/.row-->
</div><!--/.container-->

画像

なお,CSS上は左マージンとして記述されているため,スキップするカラムを含め合計カラム数が12をオーバーした場合には,改行され行頭から指定カラム数分スキップすると言う挙動を示します。さらに,オフセットとカラム数の合計が12を超えた場合は行からはみ出すため注意が必要です。

カラムの順番を自由自在に変えるプル・プッシュ

前述した通りカラムはHTMLで上から順番に左詰めで配置されていきます。しかし,左側にサブカラムを置きたい場合にはサブカラムからHTMLを記述することになってしまいます。それでも表示上は問題ありませんが,HTMLの文章構造的にメインカラムを先に記述するほうがよいです。

そのような場合に役立つのが「プル」「プッシュ」です。文字通りカラムを手前に引っ張ったり奥に押したりします。前述のオフセットは数字分「スキップ」するという考え方でしたが,こちらは開始場所をズラすという考え方なので,混同しないように注意が必要です。

<div class="container">
  <div class="row">
    <!--[.col-ブレイクポイント-push-後にズラすカラム数]-->
    <div class="col-md-8 text-center col-md-push-4">
      1個目の要素 (8カラム プッシュ4カラム)
    </div>
    <!--[.col-ブレイクポイント-pull-手前にズラすカラム数]-->
    <div class="col-md-4 text-center col-md-pull-8">
      2個目の要素 (4カラム プル8カラム)
    </div>
  </div>
</div>

画像

なお,CSS上ではpositionプロパティを使った相対配置でレイアウトされます。そのため,プル・プッシュが多すぎた場合は行からはみ出したり,少ない場合は重なってしまう現象が起きるため注意が必要です。オフセットとは違い改行されることはありません。

Bootstrap2とBootstrap3ではカラムのネストが違う

Bootstrap2とBootstrap3ではネストに対する挙動が大きく違うため,Bootstrap2を触ったことがある人は混同しないように注意が必要です。

Bootstrap2ではネストされたカラムは親カラムのカラム数を引き継ぎ,例えば6カラムの中は6カラム分しかありませんでしたが,Bootstrap3では例えば6カラムの中にネストして行を作ると,新たに12カラムとして分割されます。

画像

細かく見ていくとBootstrap2では1つのカラムがpxで指定されているのに対して,Bootstrap3からはカラムは%で指定されているために生まれる違いとなっています。

なお,スクリーンショットでのグリッドガーターのつき方が異なるのは,Bootstrap2では左マージンのみでグリッドガーターを表現し,Bootstrap3では左右のパッディングに分割してグリッドガーターがつくためです(そのため,Bootstrap2のrow要素はネガティブマージンが30px入ってます⁠⁠。

レスポンシブユーティリティでより高度なデザイン

特定のブレイクポイントで要素を表示したい場合や非表示にしたい場合に使用するクラス群と,プリント時に表示するかしないかを決めるclass群をまとめて,レスポンシブユーティリティと呼びます。

特定のブレイクポイントでの表示・非表示を操るclass名

class名スマホ
(<768px)
タブレット
(768px≦)
デスクトップ
(992px≦)
大画面デスクトップ
(1200px≦)
visible-xs 表示 非表示 非表示 非表示
visible-sm 非表示 表示 非表示 非表示
visible-md 非表示 非表示 表示 非表示
visible-lg 非表示 非表示 非表示 表示
hidden-xs 非表示 表示 表示 表示
hidden-sm 表示 非表示 表示 表示
hidden-md 表示 表示 非表示 表示
hidden-lg 表示 表示 表示 非表示

純粋に表示・非表示目的以外にも,天地(縦幅)が異なるカラム要素を1つの行に入れた際,特定ブレイクポイントで要素が引っかかって思い通りに表示されない場合などにclearfix・オフセットと合わせてカラムをスキップするなど活用法もあります。

プリント時の出し分けをするclass名

class名 ブラウザ プリンタ
visible-print非表示表示
hidden-print表示非表示

リキッドレイアウト

今までわかりやすさを重視するために,最大幅1,200pxの固定レイアウトについて解説しました。これ以外に,画面全体12本のグリッドとして使う流動(リキッド)レイアウトがあります。

リキッドレイアウトを使いたい場合は,div要素のclass属性の値「container」「row」を,それぞれ「container-fluid」「row-fluid」に書き換えます。

<div class="container-fluid">
  <div class="row-fluid">
    <div class="col-md-1">
      1カラム
    </div>
    :
    :
    :
  </div><!--/.row-fluid-->
</div><!--/.container-fluid-->

次回は「そのまま使える便利パーツを覚えよう」をお届けします。

著者プロフィール

齋藤みつる(さいとうみつる)

高校時代には漫研とロボ研に没頭しつつ,ポートフォリオ・履歴書を様々なデザイン・SI会社に送り,採用されてから高校を中退してデザイナー・SE活動をはじめる。2011年からフリーランスとして活動を始め,2年前にナビスインタナショナル株式会社と専属フリーランス契約を結び,Web事業部の責任者となっている。

URL:http://www.navice.co.jp/