CSS

A way to store design values like colors or spacing with a name, and call them later using var(), so you can change your whole design easily.

var()

var()とは

var() は、CSSの中で自分で決めた名前の値（カスタムプロパティ）を呼び出すための関数です。

たとえば、「共通の色」や「余白の大きさ」を何度も使いたいとき、ひとつの場所にまとめておくと管理が楽になります。

「変数」と呼ばれる仕組みで、あとから値を変えたいときに、1か所を直すだけで全体が変わるのが便利なポイントです。

使い方の流れ（かんたんに言うと）

  1. まず、変数（カスタムプロパティ）を作る。
  2. それを var() で呼び出して使う。

サンプルコード

こう書けばOKです：

CSS

:root {
    --mainColor: #ff6600;
    --basePadding: 16px;
}

.box {
    color: var(--mainColor);
    padding: var(--basePadding);
}

ポイント：

もう少しだけ詳しく

var() には「もし値がなかったら代わりに使う値」も指定できます：

CSS

color: var(--textColor, #333);

（--textColor がなければ #333 が使われます）

ページ全体のテーマカラーやフォントサイズなどをまとめると、デザイン変更がぐっと楽になります。

よくあるつまずき