こんにちは！ 日々CSSで勉強したことをまとめています。
今回の記事では、cssのrootの意味と使い方をまとめています。
使えるようになると便利そうなので、一緒に確認しましょう〜！
cssの:rootの意味
:rootをCSSファイルに書くと、
<html>要素に対して、CSSをつけることができます。
<html>には、h1タグ、h2タグ、pタグなど基本的に使うもの全てが含まれているので、
→:rootに何かを指定すると、h1,h2,pなど、どこからでも利用できるという認識でOKだと思います。どこからでも利用できるという認識でOKだと思います。
では実際に使ってみましょう。
■HTMLファイル(index.html)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="main.css"> <!--main.cssファイルを読み込み--> <title>Netflix</title> </head> <body> <h1>Netflix</h1> </body> </html> |
■CSSファイル(main.css)
|
1 2 3 4 5 6 7 8 9 10 11 |
:root { --netflix-color: #e50914; --button-text-color: #ffffff; } h1 { color: var(--netflix-color); border: solid 1px var(--netflix-color); width: 30%; text-align: center; } |
- :rootの中に、netflix-color、button-text-colorという名前で色を指定
- 名前の前には — をつける-
- 使うときは(今回はh1タグで)、var(–名前)で呼び出す
:rootはどういう時に使うの？
でも少し触れたのですが、
- 複数人で開発を行う
- コード量がめちゃくちゃ多い
このようなケースの場合、
毎回色など指定するのではなく、
:rootで名前をつけてあげることで、頻繁に使うものは、誰でもすぐに理解できるようになり、開発効率があがると思いますコードの可読性(読みやすさ)を高められると思います。
まとめ
以上です！
今回はcssの:rootの意味と使い方をまとめました。
本ブログでは他にもチュートリアル記事など書いているのでぜひ
参考にしてみてください〜！
参考: