Bootstrap 5 ドロップダウンメニューサンプル
このページでは、Bootstrap 5 フレームワークを使用して、柔軟で強力なドロップダウンメニューを作成する方法について説明します。
---基本サンプル
ドロップダウンメニューは、Webページでよく使用される UI 要素です。ユーザーは、メインメニュー項目をクリックまたはタップして、サブメニュー項目のリストを表示できます。Bootstrap 5 は、ドロップダウンメニューを作成するための簡単で効果的な方法を提供します。
基本的なドロップダウンメニューを作成するには、次の手順に従います。
<div class="dropdown">を使用して、ドロップダウンメニューコンテナを作成します。- コンテナ内に、ドロップダウンメニューをトリガーする要素として、ボタンまたはリンクを追加します。
<ul class="dropdown-menu">を使用して、ドロップダウンメニューリストを作成します。- リストに
<li>要素を追加し、その中にリンクやその他のコンテンツを配置します。
以下は、基本的なドロップダウンメニューのコード例です。
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
ドロップダウンメニュー
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">アクション</a></li>
<li><a class="dropdown-item" href="#">別のアクション</a></li>
<li><a class="dropdown-item" href="#">何か他のもの</a></li>
</ul>
</div>
分割線
<li><hr class="dropdown-divider"></li> を使用して、ドロップダウンメニュー項目間に分割線を追加できます。これにより、メニューのセクションを視覚的に分離できます。
見出し
<li><h6 class="dropdown-header">見出し</h6></li> を使用して、ドロップダウンメニューに見出しを追加できます。これにより、関連するメニュー項目をグループ化し、メニューの整理とナビゲーションを向上させることができます。
無効状態
ドロップダウンメニューをトリガーするボタンまたはリンクに disabled 属性を追加すると、ドロップダウンメニューを無効にできます。これにより、ユーザーはドロップダウンメニューと対話できなくなります。
配置
次のクラスを使用して、ドロップダウンメニューの配置を制御できます。
| クラス | 説明 |
|---|---|
.dropdown-menu-start |
ドロップダウンメニューを左側に配置します（デフォルト）。 |
.dropdown-menu-end |
ドロップダウンメニューを右側に配置します。 |
.dropdown-menu-sm-start |
小さい画面（sm ブレークポイント以下）でドロップダウンメニューを左側に配置します。 |
.dropdown-menu-sm-end |
小さい画面（sm ブレークポイント以下）でドロップダウンメニューを右側に配置します。 |
ドロップダウンメニューフォーム
入力ボックス、チェックボックスなどのフォーム要素をドロップダウンメニューに埋め込むことができます。これにより、ユーザーはドロップダウンメニュー内から直接フォームを送信できます。
ドロップダウンメニューボタン
.btn-group クラスを使用して、ドロップダウンメニューをボタンと組み合わせることができます。これにより、ボタンとドロップダウンメニューを 1 つのグループにまとめて、より複雑な UI を作成できます。
色
Bootstrap 5 のカラーユーティリティクラスを使用して、さまざまなカラースキームをドロップダウンメニューに追加できます。これにより、Webサイトまたはアプリケーションのブランドに合わせてドロップダウンメニューをカスタマイズできます。
---関連リソース
よくある質問
ドロップダウンメニューをどのようにカスタマイズできますか？
Bootstrap のユーティリティクラスとカスタム CSS を使用して、ドロップダウンメニューの外観をカスタマイズできます。たとえば、bg-* クラスを使用して背景色を変更したり、text-* クラスを使用してテキストの色を変更したり、padding-* クラスを使用してパディングを調整したりできます。
ドロップダウンメニューに JavaScript を使用できますか？
はい、ドロップダウンメニューと対話したり、動的にコンテンツを追加したりするために JavaScript を使用できます。Bootstrap は、ドロップダウンメニューの動作を制御するための JavaScript プラグインを提供します。
ドロップダウンメニューをどのようにアクセシブルにすることができますか？
ドロップダウンメニューをアクセシブルにするには、適切な ARIA 属性を使用し、キーボードナビゲーションをサポートし、十分な色のコントラストを提供します。詳細については、Bootstrap のアクセシビリティのドキュメントを参照してください。