TeraPadでUTF-8N保存時に文字化け発生!原因はオプション画面の文字コード設定

Pocket

「スラスラわかるHTML&CSSのきほん」を購入し、勉強を開始したわたしと超初心者のリンゴさん。リンゴさんはテキストエディタTeraPad、ブラウザーInternet Explorerを選び開始しました(ちなみにわたしは、サクラエディタとGoogle Chromeです)。順調に勉強も進み・・・と思いきや、いきなりつまずいてしまいました。

なんとTeraPadで文字コードに「UTF-8Nを指定して保存したホームページ(htmlファイル)」をInternet Explorerでみたところ、なんと文字化けが発生して、なにが書いてあるのかわからない!

原因調査したところ、最終的にはTeraPadの「オプション画面の文字コード設定」でUTF-8Nを指定していなかったためと判明しました。とりあえず急いでいる人は以下の設定をして、確認してください。

[表示]→[オプション]
03-オプションダイア表示
オプションダイアログボックスの[文字コード]タブ

以下は「なんでTeraPadでUTF-8N保存時に文字化け発生したのか」のなりゆき及び解決方法です。

「スラスラわかるHTML&CSSのきほん」に書かれている通りにやっているのに!

「スラスラわかるHTML&CSSのきほん」には、Windowsを使用している人に対してはテキストエディタにTeraPadというアプリケーションを使用して説明しています。

TeraPadでは、文字コードをUTF-8を指定して保存する場合、「UTF-8」ではなく「UTF-8N」を指定しなければいけません。えっ?何をいっているのかわからない?はい、あなたのおっしゃる通りです。「スラスラわかるHTML&CSSのきほん」作者のサイトに詳しく記述されていますので、まずは「文字コードはUTF-8? UTF-8N?」をご覧ください。

えっと・・・みていただけました?
まぁ、そういうわけで、TeraPadでは文字コードをUTF-8を指定して保存する場合、「UTF-8N」を指定しなければいけないのです。

「UTF-8N」を指定しているのに文字化けする!

ということで、リンゴさんもTeraPadの[文字/改行コード指定保存]ダイアログボックスで「UTF-8N」を指定して保存したのです。

[ファイル]→[文字/改行コード指定保存]
[文字/改行コード指定保存]ダイアログボックス

なのに文字化けが・・・いったいなぜ?

わたしも、リンゴさんが作ったホームページ(htmlファイル)を受け取って、テキストに書いてある通りに「UTF-8N」を指定して保存したのですが、文字化けしてしまいます。うーん・・・原因がわからない・・・。

TeraPadでは「オプション画面の文字コード設定」でも「UTF-8N」をしているする必要がある

ということでネット検索したところ、リンゴさんが「HTML、PHPファイルで文字コードがUTF-8の場合の注意点(BOMあり、BOM無し」というページを発見。このページに記載されている通り、[オプション]ダイアログボックスの[文字コード]タブで初期設定を以下のとおり変更して、ホームページ(htmlファイル)を作り直したら、文字化けしないで表示されるようになりました。

  • 初期文字コードに「UTF-8N」
  • 保存文字コードに「自動」

TeraPadでUTF-8N保存時に文字化けが発生してしまっている人はオプション画面の文字コード設定でも「UTF-8N」になっているか確認してみてください。
それではまた。

Pocket