レスポンシブWebデザインの為の基礎知識 > bootstrapのグリッドシステム

bootstrapのグリッドシステム

bootstrap はレスポンシブWebデザインに対応したCSSフレームワークで、1からCSS定義するのに比べてコーディング量を大幅に削減できる等のメリットがある。
ここでは bootstrap で特に有用な機能であるグリッドシステムについて記載する。

グリッドシステムについて

グリッドシステムは、スマートフォンやタブレット等のデバイス幅に応じて表示を切り替える為の仕組みで、
これをうまく使用する事で、比較的容易にレスポンシブWebデザイン対応のWebページを作成する事ができる。

・bootstrap では1行を12個のカラムに見立てて管理する。
・行はclass="row"で表し、その配下にカラムを定義する。
・カラムは class="col-XX-NN"で表す。
・カラムの class="col-XX-NN" の XX はデバイスの種類を設定する。(後述)。
・カラムの class="col-XX-NN" の NN は1行あたり12になるように数値を設定する。

col-XX-NN の XX 部分には、以下の値が使用できる。

説明使用例
xs画面幅が 768px以下 の場合(スマホ等)に採用する値。class="col-xs-10"
sm画面幅が 768px以上、992px未満 の場合(タブレット等)に採用する値。class="col-sm-10"
md画面幅が 992px以上、1200px未満 の場合(デスクトップ等)に採用する値。class="col-md-10"
lg画面幅が 1200px以上 の場合(大型デスクトップ等)に採用する値。class="col-lg-10"


col-XX-NNの NN 部分には、1〜12の値が使用できるが、1行あたりの合計が12になるように割り当てる。(12を超える場合は、次の行に表示される)
以下のサンプルは1行あたりに、デスクトップの場合は3カラム、タブレットの場合は2カラム、スマホの場合は1カラムを表示します。

<div class="row">
    <div class="col-sm-6 col-md-4" style="background:red;">カラム1</div>
    <div class="col-sm-6 col-md-4" style="background:blue;">カラム2</div>
    <div class="col-sm-6 col-md-4" style="background:yellow;">カラム3</div>
</div>

実行結果(ウィンドウサイズを変更して確認してみて下さい。)

サンプルページ

デバイスに応じて表示/非表示を切り替える

TODO: hidden-XX visible-XX

トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2015-11-07 (土) 18:32:38 (1786d)