WebドキュメントでのCSS継承のしくみ

CSSでウェブサイトをスタイリングする重要な部分は、継承の概念を理解することです。

CSSの継承は、使用されているプロパティのスタイルによって自動的に定義されます。 スタイルプロパティbackground-colorを調べると、「継承」というセクションが表示されます。 あなたがほとんどのWebデザイナーのような人なら、あなたはそのセクションを無視しましたが、目的を果たします。

CSS継承とは何ですか？

HTML文書の各要素はツリーの一部であり、最初の要素を除くすべての要素にはそれを囲む親要素があります。 その親要素に適用されるスタイルは、プロパティが継承可能なものであれば、その要素に囲まれた要素に適用できます。

たとえば、このHTMLコードでは、EMタグを囲むH1タグがあります。

これは大きな見出しです

EM要素はH1要素の子要素であり、継承されたH1上のスタイルもEMテキストに渡されます。 例えば：

h1 {font-size：2em; }

font-sizeプロパティが継承されているので、 "Big"（EMタグ内に囲まれているもの）というテキストは、H1の残りの部分と同じサイズになります。 これは、CSSプロパティで設定された値を継承するためです。

CSS継承を使用する方法

それを使用する最も簡単な方法は、継承されているか継承されていないCSSプロパティに慣れることです。 プロパティが継承されている場合、その値はドキュメント内のすべての子要素で同じになることがわかります。

これを使用する最も良い方法は、BODYのような非常にハイレベルの要素に基本スタイルを設定することです。 bodyプロパティにfont-familyを設定すると、継承のおかげでドキュメント全体が同じfont-familyを保持します。 全体的なスタイルが少なくて済むため、管理しやすい小さなスタイルシートが実際に作成されます。 例えば：

本文{font-family：Arial、sans-serif; }

継承スタイル値を使用する

すべてのCSSプロパティには、可能なオプションとして "継承"という値が含まれています。 これは、プロパティが通常継承されない場合でも、親と同じ値を持つ必要があることをWebブラウザに通知します。 継承されていないマージンなどのスタイルを設定した場合、後続のプロパティで継承値を使用して、親と同じマージンを与えることができます。 例えば：

本文{margin：1em; } p {margin：継承します。 }

継承は計算値を使用します

これは、長さを使用するフォントサイズなどの継承された値にとって重要です。 計算された値は、Webページ上の他の値との相対的な値です。

BODY要素に1emのフォントサイズを設定した場合、ページ全体が1emのサイズになるだけではありません。 これは、見出し（H1〜H6）やその他の要素 （一部のブラウザでは表のプロパティを別々に計算する）などの要素がWebブラウザで相対的なサイズを持つためです。 他のフォント・サイズ情報がない場合、Webブラウザーは常にH1ヘッドラインをページ上で最大のテキストにし、その後にH2などを付けます。 BODY要素を特定のフォントサイズに設定すると、それが「平均」フォントサイズとして使用され、ヘッドライン要素がその値から計算されます。

継承と背景のプロパティに関する注意

リストされているスタイルの数は、W3CのCSS 2では継承されていませんが、Webブラウザは引き続き値を継承します。 たとえば、次のHTMLとCSSを記述したとします。

<スタイルタイプ= "テキスト/ CSS"> h1 {背景色：黄色; }

これは大きな見出しです

背景色のプロパティは継承されていないとはいえ、 "Big"という単語は黄色の背景を持ちます。 これは、背景プロパティの初期値が「透過」であるためです。 したがって、あなたはの背景色は見えませんが、

親からは色が輝いています。