文字化けを起こす文字コード設定の落とし穴 | デザインってオモシロイ -MdN Design Interactive-
【サイトリニューアル!】新サイトはこちらMdNについて


Webデザインには、あなたの知らない「落とし穴」がたくさん。大きなものから小さなものまで、それが及ぼす影響はさまざまだ。カンペキだと思っているあなたのサイトも、実はすでに暗い穴の中かも・・・。




文字化けを起こす文字コード設定の落とし穴


 自分が何か情報を探していて、検索サイトなどから良さそうなリンク先を見つけてページを開いてみたものの文字化けしていたとしたらどうだろうか? インターネットリテラシーが高い人は、ブラウザのテキストエンコーディングなどから文字コードを変換して文字化けを解消することができるかもしれないが、初心者はそんなことも知らずに別のサイトに移動してしまうだろう。サイト制作者側にとって文字化けは絶対に避けたい問題である。

 文字化けの原因はいくつかあるが、おもに<META>タグで文字コードを正しく設定していないことが挙げられる。文字化けを防ぐためには、まずHTMLの中で使用する文字コードをきちんと明確に指定する。文字コードを正しく設定するには<head>~</head>内に文字コードのタグを入れなければいけない。日本語の文字コードは「JIS」、「シフトJIS」、「EUC」があり、それぞれ<META>タグで指定する値も変わってくる【1】【2】【3】。このタグを入れることによりブラウザ側で文字コードの判別を自動的にしてくれるので文字化けを起こす可能性は低くなる。

 Dreamweaverなどのソフトを使っていると自動でこのタグを入れてくれるので気にしなくてよいが、サイト制作を行ううえで基本知識として頭に入れておこう。


<meta http-equiv="Content-Type" content="text/html; charset=ISO-2022-JP">
【1】「JIS」の場合


<meta http-equiv="Content-Type" content="text/html; charset= Shift_JIS">
【2】「シフトJIS」の場合


<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
【3】「EUC」の場合

解説:横山 剛

(※本文中、及びキャプション内で使用している「<」、「>」は、全角になります。ご注意ください。)





twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在