書籍転載：ASP.NET MVC 5 実践プログラミング
開発者に人気のCSSフレームワーク「Bootstrap」入門
「レスポンシブデザインに対応したグリッドシステム」などの特長で、特に開発者に人気のCSSフレームワーク「Bootstrap」について解説する。書籍転載の27本目（応用編「8-2-5」）。転載は今回で終了。
書籍転載について
本コーナーは、秀和システム発行の書籍『ASP.NET MVC 5 実践プログラミング』の中から、特にBuild Insiderの読者に有用だと考えられる項目を編集部が選び、同社の許可を得て転載したものです。
『ASP.NET MVC 5 実践プログラミング』の詳細や購入は秀和システムのサイトや目次ページをご覧ください。
ご注意
本記事は、書籍の内容を改変することなく、そのまま転載したものです。このため用字用語の統一ルールなどはBuild Insiderのそれとは一致しません。あらかじめご了承ください。
8-2-5 Bootstrap
Bootstrapは、Mark Otto／Jacob Thornton氏らによって開発されたCSSフレームワーク。最初の正式版が2011年リリースと比較的新しいライブラリですが、以下のような特長から開発者の耳目を集め、現在では広くさまざまなサイトで利用されるに至っています。
- class属性を付与するだけで、見栄えのするデザインを作成できる（スタイルシートの理解は不要）
- Bootstrapに対応したテーマを豊富に提供（自作も可能）
- グリッドレイアウト、タブ、ナビゲーションバー、パンくずリスト、ドロップダウンメニューなどのコンポーネントを標準で提供
- レスポンシブデザインに対応。単一のソースで、デバイスの種類／画面サイズに応じた最適な表示が可能
- Internet Explorer*25、Chrome、Firefox、Safari、Operaなど、主要なブラウザーに対応
- *25 ただし、IE 8では、レスポンシブデザインに対応するためにrespond.jsが必要です。
ASP.NETでも、Visual Studio 2013からは標準でBootstrapを採用しており、特別な準備などなく利用できます*26。プロジェクトデフォルトで用意されるレイアウトやScaffolding機能で生成されるビューもBootstrapが前提となっており、コードを読み解くという意味でもBootstrapの基本的な構文は知っておくのが望ましいでしょう。
- *26 ただし、標準で組み込まれているバージョンは既に古くなっているので、パッケージマネージャーコンソールからUpdate-Package「bootstrap」コマンドで最新版を入手することをお勧めします。
以下でも、標準のレイアウト／ビューを前提に、Bootstrapの基本を理解していきます。
【Note】Bootstrap関連のファイル
Bootstrap関連のファイルは、以下のとおりです。/fontsフォルダーに含まれるのは、グリフアイコン（絵文字）です。パッケージマネージャーコンソール（NuGet）でインストールする限り、ほとんど意識することはありませんが、BootstrapはJavaScript／スタイルシート／フォントで構成されていることを理解しておいてください。
Bootstrapを有効化
Bootstrapを有効にしているのは、レイアウトの以下の部分です。
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - マイ ASP.NET アプリケーション </title>
<!--Bootstrap 関連のスタイルシートをインポート -->
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
... 中略 ...
@Scripts.Render("~/bundles/jquery")
<!--Bootstrap 関連の JavaScript ライブラリをインポート -->
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
|
それぞれ太字の部分で、Bootstrap動作のためのスタイルシート／JavaScriptをインポートしています。また、Bootstrapは内部的な動作の制御にjQueryを利用していますので、jQuery（~/bundles/jquery）のインポートも必要です。
これらバンドル情報を定義しているのは、以下の部分です。バンドル定義に関する詳細は、8-1-1項（※転載対象外）も参照してください。
|
public static void RegisterBundles(BundleCollection bundles)
{
... 中略 ...
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
... 中略 ...
}
|
bootstrap.jsはBootstrap本体、そして、respond.jsはInternet Explorer 6～8でメディアクエリー*27を有効にするためのライブラリです。Bootstrapのレスポンシブデザインを利用する際に必要となります。
- *27 メディアクエリーとは、デバイスの画面サイズに応じてスタイルを切り替える、CSS3の新機能です。
スタイルシートの方は、bootstrap.cssがBootstrap標準のスタイルシート、site.cssはASP.NETプロジェクト固有のスタイルシートです。
レスポンシブデザインに対応したグリッドシステム
本項冒頭でも触れたように、Bootstrapではレスポンシブデザインに対応しており、デバイスの表示幅に応じて、適切なレイアウトを選択します。そして、これを実現しているのがグリッドシステムです。
グリッドシステムとは、ページをグリッド（格子状）に区切ってレイアウトするデザイン手法。Bootstrapでは、横列を12分割したものを基準にレイアウトするのが基本です。具体的には、サンプルアプリケーションのトップページを確認してみましょう。
|
<div class="row">
<div class="col-md-4">
<h2>Getting started</h2>
... 中略 ...
</div>
<div class="col-md-4">
<h2>Get more libraries</h2>
... 中略 ...
</div>
<div class="col-md-4">
<h2>Web Hosting</h2>
... 中略 ...
</div>
</div>
|
「col-md-xx」のxxが横幅12列のうち、何列分を利用するかを表します*28。この例であれば、それぞれ4ですので、4：4：4＝1：1：1で等分に領域を分割することを意味します。また、行全体は<div class="row">要素で括ってください。
- *28 よって、指定できる値は1～12の間です。
試しに、xxの値を変えて、幅の割合も変化することを確認してみましょう。
いずれの設定の場合も、画面幅（ブラウザーのウィンドウ幅）が一定の幅より狭くなると、グリッドレイアウトが解除されて、ブロックが縦並びに表示されることを確認してください。これがデバイス幅に応じてレイアウトを調整する「レスポンシブデザイン」の意味です。
グリッドレイアウトのデバイス別設定
「col-md-xx」の「md」の部分は、デバイスの表示幅を意味します。たとえば「colmd-4」であれば「992px以上の幅を持つデバイスで4列分の幅を利用する」という意味になります。
| デバイス | 表示幅 | class属性 | コンテナの最大幅 | 列の最大幅 |
|---|---|---|---|---|
| デスクトップ（大） | 1200px以上 | col-lg-xx | 1170px | 95px |
| デスクトップ | 992px以上 | col-md-xx | 970px | 78px |
| タブレット | 768px以上 | col-sm-xx | 750px | 60px |
| スマートフォン | 768px未満 | col-xs-xx | 自動 | 自動 |
これらを組み合わせることで、デバイスに応じたレイアウトを指定できます。たとえば、先ほどのHome/Index.cshtmlを以下のように書き換えてみましょう。
|
<div class="row">
<div class="col-md-4 col-sm-6">
<h2>Getting started</h2>
... 中略 ...
</div>
<div class="col-md-4 col-sm-6">
<h2>Get more libraries</h2>
... 中略 ...
</div>
<div class="col-md-4 col-sm-12">
<h2>Web Hosting</h2>
... 中略 ...
</div>
</div>
|
デスクトップ（md）の設定に加えて、タブレット（sm）での分割設定を加えているわけです。これによって、
- 表示幅が992px以上の場合は、1：1：1（＝4：4：4）で表示
- 表示幅が768～992pxの場合は2行で表示（1、2番目の<div>要素を1：1（＝6：6）、3番目の<div>要素を横幅いっぱい（12））
- 表示幅が768px未満の場合は、すべてのブロックを縦並び
のようにレイアウトします。「col-sm-xx」xxの合計が12を超える場合、グリッのドシステムは残りのブロックを縦並びにレイアウトする点に注意してください。
もちろん、lg、xsでの設定を更に加えても構いません。
入力フォームのレイアウト
Scaffolding機能（3-4-1項＝※転載対象外）で自動生成されたMembers/Create.cshtmlを例に、Bootstrapによる入力フォームのレイアウトについて見ていきます。以下は、Create.cshtmlを実行した時に出力されたHTMLのコードです。
|
1
2
1
4
5
2
4
8
3
10
11
12
13
14
15
16
5
18
19
20
21
|
<form action="/Members/Create" method="post">
<input name="__RequestVerificationToken" type="hidden" value="fvlmK..." />
<div class="form-horizontal">
<h4>Member</h4>
<hr />
<div class="form-group">
<label class="control-label col-md-2" for="Name"> 氏名 </label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="Name" name= "Name" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="Name" data-valmsg-replace="true"></span>
</div>
</div>
... 中略 ...
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
</form>
|
<div class="form-horizontal">要素（1）は、配下のラベルと入力要素を水平にレイアウトしなさいという意味です。これによって、<div class="form-group">要素（2）がグリッド行として振る舞うようになります（「class="row"」は不要です）。
<input>要素や<textarea>／<select>要素の「class="form-control"」属性は、入力要素に角を丸め、フォーカスを移動した時に要素を青くするなど、見た目を整えるためのものです（3）。その他、以下のようなinput-lg（大）、input-md（中）、input-sm（小）、input-xs（極小）などのスタイルクラスを追加することで、入力要素のサイズを変更することもできます。
<label>要素の「class="control-label"」属性はラベルを整形するためのスタイルクラスです（4）。デフォルトの状態ではマージン程度の位置調整ですが、コンテナー要素（<div class="form-group">要素）に対して、has-success（正常）／haswarning（警告）／has-error（エラー）などのスタイルクラスを付与した時には、入力要素共々、カラーリングしてくれます。
ボタンにはclass="btn btn-xxxxx"属性を付与することで、スタイルを指定できます（5）。btn-defaultはデフォルトのボタンを表しますが、その他、以下のようなスタイルを指定できます。
| クラス名 | 概要 |
|---|---|
| btn-default | 標準ボタン（白色） |
| btn-primary | 主要なボタン（青色） |
| btn-success | 成功ボタン（緑色） |
| btn-info | 通知ボタン（水色） |
| btn-warning | 注意ボタン（オレンジ色） |
| btn-danger | 警告ボタン（赤色） |
| btn-link | リンク |
| btn-block | ブロック要素のボタン |
また、Scaffolding機能で生成されたマークアップには含まれていませんが、ボタンにはアイコンを付与することもできます。<button>要素の配下に、<span class="glyphicon glyphicon-アイコン名"></span>を配置してください。
|
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-pencil"></span> 送信
</button>
|
利用できるアイコンの種類は、「Available glyphs」を参照してください。
テーブルレイアウト
表組み（テーブル）をレイアウトするには、<table>要素に対してclass="table"属性を付与します。これで水平方向の罫線だけが描画された表組みを実装できます。
|
<table class="table">
... 中略 ...
</table>
|
更に、table-xxxxxスタイルを付与することで、さまざまなテーブルスタイルを適用できます。
また、<tr>／<td>要素に対して、以下のclass属性を付与することで、警告、アクティブなどの状態を視覚的に識別しやすくなります。
ナビゲーション
ナビゲーションとは、ページ上部に表示されている共通メニューのことです。プロジェクト標準のレイアウトでは、以下のように定義されています。以下のリストは、最終的な出力HTMLで示します。
|
1
2
2
4
5
6
7
8
9
3
11
5
13
14
15
16
17
18
19
20
21
22
23
24
|
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"> アプリケーション名 </a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/"> ホーム </a></li>
<li><a href="/Home/About"> 詳細 </a></li>
<li><a href="/Home/Contact"> 連絡先 </a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="/Account/Register" id="registerLink"> 登録 </a></li>
<li><a href="/Account/Login" id="loginLink"> ログイン </a></li>
</ul>
</div>
</div>
</div>
|
画面の表示幅によっては、メニューが
配下にまとめられ、クリックすることで、個別のメニュー項目が展開されるようになります。
まず、1でナビゲーション領域を定義しています。
navbar-inverseは、ナビゲーションバーの背景／文字色を反転させることを意味します。デフォルトのスタイルを適用するならば、代わりにnavbar-defaultを利用してください。
navbar-fixed-topは、ナビゲーションバーをページ上部に固定させるという意味です。navbar-static-top（固定を解除）、navbar-fixed-bottom（ページ下部に固定）なども指定できます。
2は、ナビゲーションのヘッダー領域を表し、navbar-brand（アプリケーションタイトル3）と、navbar-toggle（折り畳みボタン4）のコンテナーとなります。
そして、<div class="navbar-collapse collapse">要素（5）が折り畳み可能なメニューコンテンツを表します。メニュー項目（リンク）は、<ul class="nav navbarnav">要素で表してください。
navbar-rightスタイルクラスで右寄せに設定することも可能です。
以上、標準で用意されたコードに即してですが、Bootstrapの基本的な用法を学んでみました。その他、個別のスタイル／ウィジェットを利用する方法については、本家サイトのドキュメントも合わせて参照してください。
【Note】Bootstrapのフリーテーマ
Bootswatchは、Bootstrapで利用できるテーマを集めたサイトです。執筆時点では15のテーマが用意されており、これらを利用することで、自分で一からスタイルシートを記述しなくても、完成度の高いデザインをアプリケーションに適用できます。プログラミングはともかく、デザインの設計はちょっと苦手…という方は、このような無料のテーマを導入してみるのも良いのではないでしょうか。
Bootswatchのテーマは、テーマのプレビューページからBootstrap.cssをダウンロードして、これでもってプロジェクトの同名のファイルを上書きするだけです。
※以下では、本稿の前後を合わせて5回分（第23回～第27回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
23. LINQ：特定範囲のデータだけを取得する - Skip／Takeメソッド［C#］
指定された件数だけデータを読み飛ばすためのSkipメソッドと、指定された件数のデータだけを取得するためのTakeメソッドについて解説。書籍転載の23本目（基礎編「5-3-6」）。
24. LINQ：先頭のデータを取得する - Firstメソッド［C#］
クエリ後の結果セットから先頭のデータを取得するためのFirstメソッドについて解説する。書籍転載の24本目（基礎編「5-3-7」）。
25. LINQ：データをグループ化する - group句［C#］
特定のキー列でデータをグループ化するためのgroup句／GroupByメソッドについて解説する。書籍転載の25本目（基礎編「5-3-8」）。
26. LINQ：エンティティ同士を結合する - join句［C#］
特定のキー列でエンティティ同士を結合し、複数のエンティティをまとめて取得するためのjoin句／Joinメソッドについて解説する。書籍転載の26本目（基礎編「5-3-9」）。
27. 【現在、表示中】≫ 開発者に人気のCSSフレームワーク「Bootstrap」入門
「レスポンシブデザインに対応したグリッドシステム」などの特長で、特に開発者に人気のCSSフレームワーク「Bootstrap」について解説する。書籍転載の27本目（応用編「8-2-5」）。転載は今回で終了。
