Bootstrapを使用するとPCやスマホなど使用する機器に左右されず整ったWebページを作ることができます。
Bootstrapの中身ってどうなっているの？
Bootstrapでは、ボタンやメニューなど様々なパーツがあらかじめ用意されています。
それはつまり、HTML/CSS/JavaScriptファイルまたはコードのことです。Bootstrapが用意してくれているクラスなどを指定することで簡単にデザインを作成することができます。以下イメージ内では、ボタンが例として使われています。これも、ボタンの為のCSSが予め用意されているので、「btn-primary」というクラスの指定だけでボタンが作れるのです。
このようにBootstrapでは便利なデザインパーツが沢山用意されているので、美しいWEBサイトを簡単に素早く作る事が出来きます。
また、前のレッスンでも触れましたが、レスポンシブデザインにも対応しています。レスポンシブとは、画面幅の異なるどのデバイス（スマホ・PCなど）で見ても、レイアウトなどが整ったサイトにすることです。
Bootstrapでは、レスポンシブデザインに最適なグリッドシステムというものが用意されています。つまり、レスポンシブの為のCSSもあらかじめ用意されているという事です。 このレッスンでは、グリッドシステムの仕組み、使い方を学んでいきます。
グリッドシステム
Bootstrapには、グリッドという仕組みがあります。 グリッドとはデバイスの画面を12分割し、管理する仕組みのことです。その12分割されたグリッド上に沿うように、コンテンツを配置していきデザインを整えます。
このグリッドを上手く使って、PC・スマホなど画面幅の異なるデバイスで見たときにもレイアウトが崩れないように設定していきます。画面幅によってグリッドの配置やサイズを変えることによって、どの画面幅でアクセスした際にも整ったレイアウトで表示できるようになっているのです。
例えば以下のようにPCの場合はコンテンツが横並びになりますが、スマホで見た場合にはコンテンツが縦並びになります。
ブレークポイント
Bootstrapには画面のサイズによってレイアウトを変更できる特徴があります。 ユーザーの環境がどれくらいの大きさなのかを判定して、その表示を変えます。例えば大きなPCで見てたらこの画面、小さなスマホで見ていたらこの画面、タブレットで見てたらこの画面などを切り分けることができるのです。
下の図はいろいろなデバイスの幅と表示を示したものになります。５つの基準ポイントがありますね。このポイントの幅を超えた、またはこのポイントより小さくなった時に、レイアウトなどが変わります。この基準ポイントを「ブレークポイント」と呼びます。 グリッドシステムでは、ブレークポイントを指定してコンテンツを配置します。
また、Bootstrapでは各ブレークポイントに名前が付けられています。 横幅が575までは「Extra small」など、各幅で名前がついていますね。後に実践してますが、この名前をつけることでデバイスの幅によって見せ方を変更できるようにするのです。
| Extra small | Small | Medium | Large | Extra large | |
|---|---|---|---|---|---|
| 画面幅 | ～575px | 576～767px | 768～991px | 992～1199px | 1200px～ |
グリッドシステム以外でもブレークポイントでのCSSの指定変更は使われていますので、覚えておくと良いでしょう。
レイアウトの為のCSS
Bootstrapでは、レイアウトを簡単に行う為のクラスが用意されています。この項目で紹介するクラスは、グリッドシステムを使う時に必要となるものです。
containerを使う
Bootstrapでは「container（コンテナ）」というCSSクラスが用意されています。これは、コンテンツを入れる入れ物の様なものです。また、中に入れるコンテンツを画面中央に配置します。
Skillhubの講座をやっていただいた方はwrapperと言ったほうがピンとくるかもしれません。自分で作成する場合は「wrapper」などと名前を付けているクラスやidがありましたね。containerはそれと同じように「すべてを包む」という意味合いを持つものになります。
containerクラスは横幅が最大1170pxで、画面幅が小さくなるとコンテナの幅も小さくなります。
「container」のCSSを見てみましょう。
.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;
}
}
メディアクエリを知る
ここで見慣れない@mediaというものが出てきましたね。 これらはメディアクエリと呼ばれ「その画面サイズが ..px 以上だった場合は、こうやって表示してね」と書くことができるものになります。
例えば以下の例だったら 「画面サイズが480px以上だったらh1の色は赤にしてね」 という設定をしています。
@media screen and (min-width:480px) {
/* 画面サイズが480px以上だったらここを読み込む */
h1 { color: red;}
}
もうお気づきですかね。 そう、これは各デバイスの幅によって設定を変更するためのものになります。
- スマホ => 「画面サイズが480px以上だったらh1の色は赤にしてね」
- タブレット => 「画面サイズが786px以上だったらh1の色は緑にしてね」
- PC => 「画面サイズが1024px以上だったらh1の色は青にしてね」
と、複数指定する場合は下記のように書きます。
@media screen and (min-width:480px) {
/* 【スマホ用】 画面サイズが480px以上だったらここを読み込む */
h1 { color: red;}
}
@media screen and (min-width:768px) {
/* 【タブレット用】 画面サイズが768px以上だったらここを読み込む */
h1 { color: green;}
}
@media screen and (min-width:1024px) {
/* 【PC用】 画面サイズが1024px以上だったらここを読み込む */
h1 { color: blue;}
}
これらが理解できたらもう一度containerに関するコードを見てみましょう。 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（コンテナ）にはもう一つ「container-fluid」というクラスもあります。
こちらは「width: 100%」と指定したときのように、横幅はどのデバイスでも画面幅全体となります。
container-fluidはメディアクエリの設定は特にありません。それは、そうですよね。どのデバイスで見ても横幅100%なのですから。
rowクラスで行の設定
「row」とは行という意味を持つクラスです。 横並びにしたいコンテンツがある時、それらをこのrowクラスで囲うという使い方をします。
containerの中に入れ無くとも機能しますが、今回はcontainerの中に入れていくことで説明を進めます。 コードと出来上がりは以下のようなイメージになります。
col（カラム）
「カラム」とは12分割した列のことを言います。 このクラスは、「col」の後にブレークポイントとカラム数指定の記述を加える事が出来ます。
たとえば、画面幅が768px以上の時、コンテンツの幅は６カラム(グリッド)分にしたいとします。その場合の、実際のコードは以下のようになります。
「col-ブレークポイント-カラム数」という形のクラスにするという事ですね。
ブレークポイントは以下表の「クラス名」の記述を使います。
| Extra small | Small | Medium | Large | Extra large | |
|---|---|---|---|---|---|
| 画面幅 | ～575px | 576～767px | 768～991px | 992～1199px | 1200px～ |
| クラス名 | なし | sm | md | lg | xl |
上記例では、768px(md)以上の時は６カラムとしました。 この場合、768px以下の画面幅になったときは、12カラム分の横幅に広がります。12カラムということは1列になります。これは、どんなカラム数を指定していたとしても、指定された画面幅以下の場合には12カラムの幅になるように、BootstrapのCSSに記述されている為です。
また、横並びで複数のコンテンツを並べて配置したいという時があるかと思います。 そのような時は、横一列（rowの中）で合計が12カラムとなるように指定しなければなりません。
例えば、２つのコンテンツを、それぞれ同じ幅で配置したいとします。 その時は以下のようなコードとなります。
<div class=”container”>
<div class=”row”>
<div class=”col-md-6”>コンテンツ</div>
<div class=”col-md-6”>コンテンツ</div>
</div>
</div>
◆2.Bootstrapのグリッドを書いてみましょう
では、実際にコードを書いてグリッドシステムを使用してみましょう。
CDNでBootstrapを導入している想定で進めて行きます。
前レッスン「◆1.CDNでBootstrapを使えるようにする」で作成したフォルダ内にあるindex.htmlをコピーして、ファイル名をgrid.htmlに変更してください。今回はgrid.htmlの方にコードを書いてみましょう。
下図は画面の表示領域と、Bootstlapの「col」配置を表した図です。
表示領域とは、画面サイズというような意味です。ブレークポイントに合わせて表示を変更出来るように、ユーザーの画面サイズを読み込んでいるようなイメージです。
グリッドシステムを使用して、コンテンツを配置していきます。 今回は上図のように2つのコンテンツを配置してみましょう。
それぞれ、幅が同じになるようにカラム数は６とします。 また、ブレークポイントはmdで設定します。 コンテンツは、画像とテキストにしてあります。
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="images/test.jpg">
</div>
<div class="col-md-6">
<h1>sampletext</h1>
<p>samplet extsampletextsam pletextsampletextsamplete xtsampl etextsa mpletextsamplet
exts amplet extsamp lete xtsam p letext sampl ete xtsamp letextsample text sam plet ext
sa mp l etext sa mp let exts amplete xtsample textsa mplet extsam ple text
</p>
</div>
</div>
</div>
パソコンのブラウザで表示を確認してみると…
画像が大きすぎてはみ出て、テキストと画像が重なってしまっていますね。
こういう場合にはbootstrapの画像を操作するためのクラスを使うと便利です。 img-fluidというクラスは画像の大きさをレスポンシブに保ってくれます。以下のようにimgタグにクラスを追加してみて下さい。
<img src="images/test.jpg" class="img-fluid">
しっかりと幅に合わせて、画像が小さくなってくれました。
ブラウザで確かめる
では、実際にブラウザでどのように表示されるか見てみましょう。 PCで見た場合は以下のように表示されればOKです。
次に、画面幅を小さくするとどのように表示が変わるか確認してみます。 ブラウザを縮小して試してみてください。段々と、画像が小さくなり、テキストエリアも横幅が狭くなっていき縦に伸びていくはずです。
そして、指定したブレークポイントを過ぎると以下のように、横並びから縦並びに変わります。
◎まとめ
・レスポンシブの為のCSSもあらかじめ用意されている
・Bootstrapでは、レスポンシブデザインに最適なグリッドシステムというものが用意されている
・グリッドシステムとは、デバイスの画面を１２分割し、グリッド上に沿うように、コンテンツを配置する事
・画面幅によって表示をかえる時、表示が変わる基準点をブレークポイントと呼ぶ
・グリッドシステムでは「col-ブレークポイント-カラム数」という形のクラスでカラムを作り、レスポンシブ対応にする