Bootstrapでレイアウトデザインをするにあたって、必要な情報を分かりやすくまとめてみました。
この内容は、本家Bootstrapのサイトにも載っていますが、英語が苦手な方、使うのになれていない方をターゲットにわかりやすく噛み砕いて説明する事を目的にしています。
Bootstrapのグリッドの機能を使ってページレイアウトをする際には、「固定幅レイアウト」と「リキッドレイアウト」の2通りの基本レイアウト方法を選ぶ必要があります。
Bootstrap的に言うと、<div class="container"></div>と、<div class="container-fluid"></div>のどちらを使うのかという事なのですが・・・。
ブラウザウインドの幅に応じた固定の幅がデフォルトで決められていて、それを元に各カラムに幅を割り振る方法です。コンテンツがページの中央に表示される(左右にマージン)感じです。
各カラムもコンテンツ全体も、固定幅なので、レイアウトが単純であるメリットがある反面、ページ左右のマージン部分が使えなくなります。この左右のマージンがデメリットになる場合もあれば、そうならない場合もあります。
| ブラウザの幅が 1,200px以上の場合 (幅 ≧ 1,200px) |
ブラウザの幅が 992px以上の場合 (1,200px ＞ 幅 ≧ 992px) |
ブラウザの幅が 768px以上の場合 (992px ＞ 幅 ≧ 768px) |
ブラウザの幅が 768px未満の場合 (768px ＞ 幅) |
|
|---|---|---|---|---|
| コンテナの幅 (コンテンツ表示幅) |
1,170px | 970px | 750px | ブラウザの幅 ※リキッドレイ アウトに転換 |
| 左右マージンの幅 | ブラウザ幅から 1170pxを引いた 残りを左右に等分 = (1200 - 1170) / 2 |
ブラウザ幅から 970pxを引いた 残りを左右に等分 = (992 - 970) / 2 |
ブラウザ幅から 750pxを引いた 残りを左右に等分 = (768 - 750) / 2 |
マージンなし |
| 1カラムの幅 (左右15pxずつの 間隔を含む) |
97.5 px | 80.8333 px | 62.5 px | ブラウザ幅を 12等分して 30pxを引いた幅 (480px / 12) - 30px |
パソコンだけの時代では少なかったのですが、スマートフォンの縦画面と横画面の表示に対応するため、ここ数年で使われ始めたレイアウト方法なので、聞いたことがある方もいるかもしれません。
常にブラウザの幅の増減に連動し、各コンテンツが流動的に動くことからその名前がついています。流動的に動くことでどんな幅のページにも、その幅で最適な表示が行われますが、幅が流動的であるため、固定幅の要素が作りにくい点が若干のデメリットになりうります。
上記の説明の通り、「固定幅レイアウトのブラウザ幅が768px未満の場合」と「リキッドレイアウトの場合」は、ブラウザの幅に応じて、コンテナの幅が変わり、それを等分するカラム幅も流動的に変化します。
そこで、代表的なブラウザ幅でのカラム幅を計算し一覧にしてみました。
| カラム数 | 幅320pxの場合 (全iPhone 縦) |
幅480pxの場合 (iPhone3G 横) |
幅568pxの場合 (iPhone5 横) |
幅600pxの場合 (小タブレット 縦) |
幅720pxの場合 (中タブレット 縦) |
|---|---|---|---|---|---|
| 1 カラム | 26.67px | 40px | 47.33px | 50px | 60px |
| 2 カラム | 53.33px | 80px | 94.67px | 100px | 120px |
| 3 カラム | 80px | 120px | 142px | 150px | 180px |
| 4 カラム | 106.67px | 160px | 189.33px | 200px | 240px |
| 5 カラム | 133.33px | 200px | 236.67px | 250px | 300px |
| 6 カラム | 160px | 240px | 284px | 300px | 360px |
| 7 カラム | 186.67px | 280px | 331.33px | 350px | 420px |
| 8 カラム | 213.33px | 320px | 378.67px | 400px | 480px |
| 9 カラム | 240px | 360px | 426px | 450px | 540px |
| 10 カラム | 266.67px | 400px | 473.33px | 500px | 600px |
| 11 カラム | 293.33px | 440px | 520.67px | 550px | 660px |
| 12 カラム | 320px | 480px | 568px | 600px | 720px |
| カラム数 | 幅800pxの場合 (小タブレット 縦) |
幅1,024pxの場合 (中タブレット 縦) |
幅1,080pxの場合 (大タブレット 縦) |
幅1,280pxの場合 (中タブレット 横) |
幅1,920pxの場合 (大タブレット 横) |
|---|---|---|---|---|---|
| 1 カラム | 66.67px | 85.33px | 90px | 106.67px | 160px |
| 2 カラム | 133.33px | 170.67px | 180px | 213.33px | 320px |
| 3 カラム | 200px | 256px | 270px | 320px | 480px |
| 4 カラム | 266.67px | 341.33px | 360px | 426.67px | 640px |
| 5 カラム | 333.33px | 426.67px | 450px | 533.33px | 800px |
| 6 カラム | 400px | 512px | 540px | 640px | 960px |
| 7 カラム | 466.67px | 597.33px | 630px | 746.67px | 1,120px |
| 8 カラム | 533.33px | 682.67px | 720px | 853.33px | 1,280px |
| 9 カラム | 600px | 768px | 810px | 960px | 1,440px |
| 10 カラム | 666.67px | 853.33px | 900px | 1,066.67px | 1,600px |
| 11 カラム | 733.33px | 938.67px | 990px | 1,173.33px | 1,760px |
| 12 カラム | 800px | 1,024px | 1,080px | 1,280px | 1,920px |
※ 左右それぞれ15pxのpaddingを含んだカラム幅。実際のコンテンツは30pxを引いた幅になります。
ブラウザの幅(又は、端末の幅)を選択すると、各カラムの幅を自動で計算してくれる計算機です。
複数の幅の端末を比較する事で、最適なレイアウトが可能です
| ブラウザ幅 端末幅 |
||||
|---|---|---|---|---|
| 1 カラム | px |
px |
px |
px |
| 2 カラム | px |
px |
px |
px |
| 3 カラム | px |
px |
px |
px |
| 4 カラム | px |
px |
px |
px |
| 5 カラム | px |
px |
px |
px |
| 6 カラム | px |
px |
px |
px |
| 7 カラム | px |
px |
px |
px |
| 8 カラム | px |
px |
px |
px |
| 9 カラム | px |
px |
px |
px |
| 10 カラム | px |
px |
px |
px |
| 11 カラム | px |
px |
px |
px |
| 12 カラム | px |
px |
px |
px |