ブラウザで日本語が文字化けする
💬 質問
HTMLファイルをブラウザで開いたら、日本語が「æ–‡å—化ã'」のように文字化けしてしまいます。どうすれば直りますか？
✅ 回答
文字化けは「文字コード」の設定が原因です。2つのポイントを確認しましょう。
原因1：meta charset が書かれていない
<meta charset="UTF-8"> を <head> の最初に書きましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- ✅ charset は head の最初に書く -->
<meta charset="UTF-8">
<title>ページタイトル</title>
</head>
<body>
<p>日本語が正しく表示されます</p>
</body>
</html>原因2：ファイルの保存形式がUTF-8でない
VS Code の右下に表示されるエンコーディングを確認してください。
- VS Code の右下に「UTF-8」と表示されているか確認
- 違う場合 → クリック → 「Save with Encoding」→ 「UTF-8」を選択
- ファイルを保存し直す
なぜ head の最初に書くの？
ブラウザはHTMLを上から順番に読みます。charset の指定が遅いと、それより前の文字を間違った方法で解釈してしまいます。だから一番最初に書くのがポイントです。
まとめ：<meta charset="UTF-8"> を head の最初に書き、ファイルをUTF-8で保存しましょう。この2つで文字化けは解決します。
解決しなかった？
エンジニアに質問する →