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

生徒

「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」と書くだけで自動的に青が出てくるので、とても便利です。プログラミング初心者でも「名前と色をセットで覚えるカードの集まり」と考えれば理解しやすいでしょう。

3. map-mergeでブランドカラーを追加する方法

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


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

4. 追加したカラーを使う

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


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

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

5. ブランドカラーを使うメリット

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

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

6. 複数のブランドカラーを追加する例

もし「ブランド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といったクラスを作れば、サイト全体で一貫した色使いができます。

まとめ

この記事では、Bootstrapの$theme-colorsを拡張して、ブランドカラーを追加する方法について、Sassのmap-mergeを中心に詳しく解説しました。Bootstrapは初期状態でも使いやすいCSSフレームワークですが、実際のWeb制作やWebデザイン、企業サイトやサービスサイトの開発では「自分たちのブランドカラーを使いたい」という場面が必ず出てきます。そのときに重要になるのが、$theme-colorsの理解と拡張です。

$theme-colorsは、Bootstrap全体で使われる色をまとめて管理しているSassのmap変数です。primaryやsuccess、dangerといった定番カラーは、このmapに登録されているからこそ、ボタンや背景、テキストの色として簡単に使えるようになっています。つまり、このmapに新しい色を追加すれば、Bootstrapの仕組みそのままで、独自のカラーを自然に使えるようになります。

ここで登場したmap-mergeは、既存の設定を壊さずに新しい要素を追加できる、とても安全で実用的な方法です。初心者の方がやりがちなのは、$theme-colorsをすべて書き直してしまうことですが、それではBootstrap本来の便利な色設定が失われてしまいます。map-mergeを使えば、元の色をそのまま残しつつ、必要なブランドカラーだけを追加できるため、実務でも安心して使えます。

ブランドカラーを追加するメリットは、見た目がきれいになるだけではありません。色を変数として一元管理できることで、サイト全体のデザインに統一感が生まれます。ロゴ、ボタン、見出し、リンクなどが同じ色のルールで構成されると、訪問者にとって「覚えやすい」「信頼感のある」サイトになります。これはブランディングの観点でも非常に重要なポイントです。

また、運用や保守の面でも大きなメリットがあります。もし将来「ブランドカラーを変更したい」「別のサービス用に色を増やしたい」となった場合でも、$theme-colorsのmapを書き換えるだけで対応できます。CSSをあちこち修正する必要がないため、修正漏れや色の不統一といったトラブルを防げます。初心者のうちから、この考え方に慣れておくと、規模の大きなプロジェクトでも役立ちます。

複数のブランドカラーを追加する方法も紹介しましたが、これは実際の現場でもよく使われるパターンです。例えば、企業サイトとキャンペーンサイトで色を切り替えたい場合や、管理画面とユーザー画面でテーマカラーを分けたい場合など、柔軟なデザイン設計が可能になります。BootstrapとSassを組み合わせることで、こうした要件にも無理なく対応できます。

ブランドカラー拡張の確認サンプル

最後に、$theme-colorsで追加したブランドカラーを使った簡単な確認用サンプルです。実際にブラウザで表示し、色が正しく反映されているかを確認してみてください。


<style>
.brand-box {
    background-color: var(--bs-brand);
    padding: 1.5rem;
    color: #fff;
    border-radius: 0.5rem;
}
</style>

<div class="brand-box">
    ブランドカラーを使ったサンプル表示
</div>

このように、Bootstrapの仕組みを活かしたままブランドカラーを扱えるようになると、デザインの自由度と管理のしやすさが大きく向上します。まずは一色追加するところから始めて、少しずつ慣れていくのがおすすめです。

先生と生徒の振り返り会話

生徒

「Bootstrapの色って固定だと思っていましたが、こんなふうに追加できるんですね。」

先生

「そうなんです。$theme-colorsを理解すると、Bootstrapが一気に使いやすくなります。」

生徒

「map-mergeなら、元の色を壊さないのが安心でした。」

先生

「実務でも必須の考え方なので、ぜひ覚えておきましょう。」

生徒

「次は複数のブランドカラーを使ったデザインにも挑戦してみたいです。」