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

生徒

「Bootstrapの色って最初から決まっているみたいですが、自分のブランドカラーを追加できますか？」

先生

「はい、BootstrapではSassの$theme-colorsという変数に色がまとめられています。これを拡張することで、自分のブランドカラーを追加できます。」

生徒

「拡張ってどうやるんですか？全部書き直さないといけないんですか？」

先生

「いいえ、Sassのmap-mergeという便利な仕組みを使えば、既存の色を残したまま、新しい色だけを追加できます。」

生徒

「なるほど！それなら安心してブランドカラーを入れられそうですね！」

1. $theme-colorsとは？

$theme-colorsは、Bootstrapで使われる色の一覧を管理するSassの変数です。青色のprimary、緑色のsuccess、赤色のdangerなど、よく使う色がすでに用意されています。

この変数を拡張すると、ボタンや背景、文字色などに自分の好きな色を簡単に使えるようになります。例えば「自社のロゴカラーをボタンに使いたい」といった場合にとても役立ちます。

2. Sassのmapとは？初心者向けのたとえ

Sassの「map（マップ）」は、いわば「色の辞書」です。例えば、「primaryは青」「dangerは赤」といった対応表のようなものです。

通常のCSSでは色をその都度指定しますが、Sassのmapを使えば「primary」と書くだけで自動的に青が出てくるので、とても便利です。プログラミング初心者でも「名前と色をセットで覚えるカードの集まり」と考えれば理解しやすいでしょう。

map-mergeは、既存のmapに新しい要素を追加するための関数です。これを使えば、$theme-colorsに自分のブランドカラーを追加できます。例えば、オレンジ色の「brand」という色を追加する場合は次のように書きます。


<style>
$theme-colors: map-merge(
  $theme-colors,
  (
    "brand": #ff6600
  )
);
</style>

ブランドカラーを追加したら、Bootstrapのクラスに組み込まれて使えるようになります。例えば、.btn-brandというクラスでオレンジ色のボタンが作れます。


<style>
.btn-brand {
    background-color: var(--bs-brand);
    color: #fff;
}
</style>

<button class="btn btn-brand">ブランドカラーのボタン</button>

ブランドカラーを$theme-colorsに追加すると、サイト全体で統一感のあるデザインができます。特に企業サイトやサービスサイトでは、ロゴやアイコンと同じ色を使うことで「ブランディング効果」が高まります。

さらに、変数で管理しているので「色を変更したい」と思ったときも一箇所書き換えるだけで済みます。これにより修正コストも大幅に下がります。

もし「ブランドA」「ブランドB」のように複数の色を追加したい場合も簡単です。map-mergeの中にまとめて記述すればOKです。


<style>
$theme-colors: map-merge(
  $theme-colors,
  (
    "brand-a": #ff6600,
    "brand-b": #0099cc
  )
);
</style>

これでbtn-brand-aやbtn-brand-bといったクラスを作れば、サイト全体で一貫した色使いができます。