HTML
💥 ページのレイアウトが崩れる
タグの閉じ忘れ
😰 こんな症状
文字が変な場所に表示される、ページ全体の見た目がおかしい。HTMLを書き始めたばかりで閉じタグの概念に慣れていないときに起きやすいよ。
🔍 原因
HTMLのタグは開始タグ（<p>）と終了タグ（</p>）がセットになっているよ。終了タグを書き忘れると、ブラウザは「ここからここまでが段落」という区切りがわからなくなり、後続の要素が意図しない場所に配置されてしまうんだ。
❌ エラーが起きるコード
<p>段落1
<p>段落2
<!-- </p> を書き忘れている -->✅ 直し方
1. 開発者ツール（F12）の「Elements」タブでHTMLの構造を確認する。 2. 開いたタグに対応する閉じタグがあるか見直す。 3. VS Codeの自動閉じタグ機能を活用する（Auto Close Tag拡張機能）。 4. HTMLバリデーター（validator.w3.org）でチェックすると閉じ忘れを教えてくれるよ。
✅ 修正後のコード
<p>段落1</p>
<p>段落2</p>
<!-- 閉じタグを追加 -->この解決法は役立ちましたか？
🔗 関連するエラー
- スタイルが反映されない — CSSファイルが読み込まれていない
- 画像が表示されない — 画像パスが間違っている
- リンクをクリックしても何も起きない — href 属性の書き忘れ
- 文字化けする — charset の指定がない
- フォームの送信ボタンが動かない — type="submit" の書き忘れ
🔗 別カテゴリの関連エラー
📖 この問題を学べるレッスン
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- HTMLとは？初心者向けにわかりやすく解説 — タグの書き方・ページ構造の基本
- HTMLのパス（相対パス・絶対パス）の書き方 — パスの書き方を初心者向けに解説