今回は前回軽く触れた、Bootstrapのグリッドシステムについて紹介します。

グリッドシステムとは？

グリッドシステムは、レイアウトを格子状に分解し配置するデザインする手法です。グリッドシステムを使うことで縦の揃えが容易に表現できるため、デザインとして安定したレイアウトを構築できます。

Bootstrapでは12カラム（レイアウトを縦に12分割）のグリッドシステムが採用されており、横一行の合計が12カラムになるようにレイアウトをしていきます。

例えば、メインカラムとサブカラムがあるWebサイトのレイアウトを考えた場合、Bootstrapではメインカラムを8カラム、サイドバーカラムを4カラムと構成していきます。

また、カラムには自動的に片方15px両方で30pxのグリッドガーターというpaddingがつくため、意識しないでもコンテツを見やすく配置できます（このグリッドガーターは初期値は30pxですが、好きな幅にカスタマイズできます⁠）⁠。

ブレイクポイントとは？

ブレイクポイントは、画面サイズに応じてレイアウト切り替わるポイントのことです。

Bootstrapのグリッドシステムではカラムが横並びから縦並びに切り替わるポイントとなります。「⁠スマホ」「⁠タブレット」「⁠デスクトップ」「⁠大画面デスクトップ」のブレイクポイントがあり、それぞれでの挙動を設定できます。

次の表に記したルールに則りclass名を指定することで、該当のブレイクポイントでレイアウトを変更できます。

例を挙げて説明します。デスクトップサイズ（992px～1199px）で2列並び、それ位下の幅では縦に並べたい場合には、並べたい要素のclass名を「col-md-6」とします。

また、デスクトップサイズでは4カラム、タブレットでは6カラムというように複数のclass名を設定することで、条件を重ねがけできます。

例えば、デスクトップサイズで3列並び、タブレットで2列並び、スマホで1列としたい場合には、並べたい要素のclass名に「col-md-4」「⁠col-sm-6」の2つを指定します。

実際にBootstrapを使って確かめる

どのような挙動をするかを早く覚えるには触ってみるのが一番です。まずは、CDNでBootstrapを読み込んで試してみましょう。

HTML5でドキュメントを作りhead要素内に、次のコードを記述します。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!--ローカル上でのテストの場合は"http:"を足さないと上手く読み込めない-->

これだけで、Bootstrapが利用できるようになります。

なお、次項に掲載したスクリーンショットでは、要素をわかりやすくするために次のCSSを追加し、意図的にマージンを開け、背景を敷いています。

<style>
body{
  font-size:16px;
  font-weight:bold;
  }
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11 {
  background: #7abcff; /* Old browsers */
  background: -moz-linear-gradient(top,  #7abcff 0%, #60abf8 44%, #4096ee 100%); /* Firefox3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome, Safari4+ */
  background: -webkit-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+, Safari5.1+ */
  background: -o-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
  font-size:16px;
  padding:15px;
  font-weight:bold;
  border-radius:15px;
  color:#fff;
}
.container{
  background-color:#FFF2D0;
  border-radius:15px;
}
.row{
  background-color:#D6F4BD;
  border-radius:15px;
  }
div{
  margin:30px 0;
}
</style>

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

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

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

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

リキッドレイアウト

今までわかりやすさを重視するために、最大幅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-->

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