CSS: CSS変数
最終更新：2026-10-13
CSS変数（カスタムプロパティ）を使えば、CSSで再利用可能な値を定義でき、プログラミング言語の変数に似ています。CSS変数を使用すると、繰り返しコードを大幅に削減し、テーマカラー、スペーシングなどのデザイントークンを簡単に管理できます。
1. 変数の定義
CSS変数はカスタムプロパティ名（--で始まる）を使用して宣言します：
▶ サンプル
▶ 試してみよう2. 変数の使用
var()関数を使用して変数を参照します：
▶ サンプル
▶ 試してみよう3. 変数のスコープ
CSS変数のスコープは、定義された場所によって決まります：
グローバル変数 — :rootで定義：
▶ サンプル
▶ 試してみようローカル変数 — 特定のセレクターで定義され、そのセレクターとその子要素にのみ有効：
▶ サンプル
▶ 試してみよう4. 変数の継承
CSS変数は通常のCSSプロパティと同様に継承されます：
▶ サンプル
▶ 試してみよう5. var()のフォールバック値
var()は第2パラメータをフォールバックとして設定でき、変数が未定義の場合に使用されます：
▶ サンプル
▶ 試してみよう6. JavaScriptによる変数の変更
✅ テーマ切り替えの実装： CSS変数とJavaScriptを組み合わせることは、「ダークモード」を実装するための最適なソリューションです——
<html>のdata-theme属性を切り替え、CSSで変数を使用して異なる色を参照し、1行のJSコードでサイト全体のカラースキームを切り替えます。
CSS変数の大きな利点は、JavaScriptで動的に変更できることです：
▶ サンプル
▶ 試してみよう7. テーマ切り替えの実装
CSS変数は「ダークモード」のようなテーマ切り替えを実装するための最適な方法です：
▶ サンプル
▶ 試してみようその後、JavaScriptでテーマを切り替えます：
JAVASCRIPT
document.documentElement.setAttribute('data-theme', 'dark');
// または
document.documentElement.setAttribute('data-theme', 'light');
8. CSS変数の利点
- 繰り返しコードの削減: 1つの変数を多くの場所で使用し、1回変更するだけですべてを更新
- 実行時の変更可能: テーマ切り替えのためにJSで動的に変更可能
- スコープ制御: 特定のコンテナで変数で変数値をオーバーライド可能
- セマンティック:
--primary-colorは#3498dbよりも理解しやすい
9. プリプロセッサとの違い
CSS変数（カスタムプロパティ）はSass/Less変数とは異なります：
| 機能 | CSS変数 | Sass変数 |
|---|---|---|
| 実行時の変更 | ✅ 可能 | ❌ コンパイル後に固定 |
| スコープ | ✅ CSS継承 | ❌ コンパイル後に固定値 |
| ブラウザ | モダンブラウザ対応 | ブラウザサポート不要（プリコンパイル済み） |
| JSとの連携 | ✅ 読み書き可能 | ❌ アクセス不可 |
❓ よくある質問
Q CSS変数とSass変数の違いは何ですか？
A CSS変数は真のCSSプロパティで、ブラウザで動的に変更でき、JavaScriptの読み書きをサポートします。Sass変数はコンパイル後に固定値となり、実行時に変更できません。CSS変数はテーマ切り替えが可能ですが、Sass変数はできません。競合せず、併用できます。
Q CSS変数のスコープルールは何ですか？
A CSS変数はカスケードルールに従います。
:rootで定義された変数はグローバルに利用可能で、要素で定義された変数はその要素とその子要素にのみ有効です。このプロパティにより、ローカルテーマのオーバーライドが可能になります——コンテナに異なる変数値を与えると、内部のすべての参照が自動的に変更されます。Q CSS変数でダークモードを実装できますか？
A はい、これはCSS変数の最も古典的なユースケースです。
:rootでライトカラーの変数を定義し、[data-theme="dark"]でダーク値でオーバーライドし、1行のJavaScript document.documentElement.dataset.theme = "dark"でサイト全体のカラースキームを切り替えられます。📖 まとめ
- CSS変数はモダンCSS開発で非常に重要なツールです
--変数名で定義し、var()で使用し、スタイルコードをよりクリーンでメンテナンスしやすくします- 最大の価値：1つの値を変更すると、その変数を参照するすべての場所が自動的に更新される
- テーマ切り替え、レスポンシブカラースキーム、統一デザイン言語——CSS変数は大規模プロジェクトで特に便利です
📝 練習問題
- CSS変数を使用して、テーマカラー、テキスト色、スペーシングなど少なくとも5つの変数を定義し、ページ全体で使用するページを作成してください。
- 上記のページに基づいて、「ワンクリックテーマカラー切り替え」を実装してください——
:rootのプライマリカラー変数を変更し、関連するすべての要素の変更を観察してください。 - CSS変数を使用してシンプルな「昼/夜」モード切り替えを実装してください（JSでクラスまたはdata-theme属性を切り替え）。
- コンテナ（カードコンポーネントなど）でCSS変数値をローカルにオーバーライドし、子要素のスタイルの変更を観察してください。
