「liの中にdivを入れていいの？」HTMLのリスト構造、迷わず書けるようになるための処方箋
こんにちは！フロントエンド開発の世界へようこそ。
Web制作を始めたばかりの頃、誰もが一度はぶつかる「リスト（ul/ol/li）の壁」。特に、「リストの中に段落（pタグ）や別の箱（divタグ）を入れちゃっても大丈夫かな？」と悩んだ経験はありませんか？
「とりあえず動けばいいや」で進めて、あとからCSSのレイアウトが崩れて涙目になる……そんな経験、私にもありました。でも安心してください。HTMLのルールを紐解けば、この悩みは驚くほどスッキリ解消します。今日は、リスト要素の「懐の深さ」と「守るべきマナー」について、一緒に深掘りしていきましょう。
—
li要素は「何でも受け入れる大きな器」
結論から言うと、`li`要素の中に`div`や`p`、さらには別の`ul`や`ol`を入れることは、HTMLの仕様上、まったく問題ありません。
イメージとしては、`li`は「お弁当箱の仕切り」のようなものです。小さなおかずを入れるカップもあれば、メインディッシュを入れる大きなスペースもありますよね。それと同じで、`li`という一つの項目の中に、文章を詰め込んだり、画像を配置したり、あるいはさらに細かいグループ分けをしたりしてもいいのです。
なぜ「ダメ」という噂があるのか？
昔のHTML（HTML4.01など）では、ルールが非常に厳格で、「リストの中にはインライン要素（テキストや画像などの小さな要素）しか入れてはいけない」という時代がありました。しかし、現在のHTML5以降では、`li`は「フローコンテンツ（多くの要素を含むことができるグループ）」という扱いになり、非常に自由度が高くなっています。
もし先輩エンジニアから「liの中にdivを入れるな」と言われたら、それは「構造が複雑になりすぎて管理しづらくなるから、もっとシンプルに書こう」という設計上のアドバイスである可能性が高いです。
—
実際に書いてみよう：リストの中に情報を詰め込む
例えば、Webサイトの「よくある質問（FAQ）」や「サービス紹介」を作る場面を想像してみてください。一つのリスト項目の中に、タイトルと説明文があるような構成です。
-
月額プランについて
月額プランは、いつでも解約可能です。安心してご利用ください。
-
支払い方法
以下の方法に対応しています。
- クレジットカード
- 銀行振込
- 電子マネー
このように、`li`の中に`h3`や`p`、さらには入れ子の`ul`を配置しても、ブラウザは「ああ、これはリストの中の詳しい説明なんだな」と正しく理解して表示してくれます。
—
つまずきポイント：CSSでレイアウトする時の注意点
`li`の中に`div`や`p`を入れること自体はOKですが、CSSを当てる時には一つだけ注意が必要です。
`p`要素などには、ブラウザのデフォルトスタイルで上下に「余白（マージン）」が設定されていることが多いです。そのため、リストの中に`p`を入れると、リストの項目間が意図せず大きく広がってしまうことがあります。
困った時の処方箋：
「リストの隙間が広すぎるな？」と感じたら、CSSでこのように調整してみてください。
/ リストの中のpタグの上下余白をリセットする /
li p {
margin-top: 0;
margin-bottom: 0.5em; / 自分の好みの余白に調整 /
}
「HTMLのルールを守っているはずなのに、見た目が崩れる」というのは、実はタグの入れ子問題ではなく、こうした「ブラウザが勝手につけている余白」が原因であることがほとんどです。焦らなくて大丈夫ですよ！
—
最後に：完璧を目指さず、まずは「伝わる構造」を
HTMLを書くとき、一番大切なのは「PCやブラウザに正しく伝えること」ですが、それと同じくらい「未来の自分や、コードを読む仲間が読みやすいこと」も大切です。
`li`の中に`div`をたくさん入れ子にすると、CSSの指定が複雑になりがちです。もし「ここ、もっとシンプルに書けないかな？」と感じたら、それはあなたがより良いコードを書こうと成長している証拠です。
まずは「`li`の中に何を入れてもルール違反ではない」ということを心のお守りにして、色々なパターンを試してみてください。もし表示が崩れても、それはHTMLが間違っているのではなく、CSSで「ちょっと調整してね」というブラウザからの合図です。
これからも、一つずつ楽しみながら、Web制作の階段を登っていきましょう！応援しています。
コメント