Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加

 この記事では、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のフォルダ構造
Bootstrapのフォルダ構造

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

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


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 青木 淳夫 (株式会社ネクストスケープ)(アオキ アツオ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:ASP.NET MVC5+Bootstrapでレスポンシブでリッチなサイトを構築
All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5