ブラウザで日本語が文字化けする
💬 質問
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つで文字化けは解決します。
原因3：サーバーの送信ヘッダーが不一致
GitHub Pagesやレンタルサーバーにアップロードしたとき、サーバーが「このファイルはShift_JISです」というヘッダーを送ると、ブラウザがUTF-8のファイルをShift_JISとして解釈して文字化けします。
確認方法：DevTools（F12）→ Network タブ → HTMLファイルをクリック → Response Headers の Content-Type を確認。charset=utf-8 になっていればOKです。
GitHub Pagesを使っている場合はこの問題は起きません（自動でUTF-8が設定されます）。レンタルサーバーの場合は .htaccess に以下を追加します。
# .htaccess に追加
AddDefaultCharset UTF-8中高生あるある：学園祭サイトで「縺ｵ縺励℃」になった
学園祭のWebサイトを作って友達に見せたら「文字化けしてるよ」と言われた——これは非常によくあるケースです。原因はほぼ「meta charsetがない」か「ファイルの保存形式がUTF-8でない」のどちらかです。
もう一つよくあるのが、友達にHTMLファイルをUSBやメールで送ったとき。自分のPCでは正常に見えるのに、友達のPCで文字化けする場合は、ファイルの保存形式が原因です。VS Codeで「UTF-8」で保存し直してから送りましょう。
UTF-8 と Shift_JIS の違い
UTF-8：世界中の文字を扱える文字コード。現在のWeb標準。HTMLファイルは基本的にUTF-8で保存する。
Shift_JIS：日本語専用の古い文字コード。Windows のメモ帳で保存すると Shift_JIS になることがある（Windows 11ではデフォルトUTF-8に変更済み）。
BOM付きUTF-8に注意：「UTF-8 with BOM」で保存すると、ファイルの先頭に見えない文字（BOM）が入り、PHPなどで問題が起きることがあります。VS Codeでは「UTF-8」（BOMなし）を選びましょう。
DevTools で文字コードを確認する手順
1. Chromeでページを開き、F12キーでDevToolsを開く
2. 「Network」タブをクリック
3. ページをリロード（Ctrl+R）してファイル一覧を表示
4. HTMLファイル（一番上）をクリック
5. 「Headers」タブの Response Headers で Content-Type: text/html; charset=utf-8 を確認
ここが charset=shift_jis や charset指定なしになっていたら、サーバー設定が原因です。meta charsetとファイル保存形式とサーバー設定、この3つが全てUTF-8で統一されていれば文字化けは起きません。
解決しなかった？
エンジニアに質問する →