[Bootstrap]へぇ、PC/スマホ両対応なページってこんな超簡単に作れるんだ
ダディです。
前回Bootstrapについて説明したので、余計なうんちく抜きで
早速Bootstrapを使っていきたいと思います。
Bootstrapを使う準備をしよう
まずはここからBootstrapをダウンロードしてください。 → Bootstrap3のダウンロード(本家サイト)
ZIPを解凍すると中には「css」「js」「fonts」のみが入っています。
次に中身を全てWebサイトを作りたい場所に置いてください。
そしてルートフォルダ直下にindex.htmlを新規作成します。
ここまでで、ディレクトリ内の構成がこうなっていればOKです。
最後にindex.htmlに以下のコードをコピペすれば準備完了です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<html lang="jp"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>タイトル</title> <!-- BootstrapのCSSを読み込み --> <link href="css/bootstrap/bootstrap.css" rel="stylesheet"> <!-- BootstrapのJSを読み込み --> <!-- ※必ず先にJQueryを読み込む --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- ※その後にBootstrapのJSを読み込む --> <script src="js/bootstrap.min.js"></script> </head> <body> ここに書いていくよ! </body> </html> |
これだけなんです。簡単ですね。
さっそくレスポンシブなページを作っていこう
Bootstrapは、ページを縦に12分割にしてそれを各<div>に割り当てて構成していきます。
このシステムのことを「グリッドシステム」といいます。
12分割した列を「グリッド」と呼びます。3つのグリッドなら3グリッド、12つのグリッドなら12グリッドですね。
それでは記述法について書いていきたいと思います。
containerクラス -グリッドシステム対象の範囲であることを”意思表示”するクラス–
1 2 3 4 5 |
<body> <div class="container"> </div> </body> |
まず、bodyの中に”containerクラス”を入れた<div>タグを用意します。
これにより <div class=”container”> 内の要素はグリッドシステムの対象ですよ。 という意思表示になると考えてもらってOKです。
因みにこの”containerクラス”はブラウザのウィンドウサイズで幅が変わる横幅を持っています。
画面幅 | 768px以下 | 768px以上 992px未満 | 992px以上1200px未満 | 1200px以上 |
---|---|---|---|---|
.container幅 | auto(画面いっぱい) | 750px | 970px | 1170px |
また、どの画面幅でもいっぱいに表示してくれる“container-fluidクラス”というのもあります。
好みで使い分けてみてください。
rowクラス -実際に中が12分割される範囲を決めるクラス–
1 2 3 4 5 6 7 |
<body> <div class="container"> <div class="row"> </div> </div> </body> |
続けて、内部に”row(行)クラス”を入れた<div>タグを用意します。
これにより、その<div>の中の要素を1行と捉え、この行の中が12分割されます。
colクラス -確保したいグリッド数を指定するクラス–
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<body> <div class="container"> <div class="row"> <div class="col-md-4"> <!-- 12分割中4を割り当て --> 12分割中4を割り当て </div> <div class="col-md-4"> <!-- 12分割中4を割り当て --> 12分割中4を割り当て </div> <div class="col-md-4"> <!-- 12分割中4を割り当て --> 12分割中4を割り当て </div> </div> </div> </body> |
さて、いよいよ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です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<body> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6 col-xs-12"> <!-- sm時は6 xs時は12 --> A </div> <div class="col-md-4 col-sm-6 col-xs-12"> <!-- sm時は6 xs時は12 --> B </div> <div class="col-md-4 col-sm-12 col-xs-12"> <!-- sm時は12 xs時は12 --> C </div> </div> </div> </body> |
最後に、実際に上のコードを適用したものを用意しました。画面が小さい順から縦一列 → 2行 → 横一列になると思いますよ!
A
B
C
説明が長くなりましたが、出来上がったHTML文はめちゃくちゃシンプルになったと思います。
こんな簡単にPC/スマホ対応できるのですね。便利だ、Bootstrap。
ディスカッション
コメント一覧
まだ、コメントがありません