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


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

Bootstrapを使う準備をしよう

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

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

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

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


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

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

Bootstrapは、ページを縦に12分割にしてそれを各<div>に割り当てて構成していきます。
このシステムのことを「グリッドシステム」といいます。
12分割した列を「グリッド」と呼びます。3つのグリッドなら3グリッド、12つのグリッドなら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行 → 横一列になると思いますよ!


A

B

C

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


Bootstrap

Posted by edy