超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Color AccessUp Links SiteMap

■ 継承について

このページは当たり前のことをちょっと難しく書いています。覚えておいた方が良いのですが、覚えなくてもあまり影響ないです。

◆要素

HTML に関する記述をするとき、要素という言葉が必ず出てきます。このサイトでは難しい言葉はなるべく使わないようにしていますが、説明する上でどうしても他の言い回しができない場合があるため、ときどき使っています。
ここでその要素について整理しておきましょう。

HTML ファイルは要素の連続(塊)でできています。タグは通常、開始タグと終了タグを記述しますが、このタグに囲まれた部分を1つの要素といいます。ページ全体は <html> タグで囲まれているので、ページ全体が <html> 要素ということになります。その中に <body> 要素や <p> 要素、<table> 要素などが入っています。
さらにその要素は、要素名(タグ名)、プロパティ(属性)、プロパティ値、そして要素の内容に分解されます。

<p align="center">段落をセンタリングしちゃえ!</p>

この場合、記述したソース全体が要素ということになり、要素名=「p」、プロパティ=「align="center"」、プロパティ値=「center」で、「段落を〜!」というのが要素の内容ってことになります。
このサイト、CSS 講座では、わかりやすいようにプロパティと値を切り離して書いてますが、実際には値がないとプロパティとして機能しないことになるので、プロパティと言えばその値も含まれることになります。
ちなみにこの場合のタグとは、要素名だけではなく、プロパティも含みます。つまり、要素の内容以外の部分がこの要素のタグということになります。
<p> タグはもともと段落をつくるというプロパティをもっていますが、HTML における align 属性など、あるいは CSS を使って詳細にプロパティを設定することによって、段落の中の文字色、文字の大きさ、書体、背景色、余白などをその要素内容に対して設定することになります。


◆親要素と子要素

HTML ファイルは、要素の中に要素があって、またその中に要素があるというような階層構造(またはツリー型構造)になっています。

<タグ1><タグ2>要素の内容</タグ2></タグ1>
・<タグ1>要素=<タグ1>〜</タグ1>(この場合は全体)
・<タグ2>要素=<タグ2>要素の内容</タグ2>

このとき、<タグ1>要素を、<タグ2>要素に対する親要素と言います。逆に<タグ2>要素を、<タグ1>要素に対する子要素と言います。
下のソースは、基本的な HTML ファイルですね。

<html>
<head>
<title>Duty</title>
</head>
<body>
<h3>ayumi hamasaki Duty</h3>
<p>
All Lyrics written by <strong>ayumi hamasaki</strong>.
</p>
<table>
<tr><td>01</td><td>starting over</td></tr>
<tr><td>02</td><td>Duty</td></tr>
<tr><td>03</td><td>vogue</td></tr>
<tr><td>04</td><td>End of the World</td></tr>
<tr><td>05</td><td>SCAR</td></tr>
</table>
</body>
</html>

このソース全体が <html> 要素。その子要素として、<head> 要素、<body> 要素があり、<body> 要素の中には、<h3> 要素、<p> 要素、<table> 要素がありますね。さらに <table> 要素の中には、<tr> 要素、またその中に <td> 要素といった具合です。それぞれが親要素・子要素の関係になります。


◆継承

前ページの例をもう一度見て下さい。
<hr> タグにスタイルを設定して灰色の線を引き、クラスを使って長さ(width)を500ピクセルから450ピクセルに変更し、さらに ID を使って色を変えました。
ここで重要なポイントは、設定を変えたい部分だけ変更しているということです。
クラスを使った際は、長さを変更しましたが、ほかの属性はそのまま引き継がれています。ID を使った時も同じことが言えます。このように、もとの設定を後の設定が引き継ぐことを継承と言います。
継承はクラスやID を使った時だけではありません。タグとタグの間でも同様で、親要素で設定してあるスタイルは子要素が継承します。

(css file)
div{ color:#0000ff; text-decoration:underline; }
strong{ color:#ff0000; }

(html file)
<div>ぞうさんぞうさん<strong>おなか</strong>がいたいのね♪</div>

ぞうさんぞうさんおなかがいたいのね♪

<div> タグに段落のスタイルを設定し、<strong> タグに部分を設定すると、色は <strong> タグによって変更されますが、アンダーラインは <strong> タグ内にも継承されています。<div> タグで設定された要素は <strong> 要素にとって親要素ということになります。親要素のスタイルを子要素が継承しています。
前に、CSS 設定の3つの方法を勉強しました。1.インライン設定、2.ページ全体の設定、3.外部 CSS ファイルによる複数ページの設定でしたね。これらにも継承が行われます。3→2→1と設定した場合、2で設定していないスタイルは3の設定を継承し、1で設定していないスタイルは3および2の設定を継承することになります。
なお、同じプロパティを指定した場合は、後から指定した方が優先されます。


CSS の設定・記述の方法はここまでです。大体理解できましたか。
あとは CSS に使われるプロパティとその値を覚えるだけで、実際に CSS を使ったホームページを作成することができます(できるはずです・・・たぶん^^;)