日本語を文字化けさせない設定

ポイントは「3つ」

師匠

Webで日本語を使う場合、正しい設定をせえへんと、文字化けする可能性がある。

師匠

そのためのポイントは、下の3点や。

  1. lang属性 = ja ( <html lang="ja">
  2. charset属性 = UTF-8 ( <meta charset="UTF-8">
  3. 保存する文字コード = UTF-8(BOMなし)
師匠

これだけやれば、普通は文字化けしない。
この設定を加えた、標準的なHTMLコードを書いておくで。
実行例

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>
			タイトル
		</title>
	</head>
	<body>
		日本語も使えます。
	</body>
</html>
師匠

そや、忘れとった。
ポイント3点の説明の前に、「スペース」の話をするで。

半角スペース と 全角スペース

師匠

Webプログラミングだけやなく、プログラミング一般として、半角スペース全角スペース は別物や。

師匠

全角スペースは 、普通の文字として扱われるから、 絶対に使うな

師匠

間違っても全角スペースがコードに混入しないように、IMEの設定を下のように変えといた方がええ。

師匠

全角スペースは、 ガン や!

弟子

そこまで言わなくても。。。

師匠

いや、これは重要やで。
全角スペースの問題は、半角スペースや タブコードと区別が付かなくて、見えないこと。
よって、バグの原因となっていても、見つけにくい。

師匠

マジで、気いつけや。
おっちゃんとの約束や!

弟子

(アホか)

【ポイント 1】 lang属性

師匠

まず、<html>の開始タグの中に、 lang="ja" を書き加える。

<!DOCTYPE html>
<html lang="ja">

	(省略)
	
</html>
師匠

lang の前に、半角スペースが必要。

弟子

書き直しました。

師匠

この lang みたいなのを、 属性 (プロパティ、property) と呼ぶ。
要素(タグ)を修飾するもんや。

師匠

感覚的には、要素は「名詞」で、属性は「形容詞」やな。
<html lang="ja" > は、「 日本語を使った (←属性 lang="ja"HTML文書 (←要素 <html>ですよ 」ということを表している。
language が japanese な html文書、ってことや。

弟子

じゃ、英語のページを書く場合は、<html lang="en" > に書き直すのですか?

師匠

そういう こっちゃ。
ブラウザは、この情報を見て、「このページは日本語で書いてあるんやなー」と理解するわけや。
だから、ちゃんと設定してないと、文字化けとかの原因になる。

弟子

ほー。

師匠

下の表に、他の主な言語の「設定値」を載せとくで。

日本語ja 英語en フランス語fr
スペイン語es ドイツ語de イタリア語it
ロシア語ru アラビア語ar 中国語(簡体)zh-cn
タイ語th 韓国語ko 中国語(繁体)zh-tw

【ポイント 2】 charset属性

師匠

次、<head>要素内に、<meta charset="UTF-8" > の行を加える。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>
			タイトル
		</title>
	</head>
	<body>
		日本語も使えます。
	</body>
</html>
師匠

<meta>要素というのがある。
この要素は奥が深い。
いろいろ説明すべきことはあるが、まだ難しいので説明しない。

師匠

<meta charset="UTF-8" > を簡単に説明すると、
「 このファイルの 文字コード(キャラクターセット) は、 UTF-8 ですよ。 」
ということを宣言している。

師匠

文字コード(キャラクターセット)には、たくさんの種類がある。
ASCII(アスキー)とか、EUC とか、シフトJIS とか。。。

師匠

これを語りだすと1時間は掛かるので 説明しない。(昔は いろいろ複雑で、たいへんやったんや。)
でも、今の時代、「UTF-8」ができて、楽になった。
今は、UTF-8 を使っておけば間違いない。

師匠

ということで、<meta charset="UTF-8" > は呪文やと思って、入れておけばよい。

師匠

ただし、<meta>には終了タグが無いことに注意。
</meta>を書いたら、 間違い や。

【ポイント 3】 文字コード

師匠

最後のポイントは、前に説明したけど、ファイルを 「BOMなし」の「UTF-8」 で保存するってことや。

弟子

「BOMなし」の「UTF-8」 ???

師匠

【ポイント 2】で書いたけど、「UTF-8」は文字コードの1つや。
UTF-8 には、「BOMあり」と「BOMなし」がある。

弟子

「 BOMあり 」と 「 BOMなし 」 ???

師匠

BOM とは何か?
難しい質問や。。。
そして どーでも良い。。。
まー、 ゴミみたいなもん やな。(← 今となっては。)

師匠

「BOMあり」でも、今の初級レベルくらいやと、問題は無い。
が、PHP(←サーバサイドプログラミング言語)とかで「複数のファイルをまとめてページを作る」みたいなことを始めると、 BOMが入ってきて 問題が生じる。

師匠

よって、ともかく「 BOMなしUTF-8 」で保存するんや。
そうしとけば、間違いない。

復習

  • 全角スペースは使わない。
  • lang属性を設定しておく。 ( <html lang="ja">
  • charset属性を設定しておく。 ( <meta charset="UTF-8">
  • BOMなしUTF-8 で保存する。

基本的な構文(日本語可能)

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>
			タイトル
		</title>
	</head>
	<body>
		日本語も使えます。
	</body>
</html>