ブラウザで開いたら日本語が「譁�蟄怜喧縺�」のような謎の記号に——この文字化け、初心者がほぼ全員一度は踏みますが、原因は2つしかありません。HTMLの宣言（metaタグ）とファイルの保存形式、この2か所を確認すれば必ず直せます。
なぜ化けるのか：文字は「変換表」でしか読めない
コンピュータは文字を直接あつかえず、内部ではすべて数値として保存しています。「あ」を保存するときも「あ」という数値、読みこむときはその数値をふたたび「あ」に戻す——この行き来に使う変換表が文字コード（エンコーディング）です。
文字化けの正体は、保存したときの変換表と、読みこむときの変換表がずれていること。UTF-8で保存した数値の並びを、別の変換表（Shift_JISなど）で読むと、まったく違う文字に変換されてしまいます。「譁�蟄怜喧縺�」のような記号は、この変換ミスの結果です。
結論：この2つをそろえる
文字化けの正体は、「ファイルの保存形式」と「ブラウザの読み方」の食いちがいです。両方を標準のUTF-8にそろえれば直ります。
- HTMLの
<head>の先頭に<meta charset="UTF-8">があるか - ファイルが実際にUTF-8で保存されているか
順番に確認していきましょう。
確認1：metaタグはあるか
<head>の中、できるだけ先頭にこの1行があるか確認します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>わたしのページ</title>
</head>この行は「このファイルはUTF-8という変換表で書いてあります。そのつもりで読んでください」という、ブラウザへの案内です。案内がないと、ブラウザは読み方を推測するしかなく、推測が外れると化けます。
確認2：ファイルはUTF-8で保存されているか
metaタグが正しくても化けるなら、ファイル自体が別の形式で保存されています。metaタグはあくまで宣言で、実際の保存形式を変える力はありません。「UTF-8と書いてあるのに中身はShift_JIS」だと、堂々と化けます。
VSCodeなら、いま開いているファイルの保存形式は画面右下に出ています。
- VSCodeの右下を見る——
UTF-8と出ていれば保存形式はOK Shift JISなど別の表示なら、その表示をクリック- 「エンコード付きで保存」を選ぶ
- 一覧から「UTF-8」を選んで保存
これでファイルがUTF-8で保存し直され、ブラウザを再読みこみすれば直ります。
逆パターン：エディタで開いたら化けていた
ブラウザではなく、VSCodeで開いた時点で化けていることもあります。ダウンロードした昔の素材や、他の人からもらったファイルにありがちです。
これは「Shift_JISで保存されたファイルを、VSCodeがUTF-8として開いた」状態。ファイルは壊れていないので安心してください。
- 右下のエンコード表示（
UTF-8）をクリック - 「エンコード付きで再度開く」を選ぶ
- 「Japanese (Shift JIS)」を選ぶ
正しく表示されたら、今後のために「エンコード付きで保存」でUTF-8にして保存し直しておきましょう。
化け方から原因を当てる
化け方には型があります。見た目だけで原因の見当がつくので、覚えておくと調べる時間が縮みます。
| 化け方の見た目 | 起きていること |
|---|---|
譁�蟄怜喧縺�（漢字まじりの謎の並び） | UTF-8で保存したものをShift_JISとして読んだ |
����（黒いひし形の連続） | Shift_JISなどで保存したものをUTF-8として読んだ |
?????（半角の疑問符だけ） | その文字コードに存在しない文字を、無理に変換した |
記号だけ化ける（〜や−など） | Shift_JISとUTF-8で割りあてが違う文字（波ダッシュ問題） |
| ブラウザだけ化ける（エディタは正常） | metaタグの宣言が無い・まちがっている |
| エディタで開いた時点で化ける | ファイルの保存形式そのものが別 |
ざっくり「ひし形が並ぶならファイルが古い形式、漢字の羅列なら読み方の宣言ミス」と覚えておけば、たいてい当たります。
最初からUTF-8で作る設定にしておく
そもそも化けさせないのがいちばんラクです。VSCodeなら、新しく作るファイルの保存形式を固定できます。
- 歯車アイコン→「設定」を開く
- 検索欄に「encoding」と入力
- Files: Encoding を
UTF-8にする
同じ画面にある Files: Auto Guess Encoding をオンにすると、開いたファイルの形式を推測して自動で合わせてくれます。もらいもののファイルを扱うことが多い人はオンにしておくと便利です。
BOMつきUTF-8に気をつける
保存形式の一覧に「UTF-8 with BOM」という項目があります。BOMはファイルの先頭に付く目印のための数バイトで、これがあるとWebでは思わぬ事故が起きます。
- PHPで、ページの先頭に説明のつかない空白や改行が出る——BOMがそのまま出力されるため。WordPressのテーマファイルで「なぜか上に隙間ができる」定番の原因です
header()を呼ぶ前に出力されたという警告が出る——BOMが「最初の出力」になってしまうため
Webの用途では、BOMなしのUTF-8（一覧でただ「UTF-8」と書かれているもの）を選んでください。すでにBOMつきで保存してしまったファイルは、「エンコード付きで保存」からUTF-8（BOMなし）を選び直せば直ります。
ファイル名やフォルダ名が化けるとき
中身ではなくファイル名だけが化けることもあります。よくあるのは、Windowsで作られたZIPをMacで解凍したとき（またはその逆）。ZIPはファイル名の文字コードを持ち歩かない作りなので、解凍する側が別の変換表で読んでしまうと化けます。
この場合、中身のファイルは無傷です。名前を手で付け直せば済むので、慌てて作り直さないでください。予防としては、やりとりするフォルダ名やファイル名を半角英数だけにしておくのが確実です。Webに載せるファイルは、そもそも日本語名を避けるのが定石です。
CSSファイルが化けるとき
HTMLは直ったのに、CSSに書いた日本語（コメントやフォント名）だけ化ける——そんなときはCSSファイルの保存形式も確認します。直し方は同じで、VSCodeでUTF-8で保存し直すだけです。
@charset "UTF-8"; /* CSSファイルの1行目に書く宣言。念のための保険 */文字化けチェックリスト
上から順に確認すれば、どこかで必ず直ります。
<meta charset="UTF-8">が<head>の先頭にある- スペルミスがない（
charset・UTF-8） - VSCodeの右下が
UTF-8になっている（違ったら「エンコード付きで保存」） - 直したあとブラウザを再読みこみした
- それでも化けるなら、化けているのはどのファイルか特定する（HTML本文か、CSSのコメントか）
まとめ
- 文字化けの正体は保存形式と読み方の食いちがい——
<meta charset="UTF-8">とファイルのUTF-8保存をそろえれば直る - metaタグは宣言だけ——「書いたのに化ける」ならファイル自体の保存形式（VSCode右下）を疑う
- エディタで開いて化けていたら、保存せずに「エンコード付きで再度開く」——化けたまま保存すると戻せない
- 化け方で原因が読める——ひし形の連続はファイルの形式、漢字の羅列は宣言のミス
- 保存形式はBOMなしのUTF-8を選ぶ（BOMつきはPHPで余分な空白の原因になる）
- ファイル名は半角英数にしておくと、ZIPのやりとりで化けない
原因はたった2か所と知っていれば、文字化けはもうこわくありません。