Bootstrapはグリッドシステムを採用しているので、スクリーンサイズに合わせてレイアウトが可変するレスポンシブデザインが簡単に作れるのですが、実際にどんな仕組みになっているか理解するのが割と手間だったので、忘れないように要点をまとめてみました。
サンプル：要素が4つあり、スマフォ表示で横2列、パソコン表示で横4列にレイアウトしたい場合。
<div>コンテンツ</div>
<div>コンテンツ</div>
<div>コンテンツ</div>
<div>コンテンツ</div>
要素に可変レイアウト用のclass「.col-**-**」を与える
横並びにしたい要素に、「.col-**-**」というclassを与えるだけなのですが、横に並べたい要素の数とレスポンシブの条件(ブレイクポイント)によって、**の部分に入る文字や数字が変わります。
上記のサンプルのように、4つdiv要素をスマフォで表示するときは横2列、パソコンでは横4列にしたい場合、.col-xs-6と.col-md-3というclassを4つのdiv要素それぞれに与えます。
<div class="col-xs-6 col-md-3">コンテンツ</div>
<div class="col-xs-6 col-md-3">コンテンツ</div>
<div class="col-xs-6 col-md-3">コンテンツ</div>
<div class="col-xs-6 col-md-3">コンテンツ</div>
.colの合計を12にする
.col-xs-6や.col-md-3といったclassが出てきたので、まず、これの意味をご説明します。
.col-xs-6 を「col」、「xs」、「6」の3つに分解してみてみます。
「col」はカラム(コラム)。単純に列という意味ですね。
「xs」はBootstrapのブレイクポイントのひとつ、768px以下を示しています。(ブレイクポイントについては後ほど詳しく解説します。)
「6」は、「6列分の幅」となります。
Bootstrapはデフォルトでは1行の中で、1~12個の要素を並べる(グリットを作る)ことができますが、そのルールを適用するためには「.col-**-**」に要素の数やブレイクポイントを組み込む必要があります。
要素の数が1個であれば12(12×1=12)、2個であれば6(2×6=12)、3個であれば4(3×4=12)というように、要素数で掛け算したときに、答えが12となる数値＝横並びになる要素の数で、それをclassに割り当てる必要があるのですね。
なので、ウィンドウサイズが768px以下の時、「6列分の幅」を与えて要素が2個並ぶ状態にするには、.col-xs-6を付与します。「6列分の幅」を持つ要素がふたつで12列分になります。余った残りふたつの要素は、改行されてやはり2個並びます。
ウィンドウサイズが992px以上~1200px未満の時、3列分の幅を与えて4個並べるには.col-md-3を付与します。これも合計で12になりますね。
.containerと.rowの中に入れる
説明が前後してしまいましたが、上記の設定は.rowというclass名を与えた要素の中に入れ子にすることで機能するようになります。
また、.containerというclassを持った要素でさらに入れ子にすると、ブレイクポイントに対応して幅のサイズが切り替わる文字通りコンテナとなる要素が作れます。
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">コンテンツ</div>
<div class="col-xs-6 col-md-3">コンテンツ</div>
<div class="col-xs-6 col-md-3">コンテンツ</div>
<div class="col-xs-6 col-md-3">コンテンツ</div>
</div>
</div>
ブレイクポイントが3つある
768px、992px、1200pxの3つのブレイクポイントが設定されていて、4種類のレイアウトが可能です。詳しくは下記表を御覧ください。
| 画面サイズ | 768px未満 | 768px以上~ 992px未満 |
992px以上~ 1200px未満 |
1200px以上 |
|---|---|---|---|---|
| class名の接頭辞 | col-xs- | col-sm- | col-md- | col-lg- |
| containerの幅 | 設定なし(自動) | 750px | 970px | 1170px |
xsはスマフォ用、smはタブレット用、mdはノートパソコンや小さいデスクトップパソコンモニタ、lgは大きいサイズのデスクトップパソコンモニタを想定していると思われます。
まとめ
今までの説明を踏まえたコードが下記になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<style type="text/css">
.block{
border: 5px solid #000000;
padding-top: 50px;
padding-bottom: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<header class="col-xs-12 block">
ヘッダー
</header>
<div class="col-xs-6 col-md-3 block">
コンテンツ
</div>
<div class="col-xs-6 col-md-3 block">
コンテンツ
</div>
<div class="col-xs-6 col-md-3 block">
コンテンツ
</div>
<div class="col-xs-6 col-md-3 block">
コンテンツ
</div>
<footer class="col-xs-12 block">
フッター
</footer>
</div>
</div>
</body>
</html>
ブレイクポイントとcol-**-**の組み合わせで様々なパターンのレイアウトが組めると思います。