[Bootstrap]へぇ、PC/スマホ両対応なページってこんな超簡単に作れるんだ

2017年2月9日

ダディです。
前回Bootstrapについて説明したので、余計なうんちく抜きで
早速Bootstrapを使っていきたいと思います。

Bootstrapを使う準備をしよう

まずはここからBootstrapをダウンロードしてください。　→　Bootstrap3のダウンロード（本家サイト）

ZIPを解凍すると中には「css」「js」「fonts」のみが入っています。
次に中身を全てWebサイトを作りたい場所に置いてください。
そしてルートフォルダ直下にindex.htmlを新規作成します。

ここまでで、ディレクトリ内の構成がこうなっていればOKです。

最後にindex.htmlに以下のコードをコピペすれば準備完了です。

これだけなんです。簡単ですね。

さっそくレスポンシブなページを作っていこう

Bootstrapは、ページを縦に12分割にしてそれを各<div>に割り当てて構成していきます。
このシステムのことを「グリッドシステム」といいます。
12分割した列を「グリッド」と呼びます。３つのグリッドなら３グリッド、１２つのグリッドなら１２グリッドですね。

それでは記述法について書いていきたいと思います。

containerクラス　-グリッドシステム対象の範囲であることを”意思表示”するクラス–

まず、bodyの中に”containerクラス”を入れた<div>タグを用意します。
これにより　<div class=”container”>　内の要素はグリッドシステムの対象ですよ。　という意思表示になると考えてもらってOKです。

因みにこの”containerクラス”はブラウザのウィンドウサイズで幅が変わる横幅を持っています。

画面幅	768px以下	768px以上 992px未満	992px以上1200px未満	1200px以上
.container幅	auto(画面いっぱい)	750px	970px	1170px

また、どの画面幅でもいっぱいに表示してくれる“container-fluidクラス”というのもあります。
好みで使い分けてみてください。

rowクラス　-実際に中が12分割される範囲を決めるクラス–

続けて、内部に”row（行）クラス”を入れた<div>タグを用意します。
これにより、その<div>の中の要素を1行と捉え、この行の中が12分割されます。

colクラス -確保したいグリッド数を指定するクラス–

さて、いよいよrowの中で12分割された幅を割り当てていきます。”col-○○-××クラス”を入れた<div>タグを用意します。

このクラスは<div class=”col- 画面幅 – グリッド数 “>と書くことで、
「この画面幅ではこのグリッド数」という風に指定することが出来ます。

上記のサンプルコードを例とすると<div class=”col-md-4″>が3つ　＝　4グリッド + 4グリッド + 4グリッド = 12グリッドとなるので、
こんなイメージとなります。

また、画面幅毎にグリッドの割当を変えることが出来ます。
ここでいう画面幅は以下の通りで対応しています。

画面幅	768px以下(スマートフォン)	768px以上 992px未満（タブレット）	992px以上1200px未満（PC）	1200px以上（PC）
記述方法	col-xs	col-sm	col-md	col-lg

タブレットの時は 　　6グリッド , 6グリッド , 12グリッド（2行）
スマートフォンの時は 12グリッド , 12グリッド , 12グリッド　で表示したい時は
先程のコードにこう追記すればOKです。

最後に、実際に上のコードを適用したものを用意しました。画面が小さい順から縦一列 → 2行 → 横一列になると思いますよ！

説明が長くなりましたが、出来上がったHTML文はめちゃくちゃシンプルになったと思います。
こんな簡単にPC/スマホ対応できるのですね。便利だ、Bootstrap。