【入門】Bootstrapの書き方 〜 グリッドシステム 〜
- 2019.11.16
- 2022.05.03
- 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つの列を追加したため、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を学ぶ中で必ず必要になる知識ですので、必ず覚えましょう。
-
前の記事
【入門】Bootstrapの書き方 〜 padding・margin 〜 2019.11.15
-
次の記事
【入門】Bootstrapの書き方 〜 グリッドシステム2〜 2019.11.17