2026年4月16日
CSS 変数（カスタムプロパティ）とは？
「サイトのメインカラーを変えたいとき、CSSファイルの何十か所も書き換えないといけない…」という経験はありませんか？
CSSカスタムプロパティ（CSS変数）を使うと、色やサイズなどの値を変数として定義し、1か所変えるだけで全体に反映できます。
カスタムプロパティの定義と使い方
変数は --変数名: 値; の形で定義し、var(--変数名) で使います。
/* :root に定義するとページ全体で使える */
:root {
--color-primary: #0d9488;
--color-bg: #f0f9ff;
--font-size-base: 16px;
--border-radius: 8px;
}
/* var() で使う */
.btn {
background-color: var(--color-primary);
border-radius: var(--border-radius);
}
body {
background-color: var(--color-bg);
font-size: var(--font-size-base);
}🔗 あわせてCSS詳細度（優先順位）もチェックしてみましょう。
テーマカラーの管理に便利
サイト全体のカラーテーマを変数で管理すると、1か所変えるだけで全体に反映されます。
:root {
--primary: #0d9488;
--primary-dark: #0f766e;
--text: #1f2937;
--bg: #ffffff;
}
/* ダークモード */
@media (prefers-color-scheme: dark) {
:root {
--text: #f9fafb;
--bg: #111827;
}
}📖 詳しくはCSS問題ドリルで解説しています。
フォールバック値
var(--変数名, フォールバック値) の形で、変数が未定義のときのデフォルト値を指定できます。
.btn {
/* --color-accent が未定義なら #f59e0b を使う */
background-color: var(--color-accent, #f59e0b);
}👉 CSSで色を指定する方法も参考にしてください。
まとめ
- ✅ CSSカスタムプロパティ：
--変数名: 値で定義する - ✅
var(--変数名)で使う - ✅
:rootに定義するとページ全体で使える - ✅ テーマカラーを変数で管理すると、1か所変えるだけで全体に反映される
- ✅
var(--変数名, デフォルト値)でフォールバックを設定できる
CSSカスタムプロパティを使うと、保守しやすいCSSが書けます。レッスンでさらに詳しく学んでみましょう。
🎛️ CSS Variables を動かして体感しよう！
6つのカスタムプロパティをリアルタイム編集。プリセット4種・スコープ切替でvar()の仕組みを直感的に理解できます。
CSS Variables プレイグラウンド →