[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 ダディ