htmlで文字化け！その原因と治し方は？

2017年7月2日 2020年5月6日

「HTMLでせっかくWebサイトを作ったのに文字化けしてうまく表示されない…」そんなことはありませんか？

今回は、html文字化けの原因や対処法、予防法について紹介します。ちなみにWordPressを使えばそのような悩みは解決されますので、WordPressについて関心のある方はこちらの記事を参考にしてみてください。

CONTENTS

文字コードとは？

まず、文字化けの原因についてお伝えする前に、文字コードについてお伝えします。文字化けはこの文字コードが大きく影響しているのです。

文字コードとは、コンピュータ上で文字を利用する目的で各文字に割り当てられるバイト表現。もしくは、バイト表現と文字の対応関係を指している。（Wikipediaより）

（バイト表現：「0」と「1」からなる羅列のこと）

コンピュータは「0」と「1」の2進数しか扱えません。つまり、人間と同じように文字をそのまま読み込むことはできないのです。

そこで、用意されているのが文字コードです。コンピュータは、「0」と「1」の組み合わせで1文字1文字判断しているのです。

文字コードにはいくつかの種類が用意されています。日本語に対応した文字コードやWindows系のOSでよく使われる文字コードなどがあります。

Microsoft社が決めたコードで、WindowsやMacで使用されています。

インターネットで最も標準的な文字コードとなっています。

多言語に対応していることもあり、最近の主流になってきています。また、システムとの親和性が高いという特徴もあります。

文字化けを起こす原因は、HTMLファイルの文字コードとブラウザが解釈している文字コードが違うためなのです。

例えば、UTF-8で保存されたHTMLファイルをブラウザ側がShift_JISで表示しようとすると、文字化けが発生してしまうのです。通常、WebブラウザはサーバからHTMLを受け取ります。そのHTMLファイルなどを分析して文字コードを解釈してページを表示します。

正しくWebページが作られていれば、Webブラウザが正しく解釈をしてくれるため、文字化けが起こることはありません。ただし、Webページで指定をしないとWebブラウザによって誤った解釈をさせてしまうのです。

この文字コードについては、HTMLのhead部分に以下のように入力します。

<meta charset="UTF-8">

1	<meta charset="UTF-8">

これで、このHTMLファイルは「UTF-8」だとブラウザでも解釈することができます。また、インターネットからダウンロードしたサンプルコードをメモ帳で保存する場合も、必ず文字コードをHTMLファイルと統一させて保存してください。

例えば、HTMLファイルが「UTF-8」だったら、メモ帳で保存するときにも「UTF-8」にして保存するということです。この文字コードが異なっていると、HTMLで表示させたときに文字化けして正しく表示されません。

Webサイトを作っていると、Googleで検索したときにはうまく表示されるのに、SafariやYahooで検索すると、文字化けしてしまうことがあります。つまり、使うブラウザによって文字化けが起こってしまうのです。文字化けしてしまう一番の原因は、文字コードが異なるためです。

そこでまずは、文字コードを「UTF-8」などに変更してみましょう。UTF-8は、最近の主流かつ多言語対応しているので、言語の種類を問わずに使うことができます。ただし、文字コードを変更しただけではうまくいかないこともあります。

そんなときには次のことを試してみましょう。（今回はSafariで文字化けが起こる場合に注目して紹介しています。）

文字化けしたSafariページのURLをコピーします。次にYahoo!翻訳ページを開き、そのURL貼付欄に文字化けしたページのURLを貼り付けます。

そして、翻訳設定を「英語→日本語」に設定します。そうすると、文字化けが解消されて正しく表示されます。

「ドルフィンブラウザアプリ」をiPhoneにインストールします。文字化けしたSafariページのURLをコピーし、ドルフィンブラウザアプリにURLを貼り付けて開きます。

これだけで文字化けが解消されます。

他にもGoogle Chromeアプリを使う方法や文字コード選択Webユーティリティを使う方法が用意されています。詳しくは、こちらをご覧ください。

文字化けを防ぐために一番大事なことは、「どの文字コードを使ってサイトを作るか」ということです。

Webサイト制作の仕事を行う際も企画段階から「どの文字コードを使うのか」という議論が行われています。とは言っても最近のWeb制作の場合、「UTF-8」が使われていることが多いので、文字コードについて細かく議論するということは少ないです。

現在の傾向として文字コードは「UTF-8」一択になってきています。

いかがでしたでしょうか？

文字化けが起こる一番の原因は、「文字コードがHTMLファイルとブラウザ側で異なっていること」です。文字化けを防ぐためにもHTMLファイルのヘッダ部分には、必ず文字コードの設定を入力しましょう。

<meta charset="UTF-8">

1	<meta charset="UTF-8">

もし、文字化けが起こっていたら、上の要素が正しく書かれているかチェックしてみてください。文字化けが起こってしまった場合も焦らずに、この資料を参考にして対処してみてください。最後まで読んでいただき、ありがとうございました。