Home > Web And Technology > ブラウザのエンコード指定が自動選択になっているのに、画面が真っ白または文字化けしてしまう罠・・・の解決方法

ブラウザのエンコード指定が自動選択になっているのに、画面が真っ白または文字化けしてしまう罠・・・の解決方法

とあるサイトを作っていて実際に出くわした不具合、というか罠。10分ほど悩んだ末、当日一番の閃きですんなり解決できたものの、同じような悩みを抱えている人がコレ見て救われる事を願って知見を共有してみます。

問題・現象

WindowsXP + IE v6.0.x で確認できる現象。ブラウザの「エンコード」設定を下記のように「自動選択」にしておくことで、通常ならば、表示しようとしているHTMLのエンコードを自動で判定してくれるのですが、

エンコード設定

下記のような、エンコードが Unicode (UTF-8) のHTMLを表示しようとすると、なぜかエンコードを 日本語 (シフト JIS) と誤認識してしまい、結果、表示が真っ白 (blank) になってしまいます。

<html>
<head>
<title>百人百答！</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<img src="image.jpg"><br>ネムの木
</body>
</html>

[ サンプルHTMLを表示 ]

※WindosXP + Firefox v1.5 や、MacOS X + Safari v1.3 ではこのような現象はおきませんでした。IE特有の動きな模様。

原因・解決策

原因

原因はページのエンコードを指定している meta Content-Type タグの位置にあります。これが、日本語文字列を含む title タグよりも後に記述されているがゆえに、ブラウザはページのエンコード指定を知るよりも前に title タグ内の日本語文字をもって、なんとかエンコード判定を試みて失敗している模様。

解決策

なので、下記のように、title タグよりも前に meta Content-Type タグをもってくることで、まず最初にブラウザにページのエンコードを伝えることが出来るため、問題は解決されます (ページがきちんと表示されるようになります）。 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>百人百答！</title>
</head>
<body>
<img src="image.jpg"><br>ネムの木
</body>
</html>

[ サンプルHTMLを表示 ]

確かに Dreamweaver とかでページを作る場合は、きちんと meta Content-Type タグが前に書かれていますね。手動でHTML作成を試みる場合にハマる罠の模様。罠というか、ひょっとしたらこれってものすごく基礎的な知識なのかもしれない... (恥

Comments:9

TOSHI 2007-03-16 (金) 16:51

参考にさせて頂きました♪
ありがとうございます。m(_ _)m

祐 2007-04-23 (月) 09:08

ずっと悩んでいた問題、こちらを拝見して無事解決しました！
ありがとうございました。
windows2000 + IE6.0 や windows98 + IE5.5でも同じ現象がでますね･･･

chi 2007-04-24 (火) 10:41

ところどころ、ページが真っ白になってしまう箇所があって、困っていたのですが（エンコードを自動選択にしても、白紙で表示されたり）この記事のとおり、書き換えましたら無事表示されるようになりました?！！どうもありがとうございました(TдT)

Kats 2007-06-08 (金) 02:55

５年ほど前のものですが、もじら組 Web 標準普及プロジェクトの下記の記事が知られています。他の皆様にも参考になるのではないでしょうか。
http://www.mozilla.gr.jp/standards/webtips0022.html

bashi 2007-06-23 (土) 17:32

> TOSHIさん・祐さん・chiさん
お役に立てて幸いです。
コメントありがとうございますー。

> Katsさん
おお、リンク紹介ありがとうございますー。感謝。

もんち 2007-12-10 (月) 15:15

日本語Titleより上に記載されていますが、ソースが表示されてしまう。。。のはなぜ？（？。？）
エンコードも自動になっているのに?（＞＜）

aibee 2008-05-23 (金) 15:32

>もんちさん
かなり古い問い合わせへの書き込みなので解決済かもしれませんが、他の方の参考になるかも!?と足跡を残しておきます。

私もＣＧＩで動的コンテンツを表示される関係でＥＵＣコードで作成したページを表示させていたのですが、特定のページだけが真っ白となり自動認識が「ＳＪＩＳ」となってしまいました。

いろいろ調べた結果、他で作成したコンテンツを使いまわししていた関係でが指定されていたのですが、この真っ白になる分はこのclassを使用していないもので、単純ににしただけでＯＫとなりました。

htmlの単純なミスはブラウザが勝手に解釈してそれなりに表示するのでわかりにくいですが、まさかその影響がエンコードミスを引き起こすとは(^^;;

aibee 2008-05-23 (金) 15:37

失礼！！タグが使えない関係で文字ぬけになってしまいました。
大文字で再入力します。
＜ｂｏｄｙ　ｃｌａｓｓ＝ｘｘｘｘ＞　となっていたものを　＜ｂｏｄｙ＞にしただけです。
ｃｌａｓｓ　ｘｘｘｘを使っていないのに間違って(コピペ)で使用していました。

mikamikami 2012-06-24 (日) 09:42

大解決しました！！ありがとうございます！！

Comment Form

コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。

Remember personal info

Home > Web And Technology > ブラウザのエンコード指定が自動選択になっているのに、画面が真っ白または文字化けしてしまう罠・・・の解決方法

Categories
Archives
人気エントリー
Search
Feeds

Page Top