ページのテーマ色とかをいろんな要素で使いたい時に便利なCSS変数。
例えば、ページのテーマ色がオレンジだった場合、全ての箇所にオレンジと記載してもいいが、変更となった場合は全ての箇所を修正する必要が出てくる。
しかし、CSS変数を使うと１箇所直すだけで、その変数が割り当てられているところに反映される。
以下、サンプルコード
/*宣言方法は以下のように'--'で始める*//*使い方はvar()の()ないに入れ込む*/h1{--my-color:orange;color:var(--my-color);}/*これでh1にオレンジが割り当てられる。
また、何も設定がないときの指定もできる*/h1{color:var(--my-color,blue);}/*これは何も設定がされていなかったらblueを割り当てて、と言うこと*/ただ、<h1>で宣言した変数を<p>では使えない。
つまり
h1{
--my-color: orange;
color: var(--my-color);
}
p{
color: var(--my-color);
}
としても<p>にはオレンジが割り当てられない。
どうすれば共通して使えるかと言うと、
方法は２つある。
①共通の親要素で宣言する。
②文書全体のhtmlで宣言する。
①の場合は、htmlが以下のようになっていた場合、
<body>
<h1>タイトル</h1>
<p>本文</p>
</body>
共通する親要素である<body>で宣言すれば両方ともに共通する変数を使える。
body{
--my-color: orange;
}
としておくと、<body>の中にある要素には、--my-colorが使える。
②の方法はCSSファイル内で
:root{
--my-color: orange;
}
と言うように宣言すると、<body>,<h1>,<p>の全てというか、htmlにある全ての要素に--my-colorが使える。
また変数はプロパティの値に使えるのであって、プロパティ名には使えない
。
例えば、
--my-margin-top: margin-top;
はできず、
--my-margin-top: 40px;
margin-top: var(--my-margin-top);
こういう使い方をしなければならないということ。
以下、まとめサンプルコード
:root{--my-hue:200;}body{background:hsl(var(--my-hue),40%,95%);}h1,p{color:hsl(var(--my-hue),35%,55%);}.btn{color:white;width:100px;padding:8px;border-radius:4px;text-align:center;background:hsl(var(--my-hue),50%,50%);background:hsl(calc(var(--my-hue)+180),50%,50%);/* 180°変えて補色の関係にし、見やすいように。 */background:hsl(calc(var(--my-hue)+60),50%,50%);/* 完全に穂色はきついから、少しずらした色に */}