Boost」など、さまざまなカンファレンスを企画・運営しています。BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。MVC5のひな形ページで使用されているフレームワーク「Bootstrap」について紹介します。Bootstrapは、CSSとJavaScriptをベースとしたオープンソースで、デザインが得意ではないエンジニアでも見栄えの良いページを作ることができるという、とても魅力的なライブラリです。最後に参考資料2回目となる本稿では、Bootstrapバージョン3の特長でもある「グリッドシステム」と、「ナビゲーション」などのコンポーネントについて解説していきます。グリッドシステムとは前回解説したように、Bootstrapはレスポンシブデザインに対応したフレームワークです。本稿では、その仕組みであるグリッドシステムについて解説していきます。グリッドシステム(グリッドレイアウト)は、ページの一面を格子状に区切って、文章/画像/余白等を配置していくデザイン手法です。Bootstrapのグリッドシステムでは、ページの列を12分割して部品を配置していきます。Bootstrapのグリッドの仕組みなお、12分割しかできないわけではなく、列の中に行を入れることができる(分割済みの列をさらに分割できる)ため、柔軟にレイアウトすることができます。グリッドシステムのHTML記述方法それでは、HTMLを見ていきましょう。グリッドシステムでは、divのクラス名に行(row)を指定し、その中に列(col)を指定します。class="col-md-4">の部分で、ここでは「4:4:4」の割合で3分割しています。トップ画面のグリッドレイアウト(均等に3分割:赤色部分)試しに割合を「8:3:1」に変更してみましょう。指定の仕方は、「col-md-数字」の数字部分を変更します。数字の部分には1から12までの数字を指定できます。</div></div>トップ画面が変更された(左から8対3対1に:開発者ツールで確認)各領域の幅が、左から8対3対1になったことがわかります。このようにグリッドシステムではクラス名「.col-md-1」~「.col-md-12」によって相対的にレイアウトを指定できます。