HTML
リスト要素が正しくネストされない
ul/olの直下にli以外の要素がある
こんな症状
ul/olの直下にli以外の要素を置いてレイアウトが崩れる。リスト構造を正しく書けていないときに起きるよ。
まず試す
<ul>/<ol> の直下には <li> だけを置く。追加コンテンツは <li> の中に入れる。
html
<ul>
<li>A</li>
<li>B</li>
</ul>これで直らなければ、下の「自分のケース」を確認。
🔍 自分のケースはどれ？
- ✓ul の直下に div や p を置いた
→ その要素を <li> の中に入れる。 - ✓li の閉じタグが無い
→ 各 <li> を </li> で閉じる。 - ✓入れ子のリストを作りたい
→ <li> の中に <ul>/<ol> を入れる。
なぜ起きる？
HTMLの仕様では<ul>や<ol>の直接の子要素は<li>のみ許可されているよ。<ul>の直下に<div>や<p>を置いたり、<li>の外にテキストを書いたりすると、ブラウザが構造を正しく解釈できずレイアウトが崩れるんだ。
✕ エラーが起きるコード
<ul><li>A<li>B</ul>
<!-- li 閉じタグなし -->✓ 直したコード
<ul><li>A</li><li>B</li></ul>✅ 直ったか確認
リストが意図どおり表示され、HTMLバリデーターで構造エラーが出なければOK。
この解決法は役立ちましたか？
🔗 関連するエラー
- テーブルの表示が崩れる — tr/td の入れ子が間違っている
- 画像が表示されない — 画像パスが間違っている
- ページのレイアウトが崩れる — タグの閉じ忘れ
- リンクをクリックしても何も起きない — href 属性の書き忘れ
- 文字化けする — charset の指定がない
🔗 別カテゴリの関連エラー
📖 この問題を学べるレッスン
✏️ 手を動かして練習
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- HTMLとは？初心者向けにわかりやすく解説 — タグの書き方・ページ構造の基本
- HTMLのパス（相対パス・絶対パス）の書き方 — パスの書き方を初心者向けに解説