CSS変数（カスタムプロパティ）を使ってデザインを一元管理

導入

• Webサイト全体の色や角丸、余白を手作業で統一しようとすると、ページ数が増えるほど修正漏れが発生しやすくなります。
• CSS変数（カスタムプロパティ）を使えば、共通値を一箇所で管理して自動的に反映でき、メンテナンス時間を短縮できます。
• 本記事では、基本構文からテーマ切り替え、フォント・余白の変数化までを初心者向けに解説します。

前提条件

• 基本的なCSSの書き方（セレクタやプロパティ）を理解していること。
• HTML/CSSを編集できる環境（例：VS Codeとローカルサーバー）が用意されていること。

ステップ1：CSS変数とは？

CSS変数（カスタムプロパティ）は、値に名前を付けて再利用する仕組みです。--変数名の形で宣言し、var()関数で参照します。

:root {
  --main-color: #007acc;
  --text-color: #333;
  --radius: 8px;
}

button {
  background-color: var(--main-color);
  color: white;
  border-radius: var(--radius);
}

• すべてのボタンが--main-colorを参照するため、色を変えたいときは:rootの値を更新するだけで全体に反映されます。
• 変数名は必ず--で始め、参照時はvar(--変数名)を使います。

ステップ2：:rootで全体のデザインを統一する

CSS変数にはスコープ（有効範囲）があり、通常は:rootにまとめるとサイト全体で再利用できます。

:root {
  --font-base: "Noto Sans JP", sans-serif;
  --font-size-base: 16px;
  --color-primary: #3498db;
  --color-secondary: #f39c12;
  --spacing: 1.5rem;
}

body {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  color: var(--color-primary);
  padding: var(--spacing);
}

• デザインガイドラインをコード上で可視化でき、変更箇所を一元化できます。
• 共通のフォントや余白、テーマカラーをここに集約すると保守が容易になります。

ステップ3：テーマ切り替えに応用する

CSS変数は親要素で上書きできるため、ライト／ダークテーマの切り替えが簡単に実現できます。

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

[data-theme="dark"] {
  --bg-color: #1e1e1e;
  --text-color: #ffffff;
}

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

document.querySelector("#toggle").addEventListener("click", () => {
  document.documentElement.toggleAttribute("data-theme", "dark");
});

• 変数の上書きだけでテーマが切り替わるため、JavaScriptは状態を切り替える処理に集中できます。
• 設計時に「どの変数をテーマごとに変えるか」を決めておくと、後から配色を追加する際もスムーズです。

ステップ4：フォントや余白も変数化する

色だけでなく、フォントサイズや余白も変数化することで、レイアウト変更に強いスタイル設計になります。

:root {
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --space-xs: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
}

• 文字サイズを一括で微調整したり、デバイスごとに余白を調整したりする場合に便利です。
• @mediaクエリ内で変数を上書きすれば、レスポンシブ対応もシンプルに記述できます。

ベストプラクティス

• 変数名は「意味」より「役割」を意識して付ける（例：--color-accent、--space-section）。
• 共通値はできるだけvar()で参照し、直接値を書かないことで変更漏れを防ぐ。
• テーマやコンポーネント単位で階層的に定義し、必要に応じて上書きできる構造にする。
• メディアクエリや状態（data-属性）で変数を上書きし、レスポンシブやインタラクションに備える。

よくある質問

Q. Sassの変数とどう違いますか？
A. Sassの変数はビルド時に固定されますが、CSS変数はブラウザ上で動的に値を変えられるため、テーマ切り替えやユーザー設定に向いています。

Q. 古いブラウザでも使えますか？
A. 主要なモダンブラウザで対応済みですが、IE11は非対応です。必要ならフォールバックを検討してください。

Q. デザインシステムに活用できますか？
A. はい。色・余白・フォントを変数化すれば、デザインルールをコードで一元管理でき、プロジェクト全体の整合性を高められます。

まとめ

• CSS変数を使えば、色・フォント・余白などの共通値を一箇所で管理でき、デザイン変更が容易になります。
• 親要素で変数を上書きするだけでテーマ切り替えやレスポンシブ調整が実現し、メンテナンス性が向上します。
• まずは基礎となるカラーや文字サイズから変数化を始め、デザインシステムの土台を整えましょう。