変数の使い方 - HTML・CSS

  • 作成日：
  • 最終更新日：2025/12/21

変数の定義

:root 疑似クラスで変数を宣言するとどこでも利用できます。

/* どこでも使用可能 */
:root {
  --text-color: red;
}

変数を利用するには以下のようにします。

h1 {
  color: var(--text-color);
}

CSS変数は、宣言したセレクタが指定する要素を起点として、その子孫要素までスコープが及びます。

以下の場合、pタグのブロック内で変数が宣言されていない為「 --text-color 」は適用されません。

h1 {
  --text-color: red;
  color: var(--text-color);
}
p {
  color: var(--text-color);
}

以下の場合は、赤色が適用されるのは「 #target h1 」のみ赤色が適用になり、「 header1 」は黒色のままです。

#target {
  --text-color: red;
}
h1 {
  color: var(--text-color);
}
<h1>header1</h1>
<div id="target">
  <h1>hello</h1>
</div>