ASP.NETに採用されたBootstrapのグリッドシステム&ナビゲーション

CodeZine / 2014年6月10日 14時0分

スマホサイズの場合のナビゲーションメニュー(変更後)

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

 2回目となる本稿では、Bootstrapバージョン3の特長でもある「グリッドシステム」と、「ナビゲーション」などのコンポーネントについて解説していきます。

■グリッドシステムとは

 前回解説したように、Bootstrapはレスポンシブデザインに対応したフレームワークです。本稿では、その仕組みであるグリッドシステムについて解説していきます。

 グリッドシステム(グリッドレイアウト)は、ページの一面を格子状に区切って、文章/画像/余白等を配置していくデザイン手法です。Bootstrapのグリッドシステムでは、ページの列を12分割して部品を配置していきます。

Bootstrapのグリッドの仕組み


 なお、12分割しかできないわけではなく、列の中に行を入れることができる(分割済みの列をさらに分割できる)ため、柔軟にレイアウトすることができます。

●グリッドシステムのHTML記述方法

 それでは、HTMLを見ていきましょう。グリッドシステムでは、divのクラス名に行(row)を指定し、その中に列(col)を指定します。

ボックスを三等分しているHTML(index.cshtml)
<!-- 行の指定 --> <div class="row"> <!-- 1つ目(4) --> <div class="col-md-4"> <h2>Getting started</h2> <p> ASP.NET MVC gives you a powerful ... </p> <p><a class="btn btn-default" href="http://...">Learn more ...</a></p> </div> <!-- 2つ目(4) --> <div class="col-md-4"> <h2>Get more libraries</h2> <p>NuGet is ...</p> <p><a class="btn btn-default" href="http://...">Learn more ...</a></p> </div> <!-- 3つ目(4) --> <div class="col-md-4"> <h2>Web Hosting</h2> <p>You can easily find ...</p> <p><a class="btn btn-default" href="http://...">Learn more ...</a></p> </div> </div>
 レイアウトをコントロールしているのは、<div class="col-md-4">の部分で、ここでは「4:4:4」の割合で3分割しています。

トップ画面のグリッドレイアウト(均等に3分割:赤色部分)


 試しに割合を「8:3:1」に変更してみましょう。指定の仕方は、「col-md-数字」の数字部分を変更します。数字の部分には1から12までの数字を指定できます。

レイアウトの比率を8対3対1に変更(index.cshtml)
<!-- 行の指定 --> <div class="row"> <!-- 1つ目(8) --> <div class="col-md-8"> <h2>Getting started</h2> (中略) </div> <!-- 2つ目(3) --> <div class="col-md-3"> <h2>Get more libraries</h2> (中略) </div> <!-- 3つ目(1) --> <div class="col-md-1"> <h2>Web Hosting</h2> (中略) </div> </div>
トップ画面が変更された(左から8対3対1に:開発者ツールで確認)


 各領域の幅が、左から8対3対1になったことがわかります。このようにグリッドシステムではクラス名「.col-md-1」~「.col-md-12」によって相対的にレイアウトを指定できます。



■関連記事

■記事全文へ
CodeZine

トピックスRSS

ランキング