ホームページ制作で文字化けする原因と改善策を徹底解説します

ホームページの文字化けは、ページが適切にロードされていない可能性があります。

文字化けでお困の方へ

この問題はブラウザの左上にあるリロードボタン

キーボード上部にあるF5キー、またはCtrl+F5キーを押してページを再読み込みすることで簡単に解決することが多いです。

さらに、次の手順を実施してみてください

1. メニューバーの「表示」から、エンコードを設定します。
2. 自動選択及び「Unicode（UTF-8）」が選択されているか確認します。
3. 読み込み直し（再読込）をしてもなるようでしたら、キャッシュの削除をお試しください。

変わらなければスーパーリロードもお試しください。

参照：ブラウザ別のスーパーリロードの方法

また、HTML形式のファイルは文字化けが起こりやすいため、UTF-8形式で保存し、HTMLのmetaタグに「charset=”UTF-8″」を含めることで防ぐことができます。

文字化けする原因等を解説

よくあるトラブルではあるものの、文字化けに気付かずにいた場合、検索エンジンのクローラー、また読者からもマイナス評価を受けてしまうという事態にもなりかねないのです。

しかし、しっかりと原因をつきとめ対処すれば問題ありません。

• 文字化けする原因
• 文字コードとその種類について
• 文字化けした時の直し方
• 文字化け対策

この記事では上記のことをメインに紹介します。

文字化けしてしまい困っている方や対処法を知りたいなど文字化けについて様々な角度からみていきましょう。

文字化けする原因

文字化けをしてしまう原因をまずは確認していきましょう。

ホームページを表示しているブラウザは基本的に自動で文字コードを判断して表示していますが、ブラウザによって間違って文字コードを読むことがあります。そのため、文字化けが起こってしまうのです。

また、他に「文字コードが合っていない」という理由も考えられるでしょう。

コンピュータは文字をそのまま読み込めない

文字化けする原因は、文字コードが大きく影響しているからです。

文字コードとは、コンピュータ上で文字を利用する目的で各文字に割り当てられるバイト表現（「0」と「1」からなる羅列）を指しています。

• 0と1だけを使った2進数
• 0〜9とA〜Fを使った16進数

上記の仕組みについて、詳しく紹介します。

0と1だけを使った2進数

コンピュータ―は文字をどのように扱っているのかということですが、人と同じように文字を読み込むことはできません。

コンピュータ―は「0」と「1」だけを使って文字判別をしています。

この「0」と「1」だけを扱うコンピュータ―が使っているものを「文字コード」と言い、この「0」と「1」の羅列のことをバイト表現というのです。

そして、2つの数字で表していることで「2進数」と呼ばれています。

ちなみに、先ほど紹介した「文字コードが間違っていることで文字化けする」ということですが、この「0」と「1」を上手く判別できないところが出ると文字化けをしてしまう、ということになります。

0〜9とA〜Fを使った16進数

次に、0〜9とA〜Fを使ったものを16進数と言います。

0と1のみで文字を表すとあまりにも長くなってしまう事から、16進数でリスト表記をすることもあるでしょう。

2進数表記では8文字で主要となるアルファベット文字を表す事ができます。しかし日本語は難しいもので、「ひらがな」「カタカナ」「漢字」があるため8文字を使って表すには足りないのです

そのため、新たに日本語に対応した文字コードが必要となります。

ホームページに使われる文字コードの種類

代表的な文字コードには以下のようなものがあります。

• Shift_JIS（シフトジス）コード
• UTF-8（ユーティーエフエイト）コード

上記2つがホームページ制作の場面でよく使われている文字コードです。それでは、それぞれについて詳しくご紹介していきます。

Shift_JIS（シフトジス）コード

主にWindows系のOSで使われるものになります。WindowsやMS-DOSが標準の日本語の文字コードとして使うようになったことで普及したものです。

しかしコード内にもよく使われるバックスラッシュ、「＼」「￥」を含む文字変換があるため、問題を起こしやすいことがデメリットとなります。

UTF-8（ユーティーエフエイト）コード

世界中のどの言語でも表示できるように作られており、コーディングではもっとも普及している文字コードではないでしょうか。

ホームページ制作では、通常こちらの文字コードを指定して制作をしていきます。

SafariやYahoo!で文字化けした時の直し方

ホームページ制作をしている際、Google検索では問題がないもののなぜかSafariやYahoo!で検索をしてみると文字化けしていることがあります。使うブラウザによって文字化けが起こってしまうことがあり、この原因は文字コードが異なるためです。

では、どのように文字化けを直したら良いのでしょうか。こちらではSafariの改善方法として、下記2つの方法をご紹介していきます。

• 翻訳サイトを使う
• ドルフィンブラウザを使う

1.翻訳サイトを使う

まずは文字化けをしてしまったブラウザ、たとえばSafariのページのURLをコピーします。そしてYahoo!の翻訳ページを開き、先ほどコピーしたURLを貼付欄に張り付けましょう。

その後翻訳設定で「英語→日本語」に設定をすると文字化けが解消されます。

2.ドルフィンブラウザを使う

次にドルフィンブラウザを使って文字化けを直します。

このドルフィンブラウザ（Dolphin Browser）とはアメリカが開発したソフトフェアで、MoboTapにより作られているスマートフォンやタブレット向けのブラウザのことをいうのです。

この「ドルフィンブラウザ」をiPhoneにインストールしてみてください。

その後、文字化けしたSafariなどのページのURLをコピーし、ドルフィンブラウザのURLに貼り付けて開きます。

これで文字化けが解消されるでしょう。

HTMLサイトの文字化けした時の直し方

HTMLサイトの文字化けすることもありますので、こちらの直し方は次のようになります。

• 文字コードを確認
• 文字コードを指定

では1つずつ紹介します。

文字コードを確認する

文字化けをしているという事は「HTMLファイルに使われている文字コード」が問題になっていると思いますので、まずは確認しましょう。

文字コードとは下記のように書かれている<meta>要素に記されています。

<meta charset="UTF-8">

上記のようにHTMLファイルの中にある<meta>タグが問題となるのです。今回の例では「UTF-8」が使われていることが確認できたと思います。

しかし文字コードが指定されていない場合に、コンピュータ―は文字コードを判断できなくなるため文字化けが起きてしまうのです。

文字コードを指定する

次に、文字コードを指定します。

先ほどご紹介したように、文字コードを指定すれば文字化けをせず正しく表記されるでしょう。

このように文字コードが入っているかを確認し、もし文字コードがなければ指定をすることでHTMLの文字化けを直すことができるのです。

前述したとおり、ホームページ制作において通常「UTF-8」を使います。

まとめ

今、ホームページの文字コードは「UTF-8」が主流です。そのため、多くのホームページは「UTF-8」で書かれているでしょう。

またもう一点、htmlファイルを作る時にテキストエディターなどで、どの文字コードを使っているかを確認する必要があるでしょう。

文字化けはよくあることです。文字化けする原因を知り、その際どのように対処したら良いのかがわかると安心して作業ができるのではないでしょうか。

文字化けで悩んでいる方にないか少しでも疑問が解消されていれば幸いです。

ホームページ制作は福岡の株式会社リクトにお気軽にご相談ください。