HTMLでWebページの見え方を作成していく際に、前回はブロックレベル要素とインライン要素について紹介しました。
縦に積み重なっていくブロックレベル要素、そして、横に並んでいくインライン要素ですね。
今回はさらにタグを追加していく上で大切になっていく、親要素と子要素の話をしていきます。
親要素・子要素
上の画像のようにそれぞれの要素を段落で分けています。
見て欲しいのは、11~27行目の<div>~</div>という記述と、14~26行目の<h4>~</h4>という記述です。
それぞれの記述の中に他の要素が入っていることが分かります。
親要素に対して、インデントと呼ばれる半角スペース２つぶん右に行っている部分が子要素を表しています。（これは見やすくするための記述であり、なくても正常に動作しますが、あった方が他の人が見たときに親切です）
親要素と子要素と言われてもイメージが湧かないかもしれませんので、まずは以下の画像をごらんください。
親要素、子要素を簡単にいうと、大きな枠が親要素、その中に入っているものが子要素です。
図で言う赤色ゾーンが親要素、その中にある言葉たちが子要素、孫要素（子要素の中に入っている子要素）になります。
もうちょっとアップにします。
繰り返しになりますが、親要素、子要素を簡単にいうと、大きな枠が親要素、その中に入っているものが子要素です。
図で言う赤色ゾーンが親要素、その中にある言葉たちが子要素、孫要素（子要素の中に入っている子要素）になります。
それぞれを要素の名前で見ていくと、今回ではdiv要素が親要素になり、その中に入っている、h2、h3、h4がdivの子要素になります。
h4の中に入っている、p、bの要素については、h4の子要素と言うことができます。
なぜ、親要素・子要素が大切なのか
親要素・子要素が大切な理由としては、CSSとの関係が出てきます。
CSSとは、HTMLを修飾する言語のことでしたね。
このCSSを使うことによって、今回の様に、色を変えたり、周りに線をつけたりしていくのですが、修飾を行う際に、親要素に対して使うものと子要素に対して使うものが出てきます。
そのときに、どれが親にあたるのかを判断することができるのが大切なので、コードを見たときに見やすくしておくのも大切なのです。
おわりに
今回は、親要素と子要素についての話をしました。
これから先、特にCSSを使って配置を考えていく際に、親要素と子要素の関係に注目していかなければなりません。
大きな親要素、その中にある子要素といった関係性を忘れない様にしていきましょう。
コメント