CSS varを付けて変数を使うサンプル

2022年10月26日

環境
Google Chrome　106.0.5249.119
Windows 10 Home 64bit

構文
1.変数に値を設定します

--変数名: 値

変数の設定は先頭にハイフンを2つ付けます。
2.変数を使用します

var(--変数名)

変数を使用する場合は、varを付けて変数をカッコでくくります。

使用例

<!DOCTYPE html>
<html>
<head>
<style>
  :root {
    --bgcolor: skyblue;
  }
  .city {
    color: var(--bgcolor);
  }
</style>
</head>
<body>

<p class="city">東京111</p>
<p style="background:var(--bgcolor)">大阪2222</p>
</body>
</html>

結果
文字「東京111」の色が「skyblue」を付けます
文字「大阪2222」の背景色に「skyblue」を付けます

CSS

Posted by arkgame