【CSS】「グローバル値」とは？「initial」「inherit」「unset」「revert」【分かりやすい】

CSSの「グローバル値」って何ー？？分かりやすく教えてほしい。

この記事は、このような方へ向けて書いています。

この辺の知識が学べますので、ぜひ読んでみてください。

また、下の動画でも「グローバル値」について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

では、さっそく内容へ入ります！

「グローバル値」とは何か？

「グローバル値」とは、CSSの全てのプロパティにセットできる値のことです。

ふむふむ。

「グローバル値」にはどのようなものがある？

CSSの「グローバル値」には４つの値があります。それは下記の通りです。

これら４つの値があります。

これらの値は、CSSのどんなプロパティでも設定できるので、「グローバル値」と呼ばれます。

「initial」

「initial」を使うと、そのプロパティの「初期値」を設定することができます。

例えば、一つの要素に複数の場所からスタイルが当たっている場合などに使うことで、初期値の状態に一発で戻してくれるので便利ですね。

ここで言う「初期値」というのは、公式定義で定義された値になります。

なので、Webブラウザが設定してくれる「ユーザーエージェントスタイルシート」で指定されてる値ではないので注意してください。

「inherit」

「inherit」を使うと、親要素の値を継承させることができます。

使い方としては、継承プロパティの場合は、その値が継承することを明示的に表す際に使われて、

非継承プロパティの場合は、単純に親要素のプロパティの値を継承するために使います。

ここで、子要素にも同じ値の設定がしたい場合に、同じものを複数書くのでもいいのですが、それだと変更に強くないので、「inherit」を使っておく方がいいでしょう。

「unset」

「unset」を使うと、一度全てのスタイルをリセットすることができます。つまり、何もスタイルが当たっていない状態にできます。

挙動としては、自然にスタイルが継承される場合は、継承値が使われて、

それ以外は、初期値になります。

ただし、リセットしたいけど、親要素からの継承ができるのなら受け継ぎたい、という時に使えます。

「revert」

「revert」を使うと、「ユーザーエージェントスタイルシート」で指定されている値に設定されます。

いわゆる既定値、と呼ばれるものですね。

※「initial」の初期値と混同しないように注意してください。

「グローバル値」は詳細度などのルール通りに上書きされる。

４つの「グローバル値」の解説をしてきましたが、これらはCSSの詳細度などのルール通りに上書きされます。

例えば、下記のようなコードがあったとします。

.container  {
  border: unset;
  border: 4px solid skyblue;
}

この場合は、「border」がつきます。なぜなら、CSSでは下に書かれたものが優先されるからですね。

他にも、詳細度のルール通りに上書きされるので、注意してください。

まとめ。

「グローバル値」とは、CSSの全てのプロパティにセットできる値のこと。

CSSの「グローバル値」には４つの値があり、それは下記の通り。

「グローバル値」は詳細度などのルール通りに上書きされる。

また、下の動画でも「グローバル値」について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

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

ではまた！