このコーナーでは素人の自分が参考書を片手に、自在なブログ記事を書くべく、また、ブログの可能性を広げるために、ブログのためのHTML＆CSSの研究と勉強をして基礎知識を身に着けるコーナーです。( ..)φメモメモ
自分のノート代わりも兼ねて書いてるので適当に流してください。いわゆる個人的な公開ノート(笑)←記事に書いて覚える
【HTML＆CSSの研究】その１ ＨＴＭＬ＆ＣＳＳとは
【ブログのためのHTML＆CSSの研究】
その３ HTMLの階層関係
親要素と子要素
要素の中にさらに要素が含まれていると、その２つの要素の間に階層関係ができる。 この時、別のタグを囲む側の要素を親要素、囲まれる側の要素を子要素と言う。
〈例〉
※注意事項※
子要素は親要素の開始タグと終了タグの間におさまっていないといけない。(親要素は外側で、子要素は内側。) 以下のようなHTMLを書くとWebページが正しく表示されない。
(悪い例)
<p>夏季は<strong>取り扱いを中止しています</p></strong>
↑ ×親要素の中に入っていない
祖先要素と子孫要素
HTMLを書いていると、だんだんと階層関係が複雑になり、あるタグに子要素が含まれ、その子要素にさらに子要素が含まれている場合がある。ある要素から親要素をたどって上の階層にある要素の事を祖先要素、下の階層にある要素の事を子孫要素という。
以下の場合、２つの<p>要素は<div>の子要素であるが、<p>要素の子要素に<strong>要素がある。
( <div> → <p> → <strong> )
<strong>要素から親要素をたどって行きつく先は<div>要素。<strong>要素にとって<div>要素は祖先要素になる。
(例)
兄弟要素
以下の子要素は同じ親を持ち、子要素同士は兄弟の関係にある。
この子要素同士を兄弟要素と言う。 (<h1>と<p>は兄弟。)
<div>
<h1>ラテ・アートとは</h1>
<p>バリスタがコーヒーのミルクで作る図柄のことです。</p>
</div>