bootstrap-components

Bootstrap 5.3 コンポーネント

Bootstrap は、インターフェース構築にすぐ使える UI コンポーネントを提供します。このスキルでは、主要なコンポーネントの使い方、JavaScript の初期化要件、アクセシビリティのベストプラクティスを扱います。

JavaScript の初期化の概要： データ属性だけで動作するコンポーネントもあれば、JavaScript による初期化が必要なコンポーネントもあります。以下で JS が必要 と記載されているコンポーネントは、明示的に初期化しないと動作しません。

コンポーネント	JS 初期化が必要	データ属性のみ
ツールチップ	はい	いいえ
ポップオーバー	はい	いいえ
トースト	はい（表示時）	いいえ
Scrollspy	任意	はい
モーダル	任意	はい
カルーセル	任意	はい
Collapse	任意	はい
ドロップダウン	任意	はい

インタラクティブコンポーネント

これらのコンポーネントには JavaScript が必要、または JavaScript を使うと便利です。詳しいコード例、JavaScript API、アクセシビリティに関するガイダンスについては、references/interactive-components.md を参照してください。

アコーディオン

一度に 1 つのセクションを表示する、折りたたみ可能なコンテンツパネルです。.accordion ラッパーの子要素として .accordion-item を配置し、その中に .accordion-header と .accordion-collapse を含めます。複数のパネルを同時に開けるようにするには、data-bs-parent を削除します。枠線のないスタイルには .accordion-flush を使います。

カルーセル

任意のコントロールとインジケーターを備えた画像スライドショーです。.carousel.slide ラッパーの中に .carousel-inner を配置し、スライドとして .carousel-item を含めます。ナビゲーションを追加するには .carousel-control-prev／.carousel-control-next を追加します。自動再生には data-bs-ride="carousel" を使います。prefers-reduced-motion に自動的に対応します。

Collapse

滑らかなアニメーションでコンテンツの表示を切り替えます。トリガーに data-bs-toggle="collapse" を指定し、data-bs-target で .collapse 要素を参照します。幅を基準に折りたたむには .collapse-horizontal を使います。クラスセレクター（.multi-collapse）を使うと、複数の要素を対象にできます。

ドロップダウン

リンクやアクション用の、切り替え可能なコンテキストメニューです。.dropdown ラッパーの中に .dropdown-toggle ボタンと .dropdown-menu リストを配置します。方向のバリエーションには .dropup、.dropend、.dropstart があります。ダークテーマには .dropdown-menu-dark を追加します。キーボード操作に標準対応しています。

モーダル

ページに重ねて表示し、フォーカスを閉じ込めるダイアログボックスです。data-bs-toggle="modal" を指定し、data-bs-target で .modal 要素を参照します。サイズには .modal-sm、.modal-lg、.modal-xl があります。修飾クラスには .modal-dialog-centered、.modal-dialog-scrollable があります。外側のクリックで閉じないようにするには data-bs-backdrop="static" を使います。

Offcanvas

画面の端からスライドして表示される、非表示のサイドバーです。配置には .offcanvas-start（左）、.offcanvas-end（右）、.offcanvas-top、.offcanvas-bottom があります。本文のスクロールを許可するには data-bs-scroll="true" を使います。常に表示するサイドバーには data-bs-backdrop="static" を使います。

ポップオーバー

JS の初期化と Popper.js が必要です。 クリックまたはホバーで表示される、リッチなオーバーレイコンテンツです。data-bs-toggle="popover" に加えて、data-bs-title と data-bs-content を使います。new bootstrap.Popover(el) で初期化するか、すべてをまとめて初期化します：document.querySelectorAll('[data-bs-toggle="popover"]').forEach(el => new bootstrap.Popover(el))。配置には top、right、bottom、left があります。Popper を含む bootstrap.bundle.js を使うか、bootstrap.js より前に Popper を個別に読み込んでください。

Scrollspy

スクロール位置に応じてナビゲーションを自動更新します。スクロール可能なコンテナに data-bs-spy="scroll" を指定し、data-bs-target でナビゲーションを参照します。アクティブ化のしきい値を調整するには data-bs-root-margin を使います。マウスを使わないユーザーがキーボードでコンテナにフォーカスしてスクロールできるよう、コンテナには tabindex="0" が必要です。

トースト

表示には JS が必要です。 軽量で閉じられる通知です。配置と積み重ねには .toast-container を使います。new bootstrap.Toast(el) で初期化してから .show() を呼び出します。オプションには autohide: true、delay: 5000 があります。配置はコンテナの配置クラスで指定します。

ツールチップ

JS の初期化と Popper.js が必要です。 短い説明を表示するホバーヒントです。data-bs-toggle="tooltip" と data-bs-title（推奨）または title 属性を使用します。new bootstrap.Tooltip(el) で初期化するか、すべてまとめて初期化します：document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => new bootstrap.Tooltip(el))。配置位置：top、right、bottom、left。無効化されたボタンのツールチップには、キーボードでアクセスできるよう tabindex="0" を設定したラッパー <span> または <div> が必要です。Popper を含む bootstrap.bundle.js を使用するか、bootstrap.js の前に Popper を別途読み込んでください。

静的コンポーネント

これらのコンポーネントは、主に CSS と HTML で動作します。コード例とアクセシビリティに関する詳しいガイダンスについては、references/static-components.md を参照してください。

アラート

状況に応じたフィードバックメッセージです。role="alert" とともに .alert.alert-{color} を使用します。カラー：primary、secondary、success、danger、warning、info、light、dark。スタイル付きリンクには .alert-link を使用します。閉じるボタンを追加して、閉じることのできるアラートにするには .alert-dismissible を追加します。

バッジ

ラベル、カウンター、ステータス表示です。<span> に .badge.bg-{color} を使用します。ピル型にするには .rounded-pill を使用します。通知バッジの配置には .position-absolute ユーティリティを使用します。スクリーンリーダー向けの説明には .visually-hidden テキストを含めます。

パンくずリスト

ナビゲーションの階層を示します。<nav aria-label="breadcrumb"> 内に <ol class="breadcrumb"> を配置します。<li> 要素に .breadcrumb-item を使用します。現在のページには .active と aria-current="page" を設定します。CSS 変数 --bs-breadcrumb-divider を使って区切り文字をカスタマイズできます。

ボタン

操作可能なボタン要素です。基本形：.btn.btn-{color}。アウトライン：.btn-outline-{color}。サイズ：.btn-lg、.btn-sm。全幅：.d-grid でラップします。状態：disabled 属性、.active クラス。アクションには <button>、ナビゲーションには <a> を使用します。

ボタングループ

関連するボタンをまとめます。role="group" と aria-label を設定した .btn-group を使用します。縦方向：.btn-group-vertical。ツールバー：role="toolbar" を設定した .btn-toolbar ラッパーを使用します。サイズ：.btn-group-lg、.btn-group-sm。

カード

柔軟なコンテンツコンテナーです。構造：.card > .card-body > .card-title、.card-text。オプション：.card-header、.card-footer、.card-img-top／.card-img-bottom。グリッドレイアウト：.row.row-cols-{n} を使い、.col の中に .card.h-100 を配置すると、高さを揃えられます。

閉じるボタン

汎用の閉じるボタンです。aria-label="Close" とともに .btn-close を使用します。白色のバリエーション：.btn-close-white。data-bs-dismiss="alert|modal|offcanvas|toast" で閉じる対象を指定します。

リストグループ

リスト形式のコンテンツ項目のまとまりです。.list-group > .list-group-item を使用します。操作可能にするには .list-group-item-action を追加します。枠線なし：.list-group-flush。横方向：.list-group-horizontal。カラー：.list-group-item-{color}。

ナビゲーションバー

レスポンシブ対応のナビゲーションヘッダーです。.navbar.navbar-expand-{breakpoint} を使用します。.navbar-brand、.navbar-toggler、.navbar-collapse を含みます。配置：.fixed-top、.fixed-bottom、.sticky-top。テーマ：data-bs-theme="dark"（.navbar-light は v5.3 で非推奨になりました）。

ナビゲーションとタブ

視覚的なスタイルを備えた基本的なナビゲーションです。スタイル：.nav-tabs、.nav-pills、.nav-underline。レイアウト：.nav-fill（均等な幅）、.nav-justified（全幅）、.flex-column（縦方向）。タブ付きコンテンツには、role="tablist" の中に role="tab" のボタンと role="tabpanel" のパネルを配置します。

ページネーション

ページ分割されたコンテンツのナビゲーションです。<nav aria-label="..."> > .pagination > .page-item > .page-link を使用します。サイズ：.pagination-lg、.pagination-sm。配置：.justify-content-center、.justify-content-end。現在のページには .active と aria-current="page" を設定します。

プレースホルダー

読み込み状態を示します。列幅（.col-6）を指定した .placeholder の span を使用します。アニメーション：.placeholder-glow または .placeholder-wave でラップします。サイズ：.placeholder-lg、.placeholder-sm、.placeholder-xs。プレースホルダーのコンテナーには aria-hidden="true" を追加します。

進捗状況

タスクの進捗インジケーターです。.progress ラッパーの内側に .progress-bar を使用します。幅は style="width: X%" で設定します。バリエーション：.progress-bar-striped、.progress-bar-animated。色：.bg-{color}。ARIA 属性として、role="progressbar"、aria-valuenow、aria-valuemin、aria-valuemax を指定します。

スピナー

読み込みインジケーターです。種類：.spinner-border（回転）、.spinner-grow（脈動）。サイズ：.spinner-border-sm、.spinner-grow-sm。色：.text-{color}。role="status" と .visually-hidden の読み込みテキストを含めます。

よくある落とし穴とヒント

JavaScript による初期化が必要なコンポーネント

ツールチップとポップオーバーは、明示的に JavaScript で初期化しないと動作しません。データ属性で動作するモーダル、ドロップダウン、カルーセルとは異なり、これらのコンポーネントは初期化が必要です。

// Initialize all tooltips
document.querySelectorAll('[data-bs-toggle="tooltip"]')
  .forEach(el => new bootstrap.Tooltip(el));

// Initialize all popovers
document.querySelectorAll('[data-bs-toggle="popover"]')
  .forEach(el => new bootstrap.Popover(el));

トーストを表示する場合も JavaScript が必要です。トーストはデフォルトで非表示になっており、toast.show() を使ってプログラムから表示する必要があります。

ツールチップ／ポップオーバーの位置に関する問題

ツールチップやポップオーバーの位置がずれたり、切り取られたり、複雑なレイアウト（入力グループ、ボタングループ、テーブル、モーダル）で予期しない動作をしたりする場合は、container: 'body' を使用します。

// Append to body to avoid rendering issues
new bootstrap.Tooltip(el, { container: 'body' });
new bootstrap.Popover(el, { container: 'body' });

モーダル内のポップオーバーでは、フォーカスがモーダル内にとどまるよう、container をモーダルの本文に設定します。

new bootstrap.Popover(el, { container: '.modal-body' });

モーダルのベストプラクティス

意味的な見出し：Bootstrap では、意味的にモーダルのタイトルに <h1> を使用することを推奨しています（モーダルは独自のドキュメントコンテキストを表すためです）。適切な見出し階層を維持しつつ見た目を調整するには、.fs-5 などのフォントサイズユーティリティを使用します。

オートフォーカスの回避策：HTML5 の仕様上、Bootstrap のモーダルでは HTML の autofocus 属性は効果がありません。モーダルが開いたときに入力欄にフォーカスするには、次のようにします。

myModal.addEventListener('shown.bs.modal', () => {
  document.getElementById('myInput').focus();
});

モーダルのネスト：Bootstrap が一度にサポートするモーダルは 1 つだけです。モーダルのネストはサポートされておらず、ユーザー体験を損なうとされています。複数のダイアログが必要な場合は、別のダイアログを開く前に現在のモーダルを閉じてください。

動的なコンテンツの高さ：高さに影響するモーダル本文のコンテンツを動的に変更した後は、modal.handleUpdate() を呼び出してモーダルの位置を調整します。

コンポーネント間のパターン

フォームを含むモーダル：フォームの検証フィードバックはモーダル本文の内側に配置します。送信に成功したら modal.hide() を呼び出し、必要に応じてトースト通知を表示します。

トーストの積み重ね：トーストを一貫した位置に配置するには、配置ユーティリティ（.position-fixed.bottom-0.end-0.p-3）と .toast-container を使用します。複数のトーストは自動的に積み重なります。

オフキャンバスを使ったナビゲーションバー：モバイルナビゲーションには、.navbar とオフキャンバスを組み合わせて、スライド式メニューを作成します。異なる UX パターンを使用するには、ナビゲーションバーのトグルで data-bs-toggle="collapse" の代わりに data-bs-toggle="offcanvas" を使用します。

グリッド内のカード：.row.row-cols-{n} と .col > .card.h-100 を使用すると、ブレークポイントに応じて表示が変わる、高さを揃えたカードグリッドを作成できます。

追加リソース

参照ファイル

• references/components-reference.md - すべてのコンポーネントクラスのクイックリファレンステーブル
• references/css-custom-properties.md - 実行時のコンポーネントテーマ設定に使う CSS カスタムプロパティ
• references/interactive-components.md - JavaScript 依存コンポーネントの詳細なドキュメント
• references/static-components.md - CSS／HTML コンポーネントの詳細なドキュメント

例ファイル

• examples/accordion-patterns.html - アコーディオンとFAQのパターン
• examples/alert-patterns.html - アラートのバリエーション、閉じられるアラート、ライブリージョンのパターン
• examples/badge-button-patterns.html - バッジ、ボタン、ボタングループ、閉じるボタン
• examples/breadcrumb-patterns.html - カスタム区切り記号とアイコンを使用したパンくずナビゲーション
• examples/card-grid-patterns.html - レスポンシブなカードグリッドレイアウト
• examples/carousel-patterns.html - カルーセルの実装パターン
• examples/collapse-patterns.html - 折りたたみ、横方向の折りたたみ、複数ターゲットのパターン
• examples/dropdown-patterns.html - ドロップダウンメニュー、分割ボタン、フォームのドロップダウン
• examples/list-group-patterns.html - リストグループ、操作可能な項目、タブとの連携
• examples/modal-patterns.html - モーダルダイアログのパターン
• examples/navbar-patterns.html - ナビゲーションバーのレイアウト
• examples/offcanvas-patterns.html - オフキャンバスサイドバーのパターン
• examples/pagination-patterns.html - ページネーションのバリエーション、配置、レスポンシブパターン
• examples/placeholder-patterns.html - カード、リスト、テーブル向けのローディングスケルトンのパターン
• examples/popovers-tooltips-patterns.html - ツールチップとポップオーバーのパターン（JSの初期化が必要）
• examples/progress-spinner-patterns.html - プログレスバーとスピナーによる読み込みインジケーター
• examples/scrollspy-patterns.html - ナビゲーションバー、リストグループ、ドキュメントでのスクロールスパイのパターン
• examples/tabs-patterns.html - タブナビゲーションのパターン
• examples/toasts-patterns.html - トースト通知のパターン（JSの初期化が必要）