CSS変数（カスタムプロパティ）とは？

CSS変数（カスタムプロパティ）とは、CSS内で再利用可能な値を定義できる機能です。
これにより、テーマのカスタマイズやスタイルの管理が容易になります。

1. CSS変数の基本的な使い方

CSS変数は--から始まる名前で定義し、var()関数を使って参照します。

:root {
    --main-color: #3498db;
    --text-color: #333;
    --font-size: 16px;
}

body {
    color: var(--text-color);
    font-size: var(--font-size);
}

h1 {
    color: var(--main-color);
}

解説

• :root はCSS変数をグローバルに適用するために使われます。
• var(--変数名) で変数を呼び出し、どこでも利用可能。

2. CSS変数を変更する

CSS変数はJavaScriptを使って動的に変更できます。

document.documentElement.style.setProperty('--main-color', '#e74c3c');

これにより、リアルタイムでデザインを変更することも可能です。

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

レスポンシブデザインにも活用できます。

:root {
    --font-size: 16px;
}

@media (max-width: 600px) {
    :root {
        --font-size: 14px;
    }
}

body {
    font-size: var(--font-size);
}

これにより、画面幅600px以下ではフォントサイズが14pxに変わります。

4. まとめ

CSS変数を使うことで、

• 一元管理でスタイル変更が簡単
• JavaScriptと組み合わせて動的に変更可能
• レスポンシブデザインにも活用できる

などのメリットがあります。ぜひ活用して、保守しやすいCSSを作りましょう！