CSSカスタムプロパティ（変数）の使い方【初心者向け】

/* :root に定義するとページ全体で使える */
:root {
  --color-primary: #0d9488;   /* メインカラー */
  --color-bg: #f0f9ff;        /* 背景色 */
  --font-size-base: 16px;     /* 基本フォントサイズ */
  --border-radius: 8px;       /* 角の丸み */
  --spacing-md: 16px;         /* 中くらいの余白 */
}

/* var() で使う */
.btn {
  background-color: var(--color-primary);
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
}

body {
  background-color: var(--color-bg);
  font-size: var(--font-size-base);
}

/* ❌ 変数なしだとカラーが散らばる */
.header { background-color: #0d9488; }
.btn-primary { background-color: #0d9488; }
.link { color: #0d9488; }
.border-accent { border-color: #0d9488; }
/* → 色を変えたいとき、全部書き換えないといけない！ */

/* ✅ 変数ありなら1か所を変えるだけでOK */
:root {
  --color-primary: #0d9488;
}

.header { background-color: var(--color-primary); }
.btn-primary { background-color: var(--color-primary); }
.link { color: var(--color-primary); }
.border-accent { border-color: var(--color-primary); }
/* → --color-primary の値を1か所変えるだけで全部変わる！ */

:root {
  --primary: #0d9488;
  --primary-dark: #0f766e;
  --text: #1f2937;      /* 通常は濃い色の文字 */
  --bg: #ffffff;        /* 通常は白い背景 */
  --card-bg: #f8fafc;
}

/* ダークモード（システムの設定に従って自動で切り替わる） */
@media (prefers-color-scheme: dark) {
  :root {
    --text: #f9fafb;    /* ダークモードでは明るい文字 */
    --bg: #111827;      /* ダークモードでは暗い背景 */
    --card-bg: #1f2937;
  }
}

.btn {
  /* --color-accent が未定義なら #f59e0b を使う */
  background-color: var(--color-accent, #f59e0b);

  /* ネストも可能 */
  color: var(--btn-text, var(--text, #1f2937));
}

/* グローバル変数（ページ全体で使える） */
:root {
  --color-primary: #0d9488;
}

/* ローカル変数（.cardの中だけで有効） */
.card {
  --card-padding: 24px;   /* .card の中だけで使える変数 */
  padding: var(--card-padding);
}

/* .card の子要素からも使える */
.card .card__title {
  margin-bottom: calc(var(--card-padding) / 2);
}

// カスタムプロパティの値を取得
const root = document.documentElement;
const primaryColor = getComputedStyle(root)
  .getPropertyValue('--color-primary').trim();
console.log(primaryColor); // #0d9488

// カスタムプロパティの値を変更
root.style.setProperty('--color-primary', '#2563eb'); // 青に変更

// テーマ切り替えボタンの例
document.getElementById('theme-btn').addEventListener('click', () => {
  const current = getComputedStyle(root)
    .getPropertyValue('--color-primary').trim();

  if (current === '#0d9488') {
    root.style.setProperty('--color-primary', '#dc2626'); // 赤
  } else {
    root.style.setProperty('--color-primary', '#0d9488'); // 元に戻す
  }
});