CSSにvar(–main-color);みたいな記述があるけど、これは何？

2025.06.10

本サイト掲載の模写コーディングデモのCSS内に、var(--main-color);のような記述を見かけることがあります。これはCSSカスタムプロパティ（CSS変数）と呼ばれているものです。これを使うとCSSコーディングがより便利になります。

CSSカスタムプロパティはどういう時に使うの

例えばサイトのメインカラーとして赤（#b2072c）を使っているとします。メインカラーですからサイト内のいろいろなところに使用することが想定されますね。

h2 {
  color: #b2072c;
}

.block {
  background-color: #b2072c;
}

などなど。

ところが、ある程度コーディングしたところでメインカラーを変更する必要が出てきたとき、どうしますか？一つ一つすべての色を変更しないといけないですね。

そこで役に立つのがカスタムプロパティです。

CSSのカスタムプロパティ（CSS変数）は、スタイルシート内で再利用可能な値を定義できる仕組みです。これを使えば、コードの保守性が向上し、変更が容易になります。

例では色の設定をしていますが、もちろんあらゆる値で使えます。

CSSカスタムプロパティの使い方

カスタムプロパティは、-- で始まる名前を使って定義します。定義した変数は、var() 関数を使って使用します。

定義元の値を変更すれば、使用箇所全てで同時に値が変更されます。

/* 変数の定義 */
:root { /* :rootについては後述 */
  --main-color: #b2072c;
  --font-size: 16px;
}

/* 変数の使用 */
h2 {
  color: var(--main-color);
  font-size: var(--font-size);
}

スコープ

CSSカスタムプロパティにはスコープ（影響範囲）があり、定義した場所によってその影響範囲が異なります。

• :root擬似クラスで定義したカスタムプロパティは、全ての要素で利用可能（グローバル変数といいます）。
• 特定の要素内で定義した場合、その要素とその子要素にのみ影響します。

<div class="container">
  <h1>見出し</h1>
</div>
<p>
  テキスト
</p>

/* グローバル変数 */
:root {
  --main-color: #b2072c;
}

/* 特定の要素にスコープを絞った変数 */
.container {
  --main-color: #e74c3c;
}

h1 {
  color: var(--main-color); /* h1が.container内にあるので#e74c3cが使用される */
}

p {
  color: var(--main-color); /* pは.container外なので#b2072cが使用される */
}

このように、CSSの変数を活用すると、デザインの一貫性を保ちながら効率的なスタイル設定が可能になります。