HTMLの「迷いどころ」を解決！`div`と`p`の使い分け、実はこんなにシンプルなんです。
Web制作を始めたばかりの頃、誰もが一度はぶつかる壁があります。それが「`div`と`p`、結局どっちを使えばいいの？」という悩みです。
「とりあえず全部`div`で囲っておけばレイアウトは崩れないし、動くからいいや」……そんなふうに考えていませんか？実は私も、駆け出しの頃はそうでした。でも、この二つの違いを理解することは、Webサイトを「ただの絵」から「コンピューターにも人間にも優しい、価値ある文書」へと進化させるための第一歩なんです。
今日は、この二つの使い分けを、身近な例え話と一緒に紐解いていきましょう。大丈夫、決して難しい話ではありませんよ。
—
1. 例え話でイメージしよう：お買い物のレシートとショッピングバッグ
まずは、`div`と`p`の役割を、日常の道具に例えてみます。
`p` は「中身の詰まった一冊の手紙」
`p`要素（paragraph：段落）は、「ひとまとまりの文章」です。手紙や本を想像してみてください。文章がずっと続くと読みづらいので、適度なところで改行してブロックを作りますよね？ あの「一つの意味を持つ文章のかたまり」が`p`です。
`div` は「何でも詰め込めるショッピングバッグ」
一方、`div`要素（division：分割）は、「中身が何であれ、とにかくまとめて運ぶためのバッグ」です。中には靴が入っていても、野菜が入っていても、あるいは小さなポーチ（別の`div`）が入っていても構いません。`div`自体には「これは文章である」といった特別な意味はなく、ただの「箱」なんです。
—
2. なぜ「意味」を持たせることが大切なの？
「見た目が同じなら、全部`div`でよくない？」と思うかもしれません。しかし、Webの世界には「人間以外」のお客さんもやってきます。Googleの検索エンジンや、視覚に障害がある方が使う「スクリーンリーダー（読み上げソフト）」です。
彼らはサイトを見たとき、こう判断します。
- `p`がある場所：「おっ、ここは重要な文章だな。丁寧に読んで伝えよう。」
- `div`だらけの場所：「ただの箱が重なっているだけか。中身が何なのか、よく分からないな…。」
正しく`p`を使うことは、あなたのサイトを「誰にとっても読みやすい宝物」にすることなんです。
—
3. 実践！こうやって使い分けよう
では、具体的にどう書くのが正解か、コードを見てみましょう。
こんにちは！
今日はいい天気ですね。
今日のお知らせ
本日、新しいブログを公開しました。
ぜひチェックしてみてくださいね！
つまずきポイント：`p`の中に`div`は入れない！
ここだけは注意してくださいね。`p`という「手紙」の中に、`div`という「バッグ」を無理やり入れることはできません。HTMLには「箱（div）の中に手紙（p）を入れるのはOKだけど、手紙の中に箱を入れるのはダメ」というルールがあるんです。
迷ったらこう覚えておきましょう。
「文章そのもの（テキスト）は`p`で包む。それらをグループとしてまとめたり、レイアウトのために囲いたいときは`div`を使う。」
—
最後に：完璧を目指さなくて大丈夫
ここまで読んで「うわ、間違えて使っていたかも…」と焦る必要はありません。私も最初は何度も書き直しました。
まずは、「このテキストは一つの段落かな？」と思ったら、そっと`p`で囲んでみる。それだけで、あなたの書くHTMLは、昨日よりもずっとプロフェッショナルで、誰かに優しいものになっています。
Web制作は、こうした小さな「意味」の積み重ねです。一つずつ、楽しみながら覚えていきましょうね。また何かわからないことがあったら、いつでも聞きに来てください。あなたの挑戦を、心から応援しています！
コメント