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

生徒

「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」などの基本的なカラーを上書きして試してみると理解が深まります。

まとめ

BootstrapのSass変数とマップを通して理解した全体像

今回の記事では、Bootstrapのバージョンアップに伴って変化したSass変数とマップの考え方について、基礎から順を追って確認してきました。Bootstrap3や4では、色ごとに個別の変数を上書きする方法が主流でしたが、Bootstrap5ではマップという仕組みを使って、カラー体系全体をまとめて管理する形に整理されています。この変更によって、テーマの再設計や配色の移し替えが格段にやりやすくなりました。

Sass変数は、色やサイズといったデザインの要素を一か所で管理できる仕組みです。Bootstrap5では、この変数をさらに一段階進めて、関連する色をひとまとめにしたマップとして扱うことで、全体を見渡しながら調整できるようになっています。個別対応ではなく、設計として色を管理するという考え方が、Bootstrap5の大きな特徴だと言えるでしょう。

カラー体系を意識したテーマ再設計の重要性

カラー体系を意識してテーマを設計することで、Webサイト全体の統一感が大きく変わります。primaryやsecondaryといった意味を持つ色に役割を与えておくことで、後から色を差し替える場合でも、Sassのマップを調整するだけで全体が連動して切り替わります。これは、デザインの修正が頻繁に発生する実務の現場では特に大きなメリットになります。

また、マップを使うことで、既存の色を変更するだけでなく、新しい色を追加することも容易になります。独自のブランドカラーを定義し、それを背景色や文字色として使えるようにしておけば、Bootstrapの標準デザインを活かしつつ、オリジナリティのあるテーマを構築できます。初心者にとっても、少しずつ試しながら理解を深められる仕組みです。

Sassマップ変更の考え方をコードで振り返る


$theme-colors: map-merge(
  $theme-colors,
  (
    "primary": #28a745,
    "brand": #663399
  )
);

このように、map-mergeを使って既存のマップに色を追加・変更することで、Bootstrap全体のカラー設定を安全に拡張できます。すべてを書き換える必要がないため、アップデートにも強く、保守性の高いテーマ設計が可能になります。コード自体も読みやすく、どの色をどう変更しているのかが一目で分かる点も魅力です。

CSSとして反映されるイメージを再確認


<style>
	h1 {
	    color: #28a745;
	}
</style>

<h1>テーマカラーを反映した見出し</h1>

ブラウザ表示

Sassで設定したテーマカラーは、最終的にCSSとしてブラウザに反映されます。普段はSassの設定を意識しながら書いていても、最終的にはこのようなシンプルなCSSの形で表示されていると考えると、理解しやすくなります。Sassはあくまで管理を楽にするための仕組みであり、表示の仕組み自体はCSSであることを押さえておくと混乱しにくくなります。

Bootstrap5のSass設計がもたらす学習効果

Bootstrap5のSass変数とマップの設計を学ぶことで、単にフレームワークの使い方を覚えるだけでなく、デザイン設計の考え方そのものにも触れることができます。色を感覚で当てはめるのではなく、役割として定義し、それを全体で共有するという考え方は、CSS設計やデザインシステム全般にも通じる重要な視点です。

初心者の段階では難しく感じるかもしれませんが、まずはprimaryやsecondaryといった基本の色を変更してみるだけでも十分な学習になります。少しずつマップの中身を確認しながら触れていくことで、Bootstrap5の設計思想が自然と理解できるようになります。

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

生徒

最初はSassやマップって難しそうだと思っていましたけど、色をまとめて管理しているだけだと考えると、だいぶ分かりやすくなりました。

先生

その理解で大丈夫ですよ。Bootstrap5では、色を点で扱うのではなく、体系として考えるように設計されています。慣れると変更がとても楽になります。

生徒

primaryの色を変えるだけで、ボタンや見出しが全部切り替わるのは便利ですね。テーマを作る感覚が少し分かってきました。

先生

いい感覚ですね。まずは既存のカラーを触ってみて、次に独自の色を追加してみると理解がさらに深まります。Sassマップはそのための道具だと思ってください。

生徒

Bootstrap5を使う理由が、デザインの管理のしやすさにもあるんだと実感できました。