HTML
文字化けする
charset の指定がない
こんな症状
ブラウザで開くと日本語が「�」や「æ–‡å—」のように表示される。HTMLファイルを新規作成したときに起きやすいよ。
まず試す
<head> の先頭に <meta charset="UTF-8"> を追加し、ファイルをUTF-8で保存する。
html
<head>
<meta charset="UTF-8">
<title>ページ</title>
</head>これで直らなければ、下の「自分のケース」を確認。
🔍 自分のケースはどれ？
- ✓charset の指定が無い
→ <head> の最初に <meta charset="UTF-8"> を入れる。 - ✓ファイルがUTF-8以外で保存されている
→ VS Code右下のエンコーディングを「UTF-8」にして保存し直す。 - ✓それでも一部だけ化ける
→ コピペ元の文字コードや、サーバーのContent-Typeも確認する。
なぜ起きる？
ブラウザはHTMLファイルの文字コード（エンコーディング）を知る必要があるよ。<meta charset="UTF-8">が書かれていないと、ブラウザが文字コードを誤って判定し、日本語が正しく表示されないんだ。また、ファイル自体がUTF-8以外（Shift-JIS等）で保存されている場合も文字化けするよ。
✕ エラーが起きるコード
<head><title>ページ</title></head>
<!-- charset 指定なし -->✓ 直したコード
<head><meta charset="UTF-8"><title>ページ</title></head>✅ 直ったか確認
日本語が正しく表示されればOK。
この解決法は役立ちましたか？
🔗 関連するエラー
- 画像が表示されない — 画像パスが間違っている
- ページのレイアウトが崩れる — タグの閉じ忘れ
- リンクをクリックしても何も起きない — href 属性の書き忘れ
- フォームの送信ボタンが動かない — type="submit" の書き忘れ
- テーブルの表示が崩れる — tr/td の入れ子が間違っている
🔗 別カテゴリの関連エラー
📖 この問題を学べるレッスン
✏️ 手を動かして練習
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- HTMLとは？初心者向けにわかりやすく解説 — タグの書き方・ページ構造の基本
- HTMLのパス（相対パス・絶対パス）の書き方 — パスの書き方を初心者向けに解説