対象読者
本記事は、次の方を対象にしています。
- 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>
リストアイテムの有効／無効化
