Bootstrap: リストグループとバッジ
最終更新：2026-08-26
1. レッスンの導入
(1) 前提条件
- レッスン10: カード
(2) 🎯 学習目標
list-groupとlist-group-itemを使用したリストの作成list-group-item-actionを使用したインタラクティブなリストの実装- バッジを使用した数やステータスの表示
- リストグループのコンテンツのカスタマイズ（Flex + Typography）
list-group-flushを使用したボーダーの除去
(3) 痛点
Charlie はチケット管理システムを構築しており、サイドバーに「保留中 (5)」「進行中 (3)」「完了 (12)」を表示する必要があります。これはリストグループとバッジの典型的な組み合わせです。
(4) 解決策
リストグループとバッジは、Bootstrapにおける軽量でありながら実用的な表示コンポーネントです。リストグループは関連するアイテムのセットを提示し、バッジは隅に数やステータスを表示します。
理解のポイント： リストグループ = 強化された
<ul>（より良いスタイリング、インタラクティブ性）、バッジ = 小さなラベル（数値/ステータスを表示し、他の要素に添付する）。
(5) 利点
リストグループとバッジを併用することで、カテゴリ別通知数を明確かつ直感的に表示でき、情報取得の効率を大幅に向上させます。
2. リストグループの基本
HTML
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
出力： Bootstrap 5.3 スタイル（ボタン、カード、カルーセル、コラプスなど）のコンポーネント効果。ページはデフォルトで Bootstrap のデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。
▶ サンプル リストグループの基本
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List Group Demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-4">
<div class="row">
<div class="col-md-4">
<h5>Basic List</h5>
<ul class="list-group">
<li class="list-group-item">Dashboard</li>
<li class="list-group-item">Orders</li>
<li class="list-group-item">Products</li>
<li class="list-group-item">Customers</li>
</ul>
</div>
<div class="col-md-4">
<h5>Active & Disabled</h5>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">Home</a>
<a href="#" class="list-group-item list-group-item-action">Profile</a>
<a href="#" class="list-group-item list-group-item-action disabled">Settings (locked)</a>
</div>
</div>
<div class="col-md-4">
<h5>Flush Style</h5>
<ul class="list-group list-group-flush">
<li class="list-group-item">Inbox <span class="badge bg-primary rounded-pill">3</span></li>
<li class="list-group-item">Sent</li>
<li class="list-group-item">Drafts <span class="badge bg-warning">2</span></li>
</ul>
</div>
</div>
</div>
</body>
</html>
出力： Bootstrap 5.3 スタイル（ボタン、カード、カルーセル、コラプスなど）のコンポーネント効果。ページはデフォルトで Bootstrap のデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。
3. リストグループのバリエーション
(1) インタラクティブなリストグループ
HTML
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">Active link</a>
<a href="#" class="list-group-item list-group-item-action">Regular link</a>
<button class="list-group-item list-group-item-action">Button as item</button>
</div>
出力： Bootstrap 5.3 スタイル（ボタン、カード、カルーセル、コラプスなど）のコンポーネント効果。ページはデフォルトで Bootstrap のデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。
(2) カラーバリエーション
HTML
<ul class="list-group">
<li class="list-group-item list-group-item-primary">Primary item</li>
<li class="list-group-item list-group-item-success">Success item</li>
<li class="list-group-item list-group-item-danger">Danger item</li>
</ul>
出力： Bootstrap 5.3 スタイル（ボタン、カード、カルーセル、コラプスなど）のコンポーネント効果。ページはデフォルトで Bootstrap のデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。
| クラス | 背景色 | 意味 |
|---|---|---|
list-group-item-primary |
薄い青 | 情報 |
list-group-item-success |
薄い緑 | 成功 |
list-group-item-danger |
薄い赤 | エラー |
list-group-item-warning |
薄い黄 | 警告 |
(3) バッジ付きリストグループ
HTML
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Notifications
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Messages
<span class="badge bg-danger rounded-pill">3</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Updates
<span class="badge bg-success rounded-pill">7</span>
</li>
</ul>
出力： Bootstrap 5.3 スタイル（ボタン、カード、カルーセル、コラプスなど）のコンポーネント効果。ページはデフォルトで Bootstrap のデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。
4. カスタムリストグループコンテンツ
HTML
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">New update released</h5>
<small class="text-body-secondary">3 days ago</small>
</div>
<p class="mb-1">Version 2.4 includes bug fixes and performance improvements.</p>
<small class="text-body-secondary">By Alice Chen</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Server maintenance</h5>
<small class="text-body-secondary">1 week ago</small>
</div>
<p class="mb-1">Scheduled downtime on Saturday 2:00 AM - 4:00 AM UTC.</p>
<small class="text-body-secondary">By Bob Wang</small>
</a>
</div>
出力： Bootstrap 5.3 スタイル（ボタン、カード、カルーセル、コラプスなど）のコンポーネント効果。ページはデフォルトで Bootstrap のデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。
5. バッジ
HTML
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<button class="btn btn-primary position-relative">
Inbox
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
</span>
</button>
<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-warning">Warning</span>
<span class="badge bg-primary">Primary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning">Warning</span>
<span class="badge bg-info">Info</span>
<span class="badge bg-dark">Dark</span>
出力： Bootstrap 5.3 スタイル（ボタン、カード、カルーセル、コラプスなど）のコンポーネント効果。ページはデフォルトで Bootstrap のデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。
(1) バッジのカラーと意味
| クラス | 用途 |
|---|---|
bg-primary |
デフォルトのラベル |
bg-success |
完了/合格 |
bg-danger |
エラー/失敗の数 |
bg-warning |
保留中/要注意 |
bg-info |
情報ラベル |
bg-secondary |
中立/副次的なラベル |
6. その他のリストグループの例
▶ サンプル タブスタイルのリストグループナビゲーション
HTML
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab">Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab">Settings</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel">Home content: welcome to the dashboard.</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel">Profile content: manage your personal info.</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel">Messages content: view your inbox.</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel">Settings content: configure preferences.</div>
</div>
</div>
</div>
出力： Bootstrap 5.3 スタイル（ボタン、カード、カルーセル、コラプスなど）のコンポーネント効果。ページはデフォルトで Bootstrap のデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。
▶ サンプル 複雑なリスト（バッジ + アイコン）
HTML
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
<div class="me-3 fs-5">📧</div>
<div class="flex-grow-1">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-0">New message from Alice</h6>
<small class="text-body-secondary">2 min ago</small>
</div>
<small class="text-body-secondary">Meeting rescheduled to 3pm.</small>
</div>
<span class="badge bg-danger rounded-pill ms-2">3</span>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
<div class="me-3 fs-5">🔔</div>
<div class="flex-grow-1">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-0">Server alert</h6>
<small class="text-body-secondary">1 hr ago</small>
</div>
<small class="text-body-secondary">CPU usage exceeded 90%.</small>
</div>
<span class="badge bg-warning rounded-pill ms-2">5</span>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
<div class="me-3 fs-5">✅</div>
<div class="flex-grow-1">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-0">Deployment complete</h6>
<small class="text-body-secondary">3 hr ago</small>
</div>
<small class="text-body-secondary">Version 2.4 deployed to production.</small>
</div>
<span class="badge bg-success rounded-pill ms-2">12</span>
</a>
</div>
出力： Bootstrap 5.3 スタイル（ボタン、カード、カルーセル、コラプスなど）のコンポーネント効果。ページはデフォルトで Bootstrap のデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。
▶ サンプル チェックボックスリストグループ
HTML
<div class="list-group">
<label class="list-group-item d-flex align-items-center">
<input class="form-check-input me-2" type="checkbox" value="" checked>
HTML & CSS Basics
</label>
<label class="list-group-item d-flex align-items-center">
<input class="form-check-input me-2" type="checkbox" value="">
JavaScript Fundamentals
</label>
<label class="list-group-item d-flex align-items-center">
<input class="form-check-input me-2" type="checkbox" value="" checked>
Bootstrap 5 Framework
</label>
<label class="list-group-item d-flex align-items-center">
<input class="form-check-input me-2" type="checkbox" value="">
React & Vue.js
</label>
<label class="list-group-item d-flex align-items-center disabled">
<input class="form-check-input me-2" type="checkbox" value="" disabled>
Advanced Node.js (locked)
</label>
</div>
出力： Bootstrap 5.3 スタイル（ボタン、カード、カルーセル、コラプスなど）のコンポーネント効果。ページはデフォルトで Bootstrap のデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。
▶ サンプル カスタムカラーリストグループ
HTML
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action list-group-item-success d-flex justify-content-between align-items-center">
<span>✅ Task completed</span>
<span class="badge bg-success rounded-pill">12</span>
</button>
<button type="button" class="list-group-item list-group-item-action list-group-item-warning d-flex justify-content-between align-items-center">
<span>⏳ In progress</span>
<span class="badge bg-warning rounded-pill">5</span>
</button>
<button type="button" class="list-group-item list-group-item-action list-group-item-danger d-flex justify-content-between align-items-center">
<span>❌ Overdue</span>
<span class="badge bg-danger rounded-pill">3</span>
</button>
<button type="button" class="list-group-item list-group-item-action list-group-item-info d-flex justify-content-between align-items-center">
<span>ℹ️ New updates</span>
<span class="badge bg-info rounded-pill">8</span>
</button>
</div>
出力： Bootstrap 5.3 スタイル（ボタン、カード、カルーセル、コラプスなど）のコンポーネント効果。ページはデフォルトで Bootstrap のデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。
(1) リストグループコンポーネントツリー
flowchart TD
A[list-group コンテナ] --> B[list-group-item リストアイテム]
B --> C[list-group-item-action<br/>インタラクティブ]
B --> D[list-group-item-primary<br/>カラーバリエーション]
B --> E[バッジ]
A --> F[list-group-flush<br/>ボーダーなし]
A --> G[カスタムコンテンツ<br/>Flex + Typography]
出力： Bootstrap 5.3 スタイル（ボタン、カード、カルーセル、コラプスなど）のコンポーネント効果。ページはデフォルトで Bootstrap のデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。
| リストグループのバリエーション | クラス | 用途 |
|---|---|---|
| 基本リスト | list-group + list-group-item |
シンプルなアイテム表示 |
| インタラクティブ | list-group-item-action |
ナビゲーション、メニュー |
| ボーダーなし | list-group-flush |
カード内部、コンパクトなシナリオ |
| カラー行 | list-group-item-{color} |
ステータス分類 |
| 数値バッジ | badge rounded-pill |
カウント、通知数 |
| チェックボックス/ラジオ | form-check-input + list-group-item |
タスクリスト、複数選択 |
| バッジのカラー | 意味 | 適用シナリオ |
|---|---|---|
bg-primary |
デフォルト/情報 | 通常のカウント |
bg-success |
成功/完了 | 完了タスク、合格 |
bg-danger |
エラー/緊急 | 失敗カウント、アラート数 |
bg-warning |
保留中 | 進行中、承認待ち |
bg-info |
ヒント | 新しい通知、新しいメッセージ |
bg-secondary |
副次的 | 補助的なカウント |
| ナビゲーション方法 | 利点 | 欠点 | 最適シナリオ |
|---|---|---|---|
| リストグループナビゲーション | 豊富なスタイリング、バッジ対応 | ネスト非対応 | サイドバーメニュー、タブ |
| Nav nav-tabs | ネイティブなタブスタイル、ドロップダウン対応 | バッジ非対応 | ページタブ切り替え |
| Navbar nav | レスポンシブ、ブランド統合 | 複雑な構造 | トップメインナビゲーション |
| ドロップダウン | コンパクト、省スペース | 現在のアイテムのみ表示 | ユーザーメニュー、設定 |
❓ よくある質問
Q リストグループはネストできますか？
A いいえ、ネストには対応していません。リストグループはフラットな構造用に設計されています。階層構造が必要な場合は、Bootstrap の Accordion コンポーネントや、手動でネストした
<ul> を検討してください。Q バッジのボーダー-radiusを制御するにはどうすればいいですか？
A
rounded-pill はピル型（半円形の端）を作成し、rounded-1/2/3 は異なる程度のボーダー-radiusです。指定がない場合はデフォルトで四角形になります。Q リストグループをクリック可能なナビゲーションに使用できますか？
A はい。
<a> または <button> 要素を使用し、list-group-item-action を追加し、現在の選択アイテムを示すには active を使用します。サイドバーナビゲーションに最適です。Q リストグループの
active 状態はページ更新後も維持されますか？A いいえ、自動的には維持されません。
active は静的なクラスです。更新後、現在のルートに基づいてバックエンドや JavaScript で動的に追加する必要があります。例えば、window.location のマッチングを使用します。Q リストグループをカード内に入れるのと、直接使用するのとではどう違いますか？
A カード内のリストグループは、通常
list-group-flush スタイルを使用するため、余分なボーダーや角がなく、カードの端に揃い、視覚的に一体になります。カード外のリストグループは、独自のボーダーと角を持ちます。📖 まとめ
- リストグループ:
list-group+list-group-item、list-group-item-actionでインタラクションを有効化。 list-group-flushでボーダーを除去、list-group-item-{color}でカラーバリエーションを提供。- カスタムコンテンツ:
list-group-item内で Flexbox とタイポグラフィクラスを使用。 - バッジ:
badge bg-{color}、rounded-pillでピル型。
📝 練習問題
- ⭐ サイドバーナビゲーションリストグループを作成します。5 つのメニューアイテムがあり、現在のページは
activeで強調表示され、1 つはdisabledに設定し、各アイテムは右側に対応する数値バッジを表示します。 - ⭐⭐ リストグループ + カスタムコンテンツを使用した通知リストを作成します。各通知にはタイトル、タイムスタンプ（小）、本文プレビューがあり、クリックイベントをサポートします。
- ⭐⭐⭐ ボタングループを作成し、各ボタンの右上隅にバッジカウントを表示して、「受信トレイ (12)」、「承認待ち (5)」、「下書き (3)」をシミュレートします。
