ブロック要素とインライン要素の違い

📝 問題の再掲

Q49: <p><div>テキスト</div></p> が正しくない理由は？

→ p（インライン的なブロック）の中に div（ブロック要素）を入れているため構造違反です。

⚠️ よくある間違い

• <p> の中に <div> を入れてしまう
• <span> で改行されると期待する
• ブロック要素とインライン要素の区別がつかない

📖 段階的な説明

ステップ1：ブロック要素とは

ブロック要素は前後に改行が入り、横幅いっぱいに広がる要素です。「段ボール箱」のように、1つで1行を占有します。

代表例: <div> <p> <h1>〜<h6> <ul> <table>

ステップ2：インライン要素とは

インライン要素は文の流れの中に入り、内容の分だけの幅を取る要素です。「マーカーペン」のように、文章の一部だけを装飾します。

代表例: <span> <a> <strong> <em> <img>

ステップ3：入れ子ルール

• ✅ ブロックの中にインライン → OK
• ✅ ブロックの中にブロック → OK（divの中にdivなど）
• ❌ インラインの中にブロック → NG！
• ❌ <p> の中に <div> → NG！

ステップ4：代表的なタグの分類

💡 覚え方のコツ

div = 段ボール箱（大きくて1つで場所を取る）

span = マーカーペン（文章の一部だけに色をつける）

✅ 確認問題

Q: 次のうち、正しいHTMLはどれ？

A: <span><div>テキスト</div></span>

B: <div><span>テキスト</span></div>