CSS Tips | 超実務コアCSSテクニック：カラー・背景 － CSS変数（カスタムプロパティ）

Web APP CSS
スポンサーリンク

CSS変数（カスタムプロパティ）は「色・余白・フォント」を“プロジェクト全体で統一”する最強の仕組み

CSS変数（custom properties）は、
「値に名前をつけて再利用できる」 という、デザイン設計に欠かせない機能です。

特にカラー設計では、
「ブランドカラーを1か所で管理できる」
「テーマ切り替え（ライト/ダーク）が簡単」
「Tailwind と併用すると最強」
というメリットがあります。

ここでは、初心者でも迷わないように
CSS と Tailwind CSS の両方で、例題を交えて丁寧に解説します。

CSS変数の基本：:root に書くと“全ページで使える”

CSS 版

:root {
  --color-primary: #2563eb;
  --color-secondary: #9333ea;
  --color-bg: #f9fafb;
}
CSS

使うとき

button {
  background: var(--color-primary);
  color: white;
}
CSS

深掘りポイント
CSS変数は var(–名前) で呼び出します。
Sass の変数と違い、JavaScript からも変更できるのが強みです。

Tailwind で CSS変数を使う（最も実務的）

Tailwind は text-[var(--color-primary)] のように
任意値で CSS変数をそのまま使える のが強力です。

Tailwind 版

<button class="px-4 py-2 rounded text-white bg-[var(--color-primary)]">
  ボタン
</button>
HTML

カラー設計の基本テンプレート（ブランドカラーを一元管理）

CSS 版

:root {
  --color-primary: #2563eb;
  --color-primary-light: #3b82f6;
  --color-primary-dark: #1e40af;

  --color-text: #1f2937;
  --color-muted: #6b7280;

  --color-bg: #ffffff;
  --color-bg-alt: #f3f4f6;
}
CSS

Tailwind 版（使用例）

<h1 class="text-[var(--color-primary-dark)] text-3xl font-bold">
  見出し
</h1>

<p class="text-[var(--color-muted)]">
  説明テキスト
</p>

<div class="bg-[var(--color-bg-alt)] p-4 rounded">
  カード
</div>
HTML

深掘りポイント
CSS変数で色を管理すると、
ブランドカラー変更が1行で済むため、
大規模サイトや長期運用で圧倒的に有利です。

例1：ホバー色も CSS変数で管理する

CSS 版

:root {
  --btn-bg: #2563eb;
  --btn-bg-hover: #1e40af;
}
CSS
button {
  background: var(--btn-bg);
}

button:hover {
  background: var(--btn-bg-hover);
}
CSS

Tailwind 版

<button
  class="px-4 py-2 rounded text-white
         bg-[var(--btn-bg)]
         hover:bg-[var(--btn-bg-hover)]">
  ホバーボタン
</button>
HTML

深掘りポイント
ホバー色を変数化すると、
「色の一貫性」が保たれ、デザインが崩れません。

例2：ダークモード切り替え（CSS変数が最強）

CSS 版

:root {
  --color-bg: #ffffff;
  --color-text: #1f2937;
}

.dark {
  --color-bg: #1f2937;
  --color-text: #f9fafb;
}
CSS

HTML

<body class="dark">
  <p style="color: var(--color-text); background: var(--color-bg);">
    ダークモード対応テキスト
  </p>
</body>
HTML

Tailwind 版

<p class="text-[var(--color-text)] bg-[var(--color-bg)]">
  ダークモード対応テキスト
</p>
HTML

深掘りポイント
CSS変数は「値を上書きできる」ため、
ダークモードのようなテーマ切り替えに最適です。

例3：フォントサイズや余白も変数化できる

CSS 版

:root {
  --fs-base: 1rem;
  --fs-lg: 1.25rem;

  --space-sm: 0.5rem;
  --space-md: 1rem;
}
CSS

Tailwind 版

<p class="text-[var(--fs-base)] mb-[var(--space-md)]">
  本文テキスト
</p>

<h2 class="text-[var(--fs-lg)] mb-[var(--space-sm)]">
  見出し
</h2>
HTML

深掘りポイント
CSS変数は「色だけ」ではありません。
余白・フォント・影・角丸 など、すべて変数化できます。

例4：コンポーネント単位で変数を上書きする

CSS 版

.card {
  --card-bg: #ffffff;
  --card-border: #e5e7eb;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
}

.card.highlight {
  --card-bg: #fef3c7;
  --card-border: #f59e0b;
}
CSS

Tailwind 版

<div class="card bg-[var(--card-bg)] border border-[var(--card-border)] p-4 rounded">
  通常カード
</div>

<div class="card highlight bg-[var(--card-bg)] border border-[var(--card-border)] p-4 rounded">
  ハイライトカード
</div>
HTML

深掘りポイント
CSS変数は「スコープ（適用範囲）」を持つため、
コンポーネント単位で色を変えるのが簡単です。

例5：JavaScript で CSS変数を変更する（動的テーマ）

CSS 版

:root {
  --color-primary: #2563eb;
}
CSS

JS

document.documentElement.style.setProperty("--color-primary", "#dc2626");
JavaScript

Tailwind 版（使用例）

<button class="bg-[var(--color-primary)] text-white px-4 py-2 rounded">
  動的カラー
</button>
HTML

深掘りポイント
CSS変数は JS から変更できるため、
「ユーザーが色を選べる UI」なども簡単に作れます。

CSS変数の設計ポイント（ここが一番大事）

1. :root に“ブランド設計”を書く

色・余白・フォントなど、プロジェクト全体で使う値をまとめる。

2. 変数名は「意味」でつける

× –blue
○ –color-primary
× –big
○ –fs-xl

3. コンポーネント単位で上書きできる

カード・ボタン・セクションごとに変数を再定義できる。

4. Tailwind と併用すると最強

bg-[var(--color-primary)] のように自由に使える。

5. ダークモード・テーマ切り替えに最適

CSS変数は「値を後から上書きできる」ため、テーマ設計が簡単。

実務テンプレート：CSS変数 × Tailwind の最強セット

CSS（global.css）

:root {
  --color-primary: #2563eb;
  --color-text: #1f2937;
  --color-bg: #ffffff;
}

.dark {
  --color-primary: #3b82f6;
  --color-text: #f9fafb;
  --color-bg: #1f2937;
}
CSS

Tailwind（HTML）

<div class="p-6 bg-[var(--color-bg)] text-[var(--color-text)]">
  <h1 class="text-3xl font-bold text-[var(--color-primary)]">
    タイトル
  </h1>

  <button class="mt-4 px-4 py-2 rounded bg-[var(--color-primary)] text-white">
    ボタン
  </button>
</div>
HTML

まとめ

CSS変数（カスタムプロパティ）は
色・余白・フォント・テーマを“プロジェクト全体で統一”するための最強の仕組み です。

ポイントは次の通りです。

  • :root にブランド設計を書く
  • var(–名前) で呼び出す
  • Tailwind の任意値と相性抜群
  • ダークモードやテーマ切り替えが簡単
  • コンポーネント単位で上書きできる

スポンサーリンク
タイトルとURLをコピーしました