グリッドレイアウトでレスポンシブ Web デザイン (Bootstrap 3)

[履歴] (2015/07/13 03:12:47)

プログラミング/IoT の関連商品 (Amazonのアソシエイトとして、当メディアは適格販売により収入を得ています。)

ロベールのC++入門講座

ポケットモンスターソード -Switch

ROSロボットプログラミングバイブル

リングフィットアドベンチャー -Switch

ルイージマンション3 -Switch

tybot

概要

グリッドレイアウトによるレスポンシブ Web デザインを Bootstrap 3 で行う方法を記載します。

すべての要素の入れ物であるコンテナ要素

こちらのページに記載した公式ドキュメントの一番最初に記載されている container はすべての要素の入れ物です。コンテンツ全体を container で囲みます。container には四種類の幅があります。container の左右にはマージンが作られます。入れ子にすることはできません。4 パターンしかないためピクセル単位のレイアウトを組みやすいという特長があります。基準値は bootstrap のカスタマイズによって変更可能です。

768px 未満 (Extra small; スマートフォン) → 自動で画面一杯の幅になる
768px 以上 992px 未満 (Small; タブレット) → 750px で固定
992px 以上 1200px 未満 (Medium; 一般的な PC) → 970px で固定
1200px 以上 (Large; 高解像度 PC) → 1170px で固定

以下のように利用します。

<body>
  <div class="container" style="background-color: #fafafa;">
    <p>コンテンナの中身</p>
  </div>
</body>

グリッドレイアウト

コンテナを 12 分割して考えます。一行全体を row クラスで囲みます。

<div class="container" style="background-color: #fafafa;">
  <div class="row">
    <div class="col-xs-6" style="background-color: #f00;">A</div>
    <div class="col-xs-6" style="background-color: #0f0;">B</div>
  </div>
</div>

数値によって横幅を指定します。

col-xs-1 : 1/12
col-xs-2 : 2/12
col-xs-12 : 12/12

row クラスは入れ子にできます。やはり 12 分割です。

<div class="container" style="background-color: #fafafa;">
  <div class="row">
    <div class="col-xs-6" style="background-color: #f00;">A</div>
    <div class="col-xs-6" style="background-color: #0f0;">
      <div class="row">
        <div class="col-xs-4" style="background-color: #00f;">B-1</div>
        <div class="col-xs-4" style="background-color: #00f;">B-2</div>
        <div class="col-xs-4" style="background-color: #00f;">B-3</div>
      </div>
    </div>
  </div>
</div>

左にオフセットを持たせる (右はできない)

<div class="container" style="background-color: #fafafa;">
  <div class="row">
    <div class="col-xs-6" style="background-color: #f00;">A</div>
    <div class="col-xs-offset-1 col-xs-5" style="background-color: #0f0;">B</div>
  </div>
</div>

レイアウトをずらす

右にずらす (push) または左にずらす (pull)

<div class="container" style="background-color: #fafafa;">
  <div class="row">
    <div class="col-xs-6 col-xs-push-6" style="background-color: #f00;">A</div>
    <div class="col-xs-6 col-xs-pull-6" style="background-color: #0f0;">B</div>
  </div>
</div>

画面幅に応じて処理を切り替える

col-xs* は ExtraSmall 以上に適用されます。col-sm* は col-xs* よりも優先度が高く Small 以上に適用されます。col-md* および col-lg* も同様です。

ExtraSmall のブラウザ幅になると二段組みから一段組みになる例

<div class="container" style="background-color: #fafafa;">
  <div class="row">
    <div class="col-xs-12 col-sm-6" style="background-color: #f00;">A</div>
    <div class="col-xs-12 col-sm-6" style="background-color: #0f0;">B</div>
  </div>
</div>

Small 以上になると左右反転する例

<div class="container" style="background-color: #fafafa;">
  <div class="row">
    <div class="col-xs-6 col-sm-push-6" style="background-color: #f00;">A</div>
    <div class="col-xs-6 col-sm-pull-6" style="background-color: #0f0;">B</div>
  </div>
</div>

表示/非表示の切り替え

<div class="container" style="background-color: #fafafa;">
  <div class="row">
    <div class="col-xs-6 hidden" style="background-color: #f00;">A</div>
    <div class="col-xs-6 show" style="background-color: #0f0;">B</div>
  </div>
  <div class="row">
    <div class="col-xs-6 invisible" style="background-color: #f00;">A</div>
    <div class="col-xs-6 show" style="background-color: #0f0;">B</div>
  </div>
</div>

show → 既定値
hidden → 存在が消えて詰められる
invisible → 存在は消えずに見えなくなるだけ。詰められない

画面幅で判断

Small のときに「だけ」hidden。Medium などは該当しないことに注意。

<div class="container" style="background-color: #fafafa;">
  <div class="row">
    <div class="col-xs-6 hidden-sm" style="background-color: #f00;">A</div>
    <div class="col-xs-6" style="background-color: #0f0;">B</div>
  </div>
</div>

Small のときに「だけ」visible (= not hidden) となります。該当しないときは invisible にはならないことに注意してください。hidden になり詰められます。Medium などは該当しないことにも注意します。

<div class="container" style="background-color: #fafafa;">
  <div class="row">
    <div class="col-xs-6 visible-sm-block" style="background-color: #f00;">A</div>
    <div class="col-xs-6" style="background-color: #0f0;">B</div>
  </div>
</div>

visible-*-block → display: block; に相当
visible-*-inline → display: inline; に相当
visible-*-inline-block → display: inline-block; に相当

表示モードで判断

hidden-print → 印刷時に hidden
visible-print-block → 印刷時に not hidden (block)
visible-print-inline → 印刷時に not hidden (inline)
visible-print-inline-block → 印刷時に not hidden (inline-block)

画像サイズをレスポンシブに変化させて枠におさめる

グリッドレイアウトの列には 15px のパディングが既定値となっています。例えば padding 0 を指定することで対応します。

<div class="container" style="background-color: #fafafa;">
  <div class="row">
    <div class="col-xs-6" style="padding:0;"><img class="img-responsive" src="path/to/picture.jpg"></div>
    <div class="col-xs-6" style="background-color: #0f0;">B</div>
  </div>
</div>