Bootstrapで遊ぶ3（グリッドシステムの正しい使い方）

おつかれさまです。

グリッドシステムがだいたい分かってきたところで、「col」の合計が12のとき、つまりウィンドウ幅と同じ「col」のときにタイトルh1と微妙な幅の差がありました、よく分からんのでほったらかしにしていましたが、これはグリッドシステムを正しく使えていないことに起因する現象みたいです。

グリッドシステムを正しく使うには、「row」のクラスを「container」、もしくは「container-fluid」というクラスでかこってあげる必要があるそうです。このクラスはざっくり「要素を中央に寄せる」という効果をもつクラスです。 まあややこしいことは置いといて、なんか書いてみましょう。

前回最後に書いたコードを用いて、「row」のクラスを「container-fluid」でかこいます。

<h1  style="background: blue">グリッドシステムのテスト</h1>
<div class="container-fluid">
  <div class="row" style="background: red">
    <div class="col-5" style="background: yellow">test1</div>
    <div class="col" style="background: green">test2</div>
    <div class="col" style="background: grey">test3</div>
    <div class="col-1" style="background: white">test4</div>
  </div>
</div>

これが…

こうなった！

変わってなくてワロス、いやいや「row」の要素がちゃんとh1幅と同じになっていました、おｋ！

ひとまず、グリッドシステムが正しく使えたところで、「container」と「container-fluid」の違いを確認しておきます。さっきのコードは「container-fluid」でかこっていたのでこれを「container」に変えてみます。

おお、なんか「row」の幅が短くなった、これはなんぞやといろいろ調べました。

これら２つはブラウザウィンドウの幅を変化させたときに違いが出るようです。 まず「container-fluid」を使ったとき、ウィンドウの幅に合わせて常に100%の幅で「container-fluid」の要素幅が変化します、ブラウザウィンドウを短くして確認してみます。

確かに100%の幅で変化している。

次に「container」を使ったときは、特定のウィンドウの幅に合わせて要素幅が固定されます。例えばウィンドウの幅が「0〜576px」の間の幅とき、要素幅は100%が維持され、「576〜768px」のときは540pxの幅になる、というような感じです。同じようにブラウザを短くしてみると、

なるほど、ウィンドウ幅を動かすと段階的に要素幅が変化します。

要素幅が変化するウィンドウの幅を「ブレイクポイント」と呼ぶそう、下記にブレイクポイントと固定される要素幅をまとめました。

ウィンドウ幅	要素幅
0px〜576px	100%
576px〜768px	540px
768px〜992px	720px
992px〜1200px	960px
1200px〜	1140px

これでグリッドシステムの基本がだいたい分かってきました、もう少し応用的な使い方も見ていこうかと思います。