ひとつ上の Bootstrap3 グリッドレイアウト使いこなし術

2017-01-11

Pocket

前回の投稿でグリッドレイアウトの基本的な使い方についてまとめたので、ここではさらにもう一歩突っ込んだ内容のお話をしたいと思います。

Bootstrap3では単に横並びのレイアウトだけでなく、オプションを追加することで様々なレイアウトを作り出すことが可能。この記事ではBootstrap3に用意されたグリッド用オプションの使い方をまとめてみたいと思います。

Bootstrap3のグリッドシステムを使いこなそう！

オフセット（offset）でカラムの位置を調整

横幅いっぱいではなく、少し狭くして中央に配置したいなどの場合に使うのがオフセット機能。
.btn-blockなどのブロック要素でも中央揃えのレイアウトにできるため、LPでもよく使われています。

書き方は、レスポンシブの記述と数字の間にoffsetを追加するだけ。

<div class="row">
  <div class="col-sm-4 col-sm-offset-4">
    <a href="#" class="btn btn-primary btn-block">Button</a>
  </div>
</div>

カラムを入れ子にしてさらに細かいレイアウトを作る

Bootstrap3のグリッドシステムではカラムの中にさらにカラムを入れることができます。
通常は横幅１２分割ですが、この方法を使うことでさらに細かい分割が可能です。

例えば左半分に３カラム、右半分には２カラムのコンテンツを作るとこのようになります。
また、右側はモバイルサイズでも２カラムのままを維持するなど、複雑なレスポンシブデザインも可能。

<div class="row">
  <div class="col-sm-6">
    col-sm-6
    <div class="row">
      <div class="col-sm-4">col-sm-4</div>
      <div class="col-sm-4">col-sm-4</div>
      <div class="col-sm-4">col-sm-4</div>
    </div>
  </div>
  <div class="col-sm-6">
    col-sm-6
    <div class="row">
      <div class="col-xs-6">col-xs-6</div>
      <div class="col-xs-6">col-xs-6</div>
    </div>
  </div>
</div>

カラムの表示順序を入れ替える

モバイルサイズではdiv要素を書いた順に上から表示されるため、左サイドバーを設置していた場合、メインコンテンツの上に表示されてしまうという厄介な問題が発生します。

これを防ぐために使えるのが、カラムの表示順序入れ替え機能。使い方は簡単でpushやpullを加えるだけ。

<!-- このままだと左サイドバーが上になる -->
<div class="row">
  <div class="col-sm-3">左サイドバー</div>
  <div class="col-sm-9">メインコンテンツ</div>
</div>

<!-- サイドバーは右に表示される -->
<div class="row">
  <div class="col-sm-9">メインコンテンツ</div>
  <div class="col-sm-3">左サイドバー</div>
</div>

<!-- pushで押し出し、pullで引っ張る -->
<div class="row">
  <div class="col-sm-9 col-sm-push-3">メインコンテンツ(col-sm-push-3)</div>
  <div class="col-sm-3 col-sm-pull-9">左サイドバー(col-sm-pull-9)</div>
</div>

pushの後には押し出したいカラム数、pullの後には引き上げたいカラム数を記述すればOKです。

高さの違うカラムでも正しく改行する

勝手に改行してくれるので、.rowは１つで十分と思ってました。ところがグリッドの高さが異なると列がずれるという現象が起こります。

<div class="row">
  <div class="col-xs-4" style="height:100px;">高さ100px</div>
  <div class="col-xs-4" style="height:50px">高さ50px</div>
  <div class="col-xs-4" style="height:50px">高さ50px</div>

  <div class="col-xs-4" style="height:100px;">高さ100px</div>
  <div class="col-xs-4" style="height:50px">高さ50px</div>
  <div class="col-xs-4" style="height:50px">高さ50px</div>
</div>

この問題を解決するには、javascriptでカラムの高さを揃える方法と、行の間に改行用タグを入れる方法の２つがあります。改行タグを入れる場合は以下のようにします（brだけではうまくいかないので注意）。

<div class="row">
  <div class="col-xs-4" style="height:100px;">高さ100px</div>
  <div class="col-xs-4" style="height:50px">高さ50px</div>
  <div class="col-xs-4" style="height:50px">高さ50px</div>

  <!-- 改行用タグ -->
  <span class="clearfix"></span>

  <div class="col-xs-4" style="height:100px;">高さ100px</div>
  <div class="col-xs-4" style="height:50px">高さ50px</div>
  <div class="col-xs-4" style="height:50px">高さ50px</div>
</div>