「HTMLの親要素、子要素って？」
HTMLを勉強していると、「親要素」「子要素」なんてワードが出てきますが、ここはしっかりと理解しておかないといけない部分です。
今回は、HTMLの子孫関係についてなぜ理解しなければならないのかの解説も加えて解説します。
今回の記事は、次のような方にお勧め！
・ツリー階層について知りたい
・親要素や子要素等、イマイチ理解できていない
解説前の予備知識。ツリー階層とは？
まず、解説前の予備知識として、HTMLの階層について解説をしておきます。まずは、下記サンプルコードをご覧ください。
<html lang="ja">
<head>
<meta charset="utf-8">
<title>練習用ページ</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>今日の天気</h1>
<p>今日は、晴れです。お散歩日和です。</p>
</body>
</html>HTMLタグは、タグの中に別のタグを含めることができるので、階層関係が出来上がります。上記のサンプルコードの例だと、<html>タグの中に、<head>タグと<body>タグがあって、<body>タグの中には、<h1>タグと<p>タグがあって等、階層関係が出来上がっているのがわかると思います。この階層関係のことを「ツリー構造」と呼びます。
なぜ理解しないといけないのか？
ツリー構造って理解しておかないといけないの？そんなに重要？
はい、これは断言できます。理解していないと、CSSを使用する時苦労します・・！
WEBデザインをする際、CSSを使ってレイアウトを整えてきますが、「親要素」を基準にしてレイアウトや値を指定するシーンがあります。
- Flexbox
- CSSグリッド
- %指定
- em指定
など、レイアウトや値を指定する際、ツリー階層を理解できていないと苦労するシーンが出てきます。
筆者も最初、ツリー階層を正しく理解しておらず、大変苦労した経験があります。
なので、しっかりとツリー階層を把握する癖をつけておくことをお勧めします。
・理解しないとCSSの指定で苦労する！
親要素・子要素とは？
では、まず親要素と子要素の関係について解説をします。下記画像をご覧ください。
親要素・・ある要素から見て、すぐ上の階層の事を指します。
子要素・・ある要素から見て、すぐ下の階層の事を指します。
祖先要素・子孫要素とは？
祖先要素・子孫要素の関係については、下記画像の通りです。
祖先要素・・ある要素から見て、親要素の親要素や親要素の親要素の親要素の事などを指します。
子孫要素・・ある要素から見て、子要素の子要素の事などを指します。
兄弟要素とは？
最後に兄弟要素についてです。下記画像をご覧ください。
兄弟要素・・ある要素と同階層にある要素の事を指します。
まとめ
今回、ツリー階層のお話と、「親要素」「子要素」「祖先要素」「子孫要素」「兄弟要素」という5つの要素が出てきましたが、理解は出来ましたでしょうか？今回の内容は、しっかりと把握できないと、CSSを指定する際、苦労しますので、是非覚えておいていただきたい内容です。
