CSS ・ CSSの記法
継承
親のスタイルを子が受け継ぐ仕組み
親要素に指定したスタイルの一部が、中にある子要素・孫要素にも自動で受け継がれる仕組みです。文字の色や大きさなど、主に文字に関するプロパティが継承されます。
01
サンプルコード
HTML
1<div class="card">
2 <h3>カードの見出し</h3>
3 <p>本文の段落です。<a href="#">リンク</a></p>
4</div>
CSS
1.card {
2 color: #7d5411; /* 継承される */
3 font-weight: bold; /* 継承される */
4 border: 2px solid #b68235; /* 継承されない */
5 padding: 12px 16px; /* 継承されない */
6}
02
実行結果
ブラウザでの表示枠線は .card にだけ付き、文字色と太字は中の見出しと段落にも受け継がれています
03
解説
CSSには、親要素に指定したスタイルが、その中にある子要素や孫要素にも自動で受け継がれる「継承」という仕組みがあります。上の例では .card にしか指定していないのに、中の見出しと段落も同じ色・太字になっています。
ただし、すべてのプロパティが継承されるわけではありません。color や font-size のような文字に関するものは継承されますが、border・padding・margin・background のような箱に関するものは継承されません。例でも、枠線は .card の外側に1つ付いているだけで、見出しや段落にはそれぞれ付いていません。
継承された値は、その要素に直接指定されたスタイルにいつも負けます。例のリンクが青いままなのは、ブラウザが a 要素にあらかじめ色を指定しているためです。この仕組みを利用して、body に基本の文字色や書体を指定し、ページ全体に行き渡らせるのが一般的です。
04
応用例・注意点
主なプロパティの継承
| プロパティ | 説明 |
|---|---|
color | 継承される |
font-size / font-family / font-weight | 継承される |
line-height / text-align / letter-spacing | 継承される |
list-style / cursor / visibility | 継承される |
margin / padding / border | 継承されない |
width / height / display / position | 継承されない |
background | 継承されない（初期値が透明なので、親の背景が透けて見える） |
inherit で親と同じ値にする
値に inherit と書くと、そのプロパティを親と同じ値にできます。リンクの色を周りの文字と同じにするときの定番の書き方です。
HTML
1<p class="note">詳しくは<a href="#">こちら</a>をご覧ください。</p>
CSS
1.note {
2 color: #7d5411;
3}
4.note a {
5 color: inherit;
6}
body に基本のスタイルを指定する
body に指定した文字のスタイルは、継承によってページ内のほぼすべての要素に行き渡ります。
CSS
1body {
2 color: #201f1d;
3 font-family: "Noto Sans JP", sans-serif;
4 line-height: 1.8;
5}
注意点
- 01継承された値は、詳細度に関係なく、その要素に直接当たっているスタイル（ブラウザが最初から持っているスタイルを含む）に負けます。
- 02見出しの文字サイズは、ブラウザの既定では「親の文字サイズの何倍」という指定になっているため、親の font-size を変えると見出しの大きさも一緒に変わります。
- 03そのプロパティが継承されるかどうかは、この辞典の各プロパティのページの「継承」欄で確認できます。