CSS 変数とは

ひとに説明するなら

「CSS 変数は、色に名前をつけておく仕組み。『--accent は #A6542F』と一度書いておけば、あとは名前で呼べる。色を変えたくなったら、一か所直すだけで全部変わる」

たとえるなら

料理のレシピで「だし」と書いておくようなものです。だしの中身を変えれば、それを使う料理すべての味が変わります。

色に名前をつける

CSS 変数は、「--」で始まる名前に値を入れて登録します。使うときは「var(--名前)」と書きます。

サイトのあちこちで同じ色を使っていても、色を変えたいときは、登録したところを一か所直すだけで済みます。

:root {
  --color-base: #F6F4EF;
  --color-text: #2A2925;
  --color-accent: #A6542F;
}
.button {
  background: var(--color-accent);
  color: var(--color-base);
}

名前のつけ方で、使いやすさが変わる

「--orange」のように色そのものの名前をつけると、あとでオレンジ以外の色に変えたとき、名前と中身がずれてしまいます。

「--color-accent（強調の色）」「--color-text（文字の色）」のように、役割で名前をつけておくと、色を差し替えても意味が変わりません。

場面ごとに、中身を入れ替えられる

CSS 変数は、場所や条件によって中身を変えられます。ダークモードのときだけ色を入れ替えたり、ページの一部だけ別の配色にしたりするのが簡単です。

呼び出すときに「var(--color-accent, #000)」のように書くと、変数が見つからなかったときの代わりの色も決めておけます。

よくある勘違い

COLOR JOURNEY で使うには

COLOR JOURNEY のパレットのページからダウンロードできる CSS には、6色が、パレットの名前に1〜6の番号をつけた CSS 変数として入っています。読み込むだけで、パレットの色を名前で呼び出せます。

あわせて、背景（--cj-bg）、文字（--cj-text）、アクセント（--cj-accent）、アクセントの上の文字（--cj-on-accent）、面（--cj-surface）、面の上の文字（--cj-on-surface）という、役割の名前の変数も入っています。サイトの CSS をこの役割の変数で書いておけば、別のパレットに差し替えるのも簡単です。Tailwind の設定の形でも書き出せます。

参考になるパレット

Horizon Code

Algorithm Garden

Midnight Server

Silicon Sunset

クイズ

1. CSS 変数を呼び出す書き方は？

   var(--名前)

   正解です。答えは「var(--名前)」。登録は「--名前」、呼び出しは「var(--名前)」です。

   $名前

   ちがいます。答えは「var(--名前)」。登録は「--名前」、呼び出しは「var(--名前)」です。

   @名前

   ちがいます。答えは「var(--名前)」。登録は「--名前」、呼び出しは「var(--名前)」です。

2. 色を差し替えても意味が変わりにくい変数名は？

   --orange

   ちがいます。答えは「--color-accent」。役割で名前をつけると、中身の色を変えても意味がずれません。

   --color-accent

   正解です。答えは「--color-accent」。役割で名前をつけると、中身の色を変えても意味がずれません。

   --color1

   ちがいます。答えは「--color-accent」。役割で名前をつけると、中身の色を変えても意味がずれません。

よくある質問

関連する言葉

• デザイントークン
• ダークモード
• カラーコード
• カラーパレット