うろぐ

インターネットサービス&デジタル家電&デジタルカメラ&パソコンのレビュー

文字コードをmetaタグで指定しますが、metaタグで文字コードを指定する前に2バイト文字が表示されると、インターネットエクスプローラーなど一部のブラウザでは文字化けをおこします。
この文字化けは、headタグの最初にmetaタグで文字コードを指定した一文を挿入することで防げます。

以下、その実例です。

metaタグで文字コードを指定するmetaタグの位置

間違いの例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>千葉店</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="../css/set.css" type="text/css" />
</head>

metaタグでutf-8を指定していますが、その前にtitleタグで千葉店が表示されています。インターネットエクスプローラー 6.xはこの千葉店に反応してしまい、文字コードをutf-8とは認識せずにShift_JIS、あるいは西欧文字と勝手に解釈してしまいます。
この文字化けはFirefox 2.0.xでは起きませんでした。

正しい例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="../css/set.css" type="text/css" />
<title>千葉店</title>
</head>

metaで文字コードを指定する場合、headタグの直下にmetaタグを配置します。
以下、metaタグ、linkタグを配置して、最後にtitleタグを配置します。
これは、metaタグ、linkタグを最初にブラウザに読み込ませるためです。

ほんの些細な違い、ここでは順番ですが、これを怠ると文字化けをおこします。

1月 27th, 2009

Posted In: HTML/XHTML/cssの構文の書き方

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です