HTML & CSS

レシピ

設定

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

HTMLページの文字コード設定方法について、設定する理由から、コードを使った具体的な設定方法まで解説します。

この記事のポイント

  • 文字コードとは何かが分かる
  • HTMLページに文字コードを設定する

目次

文字コードとは?

文字コードとは、コンピュータ上で「文字」を表現するために決められたコードセットです。
例えば、コンピューターで日本語の「あ」を表現したい場合、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」の使用がオススメされますが、サーバーやシステムなどの環境に応じて使い分けてください。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。