CSS

CSSの変数とは？使い方を徹底解説

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

CSS変数（カスタムプロパティ） とは、CSSの中で値を再利用できる仕組みのことです。
通常のプログラミング言語の「変数」と同じように、色・フォントサイズ・余白などを1か所で定義して、複数の場所で使い回せる ようになります。

例えば、Webサイト全体のテーマカラーを1か所で管理できるので、デザイン変更がとても楽になります。

📌 CSS変数の基本的な書き方

1. 変数の定義

CSS変数は --変数名 という形式で書きます。
通常は :root セレクタに定義しておくと、ページ全体で使えます。

:root {
  --main-color: #3498db;
  --font-size-large: 18px;
}

2. 変数の呼び出し

定義した変数を使うときは、var(--変数名) と書きます。

h1 {
  color: var(--main-color);
  font-size: var(--font-size-large);
}

これで h1 の文字色は #3498db（青色）、文字サイズは 18px になります。

🎨 実例：テーマカラーを変数で管理する

:root {
  --main-bg: #f5f5f5;
  --main-color: #2ecc71;
  --text-color: #333;
}

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

button {
  background: var(--main-color);
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
}

このように変数を使えば、Webサイトの配色を一括で管理できる ようになります。
もしテーマカラーを変更したい場合は、:root 内の --main-color を1か所修正するだけでOKです。

💡 CSS変数のメリット

  1. 保守性が高い
  • 変数を使わないと、同じ色をCSSのあちこちに書く必要があります。
  • 変数を使えば、1か所修正するだけで全体が変わるので管理がラク。
  1. 一貫性を保てる
  • サイト全体で統一したデザインが実現できる。
  1. 動的に変更できる（JavaScriptと連携可能）
  • CSS変数はJavaScriptからも操作できるので、ダークモードの切り替えなどにも便利。

🖥️ 応用：ダークモードの切り替えに使う

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

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

/* ダークモード */
.dark-mode {
  --bg-color: #000000;
  --text-color: #ffffff;
}
<body>
  <button onclick="document.body.classList.toggle('dark-mode')">
    ダークモード切替
  </button>
</body>

このように、classを切り替えるだけでデザインを変更可能 です。
JavaScriptで classList.toggle() を使えば、クリックひとつでライト/ダークモードを実装できます。

⚠️ 初心者がつまずきやすいポイント

  • 変数名は必ず -- から始める必要がある
  • 値を呼び出すときは必ず var(--変数名) を使う
  • IE11ではサポートされていない（モダンブラウザでは問題なし）

📌 まとめ

  • CSS変数（カスタムプロパティ）とは、値を使い回せる仕組み
  • :root に定義し、var(--変数名) で呼び出す
  • サイト全体のテーマカラーやフォントサイズ管理に便利
  • ダークモードの切り替えなど動的なスタイル変更にも活用できる
  • SEO的にも「保守性が高いコード」はGoogle評価にプラス

-CSS