CSS変数とは何か

CSS変数（Custom Properties）とは、CSSの中で値に名前をつけて使い回せる仕組みです。プログラミングの変数と同じ概念です。

例えば「ゴールド」という色を10箇所で使っている場合、変数を使えば1箇所だけ変えれば全部変わります。変数を使わない場合は10箇所すべてを修正しなければなりません。

AURELIONサイトの:rootを読む

サイトのCSSの先頭には :root というブロックがあります。ここがカラーパレットの定義場所です。

CSSindex.html <style> より
:root {
    /* ゴールド系 */
    --gold: #c9a84c;       /* メインのゴールド */
    --gold-light: #e8c96d;  /* 明るいゴールド */
    --gold-pale: #f5e6b8;   /* 薄いゴールド */

    /* ダーク系（背景色） */
    --dark: #080808;       /* 最も暗い（メイン背景） */
    --dark2: #111111;      /* 少し明るい暗い */
    --dark3: #1a1a1a;      /* さらに明るい暗い */

    /* テキスト系 */
    --text: #d4c9b0;       /* メインテキスト（温かみのある白） */
    --text-dim: #7a7060;   /* 薄いテキスト（説明文など） */
    --white: #f9f4eb;      /* 白（タイトルなど） */
}

カラーパレットの全色

--gold
--gold-light
--gold-pale
--dark
--dark2
--dark3
--text
--text-dim
--white

変数の書き方：定義と使用

定義（:rootの中）

CSS
:root {
    --変数名: 値;   /* --（ハイフン2つ）で始める */
}

使用（どのCSSプロパティでも）

CSS
body {
    background: var(--dark);     /* var(--変数名) で呼び出す */
    color: var(--text);
}

.nav-logo {
    color: var(--gold);         /* どこでも同じ変数が使える */
}

.watch-price {
    color: var(--gold);         /* 同じゴールドを統一して使用 */
}

変数を使うメリット

メリット1：色の変更が一箇所で済む

例えば --gold の値を変えると、サイト全体のゴールド色がすべて一括で変わります。

CSS
/* これを変えるだけで... */
:root {
    --gold: #c9a84c;   ← ここを #ff6b6b に変えれば...
}

/* ...サイト中のゴールドが全部赤に変わる */
color: var(--gold);         /* 自動で #ff6b6b になる */
border-color: var(--gold);   /* 自動で #ff6b6b になる */
background: var(--gold);     /* 自動で #ff6b6b になる */

メリット2：色に意味のある名前がつく

#c9a84c と書くより var(--gold) と書いた方が、「これはブランドカラーのゴールドだ」とすぐわかります。コードが読みやすくなります。

rgba() と組み合わせた半透明色

AURELIONサイトでは、ボーダーや微妙な背景色に半透明の色を多用しています。CSS変数と rgba() の組み合わせを見てみましょう。

CSSindex.html より
nav.scrolled {
    background: rgba(8, 8, 8, .96);        /* --dark の値をrgbaで半透明に */
    border-bottom: 1px solid rgba(201, 168, 76, .15);  /* --gold を15%透明度で */
}

.watch-visual::before {
    background: radial-gradient(ellipse at 50% 50%,
        rgba(201, 168, 76, .06) 0%,  /* ゴールドを6%透明度で */
        transparent 70%
    );
}
rgba()の第4引数

rgba(R, G, B, A) のAは透明度（0=完全透明、1=完全不透明）。0.15 は15%の不透明度＝ほぼ透明。AURELIONでは繊細な境界線を表現するために多用されています。

まとめ