--- title: 継承 slug: Web/CSS/inheritance tags: - CSS - Guide - Inheritance - Layout - Web translation_of: Web/CSS/inheritance ---
{{cssref}}

CSS において、継承 (inheritance) はある要素のあるプロパティに値が指定されなかった場合の挙動を制御します。

CSS プロパティは2種類に分類することができます。

いずれかの CSS プロパティの定義を参照して、それぞれのプロパティが既定値を継承するか ("継承: あり") しないか ("継承: なし") を確認してください。

継承プロパティ

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

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

p { color: green; }

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

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

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

非継承プロパティ

値を持たない非継承プロパティが要素に指定された場合、要素はプロパティの初期値（※各プロパティのページの「概要」の章に記されています）を取得します。

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

 p { border: medium solid; }

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

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

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

注

{{ Cssxref("inherit") }} のキーワードで、明示的に継承することを指定することができます。これはこれは継承プロパティでも非継承プロパティでも動作します。

すべてのプロパティに値を適用する {{cssxref("all")}} 一括指定プロパティを使用することで、すべてのプロパティの継承を制御することができます。例えば、

font {
  all: revert;
  font-size: 200%;
  font-weight: bold;
}

これは、 {{cssxref("font")}} プロパティのスタイルを、ユーザーのスタイルシートがなければユーザーエージェントの既定値に、あればその値に戻します。それからフォントの寸法を倍にして、 {{cssxref("font-weight")}} を "bold" に適用します。

関連情報