【Bootstrapのレイアウトの基本】グリッドシステムについて

Bootstrapのグリッドシステムについて解説します。

グリッドシステムというのは、カラムを何等分するかという意味で、Bootstrapでは大元のcontainerのカラムを全部で12等分するシステムになっています。

どういうことかというと、以下で解説していきますね。

Bootstrapのグリッドシステムは12等分されている

↓ここに、3カラムに分けたHTMLソースを記述しています(bodyタグ直下に記述)

  1. <div class=“container”>
  2.       <div class=“row”>
  3.         <div class=“col bg-primary”>ブロックA</div>
  4.         <div class=“col bg-secondary”>ブロックB</div>
  5.         <div class=“col bg-success”>ブロックC</div>
  6.       </div>
  7.     </div>

 

これはどういった表示になるかというと・・・

3カラムに分けた記述

↑このように表示されます。

colを3つにしているので、12等分が3分割されて、表示されているのですね。

これが例えば6カラムにしたい場合は、<div class=”col”></div>を6つ、10カラムにしたい場合は10こ<div class=”col”></div>を記述すれば良いということです。

ただし、よく見るwebサイトだと、メインコンテンツのカラム、サイドバーのカラムで必ずしも、というか、等分になっているサイトはほとんどないのではないでしょうか?

およそ、メインコンテンツのカラムの方が大きく、サイドバーのカラムは少し小さいとなっているものがほとんどです。

では、そんな時はどのようにすれば良いのでしょうか?

等幅を指定したい場合

メインコンテンツをサイドバーの2倍にしたい場合、(通常はそこまで大きくはないですが)以下のように記述することで、指定した幅にすることができます。

  1. <div class=“container”>
  2.       <div class=“row”>
  3.         <div class=“col-8 bg-primary”>メインコンテンツ</div>
  4.         <div class=“col-4 bg-secondary”>サイドバー</div>
  5.       </div>
  6.     </div>

メインカラム8・サイドバーカラム4の場合

このようになりました。

HTMLの記述としてはこんな感じです。

  1.         <div class=“col-8 bg-primary”>メインコンテンツ</div>
  2.         <div class=“col-4 bg-secondary”>サイドバー</div>

全体を12として、2:1の割合に使用と思うと、8:4になりますので、クラス名colの後に-(ハイフン)と数字を入れる。

これで指定幅でのレイアウトを組むことができます。

あと、2つくらい事例を挙げますね。

1:2:1レイアウトにする

1:2:1のレイアウトはどのようになるかと言うと・・・

  1. <div class=“container”>
  2.       <div class=“row”>
  3.         <div class=“col-3 bg-primary”>ブロックD</div>
  4.         <div class=“col-6 bg-secondary”>ブロックE</div>
  5.         <div class=“col-3 bg-success”>ブロックE</div>
  6.       </div>
  7.     </div>

 

1:2:1のレイアウトの場合

このようになります。

5:7レイアウトにする

次は5:7のレイアウトにします。

ここまで来ると察しがつくかと思いますが、HTMLは以下のように記述してください。

  1. <div class=“container”>
  2.       <div class=“row”>
  3.         <div class=“col-5 bg-primary”>ブロックG</div>
  4.         <div class=“col-7 bg-secondary”>ブロックH</div>
  5.       </div>
  6.     </div>

 

5:7のレイアウトの場合

こんな感じです。

もし、12レイアウトを越えたら・・・

万が一、12レイアウトを越えた場合どうなるかというと、改行され、次の行に表示されます。

12レイアウトを越えたら改行される

12レイアウトよりも、小さいcontainerにしたい時

他にも”offset”というクラスがあります。
offsetを使うと、例えばcol-8を中央寄せにして、12レイアウトを使わずにコーディングすることができます。
offsetを使う

  1.     <div class=”container”>
  2.       <div class=”row”>
  3.         <div class=”col-8 bg-primary offset-2“>box1</div>
  4.       </div>
  5.     </div>

 

12ではなくcol-8でmaxにした場合

合計12になっていない問題

“offset-2″だと”col-8″とで、合計12になっていないじゃないかと思いますが、【左右に2ずつ振り分ける】という読み込み方をしているのではないかと考えられます。

まとめ

Bootstrapの基本のレイアウト、グリッドシステムについてお伝えしました。

ポイントは以下の通りです。

  1. 12等分で分割
  2. 幅の指定はcol-(数字)

このレイアウトを一から組もうと思うと、CSSに記述することが必須ですが、BootstrapはHTMLのクラスの付与だけで、これができてしまうため非常に便利です。

作りたいwebサイトのレイアウトに応じて、このグリッドシステムを使いこなしてください。

【最後に】rowを忘れずに・・・

使用していて、<div class=”row”></div>を記述することを忘れることがあったので、要注意です。

<div class=”col-sm-6″></div>は書くけれど、<div class=”row”></div>を書いていなくて表示崩れが起きる。。。なんて僕みたいなことがないよう、注意してみてください。