Bootstrapの使い方（３）〜グリッドシステムの活用方法

Bootstrapのグリッドシステムの仕組みを更に掘り下げてみます。
Bootstrapを使用するときに注意する点はボックスモデルの概念が通常と違うところです。
Bootstrapは通常のボックスモデルではありません。border-boxです！！
レイアウトの幅を算出するときはこの事をふまえておく必要があります。
Bootstrapでは全ての要素にいきなり次のように初期化を行っています。

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Bootstrapでは内容領域（width)にパディングとボーダーが含まれます。通常のボックスモデルは内容領域（width）にパディングとボーダーは含まれません。

グリッドシステムの基本構造

グリッドシステムの基本構造は次のようになります。

1. containerまたはcontainer-fluidでグリッドを囲むと15px余白をつくる。
2. 行を作成する要素（divなど）にrowクラスを適用すると-15px余白をつくりcontainerの余白と相殺されて結局余白は０になる。
3. カラムを作成する要素（divなど）にcol-xs-N(xsの他にxs,sm,md,lgがある)クラスを適用する

containerまたはcontainer-fluidで左右のmarginを15pxとり、rowで左右のmarginを-15pxとしている点がポイントです。
左右のmarginを15px以外の値にしたければカスタマイズ用のCSSでcontainerまたはcontainer-fluidで左右のmarginを上書きすれば良いことになります。
＊CSSの上書きと言われてどうしたらよいかがわからない場合はBootstrapより、まずはCSSの基本を学習しましょう。

サンプル１.container-fluid,.rowを使ったグリッドシステム
サンプル２.container-fluidなしのグリッドシステム
サンプル３.rowなしのグリッドシステム
サンプル４.container-fluid,.rowなしのグリッドシステム

.container と　.container-fluidの違い

.containerについて

.containerは固定幅のコンテナを作ります。
けれども、固定幅とはいえレスポンシブに対応していますので、ポイントになるwindowサイズでカラムの幅が変更されます。
つまり、windowのポイントに従って、750pxや970pxや1170pxで固定されます。
.containerのサンプル

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

bootstrap.cssを見てみると.containerの設定は以下のようになっています。

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

.container-fluidについて

.container-fluidはwindow幅に従って.container-fluid内の幅を変化させます。つまりリキッドタイプのレイアウトです。

.container-fluidのstyle指定
widthの指定がなく、width:autoの状態です。
つまりなり行きの幅になります。

bootstrap.cssは次のような設定になっています。

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

グリッドを中央そろえにする

グリッドを中央そろえにするにはcol-○○-nとcol-○○-offset-nを組み合わせて作成します。
例えばxsを使用した場合には次のような組み合わせがあります。

グリッドを中央そろえにするサンプル

<div class="col-xs-2 col-xs-offset-5"></div>
<div class="col-xs-4 col-xs-offset-4"></div>
<div class="col-xs-6 col-xs-offset-3"></div>
<div class="col-xs-8 col-xs-offset-2"></div>
<div class="col-xs-10 col-xs-offset-1"></div>

複雑なカラムを作成する

グリッドシステムを使ってカラムを作成するには、col-sm-Nなどのクラス名を使用したdivで12等分になったカラムを組み立てていくものでした。
ここでもう一度グリッドシステムを使って複雑なカラムを作成する方法を確認してみましょう。

カラムとカラムの間の余白

カラムとカラムの間はいつも0とは限りません。ある程度の空白が必要な場合も多いでしょう。
ひとつのカラムの隣に空白を開けたい場合は、クラス名「col-sm-offset-N」を使います。Nには1〜12までの数字が入ります。
Nに指定した数字の分だけ左側に余白が入ります。

カラムの左余白はcol-○○-offset-Nを使う。Nは1〜12で指定

col-sm-offset-Nのサンプル

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

bootstrap.cssは次のような設定になっています。

.col-xs-offset-12 {
  margin-left: 100%;
}
.col-xs-offset-11 {
  margin-left: 91.66666667%;
}
.col-xs-offset-10 {
  margin-left: 83.33333333%;
}
.col-xs-offset-9 {
  margin-left: 75%;
}
.col-xs-offset-8 {
  margin-left: 66.66666667%;
}
.col-xs-offset-7 {
  margin-left: 58.33333333%;
}
.col-xs-offset-6 {
  margin-left: 50%;
}
.col-xs-offset-5 {
  margin-left: 41.66666667%;
}
.col-xs-offset-4 {
  margin-left: 33.33333333%;
}
.col-xs-offset-3 {
  margin-left: 25%;
}
.col-xs-offset-2 {
  margin-left: 16.66666667%;
}
.col-xs-offset-1 {
  margin-left: 8.33333333%;
}
.col-xs-offset-0 {
  margin-left: 0;
}

カラムを少しずらす方法

グリッドシステムを使ってカラムを作成して、左右にカラムをずらす事ができます。
左にずらすにはcol-xs-pull-N、右にずらすにはcol-xs-push-Nとします。

カラムを左にずらすにはcol-○○-pull-N
右にずらすにはcol-○○-push-N

col-xs-pull-N、col-xs-push-Nを使用したサンプル

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

bootstrap.cssは次のような設定になっています。

.col-xs-pull-12 {
  right: 100%;
}
.col-xs-pull-11 {
  right: 91.66666667%;
}
.col-xs-pull-10 {
  right: 83.33333333%;
}
.col-xs-pull-9 {
  right: 75%;
}
.col-xs-pull-8 {
  right: 66.66666667%;
}
.col-xs-pull-7 {
  right: 58.33333333%;
}
.col-xs-pull-6 {
  right: 50%;
}
.col-xs-pull-5 {
  right: 41.66666667%;
}
.col-xs-pull-4 {
  right: 33.33333333%;
}
.col-xs-pull-3 {
  right: 25%;
}
.col-xs-pull-2 {
  right: 16.66666667%;
}
.col-xs-pull-1 {
  right: 8.33333333%;
}
.col-xs-pull-0 {
  right: auto;
}
.col-xs-push-12 {
  left: 100%;
}
.col-xs-push-11 {
  left: 91.66666667%;
}
.col-xs-push-10 {
  left: 83.33333333%;
}
.col-xs-push-9 {
  left: 75%;
}
.col-xs-push-8 {
  left: 66.66666667%;
}
.col-xs-push-7 {
  left: 58.33333333%;
}
.col-xs-push-6 {
  left: 50%;
}
.col-xs-push-5 {
  left: 41.66666667%;
}
.col-xs-push-4 {
  left: 33.33333333%;
}
.col-xs-push-3 {
  left: 25%;
}
.col-xs-push-2 {
  left: 16.66666667%;
}
.col-xs-push-1 {
  left: 8.33333333%;
}
.col-xs-push-0 {
  left: auto;
}

カラムの位置の交換

２つのカラムの位置を入れ替えるには、col-○○-pull-Nとcol-○○-push-Nをうまく利用すると可能です。
たとえば次の例のように行います。

カラムの位置の交換サンプル

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

カラムを入れ替えるにはcol-○○-pull-N、col-○○-push-Nを使う

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