目次
変数を使用する方法
以下の様に変数定義を行います。
※「: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>