🐈
HTMLにて文字化けを発生させない方法
結論
HTMLにて文字化けを発生させない方法の一つは、
以下の２点を同じにすることです。
- ファイル作成時に用いるテキストエディタの文字符号化方式
- Visual Studio Codeであれば最下部にカーソルを合わせると出てくる「エンコードの選択」で設定できます
- HTMLファイル内のcharset属性値
文字化けしない例
ファイル作成時にUTF-8でエンコードし、
ファイル閲覧時にブラウザにてUTF-8でデコードする場合を例に説明します
①HTMLファイルを作成する
- テキストエディタの設定にて、文字符号化方式をUTF-8にする
→HTMLファイルの文字符号化方式がここで決まる - <meta charset="UTF-8">を記載する
→ブラウザで表示する際の文字符号化方式を指定する
②~⑥HTMLファイルが、文字符号化方式「UTF-8」でエンコードされる
- テキストエディタに設定されている文字符号化方式で、HTMLファイル自体の文字符号化方式が決まるため
⑦閲覧者がブラウザからサーバに、ページをリクエストする
⑧サーバがブラウザにレスポンスとしてHTMLファイルを返す
⑨~⑪ブラウザが、charset属性で指定された文字符号化方式「UTF-8」でデコードする
⑫文字化けは発生しない
文字化けする例
ファイル作成時にUTF-8でエンコードし、
ファイル閲覧時にブラウザにてShift_JISでデコードする場合を例に説明します
①HTMLファイルを作成する
- テキストエディタの設定にて、文字符号化方式をUTF-8にする
→HTMLファイルの文字符号化方式がここで決まる - <meta charset="Shift_JIS">を記載する
→ブラウザで表示する際の文字符号化方式を指定する
②~⑥HTMLファイルが、文字符号化方式「UTF-8」でエンコードされる
- テキストエディタに設定されている文字符号化方式で、HTMLファイル自体の文字符号化方式が決まるため
⑦閲覧者がブラウザからサーバに、ページをリクエストする
⑧サーバがブラウザにレスポンスとしてHTMLファイルを返す
⑨~⑪ブラウザが、charset属性で指定された文字符号化方式「Shift_JIS」でデコードする
⑫文字化けが発生し、「繝�」が表示される
補足
他にも関連する記事を書いているので見ると理解しやすいと思います。
参考
Discussion