文字化けを防ぐ&解消する方法

Web制作で良くあるのが文字化け。この文字化けを防ぐための方法について説明します。

独学!未経験からWebデザイナーになる!! > Web制作Tips > 文字化けを防ぐ&解消する方法

文字化けを防ぐ&解消する方法

 Yahoo!ブックマークに登録

Webサイトを作ったことのある方で、体験したことのない方はいないのでは！？というほど、コーディングを始めたころに遭遇するのが文字化けです。このやっかいな文字化けですが、なぜ発生するのかの理由や、いざ発生した際の対処法を知るということは、Webデザイナーにとって極めて重要なことです。

本ページにて、文字化けが発生する理由や、回避のためのチェックポイントをご紹介します。

文字化けが発生する理由

回避策だけを知るよりも、根本的なところから知っておく方がより理解できるはずです。まずは、なぜ文字化けが発生するのか、その基本&理由を大雑把に知っておきましょう。

文字コードの存在

皆さんもご存じだと思いますが、コンピュータは0と1の二進数で処理をしています。ですので、例えば「あ」というような文字が、PC内にそのまま登録されているわけではありません。ではどうやってPC上で文字を表現しているかというと、コンピュータで理解できる情報（バイト表現）を、人間が理解できる文字と対応させることで表しています。このバイト表現が文字コードであり、ある文字コードでは、[ 82A0 ]が[ あ ]、のような感じに表されます。

さらりと「ある文字コードでは」と言いましたが、文字コードは1つだけではありません。日本では、Shift-JIS, EUC-JP, UTF-8などという文字コードがよく使われており、それ以外にも複数の種類が存在します。つまり、人間から見れば同じ「あ」でも、文字コードが異なれば、PC内部では全く異なる情報ということになります。

参考：Webサイトによく使われる文字コード
文字コード 簡易説明
Shift_JIS 読み：シフトジス
主にWindows系のOSで使われる。モバイルサイトでもこちらが主流。
EUC-JP 読み：イーユーシージェイピー
主にUNIX系のOSで使われる。
UTF-8 読み：ユーティーエフハチ・ユーティーエフエイト
最近の主流。システムとの親和性が高い。

文字コードの解釈違いが原因

このような前置きをしたのにはわけがあります。文字化けが発生する理由は、文字コードについて最低限知っておかないと説明のしようが無いからです。文字コードの基本はお話ししましたので、いよいよ文字化けが発生する理由に進んでいきましょう。

ずばり文字化けが発生する原因は、「HTMLファイルで使用されている文字コードとは異なる文字コードでファイルを表示したとき」に発生します。

通常Webブラウザは、サーバからレスポンスを受け取り、HTMLを分析した上で、「文字コードはこれだろうな」と解釈して、ページを表示します。正しくWebページが作られていれば、たいていはWebブラウザが正しく解釈してくれるので、通常は文字化けが起こりません。しかし、制作者がきちんとした指定をしないと、Webブラウザによって誤って解釈される（または解釈させてしまう）ことがあるのです。

というわけで、私たちにできる文字化け対策は、正しく文字コードを指定し、正しくWebブラウザに文字コードを解釈してもらうこと、と言えるでしょう。

チェックポイント

それでは、Webブラウザに正しく文字コードを解釈してもらうためのチェックポイントについてご紹介します。もし文字化けが発生した際は、以下を順番にチェックすることで、たいていは解消することができるはずです。

ファイルの文字コード

まず重要なのが、もともとのHTMLファイルがどの文字コードで保存されているかです。お使いのエディタにより、デフォルト文字コードは異なりますので「特に何も指定していないんだけど」という場合の文字コードについては、調べてみないと分かりません。分からない場合は、HTMLファイルがどの文字コードで保存されているかを真っ先にチェックしましょう。

Dreamweaverなら、「修正」→「ページプロパティ」→「タイトル/エンコーディング」の、「エンコーディング」から確認・変更できます。Terapadなら、「ファイル」→「文字/改行コード指定保存」で、現在開いているファイルの文字コードの確認・変更ができます（調べ方はエディタによって異なりますので、エディタの説明書をお読みください）。

HTMLタグで指定する文字コード

どの文字コードでHTMLファイルが保存されているかをチェックしたら、次はHTML内で指定する文字コードをチェックします。実は、HTMLファイル内で、Webブラウザに対して「このHTMLファイルの文字コードはこれですよ」と助言するためのタグがあるのです。

そのタグは、下記のようなmetaタグを、<head></head>内に記載します。例えば、Shift_JISならこんな感じです（赤字部分は、HTMLの文字コードに応じて異なります。以後も例はShift_JISで記述しますが、適宜読み替えてください。）

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />

もしすでにhead内に上記のようなmetaタグがあれば、文字コード部分（赤字部分）が、HTMLファイル自体の文字コードと同じかをチェックしましょう。もし上記metaタグが無ければ、上記のような感じでHTMLファイルの文字コードを記述します。これにより、ほとんどの場合、Webブラウザが正しくHTMLの文字コードを解釈してくれます。

なお、Dreamweaverでは新規ページを作成する際、自動的にHTMLファイルの文字コードに対応させた上記metaタグがついてくるので、たいていはそのままでも大丈夫です。

XHTMLの場合でXML宣言している場合

XHTMLの場合でXML宣言している場合、なおかつ<html>タグの上（つまりファイル冒頭）に下記のような表示がすでにある場合は、下記の赤字の部分の文字コードが、他と揃っているかをチェックしてください。

なお、XML宣言していない場合、あえてXML宣言しない場合、またはこの部分の意味がよく分からない場合は、下記は気にしなくてかまいません。

<?xml version="1.0" encoding="Shift_JIS"?>

レスポンスヘッダの文字コード

上記2つをチェックすれば、たいていの文字化けは防げるはずです。もし上記を正しく設定しても文字化けが発生する場合は、レスポンスヘッダの文字コード指定がおかしい可能性もあります。

※サーバを介していない場合（例えばWindowsのエクスプローラで、ダブルクリックして開いた場合など）は、ヘッダが発生しないため除きます。

レスポンスヘッダとは、HTMLファイルの中身よりも先にサーバから受け取る、目に見えない情報のことです。プログラムを書かない限りあまり意識することはないのですが、どんなときでも必ずヘッダがついてきています。私たちには見えないところで、おまけの情報がついている、というくらいにイメージしてください。 この部分に、ファイルの文字コードを指定できる部分があるのです。

ヘッダは、Firefoxのアドオンである Live HTTP Headers等のツールを使えば見られます。が、ここではヘッダを見ることが目的ではないので、文字化けを解決するためのポイントだけお話しします。.htaccessが使えるサーバーなら、.htaccessに以下を記述するだけです。

AddType "text/html; charset=Shift_JIS" html htm

赤字部分は実際の文字コード、青字部分はご利用のファイル拡張子（複数記述する場合は半角スペース区切り）に直して記述してください。

なお、PHPが使えるサーバーかつ、PHPが動く拡張子のファイルなら、文字化けのファイルの最初の部分（<html>やXMLl宣言よりも上）に下記のようなコードを書いても同じです。

<?php
header("Content-Type: text/html; charset=Shift_JIS");
?>

これで文字化けが直らなければ問題を切り分けて解決するしかありませんが、普通の静的な（プログラムが絡んでいない）ページなら、ほぼ解決するはずです。

文字化けを発生させないために

文字化けを発生させないために最も大事なことは、HTMLを書いているとき、いや、サイトを企画する段階で、何の文字コードでサイトを制作するかを決めておくことです。実際、Web制作の実務でも、たいていのケースでは制作前の企画段階から文字コードを選定しているんですよ。

また、HTMLをコーディングしている最中、そのサイトやそのページの文字コードはなんであるか、ということを常に頭の片隅においておくといいでしょう。慣れてしまうと、結構自然にできるものですよ。

どんな文字コードがよく使われる!?

実際のWebサイトで、どの文字コードがよく使われるかですが、昔はEUC-JPが多かったように思います（Shift_JISも多かったかな）。ページ途中でも触れましたが、現在はUTF-8がかなり多いですね。個人的には、特にWebシステムが絡む場合の新規案件はほぼUTF-8になってきていますし、特に理由がない場合も同様にしています。

このページをはてなブックマークに追加 Check  Yahoo!ブックマークに登録
↑このページ最上部へ

コメント

初心者 さん　2012年05月10日20時40分
HP作成初心者です。
文字化けで困っています。ご教授頂ければと思いコメント致します。
dreamweavercs5.5(osはmac)にてHPを作成しています。
BrowserLabにて確認したところ、IE9.0では文字化けしていないのですが、IE8.0以下では化けてしまいます。
具体的には、「で」が「て 〝」のように濁点が全角で表示されてしまいます。半濁音も同じ状況です。
safariやfirefoxでは問題ありません。
どのようにしたらよいのでしょうか？
よろしくお願い致します。
馬場誠 さん　2012年05月11日12時27分
初心者さん、こんにちは。

濁点や半濁点が全角になるだけで、他は問題無く読めるということでしょうか。

もしそうであれば、UTF-8-MAC関連の問題っぽい気がします（気になる場合は、「UTF-8-MAC」で検索してみてください）。

ものは試しに、やってみました。

■制作環境
MacOS X 10.5
Dreamweaver CS4

環境は異なりますが、上記で新規ファイルを作り、UTF-8でファイルを保存してアップしました。
http://www.be-webdesigner.com/tips/coding/mojibake_test.htm

オンラインのBrowserLabで見たところ、特に文字化けはしていないようです。
ただ、IE8等は漢字のフォントだけ明朝系で表示されてしまいました。ちなみに本物のWindows IE8で見てみましたが、もちろんそういったことはありません。

BrowserLabも完璧にエミュレートしているわけではないと思いますので、まずは他でもチェックしてみるといいと思います。「クロスブラウザテスト」で検索すれば、他にも同様のサービスがでてくると思います。

他で大丈夫であれば、BrowserLab側の問題で、実環境では大丈夫な可能性もあるかもしれません。
初心者 さん　2012年05月11日17時37分
馬場誠様

ご回答ありがとう御座います。
Abobeに問い合わせたところ、BrowserLab上の問題とのことでした。
Abobe側で同じ環境で同じ現象が確認でき、ブラウザで確認したところ正常に表示されたそうです。
このような現象は初めてとのことで、今後の開発に役立てたいとのことでした。

自分のコーディングミスとばかり思っていました。
BrowserLab上の問題だったとは…。他でもチェックできるものがあるのですね。検索してみます。
大変助かりました。本当にありがとう御座いました。
馬場誠 さん　2012年05月11日19時24分
濁点だけの文字化けはUTF-8-MACで起こる現象なので、そのアプリケーション（BrowserLab）のUTF-8-MACの実装ミスが疑わしいかな、と思っていたので納得です。

お役に立てたかは分かりませんが、解決してよかったです！
↑このページ最上部へ
Web制作Tips
デザイン
├フリーの写真素材を有効活用しよう
├デザイナーならこだわりたいカーニング（文字詰め）
├文字のジャンプ率で適切なサイトイメージを演出する
├TPOを考えてハズさないフォントを選ぶ
└失敗しない配色の基本
ユーザビリティ
├そのフォントサイズ、適切ですか？
├リンクテキストをわかりやすくする
├フォームのリセットボタンを考える
├リンク切れ時に適切な404ページを表示をする
└フォームの確定ボタンは右?左?
コーディング
├文法チェッカーで正しい(X)HTML/CSSを書こう
├インデントで読みやすいソースコードを
├文字化けを防ぐ&解消する方法
└背景画像ありのボックスの文字をはみ出させない方法
その他
├ディレクトリ構造は適切に
└絶対パス?相対パス?ファイルの指定方法いろいろ

独学!未経験からWebデザイナーになる!! > Web制作Tips > 文字化けを防ぐ&解消する方法