CodeZine(コードジン)

特集ページ一覧

ASP.NETに採用されたBootstrapでCSSデザイン変更

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2014/07/08 14:00
目次

フォームを変更

 フォームを少し変更してみましょう。まず、ユーザー名を入力するテキストのクラス名に「input-lg」を指定して大きくしてみましょう。あわせて登録ボタンにアイコンを追加してみます。

修正後のアカウント登録ページ(views\account\register.cshtml抜粋)
<!-- フォーム部分 -->
@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
  @Html.AntiForgeryToken()
  <h4>新しいアカウントを作成します。</h4>
  <hr />
  @Html.ValidationSummary()

  <!-- (1)ユーザー名 -->
  <div class="form-group">
    @Html.LabelFor(m => m.UserName, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
      <!-- ★入力ボックスを大きくするように変更 -->
      @Html.TextBoxFor(m => m.UserName, new { @class = "form-control input-lg" })
    </div>
  </div>

  <!-- (2)パスワード -->
  <div class="form-group">
    @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
      @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
    </div>
  </div>

  <!-- (3)パスワードの確認 -->
  <div class="form-group">
    @Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
      @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })
    </div>
  </div>

  <!-- (4)登録ボタン -->
  <div class="form-group">
    <div class="col-md-offset-2 col-md-10">
      <!-- ★inputからbuttonに変更し、アイコンを表示 -->
      <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-user"></span> 登録
      </button>
    </div>
  </div>

}
変更後の入力フォーム
変更後の入力フォーム

 ブラウザで表示してみると入力ボックスが大きくなり、ボタンにアイコンが追加されていることが分かります。

Bootstrapでのアイコンの使用方法

 アイコンの使用方法は簡単で、<span class="glyphicon glyphicon-アイコン名">と使いたいアイコンの名前をspanタグで指定するだけです。Bootstrapでは160種類にわたるアイコンを無料で使用できますので、直観的なUIを提供したいときには使用を検討してみると良いでしょう。

アイコンの一例
アイコンの一例

Bootstrapのアイコンの仕組み

 Bootstrapのアイコンは、GLYPHICONSが提供するWebフォントを使用しています。Webフォントを利用するメリットは、従来のCSSスプライトや個別ファイルで実装するよりも管理やコーディングが簡単であることに加え、大きいサイズで表示してもデザインが崩れにくいメリットもあります。

 Bootstrapでは、以下のCSSにあるように「woff(Web Open Font Format:今後主流のフォント)」「ttf(TrueTypeFont:一般的なフォント)」「eot(Embedded OpenType:IE8用フォント)」「svg(Scalable Vector Graphics:iOS Safari向けなど)」の4種類のフォントを読み込むことで、マルチデバイスに対応しています。

BootstrapのCSSでのフォント指定(Bootstrap.css抜粋)
@font-face {
  font-family: 'Glyphicons Halflings';
  src: 
   url(../fonts/glyphicons-halflings-regular.eot);
  src: 
   url(../fonts/glyphicons-halflings-regular.eot?#iefix)
      format('embedded-opentype'),
   url(../fonts/glyphicons-halflings-regular.woff)
      format('woff'),
   url(../fonts/glyphicons-halflings-regular.ttf)
      format('truetype'),
   url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular)
      format('svg');
}

 なお、Font AwesomeというBootstrapのために作られているフリーのフォント群も存在しています。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

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

著者プロフィール

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

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

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

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5