2024/04/28 (更新日:2024/07/11)

【CSS】擬似クラスの「:root」の使い方！【分かりやすい】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

この記事ではCSSの擬似クラスの「:root」の使い方について解説します。

擬似クラスの「:root」って何？？

このような方が対象です。

この記事の内容！

また、下の動画でも擬似クラスの「:root」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

「:root」を使うと何ができる？

擬似クラスの「:root」を使うと、「ルート要素」にスタイルを当てることができます。

なるほどね！

「ルート要素」とは「html要素」のことを指します。

「html要素」は全ての要素を包含するような、根源的な要素のため「ルート要素」と言われます。

擬似クラスの「:root」は「CSS変数」を宣言する際に使われたりします。

「:root」で「CSS変数の宣言」をしておけば、どこからでもその「CSS変数」が使えるからです。

「CSS変数」についてはこちら！

「CSS変数」については下記の記事で詳しく解説しているので、もし「CSS変数」の使い方などが詳しく知りたい方は下記の記事を読んでください。

【CSS】変数 (カスタムプロパティ)の使い方まとめ！

大学生が夏休みにweb制作で13万円稼ぐまでにやったこと。【経験談】

擬似クラスの「:root」を使うと、「ルート要素」にスタイルを当てることができる。

「ルート要素」とは「html要素」のことを指す。

擬似クラスの「:root」は「CSS 変数」を宣言する際に使われる。

こんな感じですかね！

この記事が気に入った方は僕のTwitter（@chibasyuta）のフォローもお願いします！

それではこんな感じでこの記事を終わります！

ではまた！