CSS ・ その他
var()
CSS変数を参照
--名前 で定義したカスタムプロパティ（CSS変数）の値を参照する関数です。色や余白をまとめて管理できます。
01
サンプルコード
HTML
1<div class="theme">
2 <button class="btn">標準のボタン</button>
3</div>
4<div class="theme green">
5 <button class="btn">変数だけ変えたボタン</button>
6</div>
CSS
1:root {
2 --accent: #b68235;
3 --radius: 4px;
4}
5.green {
6 --accent: #2e7d5b;
7}
8.theme {
9 margin-bottom: 10px;
10}
11.btn {
12 padding: 8px 18px;
13 border: 0;
14 border-radius: var(--radius);
15 background: var(--accent);
16 color: #fff;
17 font: inherit;
18}
02
実行結果
ブラウザでの表示
03
解説
CSS変数は --accent: #b68235; のように -- で始まる名前で定義し、var(--accent) で値を取り出します。正式には「カスタムプロパティ」と呼び、「CSS変数」や「カスケード変数」と呼ばれることもあります。
:root（html 要素）に定義すると、ページ全体で使えます。色や余白を変数にしておけば、1か所変えるだけでサイト全体のデザインを変更できます。
CSS変数は継承されるため、上の例のように一部の範囲だけ値を上書きすると、その中の部品の色をまとめて変えられます。
04
応用例・注意点
書き方
| 書き方 | 説明 |
|---|---|
--accent: #b68235; | 変数を定義する |
var(--accent) | 変数の値を使う |
var(--accent, orange) | 変数がないときの代わりの値を指定 |
calc(var(--space) * 2) | 計算と組み合わせる |
ダークモードを変数で切り替える
data-theme 属性で変数の値を入れ替えます。このサイトでも使っている方法です。
CSS
1:root {
2 --bg: #f3f2f2;
3 --text: #201f1d;
4}
5[data-theme="dark"] {
6 --bg: #1a1918;
7 --text: #e4e0da;
8}
9body {
10 background: var(--bg);
11 color: var(--text);
12}
× プロパティ名は変数にできない
変数に入れられるのは値だけです。var() をプロパティ名の位置に書くと、その行は無効になります。
CSS
1/* × プロパティ名を変数にしている */
2:root {
3 --bgimage: background-image;
4}
5.kv {
6 var(--bgimage): url("../images/image_01.jpg");
7}
8
9/* ○ 値を変数にする */
10:root {
11 --kv-image: url("../images/image_01.jpg");
12}
13.kv {
14 background-image: var(--kv-image);
15}
注意点
- 01変数名は大文字・小文字を区別します（--Accent と --accent は別物）。
- 02メディアクエリの条件（@media (min-width: …)）の中では var() を使えません。