CSS 継承

Volardev 編集部 April 12, 2026

1. 継承とは？

継承（Inheritance）は、特定の CSS プロパティが親要素から子要素へと自動的に引き継がれる仕組みのことです。

CSS のプロパティには、デフォルトで継承されるものと、継承されないものがあります。この挙動を理解することで、コードの重複を減らし、効率的なスタイル管理が可能になります。

一般的に、テキストに関連するプロパティは子要素へ継承されます。例えば、color や font-family を <body> 要素に指定すると、その中のすべてのテキスト要素に同じスタイルが適用されます。

/* 親要素にスタイルを適用 */
body {
  color: blue;
  font-family: Arial, sans-serif;
}

上記の例では、<body> 内にある <p> や <h1>、<span> などの子要素は、個別に指定しなくても自動的に青色の Arial フォントになります。

一方で、レイアウトやボックスモデルに関連するプロパティの多くは継承されません。これには border、margin、padding、background などが含まれます。

もしこれらのプロパティが継承されてしまうと、親要素にボーダーを引いただけで、その中にあるすべての要素にボーダーが表示されてしまい、デザインが崩れてしまうからです。

/* 親要素にボーダーを適用 */
.container {
  border: 2px solid black;
}

この場合、.container 自体には黒い枠線が表示されますが、その中にある子要素には枠線は表示されません。

inherit キーワードを使用すると、通常は継承されないプロパティであっても、強制的に親要素の値を引き継がせることができます。

これは、親要素の特定のスタイル（ボーダーや背景色など）を子要素にも同期させたい場合に非常に便利です。

以下のコードでは、子要素の border プロパティに inherit を指定することで、親要素と同じボーダーを適用させています。

<div class="parent">
  <p class="child">親要素のボーダーを継承します</p>
</div>

.parent {
  border: 2px solid green;
  padding: 10px;
}

.child {
  /* 通常は継承されない border を強制的に継承 */
  border: inherit;
  padding: inherit;
}

プロンプト：inherit を使用すると、親要素のスタイルが変更された際に子要素も自動追従するため、保守性が向上します。

子要素に対して直接スタイルを指定した場合、継承された値よりも直接指定された値が優先されます。これを CSS の「カスケード（段階的適用）」のルールと呼びます。

body {
  color: blue; /* 継承される値 */
}

h1 {
  color: red; /* 直接指定が優先される */
}

実務でよく遭遇する「継承されるプロパティ」と「継承されないプロパティ」の代表例は以下の通りです。

これらのルールを適切に使い分けることで、クリーンでメンテナンスしやすい CSS 設計が可能になります。