HTMLのタイトルが文字化けするとき

Web

liquidfunc2010-05-22


案外、参考になる記事が少ないので書いとく。買った本にも書いてなかったりしてひどい。

HTMLの基本

HTMLとかCSS関係の本買うと、まず最初の方のページでXML宣言だとかmetaタグだとか、初心者にとっては最低最悪の意味不明な文字列が並んでますよね。悪意すら感じます。
↓くらいが丁度良いサンプルコードじゃないでしょうか。

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<title>タイトルは日本語</title>

</head>
<body>

Hello, World

</body>
</html>
  1. metaタグでページ全体の基本データを記述（文字コードとか）
  2. linkタグでCSSを読み込む
  3. titleタグでページのタイトルを書く


で、普通のテキストエディタでそのまま保存してブラウザで開くと、タイトルが文字化けするはずです。なぜならファイル保存時の文字コードがShift-JISで指定されるから。

日本製テキストエディタのデフォルトはShift-JIS

日本製のテキストディタはデフォルトだとShift-JISで保存してしまうんですよね。Shift-JISで保存するならmetaタグのcharsetもShift-JISで指定して上げないとダメ。
最近はWebもプログラミング言語もデータベースも、文字コードはUTF-8で扱われるのが標準的なので、特別な理由がないならUTF-8で保存が良いです。

ファイル保存時に文字コードを指定

テキストエディタで「保存」をしようとするとファイル名の入力が促されると思うので、そこで文字コードの指定する場合が多いですね。


metaタグのcharsetをUTF-8で指定し、テキストファイル自体もUTF-8で保存してあげれば、文字化け解消です。