CSSで変数を使うサンプルです。
目次
サンプル | CSSで変数を使うサンプル |
数値の計算も可能 |
CSSで変数を使うサンプル
変数に値を設定
--変数名: 値 |
変数の設定は先頭にハイフンを2つ付けます。
変数を使用
var(--変数名) |
変数を使用する場合は、varを付けて変数をカッコでくくります。
サンプル
<style>
:root {
--test-color: green;
}
.a1 {
color: var(--test-color);
}
</style>
<p class="a1">あいうえお</p>
<p style="background:var(--test-color)">かきくけこ</p>
3行目は、変数のtest-colorに値のgreenを設定しています。
6行目は、変数を指定しています。
10行目は文字の色が変わり、11行目は背景色が付きます。
以下のようになります。
数値の計算も可能
calcとあわせて計算もできます。
<style>
:root {
--test1: 50;
}
.a1 {
border: 1px solid #000;
width: calc(var(--test1) * 5px);
}
</style>
<div class="a1">width</div>
7行目は、50*5で250pxの幅になります。
足し算
<style>
:root {
--test1: 50;
--test2: 150;
}
.a1 {
border: 1px solid #000;
width:calc(var(--test1)*1px + var(--test2)*1px);
}
</style>
<div class="a1">width</div>
8行目は、50px+150pxで200pxになります。
それぞれの変数のあとに*1pxとしています。
関連の記事