CSSには、スタイルの継承(inheritance)というルールがあります。
親のスタイルが、自動的に子や孫にも適用されるというルールです。
今回は、CSSのスタイル継承のルールについてまとめたいと思います。
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
親要素でスタイルを指定した場合、そのスタイルが、子要素や孫要素に継承される場合と、継承されない場合があります。
例えば、次のように親要素で文字色を指定してみます。
<style>
div.sample {color:blue;}
</style>
<!--親要素(div)-->
<div class="sample">
ここは文字色を青に指定した親要素です。
<!--子要素(p)-->
<p>ここはスタイルの指定をしていない子要素です。</p>
</div>
ブラウザでは、次のように表示されます。
ここは文字色を青に指定した親要素です。
ここはスタイルの指定をしていない子要素です。 |
親のdiv要素に、color:blueで文字の色を青に指定しています。
そして、div要素の子要素であるp要素にはスタイルについて何の指定もしていません。
ブラウザで表示を確認すると、どちらの文字も青で表示されています。
これがスタイルの継承です。
親のスタイル(color:blue)が、子要素にも継承されています。
スタイルの継承は、親要素から子要素のみでなく、孫要素にもひ孫要素にも延々と行われます。
次に、親要素でボーダーの指定をしてみます。
<style>
div.sample {border:1px solid #000000;}
</style>
<!--親要素(div)-->
<div class="sample">
ここはボーダーで囲むように指定した親要素です。
<!--子要素(p)-->
<p>ここはスタイルの指定をしていない子要素です。</p>
</div>
ブラウザでは、次のように表示されます。
ここはボーダーで囲むように指定した親要素です。
ここはスタイルの指定をしていない子要素です。 |
先の文字色の例と同様に、親要素のみにスタイル(border:1px solid #000000)を指定して、子要素にはスタイルを指定していません。
ブラウザで表示を確認すると、親要素のdiv要素全体は指定されたボーダーで囲まれていますが、その子要素であるp要素自体はボーダーで囲まれていないので、スタイルは継承されていません。
このように、親要素に指定したスタイルが、子要素に継承されないものもあります。
これは、プロパティごとに、継承するかしないかが決まってるからです。
colorは継承する、borderは継承しない、…というように、プロパティ1つ1つについて、継承するかしないかの決まりがあります。
ほぼ全てのプロパティには、親要素の値を強制的に継承するinheritという値を指定することができます。
この値を指定すると、通常は値を継承しないボーダーやマージン、パディングなどのプロパティも、値を継承します。
(Internet Explorer7以前は、inheritの指定をサポートしていないので注意が必要です。)
先ほど、子要素に継承されなかったボーダーに、inheritを指定してみます。
<style>
div.sample1{border:1px solid #000000;}
p.sample2{border:inherit;}
</style>
<!--親要素(div)-->
<div class="sample1">
ここはボーダーで囲むように指定した親要素です。
<!--子要素(p)-->
<p class="sample2">ここはボーダーにinheritを指定をした子要素です。</p>
</div>
ブラウザでは、次のように表示されます。
ここはボーダーで囲むように指定した親要素です。
ここはボーダーにinheritを指定をした子要素です。 |
親要素のボーダー(border:1px solid #000000;)の指定が、子要素にも継承されました。
親要素と全く同じスタイルにしたい場合、子要素に同じ内容を指定する手間が省けるので、inheritは便利な値です。
親要素から子要素へ文字サイズなどの値が継承される場合、ptやpxなどの単位で指定している場合は、そのままの値が継承されますが、他の要素サイズとの関係で算出される相対的な単位(%やem、exなど)で指定している場合は、親要素と子要素の値を掛け合わせた結果の値が継承されます。
次のように、親要素と子要素のそれぞれに文字サイズ120%を指定してみます。
(確認しやすいように、color:blue;の指定もしています。)
<style>
div.sample1 {font-size:120%; color:blue;}
p.sample2 {font-size:120%;}
p.sample3 {font-size:inherit;}
</style>
<!--親要素(div)-->
<div class="sample1" >
ここは文字サイズを120%に指定した親要素です。
<!--子要素(p)-->
<p class="sample2">ここは文字サイズを120%に指定した子要素です。</p>
<p class="sample3">ここは文字サイズをinheritで指定した子要素です。</p>
</div>
ブラウザでは、次のように表示されます。
ここは文字サイズを120%に指定した親要素です。
ここは文字サイズを120%に指定した子要素です。 ここは文字サイズをinheritで指定した子要素です。 |
親要素と同じ値を指定した子要素の文字サイズは、親要素と同じの120%ではなく、120%×120%=144%となっています。
inheritを指定した子要素の文字サイズは、親要素のサイズ(120%)と同じです。
相対的な単位の場合にinheritを指定すると、その相対性を継承するのではなく、実際のサイズを継承していることがわかります。
この辺りは、普通に考えて、親要素から継承させたいものが継承されている結果になっていると思います。
大量に存在するプロパティについて、継承するかどうかを1つ1つ把握するのは無理ですが、次のような大まかなイメージはあります。
●文字に関するスタイルのプロパティは、継承するものが多い。
●ボックスに関連するプロパティと表示や配置に関連するプロパティは、継承しないものが多い。
スタイルを継承しないプロパティ | |
---|---|
ボックスに関するプロパティ | width、height、margin、padding、border、ourline、background、他 |
表示や配置に関するプロパティ | overflow、display、float、clear、position、z-index、他 |
正確に知りたい場合は、W3Cのサイトで調べられます。
まず、World Wide Web Consortium (W3C) のサイトにアクセスします。
右上の検索フォームに、対象のプロパティを入力して検索します。
検索結果のページで、Inherited(継承)がyes(継承する)かno(継承しない)かで確認できます。
INTERNOUS,inc. All rights reserved.