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

生徒

「Bootstrapのアラートやバッジの色をまとめて変えることってできますか？ひとつひとつCSSを書き直すのは大変そうです。」

先生

「はい、BootstrapではSassの変数を使うことで、テーマカラーを一括で置き換えることができますよ。アラートもバッジもトーストもまとめて同じ配色に変えられるんです。」

生徒

「Sassってなんですか？CSSとどう違うんですか？」

先生

「SassはCSSをもっと便利に書ける仕組みです。特に“変数”というものがあって、色やサイズをひとつの名前にまとめて管理できます。たとえば“メインカラーは青”と変数にしておけば、それを呼び出すだけで簡単に使い回せます。」

1. アラート・バッジ・トーストの色を統一する理由

Webサイトやアプリケーションを作るとき、通知や警告に使うアラート、情報を強調するバッジ、ポップアップ表示されるトーストなどは欠かせません。Bootstrapではこれらのコンポーネントにすでにテーマ色が用意されていますが、デフォルトのままではプロジェクトごとに雰囲気が合わないこともあります。

そこで、Sassの変数を使って配色を統一すると、ブランドカラーやテーマカラーに合わせて一括で変更できるようになります。たとえば「赤を警告色にしたい」「青を情報用にしたい」といった調整がとても簡単になります。

2. Sass変数でテーマ色をまとめる仕組み

Bootstrapでは $primary や $danger のようなテーマ変数が最初から用意されています。これを置き換えることで、アラート・バッジ・トーストなど、共通の色を使っている部分が一気に変更されます。

つまり、個別にCSSを上書きする必要がなく、「テーマカラーを変更 → 全体に反映」という効率的な仕組みになっているのです。

3. 実際にテーマ色を置き換えてみよう

ここでは例として、アラートやバッジ、トーストのテーマ色をオレンジ系に変更する方法を紹介します。変数を書き換えると、すべてのコンポーネントが同じカラーで統一されます。


<!-- アラート -->
<div class="alert alert-primary" role="alert">
  カスタマイズしたテーマカラーのアラートです！
</div>

<!-- バッジ -->
<span class="badge bg-primary">新着</span>

<!-- トースト -->
<div class="toast show">
  <div class="toast-header bg-primary text-white">
    <strong class="me-auto">通知</strong>
  </div>
  <div class="toast-body">
    テーマ色を一括変更しました！
  </div>
</div>

ブラウザ表示

下記のように変数を変更して上書きをします。


<style>
    /* テーマカラーをオレンジ系にまとめて設定 */
    :root {
        --bs-primary: #ff6600; /* メインカラー */
        --bs-danger: #cc3300; /* 危険・エラー */
        --bs-success: #ff9900; /* 成功をオレンジ寄りに */
    }
</style>

<!-- アラート -->
<div class="alert alert-primary" role="alert">
  カスタマイズしたテーマカラーのアラートです！
</div>

<!-- バッジ -->
<span class="badge bg-primary">新着</span>

<!-- トースト -->
<div class="toast show">
  <div class="toast-header bg-primary text-white">
    <strong class="me-auto">通知</strong>
  </div>
  <div class="toast-body">
    テーマ色を一括変更しました！
  </div>
</div>