Bootstrapで業務Webアプリのカッコいい入力フォームを作る

業務Webアプリケーションエンジニアのための「Bootstrap」入門 第2回

　本連載では、サーバーサイドJavaやPHPを使って業務アプリケーション開発を行う若手エンジニアのために、「Bootstrap」を使ってカッコいい画面を作成する方法をご紹介します。前回は、CSSフレームワークであるBootstrapの概要についてご紹介しました。また、WebアプリでさまざまなUIコントロールを配置するためのグリッドシステムについて説明しました。今回は、業務アプリケーションに欠かせない、データ登録画面や一覧表示画面など使う入力フォームやボタン／テーブルなどのUIコントロールについて説明します。

対象読者

　本記事は、次の方を対象にしています。

• HTML5／CSS／JavaScriptを使ってWebアプリケーションの画面作成ができる方
• デザインに自信のない方

ボタン

　Webアプリでは、さまざまな処理を行うのでUIとしてボタンを配置しますが、このボタンの押しやすさや分かりやすさは、アプリの操作性に大きくかかわってきます。ここでは、Bootstrapのボタンを利用する方法について説明します。

スタイル

　Bootstrapのボタンはbutton要素／a要素／input要素のclass属性に"btn"を指定すると、スタイル指定ができます。

リスト1　ボタンの指定（button.htmlの抜粋）

<button type="button" class="btn btn-default">button要素</button>
<a href="#" class="btn btn-default">a要素</a>
<input type="button" class="btn btn-default" value="input要素">

ボタンの表示例

　警告や注意などボタンの用途によって、デザインを変えるには、class属性に以下の属性を指定します。class属性は複数の値を指定できます。複数の値を指定するときは、値をスペースで区切ります。

ボタンのスタイル

用途	class属性の指定	色
デフォルト	btn-default	白
主要	btn-primary	青
成功	btn-success"	緑
情報	btn-info	水色
注意	btn-warning	オレンジ
警告	btn-danger	赤
リンク	btn-link	―

リスト2　ボタンのスタイル指定（button.htmlの抜粋）

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

ボタンスタイルの例

サイズ

　ボタンのサイズを指定するには、class属性にボタンサイズを指定します。指定できるサイズは次のとおりです。

ボタンのサイズ

サイズ	class属性の指定
大きい	btn-lg
デフォルト	なし
小さい	btn-sm
とても小さい	btn-xs

リスト3　ボタンのサイズ指定（button.htmlの抜粋）

<button type="button" class="btn btn-lg">大きなボタン</button>
<button type="button" class="btn">デフォルトボタン</button>
<button type="button" class="btn btn-sm">小さいボタン</button>
<button type="button" class="btn btn-xs">とても小さいボタン</button>

ボタンサイズの例

　サイズを固定するには、class属性に"btn-block"を指定します。サイズは、親コントロールの幅に応じて設定されます。

リスト4　ボタン幅の固定（index.htmlの抜粋）

<button type="button" class="btn btn-block">サイズ指定</button>
<hr />
<div class="row">
    <div class="col-xs-8">
<button type="button" class="btn btn-block">ボタン1</button></div>
    <div class="col-xs-4">
<button type="button" class="btn btn-block">ボタン2</button></div>
</div>

ボタン幅固定の例

有効化／無効化

　ボタンを選択できる状態（有効化）にするには、class属性に"active"を指定します。また、ボタンを選択できない状態（無効化）にするには、disabled属性を指定します。無効化すると、ボタンの表示色が淡い色に変わります。

リスト5　ボタンの有効化／無効化（button.htmlの抜粋）

<button type="button" class="btn active">有効なボタン</button>
<button type="button" class="btn" disabled="disabled">無効なボタン</button>

ボタンの有効化／無効化の例

グループ化

　関連するボタンをまとめてグループするには、class属性に"btn-group"を指定したdiv要素でボタンをまとめます。ボタンの隙間がなくなり、端のボタンのみ角が丸くなります。

リスト6　ボタンのグループ化（button.htmlの抜粋）

<div class="btn-group">
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-info">Info</button>
</div>

ボタンのグループ化の例

アイコン付ボタン

　アプリの操作に関する説明を文章で表示するより、直感的に分かるアイコンで表示すると分かりやすいボタンが作成できます。ボタンにアイコンを挿入するには、span要素のclass属性に"glyphicon"を指定します。使用できるグリフアイコンの一覧は以下のサイトにあります。

• Components ・ Bootstrap

　例えば、ホームアイコンを表示するときは、class属性に"glyphicon-home"を指定します。

リスト7　ボタンのグループ化（button.htmlの抜粋）

<button type="button" class="btn">ホーム
    <span class="glyphicon glyphicon-home"></span>
</button>
<button type="button" class="btn">ダウンロード
    <span class="glyphicon glyphicon-download"></span>
</button>

アイコン付きボタンの例