SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

 前編にあたる本稿では、「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で取得した場合は含まれます。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
Visual StudioでASP.NET MVC5のプロジェクトを作成

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ASP.NET MVC5+Bootstrapでレスポンシブでリッチなサイトを構築連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 青木 淳夫(アオキ アツオ)

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7758 2014/05/22 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング