Bootstrap Iconsの色変更を完全解説！textクラスとcurrentColorの仕組みを初心者向けにやさしく解説

1. Bootstrap Iconsの色変更とは

1. Bootstrap Iconsの色変更とは

Bootstrap Iconsの色変更とは、アイコンの見た目の色を変える方法のことです。Bootstrap5ではカラーや背景色をクラスで簡単に指定できます。特にtextprimaryやtextdangerなどのテキストユーティリティクラスを使うことで、初心者でも一瞬でアイコンの色を変更できます。

Bootstrap Iconsは画像ではなくSVGという形式で作られています。SVGとは拡大してもきれいに表示できる図形データのことです。そのため、文字と同じように色を変更できます。

2. textクラスで色を変える基本方法

2. textクラスで色を変える基本方法

Bootstrapのtextクラスとは、文字色を変更するための便利なクラスです。例えばtextprimaryは青色、textsuccessは緑色、textdangerは赤色になります。これはBootstrapカラーシステムと呼ばれる仕組みで、あらかじめ決められた色が用意されています。

<p class="text-primary">
    <i class="bi bi-heart-fill"></i> 青いハートアイコン
</p>

<p class="text-danger">
    <i class="bi bi-exclamation-triangle-fill"></i> 赤い警告アイコン
</p>

親要素にtextクラスをつけるだけで、中のアイコンの色も自動的に変わります。これは文字色と同じ扱いになっているからです。

3. currentColorの仕組みとは

3. currentColorの仕組みとは

currentColorとは、現在設定されている文字色をそのまま使うという意味です。Bootstrap IconsのSVGにはfillがcurrentColorと指定されています。fillとは塗りつぶしの色という意味です。

つまり、アイコンは自分で色を持っているのではなく、親の文字色をそのまま使います。これは絵の具を持たずに、周りの色に合わせて変化するカメレオンのような仕組みです。

<style>
.icon-sample {
    color: green;
}
</style>

<p class="icon-sample">
    <i class="bi bi-check-circle-fill"></i> 緑色の確認アイコン
</p>

このようにCSSでcolorを指定すると、その色がアイコンにも反映されます。

4. 背景色と組み合わせる方法

4. 背景色と組み合わせる方法

Bootstrapでは背景色ユーティリティも用意されています。bgprimaryやbgdarkなどです。アイコンをボタン風にしたい場合は、背景色と文字色を組み合わせます。

<span class="bg-primary text-white p-3 rounded">
    <i class="bi bi-star-fill"></i>
</span>

bgprimaryで青い背景、textwhiteで白いアイコンになります。このようにBootstrapカラーとテキストユーティリティを組み合わせることで、デザインの幅が広がります。

5. 直接styleで色を指定する方法

5. 直接styleで色を指定する方法

Bootstrapクラスを使わずに、直接style属性でcolorを指定することもできます。これは小さな部分だけ変更したいときに便利です。

<i class="bi bi-alarm-fill" style="color: purple;"></i>

styleで指定した色も、内部ではcurrentColorとして扱われます。そのため、仕組みは同じです。

6. Bootstrapカラー一覧と使い分け

6. Bootstrapカラー一覧と使い分け

Bootstrap5にはprimarysecondarysuccessdangerdarkwarninginfoなどのカラーバリエーションがあります。primaryは基本色、successは成功、dangerは警告など意味を持っています。

例えばエラー表示ならtextdanger、成功メッセージならtextsuccessといったように使い分けることで、ユーザーに分かりやすい画面を作れます。これはユーザー体験向上にもつながります。

7. よくある間違いと注意点

7. よくある間違いと注意点

Bootstrap Iconsの色が変わらない原因の多くは、colorではなくbackgroundcolorだけを指定しているケースです。アイコンは文字色に反応するため、必ずcolorまたはtextクラスを使います。

また、親要素にtextmutedなどが設定されていると、その色が優先されます。どこに色が設定されているか確認することが大切です。開発者ツールを使うと確認できます。

Bootstrap Icons色変更textクラスcurrentColorの仕組みを理解すると、自由にデザインをコントロールできるようになります。Bootstrap5カラー背景テキストユーティリティを活用し、見やすく統一感のある画面を作りましょう。

まとめ

まとめ

ここまでBootstrap Iconsの色変更方法としてtextクラスの使い方、currentColorの仕組み、CSSでのcolor指定、背景色との組み合わせ、直接style属性を使う方法、そしてBootstrapカラー一覧と使い分けについて解説してきました。Bootstrap5におけるアイコンデザインの基本は、アイコンを画像として扱うのではなく、文字と同じように扱うという考え方にあります。Bootstrap IconsはSVG形式で作られており、内部でcurrentColorが指定されているため、親要素や自分自身に指定されたcolorの値をそのまま継承します。この仕組みを理解することで、なぜtextprimaryやtextdangerなどのテキストユーティリティクラスでアイコンの色が変わるのかが明確になります。

Bootstrap Icons色変更の基本は、まずcolorプロパティを意識することです。背景色を変えるbglightやbgdarkだけではアイコンの色は変わりません。textprimary、textsuccess、textdangerなどのtextクラスを使うことで、Bootstrapカラーシステムに沿った統一感のあるデザインが実現できます。特にWeb制作やフロントエンド開発においては、視覚的な意味付けが重要です。成功メッセージには緑色、警告には赤色、情報には青色といったように色を役割で使い分けることで、ユーザー体験を高めることができます。

また、CSSで独自のcolorを指定する方法も覚えておくと便利です。ブランドカラーを使いたい場合や、Bootstrapの標準カラーでは足りない場合には、クラスを作成してcolorを指定します。currentColorの仕組みを理解していれば、どの方法を使っても最終的には文字色がアイコンに反映されることが分かります。これはBootstrap Iconsだけでなく、SVGアイコン全般に応用できる知識です。

さらに、Bootstrap Iconsと背景色を組み合わせることで、ボタン風の装飾やバッジ風デザインも簡単に作成できます。roundedやpクラスを活用すれば、初心者でも整ったデザインを実装できます。Bootstrap5アイコンデザイン、textクラス使い方、currentColor仕組み理解、SVG色変更方法といった基礎知識をしっかり押さえることが、実務で役立つフロントエンドスキルの土台になります。

サンプルプログラムで総復習

<style>
.icon-box {
    color: #0d6efd;
    background-color: #e9ecef;
    padding: 15px;
    border-radius: 10px;
    display: inline-block;
}
</style>

<div class="icon-box">
    <i class="bi bi-thumbs-up-fill"></i> いいねアイコン
</div>

<p class="text-success">
    <i class="bi bi-check-circle-fill"></i> 成功メッセージ
</p>

<p class="text-danger">
    <i class="bi bi-x-circle-fill"></i> エラーメッセージ
</p>

上記のように、colorを指定したクラスとtextクラスを組み合わせることで、Bootstrap Iconsの色変更は自在にコントロールできます。Bootstrap5テキストユーティリティ、SVGアイコン色変更、currentColor理解、Bootstrapデザイン統一といったキーワードの理解が深まれば、応用力も自然と身につきます。