コンテンツにスキップ

HTML:文字エンコーディングの指定と文字化け

文字エンコーディング

まずは moji.html という名前のHTML文書(新しいテキストドキュメント)を作成して、次のファイルを保存してみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="Shift_JIS">
<title>ここにタイトルを書くんだよ!</title>
</head>
<body>
なんて書いてあるか、読めるかな?
</body>
</html>

文字化けの表示例

これは、文字のエンコーディングの指定に誤りがあるために発生した 文字化け です。今回は、HTML文書で指定したのが「Shift_JIS」、実際のテキストファイルは「UTF-8」となっています。HTML文書中ではヘッダーのタグの charset属性 で指定します。

htmlとエディターで異なる文字コードを指定している場合

日本語のエンコード形式としてはEUC-JP、Shift_JIS、ISO-2022-JPが挙げられ、近年は Unicode (文字コードの国際規格)に基づいた「 UTF-8 」が多く使われています。UTF-8で保存した文書はアラビア語や中国語など、日本語以外の文字も文字化けすることなく同時に表示することができます。

charset属性をutf-8に変更 して保存してみましょう。

<meta charset="utf-8">

ブラウザを再読み込みして、文字化けしなくなりましたか?

utf-8に変更後の表示


言語指定

最初のソースコードを見ると、2行目のタグに次のような属性が指定されています。

<html lang="ja">

これは 言語指定 といって、このHTML文書がどの国の言葉で書かれているか具体的に定義するものです。文字エンコーディングとは違って、言語指定をしなくても文字化けには影響はありませんが、検索エンジンや自動翻訳などに役立ちます。

言語コードは2文字の形式で指定します(例:「ja」は日本語)。

言語コードは例えばこのようなページで紹介されています。


課題

インターネット上で見つけた好きなWebページや、今まで自分で作成したHTMLファイルを自動翻訳を使って好きな言語に翻訳して、新しいHTMLファイル文書として保存してブラウザで表示してみよう。文字化けせずに表示できるかな?

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body><!--ここから本文-->
<!-- //本文ここまで--></body>
</html>