親からひ孫まで！要素の世代物語

「要素」はHTMLの超基本！タグの意味や構造をしっかり理解することで、読みやすくて正しいコードが書けるようになりますよ！今回は、要素の基本と構造の仕組みをわかりやすくまとめています。

要素のおさらい

要素とは→開始タグ＋内容＋閉じタグ＝要素

要素の中に複数の要素がある場合

・このように、<div>要素の中に複数の要素がある場合には親子関係が生まれます。

・ココでは、 <div> が親要素になります。親要素は１つしか存在しません。

・親要素の中にあるのが子要素です。ここでは子要素は１つですが、子要素は何個あっても良いです。

・子要素の中にあるのが孫要素です。孫要素も何個あっても良いです。

ポイント

・親要素は１つしか存在しない
・他の要素を一番外側で囲んでいるのが親要素
・子要素は親要素の中にある
・孫要素は子要素のさらに中にある

親要素・子要素・孫要素はどれ？

・この場合<span>要素は ひ孫要素となります。

・では、この場合はどのようになるのでしょうか？

・この場合、このように、子要素が２つになります。なぜなら

・一番外側にあるのが親要素なのはわかると思います

「開始タグ＋内容＋閉じタグ＝要素」でしたよね。親要素の中にある要素は全て子要素になります。ややこしいかもしれませんが、何度も読み返してください。親要素の中にある子要素はこの２つだけになります。

まとめ

・要素の階層は、家族で考えるととても覚えやすい
・HTMLを書くときは、階層構造を意識すると読みやすくなる。

次回は、子孫クタ・子セレクタ・隣接セレクタの基本的な書き方