読んで欲しい人
CSS変数をさらに深く学びたい
テーマカラーを効率的に管理したい
そんな方への記事です。
CSS変数の継承
CSS変数は指定したカッコ内でしか使えないルールです。
同じ名前のCSS変数は、別のカッコ内では機能しません。
例えば、h1で作った–my-color:blue;をpで使ってみましょう
![](https://tumaboki.com/wp-content/uploads/2020/12/565397928248f970bd979c138284e467-1024x189.png)
全体で使うなら、bodyタグでCSS変数を宣言すればOKです。
![](https://tumaboki.com/wp-content/uploads/2020/12/aad9ed6871557249d57791e0c658aa02-1024x290.png)
余談ですが、:rootに対して指定すれば、htmlタグに指定したことになります。
:rootはhtmlタグ(文書全体)の擬似クラスになります。
テーマカラーの管理
CSS変数を使って、テーマカラーを管理してみましょう。
まず、緑を主体としたサイトにしてみました。
![](https://tumaboki.com/wp-content/uploads/2020/12/181ec9bf3b94153ba81a7c9a53b29ad2-1024x301.png)
次に、文書全体にCSS宣言をします。
–my-hue: 50; として、色相を管理するCSS変数にしました。
bodyやh1、ボタンにCSS変数を指定します。
全体の色が変わっているので、うまく機能していますね。
![](https://tumaboki.com/wp-content/uploads/2020/12/c57ef87088927919e50c8f0d90ac8cbe-1024x368.png)
CSS変数(–my-hue: 50;)の数字を変更すれば、テーマカラーを変えられるので非常に便利です。
まとめ
文書全体に、CSS変数を宣言してあげることでテーマカラーを効率的に管理できるようになります。
:rootはhtmlの擬似クラスなので覚えておきましょう!
一緒に一歩踏み出しましょう♪
では♪
コメント