Firefox、Chromeなどで文字化けを防ぐ方法 ヘッダー情報に文字コードを指定

FirefoxやGoogle ChromeではHTMLのContent-typeに文字コードを指定しても文字化けすることがあります。

HTTPの仕様ではサーバからファイルをブラウザ(クライアント)に送信するときに、本文より前のヘッダー情報の中にContent-typeを指定する必要があります。

[参考記事] PHPのよく使うヘッダー関数のまとめ
[参考記事] Internet Explorerでヘッダー情報をみる方法
[参考記事] Firefoxでヘッダー情報をみる方法
[参考記事] Google ChromeでHTTP headerをみる方法
[参考記事] docomo端末でCSSを使うには

ページにアクセスしたときにサーバから送信される情報は次のようになっています。

HTTP/1.1 200 OK
Date: Sat, 11 Jun 2011 08:17:41 GMT
Last-Modified: Sat, 11 Jun 2011 08:05:56 GMT
Accept-Ranges: bytes
Content-Length: 22744
Keep-Alive: timeout=15, max=1000
Connection: Keep-Alive
Content-Type: text/html; charset=shift_jis
Content-Language: ja

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
………
……
………
</html>

ここで最初の改行2つでヘッダー情報とボディー部に分けられます。

つまり次の部分がヘッダー情報です。

HTTP/1.1 200 OK
Date: Sat, 11 Jun 2011 08:17:41 GMT
Last-Modified: Sat, 11 Jun 2011 08:05:56 GMT
Accept-Ranges: bytes
Content-Length: 22744
Keep-Alive: timeout=15, max=1000
Connection: Keep-Alive
Content-Type: text/html; charset=shift_jis
Content-Language: ja

ブラウザ(クライアント)からサーバに送信するリクエストヘッダーと区別して、サーバからブラウザ(クライアント)に送信されるヘッダー情報はレスポンスヘッダーとも呼ばれます。

[参考記事] リクエストヘッダーをみるツール

このレスポンスヘッダーは、これから送信する情報がどんなものかをあらわしています。

そこでヘッダー情報にあるContent-Typeはこのファイルがどのような種類のファイルかという情報になりますが、文字コードを指定することがRFCでは推奨されています。(should)

FirefoxやGoogle Chromeではこの情報を重視するため、HTMLのContent-typeに文字コードを指定しても文字化けしてしまうことがあります。

ヘッダー情報にあるContent-Typeに文字コードを指定するには、httpd.confや.htaccessに次のコードを追加します。

UTF-8であれば

AddType "text/html; charset=utf-8" .html

Shift-JISであれば

AddType "text/html; charset=shift_jis" .html

またXMLファイルの場合は次のように指定します。

AddType "application/xml; charset=utf-8" .xml

[参考記事] PHPのよく使うヘッダー関数のまとめ
[参考記事] Internet Explorerでヘッダー情報をみる方法
[参考記事] Firefoxでヘッダー情報をみる方法
[参考記事] Google ChromeでHTTP headerをみる方法
[参考記事] docomo端末でCSSを使うには
[参考記事] Androidのapkファイルをサーバから端末にダウンロードする

関連記事

スポンサーリンク

firstChild

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る