CSS変数 (Custom Properties) を使いこなそう！

CSS変数 (Custom Properties) は、スタイルを効率的に管理し、メンテナンス性を向上させる強力なツールです！今回は、Twitter風にその基本から応用までを簡単に解説します。

1. CSS変数とは？

CSS変数は、スタイルの一貫性を保つために使える再利用可能な値です。JavaScriptの変数に似た概念で、デザインを柔軟に管理できます。

cssコードをコピーする:root {
  --main-color: #1DA1F2; /* Twitterのブランドカラー */
  --text-color: #14171A;
}

👉 --main-color や --text-color が変数です。

2. 使い方

変数は var() を使って呼び出します。

cssコードをコピーするbody {
  background-color: var(--main-color); /* 背景色を変数で指定 */
  color: var(--text-color);           /* テキストの色を変数で指定 */
}

3. 利用のメリット

• 一貫性: 1か所で色やサイズを変更すれば、全体に反映されます。
• 簡単なテーマ切り替え: ダークモードやテーマカラーの変更が容易に。

4. 実用例：ダークモード対応

ダークモードをCSS変数で簡単に実装する方法を紹介！

cssコードをコピーする:root {
  --bg-color: #ffffff;
  --text-color: #14171A;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #14171A;
    --text-color: #ffffff;
  }
}

📱 ダークモードの切り替えがスムーズに！

5. 便利テク：フォールバック値

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

cssコードをコピーするp {
  color: var(--secondary-color, #657786); /* 変数が未定義ならグレーを適用 */
}

6. 動的な変更 (JavaScript連携)

JavaScriptでCSS変数を操作することで、インタラクティブなデザインが可能です。

javascriptコードをコピーするdocument.documentElement.style.setProperty('--main-color', '#FF4500'); // 色を変更

7. 注意点

• ブラウザ対応: IEでは使えないため、ポリフィルが必要な場合があります。
• スコープの範囲: CSS変数は宣言したセレクタ内でのみ有効です。:root で定義すると全体で使用可能。