スタイルシート(CSS)の継承とは

プロパティの内容が引き継がれる

CSSの各プロパティには、一つずつ『継承』というものが定められています。

これはそのプロパティを設定している親要素に含まれる子要素で、そのプロパティの指定がない場合、そのプロパティの設定内容が引き継がれるかどうかというものです。

例えば、文字サイズを指定する『font-size』プロパティは子要素に継承するプロパティです。

従って、例えば、親と子要素の関係にある段落タグ<p>と論理強調タグ<strong>で、p要素に文字サイズが15ピクセルと指定されて、かつstrong要素で文字サイズの指定がない場合、内容が継承されて、strong要素で囲まれた文字の大きさも15ピクセルとなります。

CSSサンプル

p { font-size:15px ; }
strong { color:red ; }

段落の文字サイズはstrong要素に引き継がれる。一方、strong要素の文字色はredになる。
サンプル

プロパティごとの継承

設定したいプロパティの継承については、本スタイルシート辞典でも紹介しています。

各プロパティの解説で、最初に表示される『プロパティの詳細情報』に各プロパティの継承の有無が書かれていますので、参考にしてください。

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSS、Webデザインを体系的に学ぶなら

CSSを駆使したモダンなWebデザインを学ぶなら

最新情報をチェックしよう!