グリッドシステムを使ったレイアウトの作成
では、早速Bootstrapを使った画面を作っていきます。Bootstrapで提供されているさまざまなUIコントロールを画面にバランス良く綺麗にレイアウトする必要があります。Bootstrapでは画面をレイアウトする仕組みのことを「グリッドシステム」と呼んでいます。本記事では、まず初めにこのグリッドシステムを使って、Webアプリのベースになるレイアウトを決める方法を説明していきます。
基本のレイアウト
Bootstrapでは、画面の幅を12分割したものを基準にしてレイアウトを考えます。まず、初めに画面を横方向に1:1の割合で分割してみます。分割を指定するには次のclass属性を指定します。
colの数字は画面の横幅全体を12分割した何列分使うかを指定します。例えば、画面を1:1にするためには、12分割したうちの6列ずつを使えばよいので、colの数字をいずれも6にします。
<section class="container"> <div class="row"> <div class="col-md-6" style="background-color: steelblue;">左</div> <div class="col-md-6" style="background-color: lightpink;">右</div> </div> </section>
このコードを図で書くと次のようなイメージです。
例えば、幅を1：2：3の比率で分割するためには、12分割したときにcolを2：4：6の割合で使いますので、次のようになります。
<section class="container"> <div class="row"> <div class="col-md-2" style="background-color: steelblue;">左</div> <div class="col-md-4" style="background-color: GreenYellow;">中央</div> <div class="col-md-6" style="background-color: lightpink;">右</div> </div> </section>
このコードを図で書くと次のようなイメージです。
レイアウトのポイントは、横方法に12分割させた何個分を使うかということになります。そのため、class属性で指定したcolの合計数が12になっている必要があります。また、レイアウトを入れ子にすることもできます。
デバイスの幅に応じたレイアウト
Bootstrapでは、デバイスの横幅に応じてレイアウトを変更できます。デバイスの幅に応じて、以下のように列の指定ができます。
例えばcol-md-2は、「992px以上の幅を持つデバイスで、12分割した2列分を使って表示する」という意味になります。
| 種類 | デバイスの幅 | デバイスの幅の指定方法 | コンテナの幅 |
|---|---|---|---|
| スマートフォン | 768pxより狭い | col-xs | 自動 |
| タブレット | 768px以上 | col-sm | 750px |
| デスクトップ | 992px以上 | col-md | 970px |
| 大きなデスクトップ | 1200px以上 | col-lg | 1170px |
HTMLではclassを複数指定できるため、デバイスに応じてレイアウトを変えることができます。例えば、デスクトップの場合は、横に3つコンテンツを配置し、スマートフォンの場合は、1列目に2つ、2列目に1つのコンテンツを配置するときのソースコードは次のようになります。
<section class="container">
<div class="row">
<div class="col-md-2 col-xs-6"
style="background-color: steelblue;">1つ目</div>
<div class="col-md-4 col-xs-6"
style="background-color: Teal;">2つ目</div>
<div class="col-md-6 col-xs-12"
style="background-color: lightpink;">3つ目</div>
</div>
</section>
コードのイメージは以下のようになります。
デバイスサイズに応じたコンテンツの表示／非表示
Webアプリでは、パソコンならば画面サイズが大きいので詳細な情報を表示できますが、スマートフォンだと多くの情報を表示しすぎると、見づらくなってしまいます。また、スマートフォンと同じ情報のものを、タブレット端末で表示すると、情報量が少なく物足りないコンテンツになってしまいます。
Bootstrapは、デバイスのサイズに応じて、情報の表示／非表示を切り替えることができます。
コンテンツを表示するときは、
visible-(デバイスの幅指定)
コンテンツを非表示にするときは、
hidden-(デバイスの幅指定)
をclass属性で指定します。
例えば、3つのコンテンツのうち、1つは詳細な説明が記述されているので、画面の小さいスマートフォン（xs）では表示したくない場合、次のように指定します。
<section class="container">
<div class="row">
<div style="background-color: steelblue;">タイトル</div>
<div class="hidden-xs"
style="background-color: Teal;">詳細な説明です。ここはモバイルでは見えないです。</div>
<div style="background-color: lightpink;">本文</div>
</div>
</section>
すると、このようにデバイス幅が広いときは2つのコンテンツがすべて表示されますが、スマートフォンの幅になると、2つ目のコンテンツが非表示になります。
これを使うと、1つのソースコードでパソコン／タブレット／スマートフォンで表示するコンテンツを切り替えることができます。
おわりに
今回の記事では、Bootstrapのご紹介とBootstrapを使って画面のレイアウトを行うためのグリッドシステムについて紹介しました。次回は、作成したレイアウトにフォームやボタンなどのUI部品を配置する手順を説明します。また、Webアプリケーションでの処理結果を一覧表示するための表などもご紹介します。
