Bootstrapでリスト／パネル／タブ使って情報をすっきり整理しよう

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

　本連載では、サーバーサイドJavaやPHPを使って業務アプリケーション開発を行う若手エンジニアのために、「Bootstrap」を使ってかっこいい画面を作成する方法をご紹介します。前回は、業務アプリケーションのメニュー作成にかかせないナビゲーションバーを説明しました。メニューを作ることで、業務アプリケーションがもつ機能を一目瞭然で整理できるため、ユーザの操作ミスや分かりにくさを減らすことができたと思います。業務アプリケーションは機能だけでなく、表示する情報も多く複雑で、雑多になりがちです。今回は、さまざまな情報を効果的に分かりやすく伝えるリスト／パネル／タブを説明します。

対象読者

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

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

リスト

　業務アプリケーションのコンテンツでまとまりのある情報をあらわすときは、リスト形式にすると分かりやすくなります。ここでは、リストグループの使い方を説明します。

基本のリストグループ

　リストグループを作成するには、ul要素を使います。ul要素のclass属性に"list-group"を指定します。リストのアイテムは、li要素のclass属性に"list-group-item"を指定します。

リスト1　リストグループ（listgroup1.htmlの抜粋）

<ul class="list-group">
    <li class="list-group-item">商品1</li>
    <li class="list-group-item">商品2</li>
    <li class="list-group-item">商品3</li>
</ul>

基本のリストグループ

　リストグループのアイテムの内容に応じてスタイルを変えるには、class属性に以下の属性を指定します。

リストのスタイル

用途	class属性の指定	色
成功	list-group-item-success	緑
情報	list-group-item-info	水色
注意	list-group-item-warning	オレンジ
警告	list-group-item-danger	赤

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

<ul class="list-group">
    <li class="list-group-item list-group-item-success">成功</li>
    <li class="list-group-item list-group-item-info">情報</li>
    <li class="list-group-item list-group-item-warning">注意</li>
    <li class="list-group-item list-group-item-danger">警告</li>
</ul>

リストグループのスタイル

有効化／無効化

　リストグループのアイテムを有効にしたり無効にしたりすることもできます。有効にするときはclass属性に"active"、無効にするときはclass属性に"disable"を指定します。有効／無効化すると背景色が変わります。

リスト3　リストグループの有効化と無効化（listgroup1.htmlの抜粋）

<div class="list-group">
    <a href="#" class="list-group-item active">受信ボックス
        <span class="badge">5</span>
    </a>
    <a href="#" class="list-group-item">送信ボックス</a>
    <a href="#" class="list-group-item disabled">ごみ箱</a>
</div>

リストアイテムの有効／無効化