唐突ですが、皆さんは「Bootstrap」を利用していますか？
- 「何となく聞いたことがあるけれど結局何のことなの？」
- 「ちょっと使ってみたかったんだよね～。」
そんな方に向けて「Bootstarap」を基本から見ていきたいと思います。
必要性に迫られないと、新しいものやサービスって何かと後回しにしてしまい、「いつかやろう」「そのうち理解しよう」と、いつしか古いものになってしまったりするので、これをいい機会に少しずつサイト制作に取り入れていくキッカケになれば…。と思います。
Bootstrapとは？
Bootstrapとは、CSSの「フレームワーク」と一般的に呼ばれるものになります。そもそも「CSSのフレームワーク」って何？と言うと、Webサイト全体の基本的なスタイルを、はじめからある程度用意してくれている「ライブラリファイル」のことになります。
一般的に使用されるタグに対してある程度デザインされたスタイルが、はじめから定義されているので、そのまま使用してもそれなりの見栄えでサイトが出来上がります。１からスタイルを組んでいくことに比べると、格段に短い時間でWebサイトのデザインが出来るというかなり便利なライブラリです。
Bootstrapは元々、Twitter社が開発したものなので、かつては「Twitter Bootstrap」と呼ばれていましたが、現在においては「Bootstrap」と呼ばれています。
ここでは、Bootstrapを触りながら、簡単なサンプルと共に基本的な使い方を理解していけるようにご紹介させて頂きます。
Bootstrapの特徴
はじめにBootstrapを使う上で簡単な特徴を見ていきましょう。
デザインは用意されているテーマから選ぶだけ！
Webサイト作成者が用意したHTMLファイルに好みのCSSファイルを読み込むだけで、それなりのデザインされた表示が出来るので、デザインが苦手という人でも簡単にそれなりのクオリティーでのサイト制作が可能になります。
レスポンシブにも対応！
BootstrapはレスポンシブWebデザインに対応しているので、デバイスごとに別々のCSSを作成する必要はありません。レスポンシブ対応にするために、CSS3のメディアクエリを使用しています。現状で「HTML5/CSS3」の知識があまり身についていない人でもBootstrapを使用する際には、特に問題はありません。もちろんそれなりの知識を身に付けていた方が、カスタマイズしてよりオリジナリティーを出していきたいと人には良いでしょう。
デザインを簡単に変更出来る！
一旦、Bootstrapでページを作成してしまえば、その後にイメージを変更したい場合、いくつかその他に用意されているテーマを選び直し、各テーマのCSSをダウンロードして差し替えることでデザインを変更することが出来ます。いくつかまとめてテーマを無料で配布しているサイトもありますので探してみてください。
対応ブラウザ
IE7以下とFirefox3.6以下は残念ながらサポートされていません。またIE9以下のブラウザに関しては「CSSメディアクエリ」がサポートされていないので「Respond.js」を使用する必要があります。
Bootstrapを利用するにあたり準備すること
まずは、Bootstrapから「Bootstrap」をダウンロードします。
ダウンロードページに移り、Downloadの項目から「Download Bootstrap」をクリックします。
すると「bootstrap-3.2.0-dist.zip」がダウンロードされます。
※バージョンごとに数字は変わります。
▼bootstrapフォルダには以下のようなファイルが格納されています。
css/
-bootstrap.css
-bootstrap.min.css
-bootstrap-theme.css
-bootstrap-theme.min.css
font/
-glyphicons-halflings-regular.eot
-glyphicons-halflings-regular.svg
-glyphicons-halflings-regular.ttf
-glyphicons-halflings-regular.woff
js/
-bootstrap.js
-bootstrap.min.js
すぐに使用できるHTMLテンプレートが用意されている
ダウンロードページを下にスクロールしていくと「Basic template」という項目があり、Bootstrapをすぐに使用するためのHTMLテンプレートが記載されています。
このコードをコピーして「index.html」を作成しましょう。
ここまでで準備は完了です！
先程作成した「index.html」をブラウザで開いてみましょう！
デフォルトで指定されているスタイル
既にデフォルトで指定されているデザインがどのようなものかを、記述の仕方を見ながら確認していきたいと思います。
デフォルトのボタンスタイル
button要素にclass指定で「“btn btn-***”」(***はプロパティ名を記述)を指定するとスタイルが適用されます。
▼プロパティ名はこちら
| プロパティ名 | 内容 |
| default | 白ボタンに黒文字 |
| primary | 青ボタンに白文字 |
| success | 緑ボタンに白文字 |
| info | 水色ボタンに白文字 |
| warning | オレンジボタンに白文字 |
| danger | 赤ボタンに白文字 |
| link | 無地ボタンに青文字 |
[button-sample.html]
|
1 2 3 4 5 6 7 |
<button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-link">Link</button> |
デフォルトのボタンサイズ
button要素にclass指定で「“btn-***”」(***はプロパティ名を記述)を指定するとサイズが指定できます。
▼プロパティ名はこちら
| プロパティ名 | 内容 |
| lg | ボタン大 |
| sm | ボタン小 |
| xs | ボタン極小 |
[button-size-sample.html]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<p> <button type="button" class="btn btn-default btn-lg">L-button</button> <button type="button" class="btn btn-primary btn-lg">L-button</button> <button type="button" class="btn btn-success btn-lg">L-button</button> <button type="button" class="btn btn-info btn-lg">L-button</button> <button type="button" class="btn btn-warning btn-lg">L-button</button> <button type="button" class="btn btn-danger btn-lg">L-button</button> <button type="button" class="btn btn-link btn-lg">L-button</button> </p> <p> <button type="button" class="btn btn-default">D-button</button> <button type="button" class="btn btn-primary">D-button</button> <button type="button" class="btn btn-success">D-button</button> <button type="button" class="btn btn-info">D-button</button> <button type="button" class="btn btn-warning">D-button</button> <button type="button" class="btn btn-danger">D-button</button> <button type="button" class="btn btn-link">D-button</button> </p> <p> <button type="button" class="btn btn-default btn-sm">S-button</button> <button type="button" class="btn btn-primary btn-sm">S-button</button> <button type="button" class="btn btn-success btn-sm">S-button</button> <button type="button" class="btn btn-info btn-sm">S-button</button> <button type="button" class="btn btn-warning btn-sm">S-button</button> <button type="button" class="btn btn-danger btn-sm">S-button</button> <button type="button" class="btn btn-link btn-sm">S-button</button> </p> <p> <button type="button" class="btn btn-default btn-xs">XS-button</button> <button type="button" class="btn btn-primary btn-xs">XS-button</button> <button type="button" class="btn btn-success btn-xs">XS- button</button> <button type="button" class="btn btn-info btn-xs">XS-button</button> <button type="button" class="btn btn-warning btn-xs">XS-button</button> <button type="button" class="btn btn-danger btn-xs">XS-button</button> <button type="button" class="btn btn-link btn-xs">XS-button</button> </p> |
デフォルトのテーブルスタイル
◇基本ルール
- class=”container”の中に、
- table要素に対してclass=”table”を記載
◇サンプルソースを確認
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<div class="container"> <table class="table"> <thead> <tr> <th>順位</th> <th>ポイント</th> <th>名前</th> <th>チーム</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>222ポイント</td> <td>ニコ・ロズベルグ</td> <td>メルセデスAMG</td> </tr> <tr> <td>2</td> <td>191ポイント</td> <td>ルイス・ハミルトン</td> <td>メルセデスAMG</td> </tr> <tr> <td>3</td> <td>156ポイント</td> <td>ダニエル・リカルド</td> <td>レッドブル</td> </tr> <tr> <td>4</td> <td>119ポイント</td> <td>フェルナンド・アロンソ</td> <td>フェラーリ</td> </tr> <tr> <td>5</td> <td>110ポイント</td> <td>バルテリ・ボッタス</td> <td>ウィリアムズ</td> </tr> </tbody> </table> </div> |
◇各行で背景色を変える
table要素のclass名に対して「table-striped」を追加すると、1行間隔で背景色を変えることができます。
|
1 |
<table class="table table-striped"> |
◇枠線を追加する
table要素のclassに対して「table-bordered」を追加すると、テーブルの外枠に枠線を追加できます。
|
1 |
<table class="table table-striped table-bordered"> |
◇マウスオーバー時のエフェクトを追加する
table要素のclassに対して「table-hover」を追加すると、テーブルにマウスオーバーした時のエフェクトを追加できます。
|
1 |
<table class="table table-striped table-bordered table-hover"> |
◇セルのサイズを変更する
table要素のclassに対して「table-condensed」を追加すると、テーブルのpadding値をデフォルトの半分にすることができます。
|
1 |
<table class="table table-striped table-bordered table-hover table-condensed"> |
◇セルの背景色を変更する
tr要素/td要素のclassに対して「active」「success」「warning」「danger」「info」のいずれかを指定すると、それぞれの値に応じた背景色になります。
|
1 2 3 4 5 |
<tr class="active"></tr> <tr class="success"></tr> <tr class="warning"></tr> <tr class="danger"></tr> <tr class="info"></tr> |
◇テーブルをレスポンシブ対応にする
<div class=”container”>要素とtable要素の間に<div class=”table-responsive”>要素を追加すると、テーブルがレスポンシブ対応になります。
|
1 2 3 4 5 |
<div class="container"> <div class="table-responsive"> ・・・ </div> </div> |
テーブルに関しては、ここまでになります。
画像ファイルをウィンドウサイズにより自動で縮小/拡大させる
ウィンドウサイズによって、画像ファイルを自動で縮小/拡大させたいときに、img要素のclassに「img-responsive」を指定します。
|
1 |
<img src="images/stone.jpg" class="img-responsive" alt="Responsive stone image"> |
デフォルトのp要素のスタイル
p要素のclassに「bg-***」(***はプロパティ名)を指定すると、スタイルを変更できます。指定できるプロパティ名は「primary/success/info/warning/danger」になります。
|
1 2 3 4 5 |
<p class="bg-primary">text1</p> <p class="bg-success">text2</p> <p class="bg-info">text3</p> <p class="bg-warning">text4</p> <p class="bg-danger">text5</p> |
デフォルトのナビゲーション
デフォルトで様々なナビゲーションスタイルが用意されています。
◇基本ルール
ul要素にclass=”nav”を記載
◇Tabs
ul要素のclassに対して「nav-tabs」を追加します。
|
1 2 3 4 5 |
<ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Country</a></li> <li><a href="#">Date</a></li> </ul> |
◇Pills
ul要素のclassに対して「nav-pills」を追加します。
|
1 2 3 4 5 |
<ul class="nav nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Country</a></li> <li><a href="#">Date</a></li> </ul> |
◇Stacked
ul要素のclassに対して「nav-stacked」を追加します。
|
1 2 3 4 5 |
<ul class="nav nav-stacked"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Country</a></li> <li><a href="#">Date</a></li> </ul> |
◇Justified-tab
ul要素のclassに対して「nav-tabs」「nav-justified」を追加します。
|
1 2 3 4 5 |
<ul class="nav nav-tabs nav-justified"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Country</a></li> <li><a href="#">Date</a></li> </ul> |
◇Justified-pills
ul要素のclassに対して「nav-pills」「nav-justified」を追加します。
|
1 2 3 4 5 |
<ul class="nav nav-pills nav-justified"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Country</a></li> <li><a href="#">Date</a></li> </ul> |
◇Disabled(クリック禁止)
クリック禁止タブ。
li要素のclassに対して「disabled」を追加します。
|
1 2 3 4 5 |
<ul class="nav nav-tabs nav-justified"> <li class=""><a href="#">Enable link</a></li> <li class="disabled"><a href="#">Disabled link</a></li> <li class=""><a href="#">Enable link</a></li> </ul> |
レスポンシブ対応のためにグリッドシステムを理解しよう
ちょっとここからややこしい話になってきますが、では、ここからは「レスポンシブWebデザイン」に対応していくために必要な「グリッドシステム」を理解していきましょう。
グリッドシステムの基本ルール
- class=”container”の中に、
- class=”row”の中に
- class=”col-{prefix}-{column}”
- {column}は合計値が12になるように数値を指定
サンプルソースを確認
サンプルソースを見ていきましょう。
|
1 2 3 4 5 6 7 8 9 10 11 |
<header class="container">header</header> <section class="container"> <!-- Bootstrapのグリッドシステムclass="row" --> <div class="row"> <!-- カラムを12分割する --> <div id="area" class="col-sm-3 red">red</div> <div id="area" class="col-sm-6 blue">blue</div> <div id="area" class="col-sm-3 yellow">yellow</div> </div> </section> <footer class="container">footer</footer> |
※PCのウィンドウサイズ
※スマートフォン＆タブレットのウィンドウサイズ
※ウィンドウサイズを小さくしたりして確認してみてください。
複数指定も可能
col-{prefix}-{column}は、class=””の中に複数指定することで、「PCでは縦1×横6」「タブレットでは縦2×横3」「スマートフォンでは縦3×横2」のようにレイアウトが可変するようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<header class="container">header</header> <section class="container"> <!-- Bootstrapのグリッドシステムclass="row" --> <div class="row"> <!-- カラムを12分割する --> <div id="area" class="col-xs-6 col-sm-4 col-md-2 red">red_1</div> <div id="area" class="col-xs-6 col-sm-4 col-md-2 blue">blue_1</div> <div id="area" class="col-xs-6 col-sm-4 col-md-2 yellow">yellow_1</div> <div id="area" class="col-xs-6 col-sm-4 col-md-2 red">red_2</div> <div id="area" class="col-xs-6 col-sm-4 col-md-2 blue">blue_2</div> <div id="area" class="col-xs-6 col-sm-4 col-md-2 yellow">yellow_2</div> </div> </section> <footer class="container">footer</footer> |
※PCのウィンドウサイズ
※タブレットのウィンドウサイズ
※スマートフォンのウィンドウサイズ
※ウィンドウサイズを小さくしたりして確認してみてください。
グリッドオプション表
| 画面サイズ | {prefix} | 指定方法(*に数値を指定) |
| 768px未満スマートフォン) | xs | col-xs-* |
| 768px以上～992px未満(タブレット) | sm | col-sm-* |
| 992px以上～1200px未満(PC) | md | col-md-* |
| 1200px以上(PC) | lg | col-lg-* |
ウィンドウサイズにより表示・非表示を切り替える
PC/タブレット/スマートフォンで配置するコンテンツを全く同じにする必要がない場合は、ウィンドウサイズによってコンテンツを非表示にするなどの指定をしていきます。
hidden-{prefix}…非表示
visible-{prefix}…表示
|
1 2 3 4 5 6 7 8 9 10 11 |
<header class="container">header</header> <section class="container"> <!-- Bootstrapのグリッドシステムclass="row" --> <div class="row"> <!-- カラムを12分割する --> <div id="area" class="col-md-3 col-sm-6 hidden-xs green">xsのみ非表示</div> <div id="area" class="col-md-6 col-xs-6 hidden-sm purple">smのみ非表示</div> <div id="area" class="col-md-3 col-sm-6 col-xs-6 brown">常に表示する</div> </div> </section> <footer class="container">footer</footer> |
※992px以上のウィンドウサイズ({prefix}/[lg]&[md])
※768px～991pxのウィンドウサイズ({prefix}/[sm])
※768px以下のウィンドウサイズ({prefix}/[xs])
※ウィンドウサイズを小さくしたりして確認してみてください。
まとめ
ここまで、Bootstrapの基本的な使い方をご紹介してきましたが、早急にある程度のデザインでサイトを作成しなければならない場合に、時間と手間を省いてある程度のスタイルが適用できるというメリットがかなりありますね。1からサイトデザインを作り込んでいくよりも、随分手軽に作業が出来るようになりますが、きちんと指定されたルールに従い記述していく必要があります。
また、カスタマイズしながら独自のテーマを作成していくことも可能で、既に「テーマ」を無料で配布しているサイトもありますので自分好みのデザインを探してみてください。