Bootstrap Iconsをテーマ連動でデザイン！色・不透明度・ホバーをダークモードに最適化

1. Bootstrap Iconsとは？

1. Bootstrap Iconsとは？

Bootstrap Icons（ブートストラップアイコン）は、Bootstrap公式が提供するアイコン集です。アイコンは画像ではなく文字のように扱えるため、CSSで色や大きさを自由に変えられます。ダークモードでは背景が暗くなるので、白や明るい色で指定することで見やすさを確保します。

2. 基本的なアイコンの使い方

2. 基本的なアイコンの使い方

まずはアイコンを表示する基本的な方法です。クラス名 bi bi-○○ を書くだけで使えます。例えば「ハートアイコン」は bi-heart です。

<i class="bi bi-heart"></i>
<i class="bi bi-star"></i>
<i class="bi bi-envelope"></i>

3. ダークモードに合わせた色の指定

3. ダークモードに合わせた色の指定

アイコンは文字と同じように color プロパティで色を変えられます。ダークモードでは背景が黒なので、白や明るい色を指定すると目立ちます。

<style>
  /* ライトモード用（背景が白のときは黒いアイコン） */
  [data-bs-theme="light"] .icon-theme {
    color: #000000;
  }

  /* ダークモード用（背景が黒のときは白いアイコン） */
  [data-bs-theme="dark"] .icon-theme {
    color: #ffffff;
  }
</style>

<!-- ここでテーマを切り替える -->
<div data-bs-theme="light" class="p-3">
  <i class="bi bi-heart icon-theme"></i>
  <i class="bi bi-star icon-theme"></i>
</div>

<div data-bs-theme="dark" class="p-3 mt-3 bg-dark">
  <i class="bi bi-heart icon-theme"></i>
  <i class="bi bi-star icon-theme"></i>
</div>

4. 不透明度で柔らかい表現をする

4. 不透明度で柔らかい表現をする

色を変えるだけでなく、opacity（不透明度）を使うと、少し薄く表示できます。これにより、強調したいアイコンと控えめに見せたいアイコンを区別できます。

<style>
  /* ライトモード（白背景のときは黒っぽい半透明） */
  [data-bs-theme="light"] .icon-muted {
    color: #000000;
    opacity: 0.5;
  }

  /* ダークモード（黒背景のときは白っぽい半透明） */
  [data-bs-theme="dark"] .icon-muted {
    color: #ffffff;
    opacity: 0.5;
  }
</style>

<div data-bs-theme="light" class="p-3 border">
  <i class="bi bi-envelope icon-muted"></i>
  <i class="bi bi-bell icon-muted"></i>
</div>

<div data-bs-theme="dark" class="p-3 mt-3 bg-dark">
  <i class="bi bi-envelope icon-muted"></i>
  <i class="bi bi-bell icon-muted"></i>
</div>

5. ホバー時のスタイル変更

5. ホバー時のスタイル変更

ユーザーがマウスをアイコンに重ねたときに色を変えると、クリックできることが直感的にわかります。これはユーザー体験（UX）の向上につながります。

<style>
  /* ライトモード（背景が白いときは黒に） */
  [data-bs-theme="light"] .icon-hover {
    color: #000000;
    transition: color 0.3s ease;
  }

  /* ダークモード（背景が黒いときは白に） */
  [data-bs-theme="dark"] .icon-hover {
    color: #ffffff;
    transition: color 0.3s ease;
  }

  /* ホバー共通（どちらのテーマでも青に変化） */
  .icon-hover:hover {
    color: #0d6efd; /* Bootstrapの青 */
  }
</style>

<div data-bs-theme="light" class="p-3 border">
  <i class="bi bi-hand-thumbs-up icon-hover"></i>
  <i class="bi bi-hand-thumbs-down icon-hover"></i>
</div>

<div data-bs-theme="dark" class="p-3 mt-3 bg-dark">
  <i class="bi bi-hand-thumbs-up icon-hover"></i>
  <i class="bi bi-hand-thumbs-down icon-hover"></i>
</div>

6. テーマに連動させる方法

6. テーマに連動させる方法

Bootstrapには text-primary や text-success などのカラーユーティリティがあります。これを使えばテーマカラーに連動させられます。ダークモードでも自動的に調和するので便利です。

<i class="bi bi-github text-primary"></i>
<i class="bi bi-twitter text-info"></i>
<i class="bi bi-instagram text-danger"></i>

7. アイコンの見やすさと一貫性

7. アイコンの見やすさと一貫性

Bootstrap Iconsをテーマ連動させることで、色や不透明度、ホバーの変化を統一できます。初心者の方でも「色はcolor、透明感はopacity、ホバーは:hover」と覚えておけば安心です。ダークモードでもアイコンが見やすくなり、Webサイト全体の完成度がぐっと上がります。

まとめ

まとめ

Bootstrap Iconsをテーマ連動で扱う重要性

この記事では、Bootstrap Iconsをダークモードとライトモードの両方に対応させながら、 色・不透明度・ホバー表現を調整する方法について学びました。 アイコンは単なる飾りではなく、ユーザーに操作の意味や状態を伝える大切な要素です。 特に管理画面やWebアプリでは、アイコンの見やすさや一貫性が操作性に直結します。 そのため、テーマに連動したデザイン設計は初心者のうちから意識しておくと、 実務でも役立つ知識になります。

Bootstrap Iconsは画像ではなくフォントのように扱えるため、 CSSの color や opacity、:hover を使って柔軟に表現できます。 ダークモードでは背景が暗くなるため、 アイコンをそのまま黒系の色で表示すると見えにくくなりますが、 テーマ属性を利用して色を切り替えることで、 どの環境でも視認性の高いUIを実現できます。

色・不透明度・ホバーを整理して考える

アイコンのデザインを考えるときは、 「通常状態」「控えめに見せたい状態」「操作できることを示す状態」 という三つの視点で整理すると分かりやすくなります。 通常状態ではテーマに合わせた基本色を指定し、 重要度の低いアイコンには不透明度を下げて主張を弱めます。 そしてホバー時には色を変化させることで、 ユーザーに「ここは操作できる」というヒントを自然に伝えられます。

こうしたルールをあらかじめ決めておくことで、 ページごとにアイコンの見た目がバラバラになるのを防げます。 Bootstrapの data-bs-theme 属性と組み合わせれば、 ライトモードとダークモードを切り替えても、 同じ設計思想のままデザインを維持できます。 これは検索エンジンで調べられる Bootstrap Icons ダークモード対応 や アイコン テーマ連動 デザイン設計 といった内容にもつながる実践的な考え方です。

まとめとしてのサンプルスタイル

最後に、この記事で学んだポイントを整理したサンプルコードを確認してみましょう。 テーマごとに色を切り替え、ホバー時には共通の色に変化させることで、 見やすさと操作性を両立させています。

<style>
/* ライトモード */
[data-bs-theme="light"] .icon-summary {
    color: #000000;
    opacity: 0.8;
    transition: color 0.3s ease, opacity 0.3s ease;
}

/* ダークモード */
[data-bs-theme="dark"] .icon-summary {
    color: #ffffff;
    opacity: 0.8;
    transition: color 0.3s ease, opacity 0.3s ease;
}

/* ホバー時は共通で強調 */
.icon-summary:hover {
    color: #0d6efd;
    opacity: 1;
}
</style>

<div data-bs-theme="light" class="p-3 border">
    <i class="bi bi-heart icon-summary"></i>
    <i class="bi bi-star icon-summary"></i>
</div>

<div data-bs-theme="dark" class="p-3 mt-3 bg-dark">
    <i class="bi bi-heart icon-summary"></i>
    <i class="bi bi-star icon-summary"></i>
</div>

このようにスタイルをまとめておくことで、 アイコンの色や挙動を一か所で管理できます。 後から配色を変更したくなった場合でも、 CSSを少し調整するだけで全体に反映されるため、 保守性の高いコードになります。 ダークモード対応やテーマ切り替えが当たり前になった現在では、 非常に重要な設計ポイントと言えるでしょう。