EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語

CSS変数

CSS変数（カスタムプロパティ）を使えば、CSSで再利用可能な値を定義でき、プログラミング言語の変数に似ています。CSS変数を使用すると、繰り返しコードを大幅に削減し、テーマカラー、スペーシングなどのデザイントークンを簡単に管理できます。

変数の定義

CSS変数はカスタムプロパティ名（--で始まる）を使用して宣言します：

サンプル

HTML 
<style>
/* :rootでグローバル変数を定義 */
:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --text-color: #333;
  --border-radius: 8px;
  --spacing: 16px;
  --font-size: 16px;
}
</style>
▶ 試してみよう

変数の使用

var()関数を使用して変数を参照します：

サンプル

HTML 
<style>
.button {
  background-color: var(--primary-color);
  color: white;
  border-radius: var(--border-radius);
  padding: var(--spacing);
  font-size: var(--font-size);
}

.card {
  border: 1px solid var(--primary-color);
  border-radius: var(--border-radius);
  padding: var(--spacing);
}
</style>
<button class="button">ボタン</button>
<div class="card">カード</div>
▶ 試してみよう

変数のスコープ

CSS変数のスコープは、定義された場所によって決まります：

グローバル変数 — :rootで定義：

サンプル

HTML 
<style>
:root {
  --color: blue;
}
</style>
<div class="box-demo">現在のプロパティの効果を示すデモボックス</div>
▶ 試してみよう

ローカル変数 — 特定のセレクターで定義され、そのセレクターとその子要素にのみ有効：

サンプル

HTML 
<style>
.card {
  --card-bg: #f5f5f5;
  --card-padding: 20px;
}

.card-header {
  background: var(--card-bg);
  padding: var(--card-padding);
}
</style>
<div class="card">カード</div>
<div class="card-header">カードヘッダー</div>
▶ 試してみよう

変数の継承

CSS変数は通常のCSSプロパティと同様に継承されます：

サンプル

HTML 
<style>
:root {
  --theme-color: #333;
}

/* コンテナで変数をオーバーライド */
.dark-theme {
  --theme-color: #eee;
}

.dark-theme .content {
  color: var(--theme-color);  /* #eee */
}

.content {
  color: var(--theme-color);  /* #333 */
}
</style>
<div class="dark-theme">ダークテーマのプレビュー</div>
<div class="content">メインコンテンツエリア</div>
▶ 試してみよう

var()のフォールバック値

var()は第2パラメータをフォールバックとして設定でき、変数が未定義の場合に使用されます：

サンプル

HTML 
<style>
.element {
  color: var(--undefined-color, red);  /* --undefined-colorが未定義のためredを使用 */
  background: var(--bg, var(--fallback, #eee));  /* フォールバックをネスト可能 */
}
</style>
<div class="element">これはサンプル要素です</div>
▶ 試してみよう

JavaScriptによる変数の変更

✅ テーマ切り替えの実装： CSS変数とJavaScriptを組み合わせることは、「ダークモード」を実装するための最適なソリューションです——<html>のdata-theme属性を切り替え、CSSで変数を使用して異なる色を参照し、1行のJSコードでサイト全体のカラースキームを切り替えます。

CSS変数の大きな利点は、JavaScriptで動的に変更できることです：

サンプル

JAVASCRIPT 
// 取得
const color = getComputedStyle(document.documentElement)
  .getPropertyValue('--primary-color');

// 設定
document.documentElement.style.setProperty('--primary-color', '#e74c3c');
▶ 試してみよう

テーマ切り替えの実装

CSS変数は「ダークモード」のようなテーマ切り替えを実装するための最適な方法です：

サンプル

HTML 
<style>
/* ライトテーマ（デフォルト） */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --card-bg: #f5f5f5;
  --border-color: #dddddd;
}

/* ダークテーマ */
[data-theme="dark"] {
  --bg-color: #1a1a2e;
  --text-color: #eeeeee;
  --card-bg: #16213e;
  --border-color: #0f3460;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}
</style>
▶ 試してみよう

その後、JavaScriptでテーマを切り替えます：

JAVASCRIPT 
document.documentElement.setAttribute('data-theme', 'dark');
// または
document.documentElement.setAttribute('data-theme', 'light');

CSS変数の利点

  1. 繰り返しコードの削減: 1つの変数を多くの場所で使用し、1回変更するだけですべてを更新
  2. 実行時の変更可能: テーマ切り替えのためにJSで動的に変更可能
  3. スコープ制御: 特定のコンテナで変数で変数値をオーバーライド可能
  4. セマンティック: --primary-colorは#3498dbよりも理解しやすい

プリプロセッサとの違い

CSS変数（カスタムプロパティ）はSass/Less変数とは異なります：

機能 CSS変数 Sass変数
実行時の変更 ✅ 可能 ❌ コンパイル後に固定
スコープ ✅ CSS継承 ❌ コンパイル後に固定値
ブラウザ モダンブラウザ対応 ブラウザサポート不要（プリコンパイル済み）
JSとの連携 ✅ 読み書き可能 ❌ アクセス不可

❓ よくある質問

Q CSS変数とSass変数の違いは何ですか？
A CSS変数は真のCSSプロパティで、ブラウザで動的に変更でき、JavaScriptの読み書きをサポートします。Sass変数はコンパイル後に固定値となり、実行時に変更できません。CSS変数はテーマ切り替えが可能ですが、Sass変数はできません。競合せず、併用できます。
Q CSS変数のスコープルールは何ですか？
A CSS変数はカスケードルールに従います。`:root`で定義された変数はグローバルに利用可能で、要素で定義された変数はその要素とその子要素にのみ有効です。このプロパティにより、ローカルテーマのオーバーライドが可能になります——コンテナに異なる変数値を与えると、内部のすべての参照が自動的に変更されます。
Q CSS変数でダークモードを実装できますか？
A はい、これはCSS変数の最も古典的なユースケースです。`:root`でライトカラーの変数を定義し、`[data-theme="dark"]`でダーク値でオーバーライドし、1行のJavaScript `document.documentElement.dataset.theme = "dark"`でサイト全体のカラースキームを切り替えられます。

📖 まとめ

📝 演習

  1. CSS変数を使用して、テーマカラー、テキスト色、スペーシングなど少なくとも5つの変数を定義し、ページ全体で使用するページを作成してください。
  2. 上記のページに基づいて、「ワンクリックテーマカラー切り替え」を実装してください——:rootのプライマリカラー変数を変更し、関連するすべての要素の変更を観察してください。
  3. CSS変数を使用してシンプルな「昼/夜」モード切り替えを実装してください（JSでクラスまたはdata-theme属性を切り替え）。
  4. コンテナ（カードコンポーネントなど）でCSS変数値をローカルにオーバーライドし、子要素のスタイルの変更を観察してください。
100%