HTMLページの文字コードを設定する

HTMLページに文字コードを設定する方法について、コードを使って具体的に解説します。

この記事のポイント

HTMLページにha文字コードを設定する
現在主流の文字コードはUTF-8

文字コードとは？

文字コードとは、コンピュータ上で「文字」を表現するために決められたコードセットです。
例えば、コンピューターで日本語の「あ」を表現したい場合、UTF-8では「E38181」、Shift-JISでは「82A0」、EUC-JPでは「A4A2」とコードが決まっています。

日本語で使用される代表的なコードは次の3つです。

UTF-8 – Unicodeで使える8ビット符号単位の文字スキーム。HTML5でも推奨されている文字コード。
Shift-JIS – コンピューターで日本語を表現するために、JIS規格で策定された文字コード。
EUC-JP – UNIXで広く使われている文字コードに日本語対応を行ったもの。

現在のHTML5で推奨されているのは「UTF-8」です。

どうして文字コードを指定するの？

文字コードは、HTMLファイルのテキストをどの文字コードで書いているかを明らかにするために指定します。

もしもHTMLファイルで使用している文字コードが推奨されているUTF-8以外の場合、ブラウザがHTMLファイルの文字コードを誤って認識し、文字化けが起こってしまう可能性があります。

ブラウザの認識した文字コードとファイルの文字コードが異なる場合

そこで、ブラウザでHTMLファイルを正しく表示するように、そのHTMLファイルで使っている文字コードはしっかりと指定するようにします。

正しい文字コードを指定した時の表示例

文字コードは文字化けを防ぐだけでなく、Googleなどの検索ロボットがHTMLファイルを解析（クロール）する際にもデータとして活用されます。
そのため、もし推奨設定の「UTF-8」であっても文字コードは指定するようにしましょう。

HTMLページに文字コードを設定する

HTMLページの文字コードはhead要素内にmeta要素を使って指定します。

index.html

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>サンプルコード</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>文字コードの設定</h1>
	<p class="text1">ページに文字コードを設定する</p>
	<div class="footer">Copyright© GRAYCODE.</div>
</body>
</html>

文字コードの指定について、大文字「UTF-8」、小文字「utf-8」はどちらでも大丈夫です。

UTF-8以外にも、「Shift_JIS」や「EUC-JP」を指定することができます。
基本的には現在主流の「UTF-8」が多くの場合はオススメですが、要件に応じて使い分けてください。