【HTML】UTF-8を指定しているのに文字化けしてしまう場合

エンコードはUTF-8を選択しておけば安心…?

まず初めに。

これはHTMLを勉強し始めて1日目で引っかかった部分ですのでそのレベルで考えてください^^;

 

参考にしている書籍を読んでいると、文字化けを防ぐために<head>要素内に

<meta charset=”utf-8″>

というのを入れましょう、という記載がありました。

なるほどここまでは理解できました。

エンコードをUTF-8に指定してしまうことで文字化けする可能性をなくしましょうということでしょう。

しかし、これを記載したうえでチェックしてみると

文字化けしちゃいました。ちなみに<meta charset=”utf-8″>というのを削除すると正しく表示されるのでますます意味が分からない。

そこでGoogle先生に聞いて調べてみたところ、このcharsetでエンコード指定するとブラウザに「このエンコードで書いているから、それで表示してね」と伝えることになるのだとか。しかし、伝えた内容と実際に作成したファイルのエンコードが一致していないと、文字化けの原因になると。

どうやらテキストエディタでHTMLを書く際にもエンコード指定を気を付けなければいけないみたいですね。

きちんとUTF-8で書いて保存し、さらにcharsetでもUTF-8ですよ、と伝えさせることによってきちんと表示ルールと実際のエンコードが一致するので文字化けしない、ということらしいです。

テキストエディタで作成する際にもエンコードを気にしなくてはならないというのを知らなかったのでハマりました。

なお、テキストエディタによってその変更方法は違いますが、私の使っているTeraPadというテキストエディタでは次のようにして保存エンコードを指定することができました。

「ファイル」メニューから「文字/改行コード指定保存」というのを選択して、

「文字コード」でUTF-8を指定。

これで「UTF-8」で作成したHTMLファイルになるので、charsetでUTF-8を指定することで表示方式と内容が一致して文字化けしなくなるようです。

はい、確かに。

ちなみに今回charsetでUTF-8を指定しない場合に文字化けしなかったのは、何も気にせず作成したHTMLファイルがSHIFT-JISで保存されており、特に指定していなかったので私のブラウザ環境ではSHIFT-JISで表示していたのでそこがきちんと一致していて、ちゃんと想定通りに表示された、ということなのだと思います。

TeraPadだとデフォはSHIFT-JISになっているんでしょうね。

(なおオプションでデフォルト設定を変えられそうなので変えておきました)

超初心者さん向けではありますが、同じところで躓く人もいると思うので一応記事にしておきました。



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください