4.HTMLの要素と親子関係について
テキストなのに親子が存在する
親子ってなに！？
ハイ、私です。
今回はHTMLの要素と親子関係について整理していきます。
要素って何？
まずは、親子関係の前に要素について知りましょう。
要素って言うと難しく感じるかもしれません。
要素 ＝ １個の「かたまり」
と言えます。
「ちょっと待って、かたまりって何？」
お答えします。
「かたまり」とは
HTMLの記事の中で
「あるルールに基づいて書かれたテキストファイル」
を強調していました。その書き方は、
<タグ>表示したい内容</タグ>
です。
実はこの記述こそが、１個の「かたまり」・・・
すなわち「要素」だったわけです。
要素とHTMLの関係は？
ここまでの説明で、HTMLは
「タグで内容を囲む」というルールで書かれたテキスト＝「かたまり」
を書き連ねたテキストファイルと言うことがわかっていただけたかと思います。
そのイメージは、
ーーテキストの中身ーー
<タグ1>内容1</タグ1>
<タグ2>内容2</タグ2>
<タグ3>内容3</タグ3>
・
・
・
ーーテキストの中身ここまでーー
という形です。
<タグ>内容</タグ> ＝ 要素 であることは、ここまででお伝えした通りです。
だとすれば、以下のような「捉え方」ができます。
ーーテキストの中身ーー
要素1
要素2
要素3
・
・
・
ーーテキストの中身ここまでーー
結局のところ、HTMLは要素をたくさん書き連ねたテキストファイルという事です。
そして、要素という言葉は、あくまで<タグ>内容</タグ>の言いかえでしかないのです。
要素はもういい、親子関係は？
要素について簡単に整理ができたところで、
いよいよ親子関係の説明に入っていきます。
察しの良い皆様なら既にお気づきかもしれませんが、
親子関係とは「要素」同士の関係を指しているのです。
親子と呼ばれるからには現実世界と同じように上下関係が存在します。
親子は優しい関係
要素同士の親子関係は優しいのです。
なぜかといえば、親が常に子を包んでいるのです。
これが愛です。（嘘です）
包んでいるというのが、イメージが湧きにくいと思いますので、
例を示します。
<タグ親><タグ子>内容</タグ子></タグ親>
このような形です。
そして、HTMLでは見やすさを重視して、以下のように書きます。
<タグ親>
<タグ子>内容
</タグ子>
</タグ親>
この書き方にすることで、より一層「包まれている感」が演出されますね。（違)
こんなに適当なところで改行して大丈夫なの？と思った、そこのあなた！
鋭いです！
HTMLでは通常の改行は無視されます。
改行には別途書き方が存在しますので、安心してください。
包まれていると結局何がいいの？
子は親に包まれて、心地よいので常に親に付き従います。
例えば、
- 親の大きさが変われば、子はそれにならいます。
- 親が移動すれば、同じようについて行きます。
- 複数の子を持つことができます。
勘の良い方はお気づきかもしれません。
表示の時の「要素」の管理が楽になるのです。
１つ１つの要素を個別に移動するよりも、
親の中に複数の子を入れて、親を移動させる。
こうすることで、親だけを移動させることで、
合鴨の子のようにピヨピヨついてくるのです。
かわいい。
ではなくて、web制作者は楽ができるわけです。
親子関係はweb制作者に管理のしやすさを提供してくれていたわけです。
今日のまとめ
- 要素とはHTMLのタグで内容を囲った「１個のかたまり」のこと
- 親子関係とは要素同士の関係のこと
- 親子関係があることで、管理が楽になる
本日は要素と親子関係について整理しました。
次回の学習記録でお会いしましょう。
では、また。
