CSS変数（カスタムプロパティ）を使用すると、スタイルの一貫性を保ちつつ、管理を効率化できます。本記事では、CSS変数の基本的な使い方から応用例までを解説します。

CSS変数の基本

CSS変数は、-- で始まる名前を持ち、:root で定義することで全体に適用できます。

:root {
–primary-color: #3498db;
–secondary-color: #2ecc71;
–font-size: 16px;
}

変数を使用するには、var() 関数を使います。

body {
background-color: var(–primary-color);
color: white;
font-size: var(–font-size);
}

button {
background-color: var(–secondary-color);
border: none;
padding: 10px 20px;
font-size: var(–font-size);
}

スコープと継承

CSS変数は、定義された要素のスコープ内で有効です。:root に定義すると全体で使えますが、特定の要素内にのみ適用することも可能です。

.card {
–card-bg: #ffffff;
background-color: var(–card-bg);
padding: 20px;
border-radius: 8px;
}

.card.dark {
–card-bg: #333;
}

変数のフォールバック

変数が未定義の場合、フォールバック値を指定できます。

p {
color: var(–text-color, black);
}

JavaScriptでの操作

CSS変数はJavaScriptで動的に変更可能です。

メディアクエリとの組み合わせ

ダークモードなど、メディアクエリと組み合わせることで柔軟なデザイン変更が可能です。

@media (prefers-color-scheme: dark) {
:root {
–primary-color: #222;
–secondary-color: #444;
}
}

まとめ

CSS変数を活用すると、スタイルの管理がしやすくなり、テーマ変更やレスポンシブデザインにも柔軟に対応できます。ぜひプロジェクトに取り入れてみてください！