CSSで変数を使ってみる

CSSで変数を定義できるカスタムプロパティを使ってみます。

対応ブラウザ

対応ブラウザはこちら
IEで非対応になります。

サンプルコード

カスタムプロパティは、ハイフン2つから始まるカスタムプロパティ名とCSSのプロパティ値で設定します。
その際、:rootに対して設定するとどこでも使用できるようになります。

:root {
	--main-color: red;
}

使用の際は、プロパティ値の代わりにvar()でカスタムプロパティ名を指定します。

<p class="sample">テスト</p>
.sample {
	color: var(--main-color);
}

これでカスタムプロパティを使った指定ができました。
カスタムプロパティのデモページ

先ほどは:rootに対してカスタムプロパティを設定しましたが、別の要素に対して設定することもできます。

.sample-box {
	--main-bg-color: skyblue;
}
p {
	background-color: var(--main-bg-color);
}

この場合、.sample-box外にあるpに対しては変数が適用されません。

<div class="sample-box">
	<p>.sample-box内のテスト</p>
</div>
<p>.sample-box外のテスト</p>

カスタムプロパティのデモページ2

var()を使用する際、指定したカスタムプロパティが定義されていない場合の代替値を設定することもできます。
カンマで区切って指定します。

.sample-box {
	--main-bg-color: skyblue;
}
p {
	background-color: var(--main-bg-color, gold);
}

カスタムプロパティのデモページ3

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2022年6月
 1234
567891011
12131415161718
19202122232425
2627282930