BootstrapのSass変数とマップ変更点を徹底解説！初心者でもわかるテーマ再設計とカラー体系の移し替え
生徒
「Bootstrap3から5に移行するときに、色の指定が変わったって聞いたんですがどういうことですか？」
先生
「Bootstrap5ではSass変数やマップの扱い方が大きく変わっています。特にカラー体系の管理方法が整理されて、テーマ全体の再設計がしやすくなりました。」
生徒
「Sassって何ですか？CSSと違うんですか？」
先生
「SassはCSSをもっと便利に書けるようにするための仕組みです。変数を使って色をまとめて管理できるので、デザインを一括で変更するのに役立ちます。」
1. Bootstrap3・4とBootstrap5のSass変数の違い
Bootstrap3や4では、色やサイズなどをカスタマイズするために個別の変数がたくさん存在していました。例えば「$brand-primary」という変数を使って、サイト全体のメインカラーを指定していました。
しかし、Bootstrap5では変数がより体系的に整理され、カラーをまとめた「マップ」という仕組みが導入されています。マップとは、ひとつの箱に複数の色をまとめて管理するようなイメージです。
例えば、赤・青・緑といった色をバラバラに扱うのではなく「色セット」としてひとまとめにできるので、テーマ全体を見直すときに便利です。
2. Sass変数とマップを使ったカラー管理の基本
Bootstrap5では、色は「$colors」というマップにまとめられています。この中に「primary」「secondary」「success」などのキーがあり、それぞれに色が割り当てられています。
初心者の方は「キー」という言葉に馴染みがないかもしれません。これは「名前をつけておいたラベル」のようなものだと思ってください。たとえば「primary=青」「danger=赤」といった具合です。
$colors: (
"primary": #0d6efd,
"secondary": #6c757d,
"success": #198754,
"danger": #dc3545,
"warning": #ffc107,
"info": #0dcaf0,
"light": #f8f9fa,
"dark": #212529
);
3. テーマ再設計でのカラー体系の移し替え
Bootstrap3では「$brand-primary」などの単独変数を上書きして色を変更していました。しかしBootstrap5ではマップの中身を変更する方法が主流です。
例えば、サイトのメインカラーを青から緑に変更したい場合、次のようにマップを上書きします。
$theme-colors: map-merge(
$theme-colors,
(
"primary": #28a745
)
);
これにより「primary」と指定していた部分すべてが自動的に緑色に切り替わります。ボタンやリンク、アラートなども統一感をもって色が変わるので、テーマ再設計が非常に楽になります。
4. 実際にテーマカラーを変更してみよう
では、実際にテーマカラーを変更したときのイメージを見てみましょう。以下の例では、h1見出しの色を「primary」にして、Sassの設定を変えることで色が変化します。
<style>
h1 {
color: #0d6efd; /* Bootstrapのprimary色（青） */
}
</style>
<h1>これはPrimaryカラーの見出しです</h1>
<style>
h1 {
color: #28a745; /* primaryを緑に変更した場合 */
}
</style>
<h1>これはPrimaryカラーを変更した見出しです</h1>
5. Bootstrap5でのカラー拡張と独自テーマ作成
Bootstrap5では、既存のカラーだけでなく独自の色を追加することも簡単になりました。たとえば「brand」という名前のオリジナルカラーをテーマに追加する場合、次のようにマップに組み込みます。
$theme-colors: map-merge(
$theme-colors,
(
"brand": #663399
)
);
この設定を行うと、クラスに「bg-brand」や「text-brand」と書くだけで、サイト全体にオリジナルの色を使えるようになります。初心者でも「自分だけのテーマ」を作りやすくなったのが大きなポイントです。
6. Sass変数・マップ変更点のメリット
最後に、Bootstrap5でSass変数とマップが変わったことで得られるメリットを整理しておきます。
- 色の一元管理がしやすくなり、テーマ変更が簡単になる。
- map-mergeを使えば部分的な変更や追加が可能。
- 複数のデザインパターンを効率的に切り替えられる。
- プロジェクト全体で統一感のあるカラー設計ができる。
この仕組みを理解すれば、Bootstrap5を使ったWebサイトのデザインがぐっと効率的になります。初心者の方でも、まずは「primary」「secondary」などの基本的なカラーを上書きして試してみると理解が深まります。
