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

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

フォームを変更

　フォームを少し変更してみましょう。まず、ユーザー名を入力するテキストのクラス名に「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のために作られているフリーのフォント群も存在しています。