その`
`タグ、実は「おひとりさま専用」かも？HTMLの「包含関係」というルールのお話
Web制作を始めたばかりの頃、誰しも一度はこんな経験をするのではないでしょうか。
「あれ、CSSで文字を中央寄せにしようと思って、`
`タグの中に`
実はこれ、HTMLを学び始めた人が一番最初に出会う「ちょっとした壁」なんです。今日は、HTMLの「ブロックレベル要素」と「インライン要素」の包含関係（包む・包まれるの関係）について、お話ししていきましょう。
難しい仕様書を紐解く前に、まずは身近な例え話から入ってみますね。
—
1. HTMLは「マトリョーシカ」ではなく「ルール付きの箱詰め」
HTMLの要素には、それぞれ「得意な役割」があります。
- ブロックレベル要素（例: `
`, `
`, `
`）: 「大きな箱」です。横幅いっぱいに広がり、新しい行を作ります。
- インライン要素（例: ``, ``, ``）: 「箱の中に入れる小物」です。文字の一部を装飾したり、リンクにしたりします。
ここで大事なルールが一つ。「大きな箱（ブロックレベル要素）は、小さな箱の中に隠してはいけない」という鉄の掟があるんです。
なぜ ` ` の中に ` ` を入れてはいけないの？
例えば、`
`（段落）は、「文章のひとまとまり」を意味する、とても繊細なタグです。専門用語で「コンテンツモデル」なんて言いますが、簡単に言うと「`
`の中には、文字やリンクなどの『小さな小物』しか入れちゃダメ！」という厳しい決まりがあります。
想像してみてください。「手紙（`
`）」の中に、突然「重たいダンボール箱（`
`）」を詰め込もうとしたらどうなるでしょう？
郵便局員さんは困ってしまいますよね。ブラウザも同じです。—
2. ブラウザの「勝手な親切心」が招く悲劇
「でも、コードを書いたら普通に表示されたよ？」と思うかもしれません。ここがWeb制作の面白い（そして怖い）ところです。
実は、ブラウザは「HTMLが間違っていても、なんとか形にして表示しよう」と頑張ってくれます。これを「ブラウザの自動補完」や「DOMの修正」と呼びます。
ブラウザの裏側で起きていること
例えば、あなたがこんなコードを書いたとします。
こんにちは！
ここがdivですブラウザはこれを見ると、「おっと、`
`の中に`
`が入ってる！ ルール違反だ！……よし、僕が直しておこう」と、裏側で勝手にこう書き換えてしまいます。こんにちは！
ここがdivです本来意図していた「pの中にdivがある」という構造は消滅し、pとdivがバラバラに切り離されてしまうんです。結果、CSSで「pの中のdivを装飾しよう」と思っても、指示が通らずに「あれ？ なんで？」と悩むことになります。
—
3. どうすればいいの？「正しい箱詰め」の方法
解決策はとてもシンプルです。「入れ子（ネスト）のルールを守る」こと。これだけです！
良い例：正しい配置
もし、段落の中で特定のエリアを強調したり、レイアウトを整えたい場合は、`
`ではなく``を使いましょう。``は、``の中に住める唯一無二の「小分け用トレイ」のような存在です。
ここは段落です。
ここは強調したい部分です！
これでブラウザも混乱しません。もし、どうしてもブロック（div）を使いたいときは？
その場合は、`
`を閉じてから、その外側に`
`を配置してください。前の段落です。
見出しだって入れられます
中の段落もOKです。
—
最後に：つまずくのは「理解しようとしている証拠」
HTMLのルールは一見厳しく感じるかもしれませんが、これらはすべて「誰が読んでも（人間にも、検索エンジンにも、ブラウザにも）構造を正しく伝えるため」に存在しています。
もしコードが崩れてしまっても、落ち込む必要は全くありません。「あ、今のはブラウザが気を利かせてくれたんだな。じゃあ、次はルール通りに書いてみようかな」と、パズルを組み立てるような感覚で楽しんでみてくださいね。
皆さんのWeb制作ライフが、少しでも快適で楽しいものになりますように！また困ったことがあったら、いつでも聞きに来てくださいね。応援しています！
タイトルとURLをコピーしました
コメント