前回の投稿でグリッドレイアウトの基本的な使い方についてまとめたので、ここではさらにもう一歩突っ込んだ内容のお話をしたいと思います。
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のグリッドシステムではカラムの中にさらにカラムを入れることができます。
通常は横幅12分割ですが、この方法を使うことでさらに細かい分割が可能です。
例えば左半分に3カラム、右半分には2カラムのコンテンツを作るとこのようになります。
また、右側はモバイルサイズでも2カラムのままを維持するなど、複雑なレスポンシブデザインも可能。
<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
は1つで十分と思ってました。ところがグリッドの高さが異なると列がずれるという現象が起こります。
<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でカラムの高さを揃える方法と、行の間に改行用タグを入れる方法の2つがあります。改行タグを入れる場合は以下のようにします(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>
WordPressなんかでループ処理している場合は、3カラムごとに改行用タグを表示させれば高さが異なっても綺麗に表示されます。
デモページはこちら > codepen
さいごに
Bootstrap3のグリッドシステムはすごくよくできていて、うまく使いこなせるようになれば、Webのレイアウトで悩むことも無くなります。使い方は簡単なのでさくっと覚えてしまいましょう!
さいごまでご覧いただきありがとうございました 🙂