前回は、業務アプリケーションに欠かせない、データ登録画面や一覧表示画面など使う入力フォームやボタン／テーブルなどのUIコントロールについて説明しました。
今回は、Webアプリの中で表示する情報やデータを効果的に表示するための文字／テーブル／ページネーション／アラートなどのUIコントロールについて説明します。
対象読者
本記事は、次の方を対象にしています。
- HTML5／CSS／JavaScriptを使ってWebアプリケーションの画面作成ができる方
- デザインに自信のない方
文字情報
Webアプリでは、さまざまなデータを文字で表示しますが、特に業務系アプリケーションでは、情報量が多くなる場合もあります。アプリの利用者が、Webアプリに表示された情報から、内容はもちろん重要度や緊急度などを直感的に判断できれば、分かりやすいアプリになります。ここでは、Bootstrapで文字情報を効果的に表示する方法について説明します。
Bootstrapは2014年6月に3.2.0がリリースされました。主な変更点は、次のとおりです。
- 動画の埋め込み： Youtubeなどの動画を埋め込むためのコントロールが追加されました。アスペクト比を指定でき、デバイス幅に応じてレスポンシブ表示ができます。
- レスポンシブユーティリティの追加： デバイス幅に応じた表示/非表示の設定で縦並び/横並びの指定ができるようになりました。
その他にも、大文字から小文字/小文字から大文字などの文字の変換や、読み取り専用コントロールの指定なども追加されています。
本記事以降の連載では、最新バージョンである3.2.0で説明を行います。
トップページの見出し
トップページに見出しを配置するときはdiv要素のclass属性に"jumbotron"を指定すると、スタイル指定ができます。ジャンボトロンとは、トップページなどに表示する大きな目立つ見出しのことです。
<div class="jumbotron">
<h1>Webアプリをもっとカッコよく!</h1>
<p>BootstrapはモダンなUIを作成できるCSSフレームワークです。</p>
<p>Bootstrapを使えば、かっこいいWebアプリが簡単に作れます。</p>
</div>
ページの見出しをつけるときは、div要素のclass属性に"page-header"を指定すると、スタイル指定ができます。サブタイトルなどはsmall要素にします。文字の見出しはh1要素からh6要素まで指定できます。
<div class="page-header">
<h1>Bootstrapで入力画面をつくる <small>form要素編</small></h1>
</div>
<h1>見出し1</h1>
～中略～
<h6>見出し6</h6>
引用
アプリ内にすべての情報を表示しないよう引用を使う場合は、blockquote要素を使います。blockquote要素のclass属性に"blockquote-reverse"を指定すると、画面の左寄せで配置できます。また、引用元を記載したいときはfooter要素とcite要素を指定します。HTMLではfooter要素には、そのセクションに関する情報を記述します。
<blockquote>
<p>引用</p>
</blockquote>
<blockquote class="blockquote-reverse">
<p>引用</p>
<footer><cite title="Bootstrap公式サイト">ここ</cite>を参考にしています</footer>
</blockquote>
文字の装飾
文字の色を変更したいときはp要素のclass属性に"text-xxx"を指定します。指定できる色は次のとおりです。
| 用途 | class属性の指定 | 色 |
|---|---|---|
| 目立たないよう | text-muted | 灰色 |
| 重要 | text-primary | 青 |
| 成功 | text-success | 緑 |
| 情報 | text-info | 水色 |
| 注意 | text-warning | オレンジ |
| 警告 | text-danger | 赤 |
<p class="text-muted">目立たないように</p> <p>普通</p> <p class="text-primary">重要</p> <p class="text-success">成功</p> <p class="text-info">情報</p> <p class="text-warning">警告</p> <p class="text-danger">危険</p>
文字の背景色を変更するときは、p要素のclass属性に"bg-xxx"を指定します。指定できる色は次のとおりです。
| 用途 | class属性の指定 | 色 |
|---|---|---|
| 重要 | bg-primary | 青 |
| 成功 | bg-success | 緑 |
| 情報 | bg-info | 水色 |
| 注意 | bg-warning | オレンジ |
| 警告 | bg-danger | 赤 |
文字の配置位置のclass属性は、左寄せのときは"text-left"、中央のときは"text-center”、 右寄せのときは"text-right”を指定します。なお、class属性は複数の値を指定できます。複数の値を指定するときは、値をスペースで区切ります。
<p class="bg-primary text-left">重要（左寄せ）</p> <p class="bg-success text-center">成功（中央）</p> <p class="bg-info text-right">情報（右寄せ）</p> <p class="bg-warning">警告</p> <p class="bg-danger">危険</p>
