【CSS】カスタムプロパティのおすすめの使い方を紹介！！

CSSのカスタムプロパティについて、使い方や様々な利用方法を紹介していきます。

カスタムプロパティは、値を一元管理する方法として利用されている方が多いと思います。今回は一元管理以外の方法も紹介していきたいと思います。

カスタムプロパティについて

まずは、カスタムプロパティの基本的な使い方を説明していきます。

宣言の仕方

カスタムプロパティの宣言は、「–（ハイフン2つ）」の後に任意のプロパティ名を指定し、値は対象のプロパティの有効な値を指定することで行えます。

以下は、すべての要素に対して「–color-red」を宣言した例になります。

:root {
    --color-red: #ff0000;
}

指定範囲を絞りたい場合は、以下のようにします。例では、testクラスのみにカスタムプロパティを宣言しています。

.test {
    --color-red: #ff0000;
}

プロパティの値への使い方

プロパティの値として利用する場合、「var()」を利用していきます。前述通りプロパティの有効な値である必要があります。

以下は、bodyタグの背景色に対して利用した例になります。

:root {
    --color-red: #ff0000;
}

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

優先順位

最も近い階層のセレクタが優先されます。次の例の場合、最も階層に近いセレクタはdivになります。そのため、テキストが緑色になります。

同階層の場合は？

同階層の場合、セレクタによって優先順位が決まります。

以下の表は、優先順位を分かりやすくしたものになります。指定しているセレクタの値を足し算し最も大きいセレクタが優先されます。しかし、値の繰り上げは無いので気を付けてください。クラスを10個以上指定してもIDより値が大きくなることはありません。

同じ値の場合、後に記載されているセレクタが優先されます。

全称セレクタは気を付けて！！

最初に説明した通り最も近い階層のセレクタが選択されます。次の例の場合、親要素でカスタムプロパティを指定しても、子要素に全称セレクタが指定されているため、全称セレクタが反映されます。

様々な利用方法の紹介

一元管理

色やサイズなどを宣言し、一か所で管理する方法になります。背景色やコンテンツの大きさなどを一か所で管理できるため確認や修正などが容易に行えます。

:root {
    --background-color: #eee;
    --contents-width:1000px;
}

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

.header-contents {
    max-width: var(--contents-width);
    width: 100vw;
    margin: auto;
}

.main-contents {
    max-width: var(--contents-width);
    padding: 30px;
    width: 100vw;
    margin: auto;
}

計算式に利用する

「calc」の値として利用することもできます。特定の値を基準に計算することができます。

以下は、コンテンツの半分の値を指定した例になります。

.half-contents {
    max-width: calc(var(--contents-width) / 2);
    width: 100%;
}

優先順位による切り替え

前述の優先順位を利用してカスタムプロパティを切り替える方法になります。よく利用される方法としてダークテーマがあります。

「:checked」を利用して切り替え

「:checked」を利用することでCSSだけで動的にカスタムプロパティの値を変更できます。

以下の例は、赤・緑・青のチェックボックスを選択することでコンテンツの色を変更します。

おすすめ記事の紹介

実際に利用した記事を紹介します。

• タブメニュー
• ドロワーメニュー