読む人にも、書く人にも、
真に価値ある情報を。
wordpressの初心者向け情報サイト『webcode』
webデザイン

htmlで文字化け!その原因と治し方は?

touch

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

今回は、html文字化けの原因や対処法、予防法について紹介します。

文字コードとは?

keyboard 1385705 640 - htmlで文字化け!その原因と治し方は?

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

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

(バイト表現:「0」と「1」からなる羅列のこと)

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

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

Webサイトによく使われる文字コードとは?

notes 514998 640 - htmlで文字化け!その原因と治し方は?

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

1.Shift_JIS(シフトジス)コード

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

2.JIS(ジス)コード

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

3.UTF-8(ユーティーエフエイト)コード

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

htmlの文字化けの原因とは?

hand 1701969 640 - htmlで文字化け!その原因と治し方は?

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

例えば、UTF-8で保存されたHTMLファイルをブラウザ側がShift_JISで表示しようとすると、文字化けが発生してしまうのです。

通常、WebブラウザはサーバからHTMLを受け取ります。そのHTMLファイルなどを分析して文字コードを解釈してページを表示します。

正しくWebページが作られていれば、Webブラウザが正しく解釈をしてくれるため、文字化けが起こることはありません。

ただし、Webページで指定をしないとWebブラウザによって誤った解釈をさせてしまうのです。この文字コードについては、HTMLのhead部分に以下のように入力します。

これで、この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ユーティリティを使う方法が用意されています。詳しくは、こちらをご覧ください。

文字化けを防ぐためにはどうすればいいの?

portrait 317041 640 - htmlで文字化け!その原因と治し方は?

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

Webサイト制作の仕事を行う際も企画段階から「どの文字コードを使うのか」という議論が行われています。

とは言っても最近のWeb制作の場合、「UTF-8」が使われていることが多いので、文字コードについて細かく議論するということは少ないです。

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

htmlの文字化けに関するまとめ

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

文字化けが起こる一番の原因は、「文字コードがHTMLファイルとブラウザ側で異なっていること」です。

文字化けを防ぐためにもHTMLファイルのヘッダ部分には、必ず文字コードの設定を入力しましょう。

もし、文字化けが起こっていたら、上の要素が正しく書かれているかチェックしてみてください。

文字化けが起こってしまった場合も焦らずに、この資料を参考にして対処してみてください。最後まで読んでいただき、ありがとうございました。

WordPressでおすすめのプログラミングスクール

オンラインマンツーマンならCodeCamp

bgt?aid=160728030173&wid=010&eno=01&mid=s00000016159001010000&mc=1 - Wordpressでおすすめのプログラミングスクール0 - Wordpressでおすすめのプログラミングスクール
CodeCampは、完全オンラインで、現役エンジニア講師のマンツーマンレッスンを受けられるプログラミングスクールです。

CodeCampは期間限定でWordpressコースを提供していますが、上場企業のグループ会社が運営していることもあり、これまでに2万人以上の受講実績があります。

プログラミング未経験者でも、WordPressのインストール、サーバーの準備、テーマの設定、プラグインの導入など、WordPressでサイトを構築するためのスキルを身につけることができます。

プログラミングのオンラインスクールCodeCamp0 - Wordpressでおすすめのプログラミングスクール

CodeCampの口コミはこちら

オンラインテキストを自習形式ならTechAcademy

bgt?aid=160728030174&wid=010&eno=01&mid=s00000016188001104000&mc=1 - Wordpressでおすすめのプログラミングスクール0 - Wordpressでおすすめのプログラミングスクール
TechAcademyは、1ヶ月の短期集中でWordpressについて学べる、完全オンラインのプログラミングスクールです。

基礎的なPHPの知識に加えて、サイト制作における企画・設計・制作・運用方法、WordPressテーマのカスタマイズ方法、プラグインを利用した機能の追加方法、オリジナルWordPressテーマの作成方法などを学ぶことができます。

TECH ACADEMYでは申込みから1週間の間、オンライン教材・メンターによるサポート等の学習システムを無料で体験することも可能です。

TECH ACADEMYの無料体験はこちら0 - Wordpressでおすすめのプログラミングスクール

TECH ACADEMYの口コミはこちら