先生と生徒の会話形式で理解しよう

生徒

「Bootstrap Iconsを使っているんですが、アイコンの色やサイズを毎回クラスで指定するのが面倒です。もっと効率的に管理できませんか？」

先生

「それならSassの変数を使って、アイコンの色やサイズを統一管理する方法がおすすめですよ。変数にまとめておけば、あとから色を変えるのも簡単です。」

生徒

「Sass変数で色やサイズを変えられるんですか？CSSのfont-sizeやcolorを直接書かなくてもいいんですか？」

先生

「はい。Sass変数に設定して、それをカスタムCSSに適用することで、全てのアイコンに一括で反映できます。つまり、管理の手間が大幅に減ります。」

1. Bootstrap Iconsとは？

Bootstrap Iconsは、Bootstrapチームが提供している公式のアイコンセットです。CDNやnpmで簡単に導入でき、<i class="bi bi-alarm"></i>のようにクラスを指定するだけで表示できます。

通常はfont-sizeやcolorを個別に指定して使いますが、Sass変数を活用すれば、色やサイズを全体で統一でき、デザインが整いやすくなります。

2. Sass変数でアイコンを統一管理する考え方

例えば、アイコンの色を$icon-color、サイズを$icon-sizeという変数にまとめておくと便利です。サイト全体でアイコンを変更したいときも、変数を1か所修正するだけで済みます。

これは、会社の制服を「青」に決めたら全員が自動的に青い服を着るのと同じイメージです。変数を「制服の色」として決めると、全体が統一されるわけです。

3. 実際のコード例（CSS変数で管理）

ここでは、CSS変数を使ってアイコンの色とサイズをまとめて管理する例を紹介します。


<style>
    :root {
        --icon-color: #ff6600;  /* アイコンの色 */
        --icon-size: 2rem;      /* アイコンの大きさ */
    }
    .bi {
        color: var(--icon-color);
        font-size: var(--icon-size);
    }
</style>

<i class="bi bi-alarm"></i>
<i class="bi bi-heart-fill"></i>
<i class="bi bi-star-fill"></i>

ブラウザ表示