CSS変数（カスタムプロパティ）の使い方——var()で色を一括管理

サイトのテーマカラーを、オレンジから緑に変えたくなったとします。colorやbackgroundに書いたオレンジは、ページのあちこちに30か所——ぜんぶ探して書き直すのは大変です。色に名前をつけて1か所で管理する方法があります。それがCSS変数です。

書き方は「しまう」と「取り出す」

:root {
  --main-color: #ff8a3d;
}

h2 {
  color: var(--main-color);
}
.button {
  background: var(--main-color);
}

部分	意味
`:root`	ページ全体を指す特別なセレクタ（変数の置き場所の定番）
`--main-color`	変数の名前。`--`で始めて、自分で好きにつける
`var( )`	しまった値を取り出すいれもの

h2の文字も.buttonの背景も、正体は同じ--main-color。:rootの1行を#2ec46fに変えれば、両方が一度に緑になります。

見出しの色・ボタン・バッジ——ぜんぶvar(--main-color)で書いたミニページです。ボタンで変数の中身だけを切りかえます。

ボタンがやっているのは、--main-colorの中身の書きかえだけ。下線もバッジもボタンも全部var(--main-color)で書かれているので、1か所の変更がページ全体に届きます。

変数にしまえるのは色だけではありません。余白や文字サイズなど、くり返し使う値は何でもしまえます。

:root {
  --main-color: #ff8a3d;
  --content-width: 800px;
  --card-radius: 12px;
}

「サイト全体の設定表」が、CSSの先頭にできあがるイメージです。あとから見返す自分にも、やさしい書き方です。