本サイトはアフィリエイト広告を利用しています

どれを使えばいい? 紛らわしい initial、inherit、unset

- スポンサーリンク -

WordPressで作るサイトのカスタマイズをする時に、知っておくと便利なCSSのプロパティ値の中で、紛らわしい initial、inherit、unset の使い分けを整理しておこうと思います。

プロパティ値: intial / inherit / unset

initial

プロパティが初期値にリセットされます。
ここでの初期値とは、各プロパティごとに仕様で定められた初期値を指します。(ブラウザーが規定で適用するスタイルシートの値ではない。)
すべてのプロパティに指定可能なグローバル値です。

inherit

親要素に指定されたプロパティと同じ値を継承します。通常は親要素から継承されないプロパティの値も継承できます。

unset

プロパティをリセットし、親から自然に継承された場合は継承値、そうでなければ初期値を設定します。
つまり、親要素を継承するプロパティなら inherit 、それ以外は initial として機能します。
inheritを解除する時にも使います。

英語の意味で比較

initial

  • 読み方: イニシャル
  • 英語の意味: 初めの、最初の

inherit

  • 読み方: インヘリット
  • 英語の意味: 受け継ぐ、継承する

unset

  • 読み方: アンセット
  • 英語の意味: 設定を解除する

こうして並べると、ぜんぜん違うね…

継承プロパティと非継承プロパティ

親要素から子要素へ継承するプロパティと、継承しないプロパティには何があるか?

継承プロパティ

color、font-size、font-weight、など

非継承プロパティ

border、padding、margin、など

最後に

WordPressで作ったサイトの場合、基本的なデザインはテーマが構成しています。そのため、部分的なカスタマイズには元のCSSが影響して自分の期待した表示が反映されないことがあります。

そのため、初期値に戻したり、親要素から継承するプロパティ値を知っておくと、カスタマイズしやすくなります。

また、デザインの可能性が広がって面白いです。

例えば「白抜きボックスを使ってボックスデザインのバリエーションを増やす【Cocoon】」の記事でご紹介している「吹き出しボックス」のデザインでは、吹き出しの三角部分のcolorを親要素から継承するためにinheritを使っています。

自分で1から作ったCSSではない、WordPressならではの使い方があるように思います。


事典って、パラパラめくってるだけでも意外な発見もあって楽しいですよ


HTML&CSS
タイトルとURLをコピーしました