TOP > Back > Place > Next

親要素と子要素

ページを作るときに、「これはブロックレベル要素」、「これはインライン要素」等、常に気にしている必要はありません。見出し、表、リスト、画像などをとりあえずレイアウトします。

気にする必要があるのはレイアウトが完成しタグ(要素)を使う時で、例えば<DIV>要素の中に<P>要素、さらにその中に<SPAN>要素というように、タグが複雑な入れ子構造になっていくときです。

段落要素でも少し触れましたが、もう一度おさらいです。

例えば、以下のようなHTML文書があるとき、(文書は省略)
  <DIV style="text-align:center">
     <H3>見出し</H3>
       <P>段落
          <SPAN style="font-size:x-large">部分</SPAN>
       </P>
  </DIV>

このとき、“<P>要素から見て<DIV>要素を「親要素」”、“<DIV>要素から見て<P>要素やその他が囲まれている要素は「子要素」”と呼びます。ステキなHTML文書やスタイルシートを利用するためには包括要素を理解しておく必要があります。


 ブロックレベルとインラインの扱い方(要素どうしの入れ子関係)

実は、HTMLの要素には「<BODY>にどんな要素を含むことができるか、どの要素が親要素となれるか」が細かく決められています。大原則として二つのことを覚えておきましょう。

正しい記述:
ブロック要素の中にインライン要素
<DIV><SPAN STYLE="COLOR:red">赤い文書</SPAN></DIV>

ブロック要素の中にブロック要素を含むことも問題ありません。
<DIV><H1>見出し</H1><BLOCKQUOTE><P>引用文の段落にした文章</P></BLOCKQUOTE></DIV>

インライン要素の中にインライン要素を含むことも問題ありません。
<P><SPAN STYLE="COLOR:red"><B>太字の赤い文章</B></SPAN></P>

間違った記述:
インライン要素の中にブロック要素
<SPAN STYLE="COLOR:red"><H1>赤い見出し</H1></SPAN>

間違った記述例では、インライン要素である<SPAN>要素の中に、ブロックレベル要素である<H1>要素が入ってます。
一般のWebブラウザは寛容にできていて、どちらでも赤い文字の見出しレベル1を表示してくれますが、将来は保障しません。
余談:ホームページ作成ソフトなどで読み込むと、警告メッセージが表示されたり高価なものは自動訂正します。

簡単に説明するとブロックレベル要素は文書の構造を記述するもの。インライン要素は文字か、文字を飾る(文書の構造自体には関係がない)スタイル要素、または文字と並ぶイメージ要素(画像・Scriptなど)だけです。

<BODY>要素のブロックレベル要素だけでもメモしましょう。
ADDRESS|BLOCKQUOTE|CENTER|DIR|DIV|DL|FIELDSET|FORM|H1〜H6|HR|ISINDEX|MENU|NOFRAMES|NOSCRIPT|OL|P|PRE|TABLE|UL
今まで、登場した要素もありますネ!これから、登場する要素もありますョ!
別に、SCRIPT|INS|DEL は<BODY>要素に直接おくことが許されてます。


・ 親要素の幅に影響されるHR要素の幅

罫線を使って、親要素と子要素の関係のわかりやすい例を、もうひとつ見てみましょう。(罫線は文字の代わりです。)

ソース
<HR SIZE="20" NOSHADE>
表示結果

HR要素で作る水平罫線は、基本的に親要素の横幅いっぱいに伸びます。通常最大で<BODY>要素が親要素で、ウィンドゥ幅いっぱいに罫線が表示されます。(因みに、上の罫線は<DIV>が親要素です。)

次に<BLOCKQUOTE>を使います。
余談:これは、サンプルで本当は、ルール違反です。この後に出るテーブルでも出来ますが、今回は登場した<BLOCKQUOTE.>で紹介します。

ソース
<BLOCKQUOTE> <HR SIZE="10" NOSHADE> <BLOCKQUOTE> <HR SIZE="20" NOSHADE> </BLOCKQUOTE> </BLOCKQUOTE>
表示結果
ココが始めの<BLOCKQUOTE>
ココから二個目の<BLOCKQUOTE>

<BLOCKQUOTE>要素は「引用文である」ことを定義するHTMLの要素ですが、それを表示するときには、左右に余白をとり表示してしまいます。

始めのブロック要素<BLOCKQUOTE>(親要素)の中に入っている 幅10pxの細い罫線では左右に余白ができ、二個目のブロック要素<BLOCKQUOTE>となっている 幅20pxの太い罫線では、余白が倍になり短くなっています。

・属性の継承

上の罫線で示したように、HTMLの要素の一部には親要素の属性を受け継ぐことを「属性の継承」と呼びます。また、画像で紹介した回り込みは、<要素 STYLE="CLEAR:BOTH">をしないと、同じように「属性の継承」が行われ続けます。 ページ作りのときには、留意しておく必要がありますネ!

・属性の優先度

属性の優先権は、「属性の継承」を受けながら順位があり「属性の優先」をします。
HEAD のスタイルシートで、BODY 内の属性を指定しても<BODY>内のブロックレベル要素で指定した属性が強く働き、それよりもインライン要素で指定した属性がより強く働き、さらに、その内側のタグが働く仕組みになっています。
ようするに、指定するテキストに近いほど影響を強く受ける仕組みになります。しかし、属性の指定が終われば再び元に戻ります。

例えば、文字の色を「Pに赤、BIGに緑、SPANに青」と指定します。
ソース:
<P style="color:red"><BIG style="color:green"><SPAN style="color:blue"></SPAN></BIG></P>

表示結果:

 赤 緑 青 緑 赤

と、こんな感じです。

 【←BACKNEXT→

Copyright (c) Producer by System KS. 2001 All rights reserved.