スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

HomeHTML&CSS講座 > スタイルの継承

スタイルの継承

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


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

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

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

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

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

BODY {font-size: 10pt;}
H1 {font-size: 14pt;} or H1 {font-size: 180%;}

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

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

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

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

BODY {font-size: 10pt;}
H1 {font-size: 14pt;} or H1 {font-size: 180%;}
EM {font-size: 15pt;} or EM {font-size: 110%;}

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

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

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

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

H1 EM {font-size: 15pt;} or H1 EM {font-size: 110%;}

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

Step6:最後に注意点
親がすべて継承されるわけではありません。例えば、背景backgroundがそうです。

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

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



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング