Please note, this is a STATIC archive of website developer.mozilla.org from November 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

inheritance

概要

MDN の CSS リファレンスの CSS プロパティ の各ページの「概要」の章には、プロパティがデフォルトで継承されるかされないかが明記されています。これは、要素の CSS プロパティに値が設定されていない場合の継承の挙動を表すものです。

継承プロパティ

値を持たない継承プロパティが要素に指定された場合、要素は、その親要素のプロパティの計算値を取得します。ドキュメントのルート要素だけは、プロパティの概要で与えられた初期値を取得します。

継承プロパティの一般例として color プロパティが挙げられます。次の様なスタイルルールを指定し、

p { color: green }

次の様にマークアップしたとします。

<p>この段落には<em>強調されたテキスト</em>があります。</p>

「強調されたテキスト」という文字列は、em 要素が p 要素から color プロパティの値を継承する為、プロパティの初期値(※祖先要素の何れにも color プロパティが指定されていない場合に使用される文字色)ではなく、継承値の緑色となります。

非継承プロパティ

値を持たない非継承プロパティ(※Mozilla のコード中ではしばしばリセットプロパティと呼称される)が要素に指定された場合、要素はプロパティの初期値(※各プロパティのページの「概要」の章に記されています)を取得します。

非継承プロパティの一般的な例としては border プロパティが挙げられます。次の様なスタイルルールを指定し、

 p { border: medium solid }

次の様にマークアップしたとします。

<p>この段落には<em>強調されたテキスト</em>があります。</p>

この場合、「強調されたテキスト」という文字列は(border-style の初期値が none である為、)ボーダーを持ちません。

注記

inherit キーワードは、CSS プロパティの値を継承する事を明示する為に用います。これは継承プロパティでも非継承プロパティでも動作します。

参照

ドキュメントのタグと貢献者

 このページの貢献者: ethertank, Marsf
 最終更新者: ethertank,