3月の半ばに入り日にちが経ちますが…

外に出かけるとほぼマスクをしてる人が多いんですね…

でも、旅行者はほとんどマスクを外す人が少し出てきてますね。

さてと、話題に入りましょう！

:rootの使い方がめっちゃ便利！

たまたま、ネットでググりながら自己勉強のためにしてますが…

「:root」とは、 詳細度はブラウザがスタイルの適用を決定する方法の一つです。

例えば:rootセレクターとhtmlセレクターで同じCSSプロパティを違う値で設定した場合、「:root」の設定を決定とします。

通常、同じ詳細度のセレクターの場合、コード中で後述した設定を決定としますが、htmlセレクターを後に記述した場合でも「:root」セレクターの詳細度の方が高いのでhtmlセレクターではプロパティ値の上書きはできません。

このセレクターで変数を宣言しておくことで他のセレクターから変数を参照することができるため、「:root」はグローバルのカスタムプロパティを宣言するのに便利です。

「:root」の使い方を説明しましょう。

:root{
	--color-black:#000;
	--color-white:#FFF;
	--color-red:#F00;
	--font-normal:400;
	--font-bold:700;
	--font-black:900;
}

背景色を指定したいとき、

body{
	background: var(--color-white);
}

フォントの太さを指定したいとき、

p{
	font-weight: var(--font-bold);
}

使い方のバリエーションが増えて便利な使い方があるんやなーと…

15年以上のWeb仕事をしてて、「:root」の使い方を知らなかったの情けなかったんですわ…

これから、もっと昇進して技術を磨いて成長していきます！

これからもよろしくお願いします。

では、また！