CSSカスタムプロパティ（CSS変数）の活用ガイド
CSSカスタムプロパティ（--変数名）はCSS全体でデザイントークンを一元管理する強力な機能です。CSS Variable Inspectorを使えば、既存のCSSコードから変数を一括抽出し、カラーピッカーやスライダーで値をリアルタイムに調整できます。
CSSカスタムプロパティの基本
CSSカスタムプロパティは `--変数名: 値;` という形式で定義し、`var(--変数名)` で参照します。通常は `:root { }` に定義してグローバルスコープで使いますが、任意のセレクター内で定義すればそのスコープのみに適用されるローカル変数として機能します。ブラウザサポートはIE以外ほぼ全対応です。
デザイントークンとしての活用
CSS変数はデザイントークン（色・タイポグラフィ・スペーシングの設計値）を管理するのに最適です。`--color-primary: #3b82f6;` のようにセマンティックな名前を付け、コンポーネント全体で参照することで、テーマ変更をCSSの1箇所を変えるだけで全体に反映できます。
ダークモード切り替えのテクニック
CSSカスタムプロパティとメディアクエリを組み合わせると、JavaScriptなしでダークモードを実装できます。`:root { --bg: white; --text: black; } @media (prefers-color-scheme: dark) { :root { --bg: black; --text: white; } }` のようにメディアクエリ内で変数を上書きするだけです。
JavaScriptからの動的変更
CSS変数はJavaScriptから `document.documentElement.style.setProperty("--color-primary", "#ff0000")` で動的に変更できます。アニメーション・インタラクション・ユーザー設定の保存など、動的UIの実装に活用できます。CSS Variable Inspectorの出力コードをそのままコピーして貼り付けるだけでテーマ切り替えが実装できます。