Bootstrapのモーダルダイアログやプログレスバーを使ってユーザーにやさしいWebアプリにしよう

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

パンくずリスト

　業務アプリケーションでは多くの階層をもつ情報を扱うことが多いので「今、どの階層のなにの情報を見ているか」を分かりやすく知らせるときは、パンくずリストを使います。

パンくずリスト

　パンくずリストを作成するときは、ol要素のclass属性に"breadcrumb"を指定します。リストの中身はli要素に列挙します。現在位置を示したいときは、li要素のclass属性に"active"を指定します。

リスト8　パンくずリスト（breadcrumbs.htmlの抜粋）

<ol class="breadcrumb">
    <li><a href="#">神奈川県</a></li>
    <li><a href="#">横浜市</a></li>
    <li class="active">中区</li>
</ol>

パンくずリスト

パンくずリストの名前の由来

　「パンくずリスト」という名前は、グリム童話「ヘンゼルとグレーテル」で、主人公ヘンゼルが森で迷子にならないようにパンくずを置いて道しるべを作った、という話から名づけられたようです。森の木々のようにたくさんの枝葉に分かれた情報がある業務アプリケーションでも主人公であるユーザが迷子にならないよう、パンくずリストを用意すると良いでしょう。

 

　IT用語はたくさんあり、また日進月歩で増えていくので覚えるのも大変です。これらの用語の名前の由来や裏話を調べておいて記憶に残すのもおすすめです。

ラベル／バッジ

　Webアプリの中で、新着の情報やメールなどの未読件数などは、アプリ利用者に特に注目してほしい情報です。これらの情報を目立たせるためのラベルとバッジを説明します。ラベルとバッジはナビゲーションバーのメニューでも利用できます。

ラベル

　ラベルは、新着の情報や重要なのでユーザに注目してほしい情報を装飾するためのコントロールです。

　ラベル配置するには、span要素のclass属性に"label"要素を指定します。ラベルは重要度によって以下の値が指定できます。

ラベルの色

用途	class属性の指定	色
デフォルト	label-default	灰色
重要	label-primary	青
成功	label -success	緑
情報	label -info	水色
注意	label -warning"	オレンジ
警告	label -danger	赤

リスト9　ラベル（label.htmlの抜粋）

<span class="label label-default">デフォルト</span>
<span class="label label-primary">重要</span>
<span class="label label-success">成功</span>
<span class="label label-info">情報</span>
<span class="label label-warning">警告</span>
<span class="label label-danger">危険</span>
<p>新しい製品を発表しました<span class="label label-default">New</span></p>

ラベルの利用例

バッジ

　バッジは、メッセージの未読件数などを表すためのコントロールです。バッジを利用するときはspan要素のclass属性に"badge"を設定します。バッジはアンカーリンクでもボタンでもどちらでも利用できます。バッジ内で表示したい数値は、span要素のなかで指定します。

リスト10　バッジ（badges.htmlの抜粋）

<!-- アンカーリンクでの設定 -->
<p>ニュース <span class="badge">5</span></p>
<!-- ボタンでの設定 -->
<button class="btn btn-info" type="button">新着メール<span class="badge">10</span></button>

バッジの利用例

おわりに

　今回の記事では、モーダルダイアログ、ドロップダウン、プログレスバーや、ユーザの可視性を高めるためのパンくずリスト／ラベル／バッジなどを説明しました。

　次回は、画像を効果的に表示するカルーセルパネルや、動画の埋め込み方法などをご紹介します。