【CSS】CSS変数 - 再利用可能な値
CSSのCSS変数をご紹介します。
CSS変数
CSS変数は値を記憶する領域です。
その領域に値を記憶することができます。
CSS変数を使うことで、値を一括変更したり、変更に柔軟なコードを作成できます。
基本構文
CSS変数を使うには次の手順が必要です。
- 定義
- 展開
定義
変数名と記憶する値を定義します。
スコープ要素 {
--変数名: 値;
}スコープ要素は変数の適用範囲です。
一般的に全体に適用するには擬似クラスrootを使います。
:root {
--変数名: 値;
}展開
変数に記憶した値を展開します。
セレクター {
プロパティ名: var(--変数名);
}サンプル
サンプル１
全体で利用できる変数を定義し、展開します。
<style>
:root {
--main-color: red;
}
.box {
width: 100px;
height: 100px;
border: 1px solid var(--main-color);
}
p {
color: var(--main-color);
}
input {
background: var(--main-color);
}
</style>
<div class="container">
<div class="box"></div>
<p>TEXT</p>
<input type="text">
</div>サンプル２
containerクラスの要素以下で利用できる変数を定義し、展開します。
<style>
.container {
--main-color: red;
}
.box {
width: 100px;
height: 100px;
border: 1px solid var(--main-color);
}
p {
color: var(--main-color);
}
input {
background: var(--main-color);
}
</style>
<div class="container">
<div class="box"></div>
<p>TEXT</p>
</div>
<input type="text">
