SHOEISHA iD

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

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

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

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

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

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

 この記事では、ASP.NET MVC5のひな形ページで使用されているBootstrapについて紹介します。Bootstrapは、CSSとJavaScriptをベースとしたオープンソースで、デザインが得意ではないエンジニアでも見栄えの良いページを作ることができる魅力的なライブラリです。初回はBootstrapの概要について、前回はグリッドシステムについて紹介してきました。最終回にあたる本稿ではフォームコンポーネントとデザインの変更について紹介していきます。

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

フォームコンポーネント

 ここでは、データ登録などで使用することが多いフォームの機能についてご紹介します。ひな形で生成されるアカウント登録ページを例に説明します。

アカウント登録画面(PC)
アカウント登録画面(PC)

 まずは生成されるHTMLを見てみましょう。

アカウント登録ページで生成されたHTML(Form部のみ抜粋)
<!-- フォーム部分 -->
<form class="form-horizontal" role="form" action="/Account/Register" method="post" novalidate="novalidate">
  <input name="__RequestVerificationToken" type="hidden" value="prXfel...">

  <h4>新しいアカウントを作成します。</h4>
  <hr>

  <div class="validation-summary-valid" data-valmsg-summary="true">
    <ul>
      <li style="display: none;"></li>
    </ul>
  </div>

  <!-- (1)ユーザー名 -->
  <div class="form-group">
    <label class="col-md-2 control-label" for="UserName">ユーザー名</label>

    <div class="col-md-10">
      <input name="UserName"
         class="form-control valid"
         id="UserName"
         type="text"
         value=""
         data-val-required="ユーザー名 フィールドが必要です。"
         data-val="true">
    </div>
  </div>

  <!-- (2)パスワード -->
  <div class="form-group">
    <label class="col-md-2 control-label" for="Password">パスワード</label>

    <div class="col-md-10">
      <input name="Password"
         class="form-control
         input-validation-error"
         id="Password"
         type="password"
         data-val-required="パスワード フィールドが必要です。"
         data-val="true"
         data-val-length-min="6"
         data-val-length-max="100"
         data-val-length="パスワード の長さは、6 文字以上である必要があります。">
    </div>
  </div>

  <!-- (3)パスワードの確認 -->
  <div class="form-group">
    <label class="col-md-2 control-label" for="ConfirmPassword">パスワードの確認入力</label>

    <div class="col-md-10">
      <input name="ConfirmPassword"
         class="form-control input-validation-error"
         id="ConfirmPassword"
         type="password"
         data-val="true"
         data-val-equalto-other="*.Password"
         data-val-equalto="'パスワードの確認入力' と 'パスワード' が一致しません。">
    </div>

  </div>

  <!-- (4)登録ボタン -->
  <div class="form-group">
    <div class="col-md-offset-2 col-md-10">
      <input class="btn btn-default" type="submit" value="登録">
    </div>
  </div>

</form>

 Bootstrapのフォームでは、クラス名にform-groupと記載することで、ラベルとテキストボックスの見ばえを整頓できます。テキストボックスにform-controlと記載すると、入力枠が丸みを帯び、カーソルが移動した時に青色でフォーカス表示されます。

 フォームでは、下表のクラス名を設定できます。

フォーム系で指定できるBootstrapのクラス例
要素例 クラス名 説明
form form-group ラベルとテキストを整列
form form-inline 横に並べて(インライン)整列
form form-horizontal ラベルとテキストを水平に並べて整列
input/textarea/select form-control 入力コントロールの見栄え改善
input/textarea/select input-xs サイズ極小
input/textarea/select input-sm サイズ小
input/textarea/select input-md サイズ中
input/textarea/select input-lg サイズ大
div has-success 正常時
div has-warning 警告あり
div has-error エラーあり
label control-label 説明用ラベルを整列

 フォームの設定項目の詳細は公式サイトの説明をご覧ください。

次のページ
フォームを変更

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
ASP.NET MVC5+Bootstrapでレスポンシブでリッチなサイトを構築連載記事一覧

もっと読む

この記事の著者

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

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング