こんにちは、さるまりんです。
当たり前のことなのかもですが、これをやるのを忘れてしまうのでメモします。
CSSの変数です。
他のプログラム言語と同じようにCSSでも変数を使えます。
こんな感じです。
:root {
--main-color: #fceeeb;
}
body {
background-color: var(--main-color);
}:rootで--main-colorを宣言して、var(--main-color)として埋め込んでいます。
テキストや背景の色、マージン、パディング、サイト上で統一したいものを変数にしておくと一箇所だけ変えれば全体に反映されるので変更漏れが起こりにくいです。
ちなみに:rootはHTMLの<html>を指しています。文書全体に反映されますね。
上であれば--main-color(主たる色)を宣言していますが、こんな風に使うこともできます。
:root {
--red: #ff0000;
--green: #00ff00;
}サイト上の「赤」と「緑」を宣言しています。
これを別の「赤」と「緑」に変えたい時は:rootで指定されている値を変更するだけですみますね。
さらに発展させて
:root {
--blossoms: #fceeeb;
--red: #ff0000;
--green: #00ff00;
--main-color: var(--blossoms);
}のようにすると、文章内では意味のある言葉--main-color(主たる色)で参照できます。
もっと別の方法でもCSSを整理する方法はあると思いますが、手軽に使えるので覚えておきたいです。
読んでくださってありがとうございました。
それではまた！