「HTMLでせっかくWebサイトを作ったのに文字化けしてうまく表示されない…」そんなことはありませんか？
今回は、html文字化けの原因や対処法、予防法について紹介します。
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"> |
もし、文字化けが起こっていたら、上の要素が正しく書かれているかチェックしてみてください。
文字化けが起こってしまった場合も焦らずに、この資料を参考にして対処してみてください。最後まで読んでいただき、ありがとうございました。
オンラインマンツーマンならCodeCamp
CodeCampは期間限定でWordpressコースを提供していますが、上場企業のグループ会社が運営していることもあり、これまでに2万人以上の受講実績があります。
プログラミング未経験者でも、WordPressのインストール、サーバーの準備、テーマの設定、プラグインの導入など、WordPressでサイトを構築するためのスキルを身につけることができます。
オンラインテキストを自習形式ならTechAcademy
基礎的なPHPの知識に加えて、サイト制作における企画・設計・制作・運用方法、WordPressテーマのカスタマイズ方法、プラグインを利用した機能の追加方法、オリジナルWordPressテーマの作成方法などを学ぶことができます。
TECH ACADEMYでは申込みから1週間の間、オンライン教材・メンターによるサポート等の学習システムを無料で体験することも可能です。
