日本語WEBサイトの文字コードには、Shift_JIS、EUC-JP、*ISO-2022-JPおよびUTF-8などが使用されています。
Yahoo!JAPANの提供する無料WEBサイトサービス、ジオシティーズで、Yahoo!側が用意したツールを使ってWEBページを作成すると、文字コードはEUC-JPになります。
良く分からないまま、WEBページ中に、
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
と指定して、文字化けに悩む人もいます。そこで、HTMLソースの文字コード指定の基本についてまとめて見ました。
*ISO-2022-JPは「JIS」と記述されることが有りますが、用語の使い方としては正確ではありません。
下のリンク先をクリックすると、文字コードがEUC-JPとShift_JISのページにそれぞれ遷移します。(UTF-8のテストページ追加)
両方ともこのように表示するはずです。
WEBブラウザで表示させると、同じに表示しますが、ソースを見ると違いがあります。 インターネットエクスプローラー(IE)のソースエディタは通常「メモ帳」なっていいます。 そのためEUC-JPの方のソースを表示させると漢字部分が文字化けするので、 Mozilla Firefoxで閲覧してソース表示した画像を掲示しておきます。
二つのソースは、"charset=shift_jis"、"charset=euc-jp"の箇所のみ違っています。
(ただし、画面では見えませんが、euc-jpの方は">"の後に本来不要な半角スペースがあります。これは「shift_jis」のソースと文字数を合わせるためにわざと挿入しています。)
WEBサイトにアップロードする前の元のソースをバイナリエディターで16進数表示させてみます。
文字コードをShift_JISにして作成したソース
文字コードをEUC-JPにして作成したソース
"charset=shift_jis"、"charset=euc-jp"の箇所以外にも、漢字(全角文字)の部分が異なっています。
(バイナリエディターにはBzを使用しました。文字コードの設定は、それぞれ、Shift_JISが「表示」−「文字コード」−「シフトJIS」を、EUC-JPが「表示」−「文字コード」−「EUC」を選択しています。)
Shift_JISコードとEUC-JPコードでは、半角英数字は同じですが、漢字(全角文字)と半角カタカナは16進数表記では別のコードになっています。*
従ってソースを記述した文字コードとHTMLソース中で指定する文字コードを合わせないと、文字化けします。
具体的には、ジオシティーズのツールを使ってHTMLソースを作成した場合は、
<meta http-equiv="Content-type" content="text/html; charset=EUC-JP">
と、Shift_JISコードで作成したHTMLソースを、「EZアップロード」やその他のアップロードツールでアップロードする場合は、
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
と指定しなければなりません。
「EZアップロード」などでアップロードしたHTMLソースも、アップロード後にジオシティーズのツールアドバンストHTMLエディターを使って編集・保存すれば、文字コードがEUC-JPに変わってしまいます、その場合は、"Shift_JIS"の部分を"EUC-JP"に変更する必要があります。混乱を避けるためにも編集方法を統一した方が無難でしょう。
(ジオクリエイターを使用した場合は元の文字コードを引き継ぎます。 ただし、ジオクリエイターは一部の文字を文字実体参照(参考サイト:実体参照符号)に変更します。 特に問題は起こらないと思いますが、留意してください。(2006/10/11追記))
*UTF-8,ISO-2022-JPも半角英数字は同じです。半角英記号はほぼ同じですが、一部"~"(チルダ)などの表示が異なる場合があります。 またISO-2022-JPには半角カタカナは規定されていません。
WEBブラウザは閲覧するWEBページがどのような文字コードで記述されているのか、どうやって判別しているのでしょうか？
WEBブラウザとWEBサイトは、WEBブラウザが表示する情報以外の制御情報もやり取りしています。WEBブラウザからWEBサイトへ送る要求情報は、HTTPリクエストヘッダー、WEBサイトからWEBブラウザへ返ってくる応答情報をHTTPレスポンスヘッダーと言います。
(1)そのページが使用している文字コード情報を、WEBサイトが、HTTPレスポンスヘッダーの中に含めて送って来れば、WEBブラウザはそれを見てそのページの文字コードを判別します。これが一番確実な判定方法です。
詳しくは、レスポンスヘッダでの文字コード指定(外部サイトへのリンク)をお読みください。
しかし、ジオシティーズのようにWEBサイトのスペースをユーザーが借りている場合、HTTPレスポンスヘッダーの中に文字コードの指定を入れるのは出来ない場合が多いです。
(2)その場合は、
<meta http-equiv="Content-type" content="text/html; charset=文字コードの指定">
というように文字コード指定をHTMLのMETA文で行います。
もちろん(1)(2)ともHTML文で使用している文字コードと異なった物を指定してはいけません。また、(2)の指定は最初に全角文字が現れる前に行わなくてはいけません。良く、
<title>漢字のタイトル</title>
<meta http-equiv="Content-type" content="text/html; charset=文字コードの指定">
としているサイトがありますが、意味がありません。
(3)META文による指定が無い、または有ってもそれより先に漢字(全角文字)が出てくる場合は、WEBブラウザはその全角文字で文字コードの判別を行います。
Yahoo!掲示板のページのソースを見てみるとMETA文による文字コード指定は無く、代わりに、
<html>
<head>
<!--・-->
と書いてあります(IEでYahoo!掲示板のHTMLソース表示させると文字化けします)。
この「・」でWEBブラウザに文字コードの判定をさせたいのでしょうが、どうなんでしょうか。Yahoo!掲示板を閲覧すると WEBブラウザがエンコードの判定をミスって文字化けすることが多いのも、このためではないかと私は思っています。
(2006/10/7)