ページのテーマ色とかをいろんな要素で使いたい時に便利な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%);
/* 完全に穂色はきついから、少しずらした色に */
}