Day 1・HTMLの構造 — 骨組みを読む
入れ子(ネスト)と親子関係 — マトリョーシカの構造
要素の中に要素が入る「入れ子」を理解し、AI生成HTMLの深い階層を親子関係として読み解く。
レッスン1で1つの箱(要素)を読めるようになりました。実際のページは、その箱の中にさらに箱を入れて作ります。これを入れ子(ネスト)と呼びます。AIが作るHTMLが長くて怖く見えるのは、たいていこの入れ子が深いだけです。仕組みがわかれば、長さは怖くありません。
たとえるなら
入れ子はマトリョーシカ人形です。大きな人形を開けると中に人形、それを開けるとまた中に人形。HTMLも、大きな箱を開けると中に小さな箱が並んでいる。どの箱がどの箱の中にあるか、を追うのが読解のコツです。
<ul>
<li>りんご</li>
<li>みかん</li>
</ul>上では ul が外側の箱、li が内側の箱です。外側を親、内側を子と呼びます。ul は li の親、li は ul の子。さらに li が2つ並んでいるので、この2つはたがいに兄弟です。親・子・兄弟という言い方は、AIとの会話でもよく出てくるので覚えておくと便利です。
たとえるなら
入れ子はパソコンのフォルダ構造そのものです。フォルダの中にフォルダ、その中にファイル。HTMLも同じで、外側の要素というフォルダの中に、内側の要素というファイルやフォルダが入っています。
インデント(字下げ)は地図
AIが書くHTMLは、子要素を右にずらして(インデントして)書きます。これは飾りではなく地図です。同じ量だけ右にある要素どうしは兄弟、より右にあれば子。行の左端のずれを見るだけで、開かずに親子関係がわかります。
入れ子が交差してNG
b の中で始めた i を、b より先に閉じている。かっこが ( [ ) ] のように交差した状態で、ブラウザが混乱する。
<b><i>強調</b></i>内側から順に閉じる
後に開いた i を先に閉じ、先に開いた b を後に閉じる。マトリョーシカと同じで、内側から順に閉じるのが鉄則。
<b><i>強調</i></b>なぜ入れ子の順番が大事なのか
ブラウザは「開いた順の逆で閉じる」という前提でHTMLを組み立てます。順番が交差すると、どの箱がどこで終わるのか判断できず、見た目が崩れたりが効かなくなったりします。閉じる順番は、開いた順番の逆。これだけ守れば入れ子は崩れません。
AIにはこう頼む
階層が深くて迷子になったら「このHTMLの入れ子構造を、親子がわかるように箇条書きのツリーで書き出して」と頼むと、地図を作ってもらえます。まず全体の骨組みを見てから細部を読むと理解が早いです。
読んでも腑に落ちない所は、AIに噛み砕いてもらいましょう。
理解度チェック
答えられれば、面接で説明できる状態に一歩近づきます。
<ul><li>りんご</li></ul> において、li から見た ul はどういう関係ですか。
<b><i>強調</i></b> のように入れ子を正しく閉じるルールはどれですか。
入れ子(ネスト)と親子関係とは何か、たとえを使って説明してください。
記述式です。まず自分の言葉で答えを考えてから、模範解答を開いて自己採点してください。