【HTML】Bootstrap フレームワークを使い作成するレスポンシブサイト

bootstrap-responsive-site-design

Twitterのデザイナーや開発者が作成した『Bootstrap』は、フロントエンドのフレームワークとオープンソースプロジェクトです。『Bootstrap』は、CSS、JS、およびフォントが基本セットになっています。HTMLのテンプレートソースを組み合わせて、レスポンシブ対応のサイト制作が可能です。

テンプレートデータのダウンロード

『Bootstrap』は、こちらの公式サイトからダウンロードができます。基本セットの他に、ドキュメント、HTMLのサンプルソースなどが公開されています。

Bootstrap

ライセンスについて

「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 Examples

グリッドレイアウト

『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」などの基本的なコードが定義済みになっていますので、定義済みの内容を利用すれば制作も素早く進みそうです。