投稿日：2007年8月7日　　　レベル：初心者　　　　ソフトウェア：

---

• Step1 ： 階層的な構造
• Step2 ： 継承
• Step3 ： スタイルの上書き
• Step4 ： EM要素を変更
• Step5 ： 文脈セレクタ
• Step6 ： 最後に注意点

HTMLドキュメントは階層的な構造をもっています。トップレベルのHTML要素を祖先として、そこからほかのすべての要素（子）が派生します。ほかの家系でも同じですが、HTML家族でも子は親の性質、たとえば、色やサイズを継承します。

子が親を継承することによって、トップレベルの要素とその子に既定のスタイルを作ることができます。（注：すべてのプロパティが継承されるわけではありません）。

継承は年長の親からはじまり、その子へ、また、その孫へと引き継がれます。

継承されたスタイルを上書きするには、子要素に別のスタイルを宣言します。

例えば、EM要素にその親Pを継承させないときは、つぎのように独自のスタイルを宣言する必要があります。


レベル1のヘッダ以外は10ポイントのフォントで表示されます。

H1は14ポイントのフォント（BODYに宣言されたものより80%大きいフォント）で表示されます。

H1要素に他の要素、例えば、EMが含まれていれば、親H1のプロパティを継承して、EM要素も14ポイント（180%）で表示されます。

EM要素を別のフォントで表示したければ、つぎのように、独自のフォントプロパティを宣言する必要があります。


EM要素は15ポイント、つまりH1より10%大きく表示されます。

注：この例で、EMはH1のなかにあるので、BODYでなくH1のプロパティを継承します。

うえの宣言では、すべてのEM要素は15ポイントフォント、つまり親要素に宣言されたものより10%大きなフォントで表示されます。

H1のなかのEM要素にだけこのフォントを適用し、ほかのEMには適用しない場合は、EMは文脈セレクタの形式にする必要があります。


うえの例では、EMは文脈セレクタで指定されています。この場合、指定されたフォントで表示されるのはH1文脈内にあるEM要素だけになります。

親がすべて継承されるわけではありません。例えば、背景backgroundがそうです。

しかし、その初期値は透明ですから、親要素の背景は、とくに指定しない限り、既定で共通となります。

引用:Web Design Library 著者:Markus Dome翻訳:OJer

スポンサードリンク