I Found It!

広告

メインレイアウトにグリッドシステムを採用する方法

今回はBootstrapのグリッドシステムをメインのレイアウト部分に採用する方法について紹介します。まずは、グリッドシステムって何？という話と、メイン部分にグリッドシステムを使うメリットについて、簡単に説明します。 画面の横幅を等分割した「グリッド」単位でレイアウトを指定することで、画面サイズに応じた柔軟なレイアウトを実現するしくみ、です。画面サイズに応じた、つまりPCサイズとスマホサイズでそれぞれに見やすいレイアウトを実現できるので、レスポンシブデザインにしたい時に使える、というわけです。ですので、スマホはスマホ版テンプレート使う、という方はグリッドシステムを使ってもさほどメリットはないと思います。
今回使用するBootstrapのグリッドシステムはメインレイアウトがグリッドシステムを利用しているということを前提として、入れ子にすることができます。つまり、メイン部分でちゃんとグリッドシステムを利用しておけば、記事部分やサイドバーの中も、柔軟にレイアウトできるようになります。
「グリッド」単位でレイアウトを指定、と言われてもよくわからないと思うので、Bootstrapのグリッドレイアウトで具体的に説明します。
Bootstrapでは、以前 レスポンシブデザインことはじめ の記事でも紹介したように、画面サイズを次のように分類しています。

• xs （~767px）
• sm （768~991px）
• md （992~1199px）
• lg（1200px~）

Bootstrapのグリッドシステムではそれぞれの画面サイズで画面幅の1/12を1単位としてレイアウトの幅を指定します。利用方法はこんな感じです。

<div class="container">
    <div class="row">
        <div class="col-[画面サイズ]-[幅] …">ここを表示</div>
        …
    </div>
</div>

例えば6枚の画像を画面サイズlgでは6列で表示したい場合は全体が12になるようにするので、class="col-lg-2"のdiv要素6個にそれぞれ画像を配置します。これを画面サイズmdの時には4列にしたい、という時にはさらにクラス指定"col-md-3"を追加します。画面サイズmdの時は"col-md-3"が4個で画面がいっぱいになるので残りの2個は折り返して表示されます。同様にして各画面サイズでのクラス指定を追加します。ちなみにcontainerクラスを使用した時の列幅は各画面サイズでの最小サイズを基準に列幅が固定幅で決められるので、画面サイズに応じて左右に余白ができます。幅いっぱいにしたい時にはcontainerクラスの代わりにcontainer-fluidクラス、rowクラスの代わりにrow-fluidクラスを使用します。入れ子にする場合はrow単位で入れ子にします。入れ子にした場合は親のセルサイズを12分割したグリッドを基準に配置できます。
グリッドシステム、使ってみたくなりましたか？
では早速メインレイアウトに適用してみます。まず、レスポンシブデザインことはじめ などを参考に、Bootstrapを使えるように準備してください。グリッドシステムを利用するだけでしたら、cssのみでOKです。
変更の前にあらかじめcssとhtmlのバックアップを取っておいてください。
ここからcssとhtmlの変更を行いますが、メイン部分で影響範囲が大きく、cssを変更してからhtml変更を完了する間はレイアウトが崩れる、などの問題もありますので、バックアップのコピーを編集して、「あとは貼り付けるだけ」にしてからファイル更新されることをおすすめします。今回は当ブログと同様に、固定幅レイアウトで右サイドバーのみ配置、xs,smサイズではサイドバー非表示とする場合の方法を紹介します。左サイドバーがある場合は左サイドバーにもcol--[画面サイズ]-[幅]指定を追加して、各サイズでの幅（グリッド数）合計が12になるように調整すればOKです。

「デザイン デザイン設定」で、PCの使用中のテンプレートのcss編集リンクをクリックします。テンプレートで用意されている#container,#content,#sideBoxRightのスタイル指定をすべて削除します。今回は固定幅を指定しますが、固定幅だとワイドディスプレイの時に左右の余白が大きすぎる気がするのでこのブログは下記の指定を追加しています。画面サイズが1400px以上の場合は1370pxのコンテナに配置されます。（指定なしの場合は1170px）

@media (min-width: 1400px) {
  .container {
    width: 1370px;
  }
}

「デザイン html」からhtmlを編集します。下記のように、container, content, sideBoxRightにclass指定を追加し、contentとsideBoxRightを含むようにしてclass="row"のdiv要素を追加します。

<div id="container" class="container">
    <div class="row">
        <!--div id="sideBoxLeft">
            sideBoxLeftがあればここに（要class指定）
        </div-->
        <div id="content" class="col-lg-9 col-md-8 col-sm-12 col-xs-12">
	    ・・・
        </div>
        <div id="sideBoxRight" class="col-lg-3 col-md-4 hidden-sm hidden-xs">
	    ・・・
        </div>
    </div>
</div>

上記の例ではlgサイズではcontent : sideBoxRight = 9 : 3, mdサイズではcontent : sideBoxRight = 8 : 4 として、sm,xsサイズでsideBoxRightを非表示としているため、contentが12グリッドとなっています。あえてsm,xsサイズでsideBoxRightを非表示とせずに、col-sm-12 col-xs-12とすれば、コンテンツと同じ幅でサイドバーがコンテンツの下に表示されます。サイドバーのデザインに工夫が必要と思いますが、そのような手法でレスポンシブにしているサイトも見かけます。 色々試してみてくださいね。