CSSで設定した値を繰り返し使える！カスタムプロパティ（変数）の使い方

CSSカスタムプロパティ（変数）は「設定した値を何度も使えるようにする」仕組み。

サイト内で繰り返し登場するプロパティ値（色や数値）を変数にして一箇所でまとめることで、コードの管理がとても楽になります。

この記事ではCSSカスタムプロパティ（変数）の使い方と、よく使われる値を解説します。

ぜひ使い方を覚えておきましょう！

CSSカスタムプロパティ（変数）とは

CSSカスタムプロパティは「変数」をイメージしてください。「変数」とはデータを入れる箱のようなもので、箱に名前をつけて保持しておくことができる記憶領域です。

例えば、「この色をサイト全体でメインに使いたい！」というときに、その色を変数に設定しておいて、あちこちで呼び出して使えるようにします。

メインカラーに#ff0000（赤）を使う場合。

CSSカスタムプロパティ（変数）を使わないと

すべての要素にそれぞれカラーコードを記述します。

.container {
    color:#ff0000;
}

.button {
    background-color:#ff0000;
}

h2{
    border-color: :#ff0000;
}

CSSカスタムプロパティ（変数）を使うと

1. :root で–main-colorという名前をつけた変数の箱に#ff0000 を入れます。（変数の宣言）
2. 変数を使うときはvar() 関数を使って–main-colorを呼び出します。

:root {
    --main-color: #ff0000;/*ここで変数を宣言*/
}

.container {
    color:var(--main-color);/*--main-color呼び出し*/
}

.button {
    background-color: var(--main-color);/*--main-color呼び出し*/
}

h2{
    border-color: var(--main-color);/*--main-color呼び出し*/
}

このように「一度設定した値を何度も使えるようにする」ときにとても重宝します。

では、使い方を詳しく説明しますね。

CSSカスタムプロパティ（変数）の宣言

CSSカスタムプロパティ（CSS変数）の宣言方法はシンプル。

以下のように、カスタムプロパティ名（変数名）の前に２つの半角ハイフン（--）を付けて定義します。半角ハイフン（--）で始まるカスタムプロパティ名を:コロンで区切り、そのあとに指定する値を書きます。

カスタムプロパティを宣言する場所は、:root セレクタか、特定のCSSセレクタ内のどちらかです。

:root

:root は全体に適用したいカスタムプロパティをここで宣言します。

html { ... }と書いても同様です。:root はドキュメントの最上位要素を指すセレクタ（詳細度が強い）なので、確実にルート要素を指定できます。

:root {
    --main-color: #3498db;
    --font-size: 16px;
}

特定のセレクタ内

特定の要素やクラス、ID内でのみ使用したい場合は、そのセレクタの中でカスタムプロパティを宣言します。

.container{
    --padding-size: 20px;
}

この例では、.container クラス内でのみ --padding-size が適用されます。

CSSカスタムプロパティ（変数）の使い方

次に使い方です。

宣言したカスタムプロパティを使用するには、var() 関数を使います。

.container{    background-color: var(--main-color); /* 背景色にメインの色を使う */
    padding: var(--padding-size);        /* パディングに設定したサイズを使う */
}

上記の例では、.containerクラスの背景色とパディングに、設定した変数を使っています。

このように、一度設定した変数を簡単に呼び出して使うことができます。

CSSカスタムプロパティ（変数）で設定できる変数

CSSカスタムプロパティは、基本的にどのような値でも変数として使用することができます。以下に、よく使われる変数の種類を紹介します。

1. 色

色に関する値は、カスタムプロパティに頻繁に使用されます。これはサイト全体で統一したカラーテーマを適用する際に非常に便利です。

:root {
    --primary-color: #3498db;
    --secondary-color: rgba(52, 152, 219, 0.8);
}

これらの変数は、色指定に使用できます。

.button {
    background-color: var(--primary-color);
    border-color: var(--secondary-color);
}

2. 数値

数値（ピクセルやパーセンテージなど）は、サイズや間隔の設定に使用されます。

:root {
    --padding-size: 16px;
    --border-radius: 8px;
}

.container {
    padding: var(--padding-size);
    border-radius: var(--border-radius);
}

3. フォント設定

フォントファミリーやフォントサイズも、カスタムプロパティで定義して一貫性を持たせることができます。

:root {
    --font-family: 'Arial, sans-serif';
    --font-size: 16px;
}

.body-text {
    font-family: var(--font-family);
    font-size: var(--font-size);
}

4. 寸法

寸法（幅、高さ、マージン、パディングなど）も変数として使用できます。これにより、レイアウトの調整が簡単になります。

:root {
    --max-width: 1200px;
    --margin-size: 20px;
}

.wrapper {
    max-width: var(--max-width);
    margin: var(--margin-size) auto;
}

5. タイミング

アニメーションやトランジションの持続時間もカスタムプロパティで管理できます。

:root {
    --transition-duration: 0.3s;
    --animation-delay: 0.5s;
}

.element {
    transition: all var(--transition-duration) ease;
    animation-delay: var(--animation-delay);
}

6. 複雑なCSS関数や計算結果

calc() 関数やグラデーションなどの複雑な値もカスタムプロパティに設定できます。

:root {
    --spacing-unit: 10px;
    --calculated-margin: calc(var(--spacing-unit) * 2);
    --gradient-background: linear-gradient(45deg, #3498db, #e74c3c);
}

.box {
    margin: var(--calculated-margin);
    background: var(--gradient-background);
}

CSSカスタムプロパティ／変数が設定されていなかったら？フォールバック

もし設定したカスタムプロパティがない場合でも、フォールバック値（代わりの値）を設定しておくことができます。

.button {
    background-color: var(--main-color, #2ecc71); /* もしメインの色がなかったら、この緑色を使う */
}

この例では、--main-color が設定されていなければ、緑色（#2ecc71）が使われます。

CSSカスタムプロパティ（変数）／スコープによる使い分け

同じ名前のカスタムプロパティでも、場所によって違う値を使い分けることができます。

:root {
    --main-color: #3498db; /* 全体のメイン色 */
}

.container {
    --main-color: #e74c3c; /* コンテナ内で使う別の色 */
}

.button {
    background-color: var(--main-color); /* ボタンの背景色 */
}

このコードでは、button が container の中にあると赤色（#e74c3c）が使われ、外にあると青色（#3498db）が使われます。

CSSカスタムプロパティ（変数）／JavaScriptと組み合わせて使う

カスタムプロパティは、JavaScriptからも操作できます。JavaScriptでカスタムプロパティの値を変更したい時は setProperty が使えます。

これにより、ページが表示された後でもスタイルを変更できます。

document.documentElement.style.setProperty('--main-color', '#51677a'); /* メインの色を青に変更 */

CSSカスタムプロパティ（変数）を宣言する際の注意

1. -- で始まる: すべてのカスタムプロパティ名は -- で始まる必要があります。
2. 名前に使える文字: 英数字、ハイフン、アンダースコアを使用し、スペースや特殊文字は避けます。
3. プロパティ名をカスタムプロパティにできない:使えるのは値のみです。
4. 大文字と小文字の区別: 名前は大文字・小文字を区別します。
5. CSS予約語の注意: CSSの予約語を避け、誤解を防ぐ名前を選びましょう。
6. 長すぎる名前は避ける:適度な長さで分かりやすい名前を付けましょう。

1.ハイフン（--）から始まる名前

CSSカスタムプロパティは必ず２つのハイフン（--）から始める必要があります。この規則に従わない場合、CSS変数として認識されません。

/* 有効な宣言 */
:root {
    --main-color: #3498db;
}

/* 無効な宣言 */
:root {
    main-color: #3498db; /* ハイフンがないため無効 */
}

2. 名前に使える文字

カスタムプロパティの名前には、英数字（a-z、0-9）、ハイフン（-）、およびアンダースコア（_）を使用できます。スペースや他の特殊文字（例: !, @, # など）は使えません。

/* 有効な宣言 */
:root {
    --primary-color: #3498db;
    --font_size: 16px;
}

/* 無効な宣言 */
:root {
    --primary color: #3498db; /* スペースは無効 */
    --@font-size: 16px;       /* 特殊文字も無効 */
}

3.プロパティ名をカスタムプロパティにできない

プロパティ名をカスタムプロパティにすることはできません。使えるのは値のみです。

/* プロパティ名はNG*/
:root {
    --bg: background-color;
    var(--bg): blue;
}

:root {
    --bg: background-color: blue; /* 無効な宣言 */
}

4. 大文字と小文字の区別

カスタムプロパティの名前は、大文字と小文字が区別されます（ケースセンシティブ）。--Main-Color と --main-color は異なる変数として扱われますが、一般的にはすべて小文字で記述するのが推奨されます。

:root {
    --Main-Color: #3498db;
    --main-color: #e74c3c;
}

/* 使用例 */
.element {
    background-color: var(--main-color); /* #e74c3c が適用される */
}

5. CSS予約語の注意

CSSの予約語（inherit、initial、unset など）は、カスタムプロパティ名として使用することはできますが、誤解を招く可能性があるため避けるのが賢明です。

/* 予約語を避けたほうが良い */
:root {
    --initial: 10px; /* 予約語 "initial" を使用 */
}

.element {
    margin: var(--initial); /* 動作はするが混乱を招く可能性あり */
}

6. 長すぎる名前は避ける

技術的には制限はありませんが、名前が長すぎると管理や理解が難しくなるため、適度な長さで分かりやすい名前を付けることが推奨されます。

CSSカスタムプロパティ（変数）まとめ

CSSカスタムプロパティは一度設定した値を何度も使えるので、サイト全体のデザインを一貫させるのがとても簡単になります。最初は少し慣れが必要かもしれませんが、使いこなせば作業がぐっと楽になりますよ。

この記事は以上です。