← エラー辞典に戻る

HTML

ページのレイアウトが崩れる

タグの閉じ忘れ

こんな症状

文字が変な場所に表示される、ページ全体の見た目がおかしい。HTMLを書き始めたばかりで閉じタグの概念に慣れていないときに起きやすいよ。

まず試す

開いたタグに対応する終了タグ（</p> など）があるか見直し、不足を補う。

html
<p>段落1</p>
<p>段落2</p>

これで直らなければ、下の「自分のケース」を確認。

🔍 自分のケースはどれ？

  • ✓終了タグを書き忘れた
    → 対応する </タグ> を追加する。
  • ✓どこが閉じ忘れか分からない
    → DevToolsのElementsタブで構造を見ると、ネストの崩れが分かる。
  • ✓書きながら防ぎたい
    → VS Codeの自動閉じタグ（Auto Close Tag）を使う。

なぜ起きる？

HTMLのタグは開始タグ（<p>）と終了タグ（</p>）がセットになっているよ。終了タグを書き忘れると、ブラウザは「ここからここまでが段落」という区切りがわからなくなり、後続の要素が意図しない場所に配置されてしまうんだ。

✕ エラーが起きるコード
<p>段落1
<p>段落2
<!-- </p> を書き忘れている -->
✓ 直したコード
<p>段落1</p>
<p>段落2</p>
<!-- 閉じタグを追加 -->

✅ 直ったか確認

ページのレイアウトが意図どおりになり、HTMLバリデーターで閉じ忘れの指摘が出なければOK。

🆘 まだ直らないときは

validator.w3.org に貼ると、閉じ忘れの行を具体的に教えてくれる。

Q&Aで質問する →

この解決法は役立ちましたか？

🔗 関連するエラー

🔗 別カテゴリの関連エラー

📖 この問題を学べるレッスン

HTMLコース（基礎から）で根本から理解する →

✏️ 手を動かして練習

練習ドリル一覧で実際に書いて確認する →

📝 関連ブログ記事

📖 関連する用語

🚀 HTMLコースで基礎を学ぼう！

エラーの原因を根本から理解するには、基礎を体系的に学ぶのが近道です。完全無料・登録不要。

HTMLコースを始める →

❓ 関連するQ&A