親子隣接関係

CSSでの継承とは何かを知る前に、htmlタグの親子隣接関係を説明します。htmlではタグの内側にタグを書くことになります。すでにhtmlタグの内側にはheadタグ、bodyタグがあり、タグの内側にタグを書いています。htmlタグから見た場合、headタグ、bodyタグは子要素と呼ばれます。

<html(中心)>
  <head(子)>
  </head>
  <body(子)>
  </body>
</html>

また、bodyタグ、headタグから見た場合、htmlタグは親要素と呼ばれます。
さらに、bodyタグとheadタグは隣接しているので隣接要素と呼ばれます。

<html(親)>
  <head(隣接)>
  </head>
  <body(隣接)>
  </body>
</html>

スタイルの継承

継承の言葉をざっくり言うと引き継ぎです。
何から何へ何を引き継ぐのでしょうか。
親要素から子要素へスタイルを引き継ぎます。
なので、CSSで言う継承とは、親子関係にあるタグは親から子へスタイルが引き継がれることです。

簡単な例

親要素へ赤文字のスタイルを設定しました。親であるdivタグのスタイルで、文字を赤に設定しているので、子要素であるpタグの文字が赤くなります。
しかし、3番目のpタグには青文字のスタイルを適用したので青文字となります。基本的にCSSの設定は後勝ちになります。

<div style="color: red;">
  <p>あかい</p>
  <p>あかく</p>
  <p style="color: blue;">これはアオ</p>
</div>

・実行結果

継承しないもの

継承するスタイルプロパティは継承するものとしないものがあります。先の例のcolorプロパティは継承されます。マージンやパディングは継承されません。どのスタイルプロパティが継承されるかされないかは、都度調べましょう。

最後に

今回は継承の基本を理解しました。

▼ CSSに関する記事の一覧をみる