[超初心者向け] css :rootの意味と使い方のサンプル

CSS

こんにちは! 日々CSSで勉強したことをまとめています。

今回の記事では、cssのrootの意味と使い方をまとめています。

使えるようになると便利そうなので、一緒に確認しましょう〜!

cssの:rootの意味

:rootをCSSファイルに書くと、

<html>要素に対して、CSSをつけることができます。

<html>には、h1タグ、h2タグ、pタグなど基本的に使うもの全てが含まれているので、

→:rootに何かを指定すると、h1,h2,pなど、どこからでも利用できるという認識でOKだと思います。どこからでも利用できるという認識でOKだと思います。

では実際に使ってみましょう。

■HTMLファイル(index.html)

■CSSファイル(main.css)


ブラウザで見るとこんな感じになります。

  • :rootの中に、netflix-color、button-text-colorという名前で色を指定
  • 名前の前には — をつける-
  • 使うときは(今回はh1タグで)、var(–名前)で呼び出す

:rootはどういう時に使うの?

[超便利!] CSSの変数の使い方まとめ

でも少し触れたのですが、

  • 複数人で開発を行う
  • コード量がめちゃくちゃ多い

このようなケースの場合、

毎回色など指定するのではなく、

:rootで名前をつけてあげることで、頻繁に使うものは、誰でもすぐに理解できるようになり、開発効率があがると思いますコードの可読性(読みやすさ)を高められると思います。

まとめ

以上です!

今回はcssの:rootの意味と使い方をまとめました。

本ブログでは他にもチュートリアル記事など書いているのでぜひ

参考にしてみてください〜!

参考:

[超便利!] CSSの変数の使い方まとめ

:root – CSS: カスケーディングスタイルシート | MDN