CSS変数で管理をスマートに！テーマカラー切り替えの作り方

Posted on by

〜デザイン変更に強い“メンテナブルCSS”の第一歩〜

色変更のたびにCSSを探していませんか？

Webサイト制作で、こんな経験はありませんか？

「メインカラーを変えてって言われたけど、CSSファイル中の何十か所も直すの大変…」
「ダークモードを追加したいけど、どこから手をつければいいかわからない…」

その悩み、CSS変数（Custom Properties）で解決できます！

CSS変数を使えば、サイト全体の色やフォントを一元管理できるようになり、
テーマカラーの切り替えも、わずか数行で実現可能です。

この記事では、CSS変数の基本から、
ダークモード・ブランドテーマ切り替えの実装までを解説します。

CSS変数（Custom Properties）とは？

CSS変数とは、CSS内で再利用できる「変数（値の置き換え）」の仕組みです。
従来のCSSでは、同じ色を何度も指定していました

h1 { color: #2196f3; }
button { background-color: #2196f3; }
a:hover { color: #2196f3; }

これをCSS変数で書くとこうなります。

:root {
  --main-color: #2196f3;
}

h1 { color: var(--main-color); }
button { background-color: var(--main-color); }
a:hover { color: var(--main-color); }

ここがポイント！

  • --変数名 で宣言し、
  • var(--変数名) で呼び出す。

これで、色変更時も1箇所修正で済みます！

CSS変数を使うメリット

CSS変数は単なるショートカットではなく、保守性と拡張性を高める設計思想です。

従来のCSSCSS変数を使ったCSS
値を直接指定値を変数として管理
修正箇所が多い1箇所変更で全体が反映
テーマ切替が難しい簡単にカラー切替可能
JS連携が面倒JSから動的に変更可能

特に近年のUIトレンド（ダークモード・ブランドテーマ切替）には必須のスキルです。

基本構文とスコープの考え方

CSS変数は「どこで宣言したか」によって有効範囲（スコープ）が変わります。

/* グローバル変数（全体） */
:root {
  --main-color: #4CAF50;
}

/* ローカル変数（特定の要素だけ） */
.card {
  --main-color: #FF9800;
}

ルール

  • :root → HTML全体（グローバル変数）
  • .class や #id → その要素内のみ（ローカル変数）

同じ変数名でも、下位スコープで再定義すれば上書きできます。

テーマカラーを切り替える仕組み

ここからが本題です。
CSS変数を使うと、ダークモード／ライトモードの切り替えもCSSだけで可能です。

基本構成例

<body class="light">
  <h1>テーマ切り替えデモ</h1>
  <button id="toggle">テーマ変更</button>
</body>
:root {
  --bg-color: #ffffff;
  --text-color: #222222;
}

body {
  background: var(--bg-color);
  color: var(--text-color);
}

/* ダークテーマ用 */
body.dark {
  --bg-color: #222222;
  --text-color: #ffffff;
}

そして、ボタンでクラスを切り替えるだけ

const body = document.body;
document.getElementById("toggle").addEventListener("click", () => {
  body.classList.toggle("dark");
});

これだけでOK！

  • CSS変数の値が切り替わり、
  • 全体の配色が即座に変化。
  • JavaScriptはわずか数行。

ブランドテーマを複数切り替える

ダークモードだけでなく、「ブランドごとの色テーマ」も簡単にできます。

:root {
  --main-color: #2196f3; /* blue */
}

body.red {
  --main-color: #e53935;
}

body.green {
  --main-color: #43a047;
}

HTMLでクラスを切り替えるだけ

<body class="red">
  <h1>ブランドテーマ：レッド</h1>
</body>

CSS変数は、まさに「サイト全体のカラーパレット」を動的に管理できる仕組みです。

変数を使った便利な応用テク

① グラデーションも変数化できる！

:root {
  --grad: linear-gradient(45deg, #ff6b6b, #f8e71c);
}
button {
  background: var(--grad);
}

② 複数の値を組み合わせて柔軟に再利用

:root {
  --shadow-color: rgba(0, 0, 0, 0.15);
  --radius: 12px;
}
.card {
  border-radius: var(--radius);
  box-shadow: 0 4px 10px var(--shadow-color);
}

③ 計算もできる！calc()と組み合わせ

:root {
  --base-size: 16px;
}
h1 {
  font-size: calc(var(--base-size) * 2.5);
}

CSS変数は、数値計算・色の指定・アニメーションなど
あらゆる場面で活躍します。

アニメーションと組み合わせた「動的テーマ」

CSS変数はアニメーションにも対応します。
たとえば、テーマ変更時に「フェードする」演出

body {
  transition: background 0.4s ease, color 0.4s ease;
}

クラスを切り替えるだけで、色が滑らかに変化します。

これにより、単なるON/OFFではなくUXを意識した切り替えが実現できます。

CSS変数×JavaScriptで“リアルタイム操作”

JavaScriptからCSS変数を変更することもできます。

document.documentElement.style.setProperty('--main-color', '#ff4081');

これにより、ユーザーが選択したカラーを即反映することも可能。
たとえば、ユーザーがカラーピッカーでテーマを選べるサイトもCSS変数で簡単に構築できます。

プリプロセッサ（Sass）との違い

よく混同されるのが「Sass変数」との違いです

比較項目Sass変数CSS変数
定義場所コンパイル時実行時（ブラウザ上）
変更可能性不可可能（JSやクラス変更で動的切替）
使用範囲Sassファイル内のみCSS全体・DOM全体
主な用途コーディング効率テーマ・動的スタイル変更

結論

  • Sassは「開発効率向上」、
  • CSS変数は「運用と体験の最適化」に強い。

CSS変数管理のベストプラクティス

  1. 命名規則を統一する
    　例：--color-primary, --font-size-base, --space-lg
  2. テーマ単位でまとめる
:root {
  /* light */
  --color-bg: #fff;
  --color-text: #222;
}
[data-theme="dark"] {
  --color-bg: #222;
  --color-text: #fff;
}
  1. カラーパレットを一元化
    　ブランド変更・季節テーマ変更も一瞬で。
  2. メンテナンスしやすい階層構造に
:root {
  --color-bg-primary: #f9f9f9;
  --color-bg-secondary: #fff;
  --color-text-main: #222;
}

CSS変数は「設計」と「統一性」が命。
設計が整理されていれば、規模が大きくなっても崩れません。

まとめ：CSS変数で“考えるCSS”へ

CSS変数は、単なる新機能ではなく、設計思想の進化です。

  • 修正が簡単
  • テーマ変更が一瞬
  • JSとも連携可能
  • UXまでコントロールできる

つまり、CSS変数は「デザインと開発の橋渡し」です。

CSSを“書く”から“設計する”へ。
変数管理で、あなたのCSSはもっとスマートに。