Bootstrap2のグリッド機能で段組を作成

(注) 本記事で解説している内容は、初版公開時(2012年5月時点)の最新版「Bootstrap2」のものです。2014年6月時点の最新版「Bootstrap3」でも基本的な構造には変わりありませんが、記述するclass名などの仕様が若干変わっています。本記事に掲載のサンプルソースは、そのままでは「Bootstrap3」上では使えませんのでご注意ください。

段組構造が簡単に作れるグリッドレイアウト機能

CSSを使って2段組や3段組などの段組構造を自力で作るのは面倒です。記事「モダンなデザインが簡単に使える Twitter Bootstrap」でご紹介した「Twitter Bootstrap」には、何段組の段組構造でも簡単に作れるグリッドシステムが用意されています。この機能を活用すれば、例えば右図のように、3段組と4段組を並べて掲載することも簡単です。ある段の中を、さらに複数の段組構造に分割することも問題なくできます。

横幅一杯を12個に等分したグリッドシステム

「Twitter Bootstrap」では、横幅一杯を12個に等分したグリッドシステムを用意しています。CSSのクラス名を使って、12個のうち何個分を使って「段」を作りたいかを指定するだけで、簡単に段組構造が作れます。

12分割されたグリッドの使い方

グリッドに合わせて横幅を決定するためのクラス名として、「span1」～「span12」の12種類が用意されています。これを、合計12になるように指定して使います。

(追記) ここでご紹介している記述方法は、「Bootstrap 2」での書き方です。「Bootstrap 3」では使用するclass名が異なります。

例えば、以下のようにHTMLとCSSを記述すると、「左側25％・右側75％」の2段組を作ることができます。

<div class="row-fluid">
   <div class="span3">...</div>
   <div class="span9">...</div>
</div>

上記では、div要素に付加するクラス名として「span3」と「span9」を指定しています。

• 最初の「span3」は、「（12等分されたグリッドのうち）3つ分を使って1段を作る」という意味になります。
• 同様に「span9」は、「（12等分されたグリッドのうち）9つ分を使って1段を作る」という意味になります。

したがって、左側の段が25％（＝3/12）の幅で表示され、右側の段が75％（＝9/12）の幅で表示される2段組ができることになります。なお、段と段の間には自動で空白が設けられます（幅は空白分を含みます）。

合計が12になれば、div要素（＝段の数）は2つ以上あっても構いません。

<div class="row-fluid">
   <div class="span4">...</div>
   <div class="span4">...</div>
   <div class="span4">...</div>
</div>

上記のように「span4」クラスを3つ並べれば、右図のように3等分した3段組が作れます。

このように、「Twitter Bootstrap」を使うと、とても簡単に段組構造が作れます。

※実際に使ってみる際には、上記のHTMLソースのほかに、「Twitter Bootstrap」を呼び出すための記述が必須です。詳しくは、後述しています。

「Twitter Bootstrap」では、段組構造の内側にさらに段組を作るような、複雑な構造も作ることができます。次のページでは、複数階層の段組を作る方法をご紹介致します。