Bootstrap のドロップダウンメニューの色を変更する方法
この記事では、Bootstrap 5 でドロップダウンメニューの色を変更する方法について詳しく説明します。データ属性を使用してライトテーマとダークテーマを切り替える方法と、ドロップダウンメニューのスタイルをカスタマイズするテクニックについて説明します。
データ属性を使用したライトテーマとダークテーマの切り替え
Bootstrap 5 は、ドロップダウンメニューにライトテーマまたはダークテーマを簡単に適用できる便利なデータ属性 data-bs-theme を提供しています。
親要素の .dropdown に data-bs-theme="light" または data-bs-theme="dark" を追加するだけです。
たとえば、ダークテーマのドロップダウンメニューを作成するには、次のコードを使用します。
<div class="dropdown" data-bs-theme="dark">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
ドロップダウンメニュー
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">オプション 1</a></li>
<li><a class="dropdown-item" href="#">オプション 2</a></li>
<li><a class="dropdown-item" href="#">オプション 3</a></li>
</ul>
</div>
このドロップダウンメニューは、グローバルカラーモードに関係なく、常にダークテーマでレンダリングされます。
ドロップダウンメニューのスタイルのカスタマイズ
定義済みのテーマを使用するだけでなく、カスタム CSS クラスまたはインラインスタイルを使用して、ドロップダウンメニューの色をカスタマイズすることもできます。
.dropdown-menu、.dropdown-item などの Bootstrap のデフォルトスタイルをオーバーライドして、背景色、テキストの色、ボーダーの色などを変更できます。
たとえば、青い背景のドロップダウンメニューを作成するには、次の CSS コードを使用します。
.my-blue-dropdown .dropdown-menu {
background-color: blue;
}
次に、my-blue-dropdown クラスを .dropdown 要素に追加します。
<div class="dropdown my-blue-dropdown">
...
</div>
まとめ
データ属性またはカスタム CSS を使用すると、Web サイトのデザインに合わせて Bootstrap のドロップダウンメニューの色を簡単に変更できます。
よくある質問
| 質問 | 回答 |
|---|---|
| ドロップダウンメニューのテキストの色を変更するにはどうすればよいですか？ | .dropdown-item クラスの color プロパティを使用します。たとえば、テキストを白にするには、.dropdown-item { color: white; } を使用します。 |
| ドロップダウンメニューにホバー効果を追加するにはどうすればよいですか？ | .dropdown-item:hover 疑似クラスを使用します。たとえば、ホバー時に背景色を灰色にするには、.dropdown-item:hover { background-color: gray; } を使用します。 |
| 特定のドロップダウンメニューのスタイルのみを変更するにはどうすればよいですか？ | そのドロップダウンメニューに一意のクラスを追加し、そのクラスを使用して CSS ルールを適用します。 |