3か所を同じUTF-8にそろえる
Webページの文字化けを防ぐには、HTMLの宣言、サーバーのHTTPヘッダー、HTMLファイル自体の保存形式を一致させます。宣言だけUTF-8でも、実ファイルがShift_JISなら正しく表示されません。
HTML
<meta charset="utf-8">HTTP
Content-Type: text/html; charset=utf-8保存形式
UTF-8meta要素はheadの早い位置に置く
ブラウザーが本文を読む前に文字コードを判断できるよう、charset指定はhead内の先頭に近い位置へ置きます。テンプレートやフレームワークを使う場合は、出力されたHTMLも確認します。
確認方法
- ブラウザーの開発者ツールでContent-Typeを確認する
- ソースファイルをエディターで開き、保存形式を確認する
- 日本語、絵文字、アクセント付き文字を含むテスト文で表示を確かめる