CSS カスタムプロパティの使い方「定義」と「呼出」

CSSでカスタムプロパティなるものがあることを知りました。

ウェブサイトの複数のページで同じプロパティ値を使用している場合、たとえば背景色ですが、背景色の値を修正するときには置換することになります。

このときCSSでカスタムプロパティを使用すると置換せずに一箇所の修正で済みます。

CSSのカスタムプロパティを知り、使い方を覚えた私は嬉しくなったので、カスタムプロパティの使い方を基本的なことにはなりますが記事にまとめました。

1. カスタムプロパティの使い方は2ステップ
2. CSSでカスタムプロパティを定義する
3. CSSのカスタムプロパティをvar関数で呼び出す
4. カスタムプロパティの使用例

カスタムプロパティの使い方は2ステップ

CSSでカスタムプロパティの基本的な使い方は2ステップです。

カスタムプロパティの「定義」
定義したカスタムプロパティを「呼出」

カスタムプロパティの定義と呼出の部分は以下のようにしてCSSを記述します。

/*カスタムプロパティの定義*/
:root {
    --var-name: value; /*valueには例えばカラーコード#333などの値を指定*/
}

/*カスタムプロパティの呼出*/
body {
    background: var(--var-name);
}

カスタムプロパティの記述ポイントは以下です。

CSS変数の定義は :root セレクタで行う
CSS変数の先頭には-- (ハイフン 2 つ) を付ける
CSS変数の呼び出しには var() 関数で行う
CSS変数は大文字・小文字を区別する

CSS変数と表現していますがカスタムプロパティは「CSS変数」と呼ばれることもあります。

上記の2ステップをカスタムプロパティの記述ポイントを含めて、body要素の背景色を変更するカスタムプロパティの使い方を例にして順番に説明します。

CSSでカスタムプロパティを定義する

CSSでカスタムプロパティを定義するときに覚えておきたいのは以下2点です。

CSS変数の定義は :root セレクタで行う
CSS変数の先頭には-- (ハイフン 2 つ) を付ける

/*カスタムプロパティの定義*/

:root{
    --color: #146a83;
}

具体的な記述方法は、まず:rootセレクタを使用してカスタムプロパティを適用することができるスコープ(範囲)を定義します。これによりHTML文書の全体にわたってカスタムプロパティを適用する使い方ができます。

次に:rootセレクタ内には--colorのように、頭に--接頭辞を付けたプロパティを記述してカスタムプロパティを作成します。#146a83はカスタムプロパティ値として指定したカラーコードです。

またカスタムプロパティ(CSS変数)は大文字と小文字が区別されます。

/*--colorというカスタムプロパティ名で定義したい*/

:root{
    --color: #146a83;
}

/*--colorのcを大文字のCにしてしまうと区別され--colorとは別のカスタムプロパティを定義していることに*/

:root{
    --Color: #146a83;
}

カスタムプロパティを定義するとき、例えば--colorと--Colorのようなカスタムプロパティ名ではcの小文字とCの大文字が区別されるので、プロパティ値が同じでも、2つのカスタムプロパティを定義していることになります。

CSSでカスタムプロパティの使い方としては、カスタムプロパティの値に別のカスタムプロパティを設定する使い方も可能です。

:root {
    --main-color: #7117ea;
    --sub-color: #ea6060;
    --bg-gradation: linear-gradient(135deg, var(--main-color) 0%, var(--sub-color) 100%);
}

2つのカラーをひとつずつカスタムプロパティで定義して、その2つのカラーを必要とするCSSの何かしらの値、例えばliner-gradient関数で色をグラデーションにする場合に使う２つの色を、定義しておいた2つのカスタムプロパティを使用し設定する使い方ができます。

2つのカラーを定義したそれぞれのカスタムプロパティは個別に呼び出す使い方もできます。

CSSのカスタムプロパティをvar関数で呼び出す

定義したカスタムプロパティをCSSで呼び出すときの使い方はvar関数を使用して呼び出します。

/*カスタムプロパティの呼出*/

セレクタ{
    プロパティ: var(--定義したカスタムプロパティ名);
}

:root{
    --color: #146a83;
}

/*例：bodyの背景色としてカスタムプロパティを呼び出す*/

body {
    background: var(--color);
}

例えばbody要素に背景色を適用する場合にはCSSでbackgroundプロパティを使用しますが、このとき定義したカスタムプロパティを呼び出して適用するには、backgroundプロパティの値にvar関数を記述、var関数の引数では頭に--接頭辞を付けたカスタムプロパティ名を記述して呼び出しをする使い方をします。

CSSでカスタムプロパティの呼び出しに使用するvar関数は2つの引数を受け付けます。

var( <custom-property-name> , <declaration-value>)

第一引数は定義したカスタムプロパティの名前を記述した部分です。

第二引数は第一引数に記述したカスタムプロパティが無効だった場合参照されます。

そのため定義したカスタムプロパティが無効だったり設定されていなかった場合のことを考えて、var関数の第二引数を使用すると、CSSでカスタムプロパティを呼び出すときにフォールバック値を記述しておく使い方ができます。

body {
    background: var(--var-name,#cddc39);
}

フォールバック値も含めたカスタムプロパティの呼び出し方は、第一引数に記述したカスタムプロパティの後にカンマで区切り、二番目の引数にフォールバック値にする値を記述します。上記のCSSを例にすると#cddc39のカラーコードがフォールバック値です。

これにより例えば定義しているカスタムプロパティ名が--var-nameではなく、--Var-nameのように大文字と小文字の区別がされて無効だった場合、代わりにフォールバック値を適用できるというカスタムプロパティの使い方ができます。

カスタムプロパティの使用例

CSSでのカスタムプロパティの使い方を「定義」と「呼出」に分けて説明をしてきましたが、最後にカスタムプロパティの使用例みたいなものを紹介したいと思います。

HTMLが以下の記述のようにマークアップしてあるとします。

<body>
<header></header>
    <div class="card-container">
        <p>テキスト</p>
    </div>
    <!--card-containerあと2つあると妄想-->
<footer></footer>
</body>

:root{
    --color: #9e9e9e;
}

header{
    background-color: var(--color);
}

.card-container {
    background-color: var(--color);
}

footer{
    background-color: var(--color);
}

CSSはヘッダー、card-containerのコンテンツ、フッターのデザインをだいぶ省略してカスタムプロパティの記述だけにしてますが、カスタムプロパティで定義した値をヘッダー、card-container、フッターの3箇所の背景色として適用しています。

すると全体的に、薄っすいグレーの背景になるのですが、このときに背景色の薄っすいのがイヤな場合は、通常のCSSだとheader、card-container、footerにあてている3つのセレクタでbackground-colorの値を書き換えることになります。

しかしカスタムプロパティで背景色を適用していますので、カスタムプロパティ値を修正するだけで、3箇所の背景色が変更します。

:root{
    --color: #333; /*カスタムプロパティの値を変更するだけで済みます*/
}

header{
    background-color: var(--color);
}

.card-container {
    background-color: var(--color);
}

footer{
    background-color: var(--color);
}