
「HTMLでせっかくWebサイトを作ったのに文字化けしてうまく表示されない…」そんなことはありませんか?
今回は、html文字化けの原因や対処法、予防法について紹介します。ちなみにWordPressを使えばそのような悩みは解決されますので、WordPressについて関心のある方はこちらの記事を参考にしてみてください。
CONTENTS
文字コードとは?
まず、文字化けの原因についてお伝えする前に、文字コードについてお伝えします。文字化けはこの文字コードが大きく影響しているのです。
文字コードとは、コンピュータ上で文字を利用する目的で各文字に割り当てられるバイト表現。もしくは、バイト表現と文字の対応関係を指している。(Wikipediaより)
(バイト表現:「0」と「1」からなる羅列のこと)
コンピュータは「0」と「1」の2進数しか扱えません。つまり、人間と同じように文字をそのまま読み込むことはできないのです。
そこで、用意されているのが文字コードです。コンピュータは、「0」と「1」の組み合わせで1文字1文字判断しているのです。
Webサイトによく使われる文字コードとは?
文字コードにはいくつかの種類が用意されています。日本語に対応した文字コードやWindows系のOSでよく使われる文字コードなどがあります。
1.Shift_JIS(シフトジス)コード
Microsoft社が決めたコードで、WindowsやMacで使用されています。
2.JIS(ジス)コード
インターネットで最も標準的な文字コードとなっています。
3.UTF-8(ユーティーエフエイト)コード
多言語に対応していることもあり、最近の主流になってきています。また、システムとの親和性が高いという特徴もあります。
htmlの文字化けの原因とは?
文字化けを起こす原因は、HTMLファイルの文字コードとブラウザが解釈している文字コードが違うためなのです。
例えば、UTF-8で保存されたHTMLファイルをブラウザ側がShift_JISで表示しようとすると、文字化けが発生してしまうのです。通常、WebブラウザはサーバからHTMLを受け取ります。そのHTMLファイルなどを分析して文字コードを解釈してページを表示します。
正しくWebページが作られていれば、Webブラウザが正しく解釈をしてくれるため、文字化けが起こることはありません。ただし、Webページで指定をしないとWebブラウザによって誤った解釈をさせてしまうのです。
この文字コードについては、HTMLのhead部分に以下のように入力します。
1 |
<meta charset="UTF-8"> |
これで、このHTMLファイルは「UTF-8」だとブラウザでも解釈することができます。また、インターネットからダウンロードしたサンプルコードをメモ帳で保存する場合も、必ず文字コードをHTMLファイルと統一させて保存してください。
例えば、HTMLファイルが「UTF-8」だったら、メモ帳で保存するときにも「UTF-8」にして保存するということです。この文字コードが異なっていると、HTMLで表示させたときに文字化けして正しく表示されません。
SafariやYahoo!で文字化けするときは?
Webサイトを作っていると、Googleで検索したときにはうまく表示されるのに、SafariやYahooで検索すると、文字化けしてしまうことがあります。つまり、使うブラウザによって文字化けが起こってしまうのです。文字化けしてしまう一番の原因は、文字コードが異なるためです。
そこでまずは、文字コードを「UTF-8」などに変更してみましょう。UTF-8は、最近の主流かつ多言語対応しているので、言語の種類を問わずに使うことができます。ただし、文字コードを変更しただけではうまくいかないこともあります。
そんなときには次のことを試してみましょう。(今回はSafariで文字化けが起こる場合に注目して紹介しています。)
1.翻訳サイトを使う
文字化けしたSafariページのURLをコピーします。次にYahoo!翻訳ページを開き、そのURL貼付欄に文字化けしたページのURLを貼り付けます。
そして、翻訳設定を「英語→日本語」に設定します。そうすると、文字化けが解消されて正しく表示されます。
2.ドルフィンブラウザを使う
「ドルフィンブラウザアプリ」をiPhoneにインストールします。文字化けしたSafariページのURLをコピーし、ドルフィンブラウザアプリにURLを貼り付けて開きます。
これだけで文字化けが解消されます。
他にもGoogle Chromeアプリを使う方法や文字コード選択Webユーティリティを使う方法が用意されています。詳しくは、こちらをご覧ください。
文字化けを防ぐためにはどうすればいいの?
文字化けを防ぐために一番大事なことは、「どの文字コードを使ってサイトを作るか」ということです。
Webサイト制作の仕事を行う際も企画段階から「どの文字コードを使うのか」という議論が行われています。とは言っても最近のWeb制作の場合、「UTF-8」が使われていることが多いので、文字コードについて細かく議論するということは少ないです。
現在の傾向として文字コードは「UTF-8」一択になってきています。
htmlの文字化けに関する対処法のまとめ
いかがでしたでしょうか?
文字化けが起こる一番の原因は、「文字コードがHTMLファイルとブラウザ側で異なっていること」です。文字化けを防ぐためにもHTMLファイルのヘッダ部分には、必ず文字コードの設定を入力しましょう。
1 |
<meta charset="UTF-8"> |
もし、文字化けが起こっていたら、上の要素が正しく書かれているかチェックしてみてください。文字化けが起こってしまった場合も焦らずに、この資料を参考にして対処してみてください。最後まで読んでいただき、ありがとうございました。