【入門】Bootstrapの書き方　〜 グリッドシステム 〜

みなさんこんにちは さくちゃん です。

本日は、前回の続きから行なっていきます。
今回学ぶ内容は、以下の2つです。

• グリッドシステムの書き方
• グリッド

では、早速やっていきましょう。
前回の内容をまだ見ていない方は、こちらをご覧ください。

Bootstrapの書き方　〜 グリッドシステム 〜

グリッドシステムとは？

そもそもグリッドシステムとは何かというと、Wiki先生ではこのように解説されています。

940ピクセル幅のグリッドレイアウトが標準設計であり、利用者は代わりに可変幅レイアウトを使用できる。両者ともに、携帯電話、縦長と横長、タブレット、パソコンの4つの閲覧端末や解像度に合わせてカラム幅を調整する機能がある。

https://ja.wikipedia.org/wiki/Bootstrap

簡単にいうと、作成したWebサイトをスマートフォン、タブレット、PCで反映させるときに、自動で幅を調整してくれる機能のことを言います。

図で表すと下のようになります。

PCの場合だと、均等に3つのボックスが表示されます。

これがスマートフォンの場合だと、下のようになります。

このように、サイズに合わせて、自動でボックスの幅を変えてくれます。
これがグリッドシステムです。

では実際に、グリッドシステムの書き方について見ていきましょう。

container（コンテナ）

グリッドシステムを書くときは、まず始めに「container」というコンテナを作成していきます。

「container」とは倉庫のようなもので、この「container」の中に、row（行）、col（列）を書いていきます。
「container」の書き方は

<div class="container">

</div>

と書きます。

では次に、row（行）について見ていきましょう！

row（行）

row（行）は、行を表します。
イメージは、Excelの行と同じです。書き方は

<div class="container">
<div class="row">


</div>
</div>

と書きます。

先ほど言ったように、container（コンテナ）の中に書きます。
では次に、col（列）について見ていきましょう。

col（列）

col（列）は、列を表します。カラムとも呼ばれたりします。
イメージはExcelの列です。書き方は

<div class="container">
<div class="row">
　　
　　<div class="col">1</div>
　　<div class="col">2</div>
　　<div class="col">3</div>

</div>
</div>

と書きます。
一度ブラウザで確認してみましょう。

ちょっとわかりにくいので、前回学んだ背景色を変えてみましょう。

<div class="container">
<div class="row">
　　
　　<div class="col bg-primary">1</div>
　　<div class="col bg-danger">2</div>
　　<div class="col bg-info">3</div>

</div>
</div>

ではブラウザで確認してみましょう

うまく反映されましたね。
今回は３つの列を追加したため、3つの列が表示されています。

このようにしてcol（列）を書いていきます。

グリッド

col（列）はそのまま記述すると、均等に幅を調整してくれるのですが、
12分割で割合を指定することもできます。

例えば、12を8と4に分けて書く場合は、下のように書きます。

<div class="container">
<div class="row">
　　
　　<div class="col-8 bg-primary">1</div>
　　<div class="col-4 bg-danger">2</div>

</div>
</div>

ブラウザで確認してみるとこのようになります。

このように割合を指定することができます。
イメージはこのような感じです。

ブラウザでは、12本のグリッド線が存在しており、割合を指定することで、自由に配置することができます。
例えば上の8対4の場合は、下のように表示されていることがわかります。

12より多い場合、少ない場合

12よりも多い数字、少ない数字を指定することもできます。

例として、10と5を指定した場合を見てみましょう。
書き方はこのように書いていきます。

<div class="container">
<div class="row">
　　
　　<div class="col-10 bg-primary">1</div>
　　<div class="col-5 bg-danger">2</div>

</div>
</div>

ではブラウザで確認してみましょう。

12よりも多い場合は、自動的に改行されるようになります。

次に少ない場合について見ていきましょう。今回は8と2で指定していきます。
書き方はこのように書いていきます。

<div class="container">
<div class="row">
　　
　　<div class="col-8 bg-primary">1</div>
　　<div class="col-2 bg-danger">2</div>

</div>
</div>

今回はわかりやすいように、8と4で分割した行と比較してみます。
ではブラウザで確認して見ましょう。

12に満たない場合は、足りない部分が空白になっていることがわかります。

まとめ

本日は以上になります。
グリッドシステムは、Bootstrapを学ぶ中で必ず必要になる知識ですので、必ず覚えましょう。