Twitterのデザイナーや開発者が作成した『Bootstrap』は、フロントエンドのフレームワークとオープンソースプロジェクトです。『Bootstrap』は、CSS、JS、およびフォントが基本セットになっています。HTMLのテンプレートソースを組み合わせて、レスポンシブ対応のサイト制作が可能です。
テンプレートデータのダウンロード
『Bootstrap』は、こちらの公式サイトからダウンロードができます。基本セットの他に、ドキュメント、HTMLのサンプルソースなどが公開されています。
ライセンスについて
『Bootstrap』は、『Apache 2 license and is copyright 2013 Twitter. 』とされています。
「Apache 2 license」については、全ファイルへのライセンス表示は必要なく、リファレンスのみでよい。また、頒布される二次的著作物が同じライセンスで提供されたり、フリーソフトウエア、オープンソースソフトウェアとして頒布されることを要求しない。要求するのは、ユーザーがそのソフトウェアにApache Licenseのコードが使われていることを知らせる文言を入れることだけである。ライセンスされたファイルそれぞれに元々ある著作権と特許権の記述はそのまま保持し、修正がある場合は、その旨を追加記述をする。
wikipediaより一部引用：http://ja.wikipedia.org/wiki/Apache_License
ダウンロードした『Bootstrap』のる著作権と特許権の記述はそのままにして、可変なく使用すればOKというライセンスみたいですね。
ダウンロードファイル
『Bootstrap』は、以下のファイルで構成されています。HTMLのページデータは含まれていないので、サンプルテンプレートなどを参考に独自で構築します。
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff
制作の注意点
『Bootstrap』は、古いInternet Explorerの互換モードではサポートされていないので、最新のレンダリングモードで表示できるように配慮が必要です。
※「IE=edge」と指定することで、Internet Explorer 8 に対して、利用できる最も互換性の高いモードを使用するよう指示できます。
<meta http-equiv= "X-UA-Compatible" content= "IE=edge" >
『Bootstrap』のレスポンシブ対応は、主に「max-width」や「min-width」の横幅で識別しているので、「max-width」や「min-width」の表示対応ができていないIEのバージョンでは機能しなくなってしまいます。
古いInternet Explorerでもレスポンシブ対応させたい場合は「Respond.js」などを合わさせて導入すると「max-width」や「min-width」などの表示を補うことができます。
HTMLサンプルページ
公式サイトでサンプルページのソースが公開されています。一般的なサイトのレイアウトをはじめ、画像のスライド、ナビゲーションなどサンプルソースを組み合わせるだけでもサイトを構築することができます。
グリッドレイアウト
『Bootstrap』のバージョン3からは、グリッドによってレスポンシブサイトのレイアウトを作成することができます。
| Extra small devices 携帯電話 |
Small devices タブレット |
Medium devices デスクトップPC |
Large devices デスクトップPC |
|
|---|---|---|---|---|
| ブラウザ表示幅 | 768px未満 | 768px～991px | 992px～1199px | 1200px以上 |
container最大幅 |
auto | 750px | 970px | 1170px |
| Class名称 | col-xs-** |
col-sm-** |
col-md-** |
col-lg-** |
| カラム数 | 12 | |||
| カラム最大幅 | auto | 60px | 78px | 95px |
| カラム余白 | 30（左右に15pxの余白） | |||
| 入れ子表示 | 有効 | |||
| オフセット表示 | 無効 | 有効 | ||
| カラム表示順 | 無効 | 有効 | ||
クラス指定で端末毎に対応する「col-xs-**」、「col-sm-**」、「col-md-**」、「col-lg-**」をそれぞれ振り分けます。「**」の値が合計で「12」になるように設定をします。
下記のサンプルの場合、768px未満は「1コラム」、768px～991pxは「3コラム」、992px～1199pxは「4コラム」、1200px以上は「6コラム」となります。
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">コラム</div>
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">コラム</div>
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">コラム</div>
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">コラム</div>
</div>
</div>
コーディング
グリッドシステムを基本レイアウトとして、「Typography」、「Tables」、「Buttons」、「Images」、「icon」などの基本的なコードが定義済みになっていますので、定義済みの内容を利用すれば制作も素早く進みそうです。
