知っていると役に立つ！親要素から値を継承するinheritの便利な使い方

通常では継承しないプロパティでも、強制的に継承させるCSSの inherit キーワードをご存知でしょうか？

普段はあまり意識して使うことがない inherit キーワードですが、知っていると役に立つ便利な使い方があるので紹介しようと思います。

inherit キーワードとは？

ビギナーズハイは初心者向けブログなので inherit キーワードの解説から…。
と言いたいとこですが、inherit キーワードはCSSの「継承」と深い関係にあるので、まずはCSSの「継承」について説明したいと思います。

CSSには「継承」という概念があるのはご存知でしょうか。
簡単に説明すると「親要素に指定した値が子要素に引き継がれる」ことです。

例えば

See the Pen 継承 by Beginners-High (@dragonpa) on CodePen.

上記のサンプルでは、親要素に指定した値が小要素にも引き継がれているので、子要素の文字色が赤色になっています。
このように、親要素に指定した値が自動で子要素に引き継がれる状態を「継承」と呼びます。

ボーダー・マージン・パディング・背景色など、値が継承されないプロパティもあります。

このような通常では継承しない親要素のプロパティも、inheritキーワードを使えば強制的に継承させる事が可能です。

通常はパディングとボーダーは継承しないので、親要素に値を指定しても子要素には何も変化がありませんね。

親要素に指定したパディングとボーダーの値が、子要素にも継承されました。

親要素と子要素のプロパティに同じ値を指定する場合や、強制的にプロパティの値を継承させたい場合に inheritキーワードが使えます。

ついつい前置きが長くなってしまいましたが、ここから本題です。

実は、inheritキーワードは擬似要素にも値を継承させることができます。
今回紹介するのは、擬似要素のプロパティにinheritを指定するちょっとしたテクニックです。

上記のように、吹き出しの三角部分は擬似要素で作りますが、通常ではボーダーや背景色は継承されず、背景色を変更したい場合には、親要素と擬似要素の両方の値を変更する必要があるわけですが、inheritキーワードを使って背景色を指定すれば、親要素の値を変更するだけで擬似要素に継承されます。

CSSの肥大化やメンテナンスのしづらさは問題になりがちなので、こうした細かい部分でシンプルなコードが書けるのは嬉しいですね。

意外と使っていなかった inheritキーワード。
記事にしてみると「結構便利じゃね？」と改めて思いました。

単純に子要素に継承させるよりも、今回紹介した吹き出しの三角や、見出しの頭につけるアイコンのような擬似要素にこそ使い道がありそうですね。

CSSはまだまだ奥が深いっすね！

「知っていると役に立つ！親要素から値を継承するinheritの便利な使い方」でした。