|    | 1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17  18  19  20  |

スタイルの継承

要素から要素へスタイルは引き継がれるのです

継承されるスタイルと継承されないスタイル

スタイルシートには、親要素から子孫要素にプロパティの値が引き継がれるものがあります。これをスタイルの継承といいます。

たとえば、親要素である body 要素に 「color : red ; 」 と設定すると、子要素 div の子要素である p 要素の文字 strong 要素も親要素のプロパティの値が引き継がれ、文字色が赤になります。次の例を参照してください。

  • CSSソース:
    • body { color : red ; }
  • XHTMLソース:
    • <div>
    • <p>春夏秋冬</p>
    • <p><strong>いろはに</strong>ほへと</p>
    • </div>

スタイルが継承されるかされないかの差は、プロパティの種類によります。

たとえば、div 要素に 「background (背景)」 や 「border (枠線)」 を指定していても、子要素の p 要素にそのスタイルは適用されません。

継承されると困るようなものは継承されませんし、逆に継承された方が効率が良い場合には継承されるようです。

一方、親要素からスタイルが継承されない background や border などに親要素のスタイルを継承させたい場合には、inherit という値を使用します。

次の例は、class 要素 keisyou の border の指定が、親の div 要素の border 指定値を引き継いでおります。

  • CSSソース:
    • div { border : 2px solid red ; }
    • p.keisyou { border : inherit ; }
  • XHTMLソース:
    • <div>
    • <p class="keisyou">inherit が適用すると、赤の四角い枠線が2つ見えてるはずです</p>
    • </div>

なお、inherit が使えるのは、Internet Explorer の場合、IE8 からとなります。またIE8 の場合でも互換表示をしないで見てください。

ページトップへ

|    | 1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17  18  19  20  |