目次
変数を使用する方法
以下の様に変数定義を行います。
※「:root」はお作法だと思ってください。（実際は擬似クラスというものですが、詳しくは割愛します）
:root {
--sample-color: red;
}
上記で用意した変数は以下の様に使用できます。
※「var」にて変数を使用する事ができます。
.hoge {
color: var(--sample-color);
}
サンプル
以下がサンプルです。
「sample.html」などのファイル名で保存して、ブラウザにドラッグ＆ドロップで表示してみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSを読み込む方法</title>
<style type="text/css">
:root {
--sample-color: red;
}
.hoge {
color: var(--sample-color);
}
</style>
</head>
<body>
<p class="hoge">Hello World</p>
</body>
</html>
