SHOEISHA iD

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

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

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

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

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


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

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

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

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

グリッドシステムとは

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

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

Bootstrapのグリッドの仕組み
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」によって相対的にレイアウトを指定できます。

次のページ
デバイス別の設定方法

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

  • 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/7802 2014/06/26 19:37

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング