Bootstrapの使い方（２）〜グリッドシステム

グリッドデザインとは

グリッドデザインとは、均等なマス目に分割して、そのマス目に沿って各部品を配置していくデザインです。
有名なものに「960 Grid System」があります。
Webサイトを作成するときにグリッドデザインを活用すると統一感のあるページができあがります。
Bootstrapのグリッドシステムではクラス名を指定することで簡単にグリッドレイアウトを作成することができます。
面倒なfloatの設定を自分で行ったり、レスポンシブの対応を考えたりする必要もありません。

Bootstrapを活用したグリッドデザイン

Bootstrapでグリッドデザインを行うには、divに決められたクラス名を命名していきます。

1. ちょうどテーブルを作成するとき、まずtableタグを使用するように、Bootstrapのグリッドシステムでは、divにクラス「container」または、「container-fluid」を命名してコンテナを作成します。
2. 複数行のカラムを作成する場合は、テーブル作成のとき「tr」で行の指定をするように、Bootstrapのグリッドシステムでは、行をdivで作成してクラス「row」を指定します。
3. そしてカラム作成は、テーブル作成のとき「td」でセルの指定をするように、カラムをdivで作成してクラス「col-xs-N」で指定します。

コンテナの作成

コンテナを使用すると左右に15pxの余白を空けて表示されます。
コンテナには、固定幅用と可変幅用の２つの種類があります。固定幅のコンテナを作成する「container」は単純に固定幅を形成するだけではなく、レスポンシブ対応となっており、window幅に応じて固定幅が変化します。

container

固定幅のコンテナを作成

container-fluid

可変幅のコンテナを作成

.containerのwindow幅と固定幅の関係

行の指定

グリッドシステムの行を指定するにはクラス「row」を指定します。
クラス「row」の面白いところはマイナスマージンの設定がしてあるところです。
これはコンテナが作成した余白の15pxを相殺してしまう数値です。
従ってコンテナに「row」クラスを設定した行を追加すると横幅全体は、ブラウザいっぱいに広がることになります。
bootstrap.cssに以下の記述があります。

.row {
  margin-right: -15px;
  margin-left: -15px;
}

Bootstrapのグリッドシステム

Bootstrapでは縦に12分割するグリッドシステムが用意されています。
分割の方法は、たとえば「col-xs-N」というクラス名（Nには1〜12の数字が入る）で指定することで簡単にグリッドレイアウトを作成することができます。
また、クラス名col-xs-Nのxs部分は画面サイズに応じてレイアウトを変化させるときにxs,sm,md,lgのどれかを使用します。

列幅の指定方法

クラス名のNの部分には数字を入れて列幅を決める事ができます。列幅は全体の合計が12になるような数字を設定します。
2カラムレイアウトならcol-xs-4とcol-xs-8、3カラムならcol-xs-4とcol-xs-4とcol-xs-4などと合計が12になるようにします。

3カラムレイアウトのHTML例

<div class="container-fluid">
  <h1>グリッドシステム</h1>
  <div class="row">
    <div class="col-sm-2">カラムA</div>
    <div class="col-sm-6">カラムB</div>
    <div class="col-sm-4">カラムC</div>
  </div>
</div>

グリッドシステムのブロックの列幅は合計が12になるように構成する

列幅指定の仕組み

グリッドシステムの仕組みは簡単です。bootstrap.cssの設定を確認してみると解ります。
グリッドシステムのCSSの設定では.col-xs-Nに対して次のような設定がされています。 position: relativeとfloat: leftが設定され、更に1カラムあたりの幅は1グリッド=100/12＝8.33333333%　　
つまり、全体の横幅を12分割して1グリッドのwidth: 8.33333333%となっています。

また、左右に15pxのパディングが設定されています。

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
}
.col-xs-12 {
  width: 100%;
}
.col-xs-11 {
  width: 91.66666667%;
}
.col-xs-10 {
  width: 83.33333333%;
}
.col-xs-9 {
  width: 75%;
}
.col-xs-8 {
  width: 66.66666667%;
}
.col-xs-7 {
  width: 58.33333333%;
}
.col-xs-6 {
  width: 50%;
}
.col-xs-5 {
  width: 41.66666667%;
}
.col-xs-4 {
  width: 33.33333333%;
}
.col-xs-3 {
  width: 25%;
}
.col-xs-2 {
  width: 16.66666667%;
}
.col-xs-1 {
  width: 8.33333333%;
}

ここで困るのはグリッドとグリッドの間にマージンを入れたい場合です。

グリッド間にマージンの設定

.col-xs-Nを使用してグリッドを作成した場合、左右のマージンを入れることができません。
Bootstrapの場合、全ての要素に対してボックスモデルはCSS3のborder-boxが指定されています。
上述のようにwidthの値は1カラムあたりの幅は1グリッド=100/12＝8.33333333%　とパーセント指定しているためです。

そこで、どうしても各グリッド間にマージン設定をしたい場合は次のように疑似的にマージンを作成します。
まず、divで入れ子状態にして、本来のグリッドのパディングをマージンに見立てて余白を作る方法です。

グリッドにマージンを設定するサンプル

CSSコード

div{
  height: 300px;
}
div[class^=col]{
  padding:5px;
  margin-bottom:10px;
}
.inner{
  background: #f9d0f4;
  padding:5px;
}

HTMLコード

<div class="container">
  <div class="row">
    <div class="col-sm-2"><div class="inner">カラムA</div></div>
    <div class="col-sm-6"><div class="inner">カラムB</div></div>
    <div class="col-sm-4"><div class="inner">カラムC</div></div>
  </div>
</div>

解説

今回のサンプルでは属性セレクタ[class^=col]を使用して、クラス名の先頭にcolがついているものを対象にpaddingの値を書き変えました。セレクタの設定は用途に応じて決めてください。本来のcol-sm-Nのpaddingの値はBootstrapのCSSで15pxと指定されていますので、それをここで上書きします。この値が疑似的にmarginの役割を果たします。入れ子のdivである.innerの設定内容はグリッドに指定したいpaddingとbackgroundを指定しています。状況に応じてborderの設定もあるかもしれないですね。

グリッドシステムのレスポンシブ化

グリッドシステムはレスポンシブに対応しています。
windowの幅に応じてブロックの列幅を変えることができます。

• «
• <
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• >
• »