WordPressで作るサイトのカスタマイズをする時に、知っておくと便利なCSSのプロパティ値の中で、紛らわしい initial、inherit、unset の使い分けを整理しておこうと思います。
プロパティ値: intial / inherit / unset
プロパティが初期値にリセットされます。
ここでの初期値とは、各プロパティごとに仕様で定められた初期値を指します。(ブラウザーが規定で適用するスタイルシートの値ではない。)
すべてのプロパティに指定可能なグローバル値です。
親要素に指定されたプロパティと同じ値を継承します。通常は親要素から継承されないプロパティの値も継承できます。
プロパティをリセットし、親から自然に継承された場合は継承値、そうでなければ初期値を設定します。
つまり、親要素を継承するプロパティなら inherit 、それ以外は initial として機能します。
inheritを解除する時にも使います。
英語の意味で比較
initial
inherit
unset
こうして並べると、ぜんぜん違うね…
継承プロパティと非継承プロパティ
親要素から子要素へ継承するプロパティと、継承しないプロパティには何があるか?
継承プロパティ
color、font-size、font-weight、など
非継承プロパティ
border、padding、margin、など
最後に
WordPressで作ったサイトの場合、基本的なデザインはテーマが構成しています。そのため、部分的なカスタマイズには元のCSSが影響して自分の期待した表示が反映されないことがあります。
そのため、初期値に戻したり、親要素から継承するプロパティ値を知っておくと、カスタマイズしやすくなります。
また、デザインの可能性が広がって面白いです。
例えば「白抜きボックスを使ってボックスデザインのバリエーションを増やす【Cocoon】」の記事でご紹介している「吹き出しボックス」のデザインでは、吹き出しの三角部分のcolor
を親要素から継承するためにinherit
を使っています。
自分で1から作ったCSSではない、WordPressならではの使い方があるように思います。