WEB TECKS - WEBサイト構築知識いろいろ

[CSS]inheritプロパティによる親要素の継承

更新日:2024-02-21 16:38:49 登録日:2024-02-21 14:11:59

inheritは、CSSのプロパティ値の1つで、設定した要素に対して、親要素の値が継承されることを指定します。

例えば、親要素(例: <div>)に対してfont-size: 16px;というスタイルが適用されており、その中に子要素(例: <p>)があり、その子要素にfont-size: inherit;というスタイルが適用されている場合、子要素のフォントサイズは親要素のフォントサイズと同じ16pxになります。

inheritは、要素の細かいスタイル設定を減らしたい場合に便利です。親要素のスタイルをそのまま継承することで、スタイルの一貫性を保つことができます。

また、inheritは、直接の親だけでなく、祖先の要素のスタイルも継承します。つまり、要素の親要素から直接継承されるだけでなく、祖先要素全体のスタイルも継承されます。

例えば以下のようなHTMLがあったとします。

<style>
div.parent {
font-size: 16px;
}
div.parent > p.child {
font-size: inherit;
}
</style>

<div class="parent">
<p class="child">ABCDEFG12345</p>
</div>

この場合、<p>要素に対してfont-size: inherit;というスタイルが指定されていると、 <p>要素のフォントサイズは16pxとなります。これは、<p>要素が<div>要素からfont-sizeプロパティの値を継承するためです。
inheritプロパティはfont-size以外でもすべてのセレクタで使用できます。