ASP.NET MVC5で導入されたBootstrapを理解しよう

ASP.NET MVC5＋Bootstrapでレスポンシブでリッチなサイトを構築 第1回

　この記事では、ASP.NET MVC5のひな形ページで使用されているBootstrapというフレームワークについて紹介します。Bootstrapは、CSS3ベースのオープンソースで、デザインが苦手なエンジニアでも見栄えの良いページを作ることができる魅力的なフレームワークです。

　前編にあたる本稿では、「Bootstrapの特長」「ASP.NET MVCで生成されるひな形」「Bootstrapの仕組みとUIコンポーネントの理解」について紹介します。Bootstrapを学ぶことで、よりリッチなサイトを簡単に作れるようになります。

Bootstrapの特長

　Bootstrapは、元TwitterのMark Otto氏とJacob Thornton氏らによって開発されているオープンソース（MITライセンス）です。HTML5、CSS3、jQueryといった技術をベースとしており、最近ではフラットデザイン、モバイル環境での操作性向上などを取り入れ注目を集めています。Bootstrapの大きな特長は次の3つです。

1. レスポンシブデザイン

　Bootstrapは、レスポンシブデザインに対応しています。レスポンシブデザインとは、Webデザインの手法で、単一のHTMLファイルで複数デバイスの表示に対応することです。表示しているデバイスの種類やサイズに応じて表示を最適化することができます。

　さらに、Bootstrapは、対応ブラウザの種類が多く、Chrome（Mac, Windows, iOS, Android）、Safari（Mac, iOS）、Firefox（Mac, Windows）、Internet Explorer（8以上: IE8ではrespond.jsが必要）、Opera（Mac, Windows）で利用でき、ブラウザ間の違いを吸収してページを表示できる点も魅力です。

2. 多くの機能を備えたコンポーネント

　基本的なHTMLのタグだけではなく、ドロップダウン、タブ、ナビゲーション、パンくず、ページング、ラベル、サムネイル、プログレスバーといったWebサイトを作るために役立つコンポーネントが標準で用意されています。さらに静的なデザインだけではなく、JavaScript（jQuery）を用いることでモーダルウィンドウや、カルーセルといった視覚効果も見せることもできます。

3. 多様なテーマとデザインが公開

　Bootstrapでは、HTMLのタグを指定するだけで、ページの見栄えを設定することができます。デザインが苦手な開発者にとっては大変有難い機能と言えます。さらに、Bootstrapに対応したテーマが数多く公開されています。もちろんカスタマイズも行うことも可能です。

Bootstrapの入手方法

　Bootstrapは公式サイトで配布されており、執筆時点での最新バージョンは3.1.1です。配布ファイル「bootstrap-3.1.1-dist」を入手して、解凍すると次のフォルダ構成になっています。

Bootstrapのフォルダ構造

　CSSにはデザインが、JavaScriptには動的なコンポーネントが、Fontにはグリフアイコン（絵文字アイコン）が含まれています。ASP.NETで開発する場合は、NuGetを利用できるため、あえて公式サイトからダウンロードする必要はないかもしれませんが、Bootstrapの中身がCSSとJavaScriptとFontから成り立っていることは理解しておくと良いでしょう。

　なお「bootstrap-theme.css」はフラットデザインではない立体的なデザイン用ファイルで、「bootstrap.css.map」はCSSの生成元を示すマッピングファイルです。これらは、ASP.NETから生成したひな形には含まれませんが、NuGetで取得した場合は含まれます。