6日でできる 新HTML&CSS入門｜HTMLで正しく文字を表示する方法

6日でできる 新HTML&CSS入門｜HTMLで正しく文字を表示する方法

文字コードを正しくそろえて、日本語も世界の文字も読みやすく届けよう。

HTMLで作成したWebページをブラウザで開いたとき、日本語が意味の分からない記号や漢字の並びに変わってしまうことがあります。このような表示の乱れは、一般に文字化けと呼ばれます。

文字化けが起こる主な原因は、HTMLファイルを保存したときの文字コードと、ブラウザが読み取るときに想定した文字コードが一致していないことです。

私たちは普段、文字をそのまま入力しているように感じます。しかし、コンピュータの内部では、ひらがな、漢字、アルファベット、数字、記号などが、それぞれ決められた番号やバイト列に変換されて保存されています。

同じデータでも、異なる文字コードとして読み取ると、元とは違う文字に変換されてしまいます。そのため、HTMLファイルを作成するときは、どの文字コードで保存したのかをブラウザへ正しく伝えることが大切です。

現在のWeb制作では、UnicodeをUTF-8で符号化して使用する方法が広く採用されています。UTF-8は日本語だけでなく、英語、中国語、韓国語をはじめとする多くの言語や記号を扱えるため、Webページの国際対応にも適しています。

ここでは、文字コードの基本的な考え方、文字集合と符号化方式の違い、UTF-8が使われる理由、HTMLで文字コードを指定する方法、文字化けが起きたときの確認手順までを、順番にやさしく解説します。

コンピュータは文字を数値として扱う

コンピュータは、私たちが画面で見ている文字を、そのままの形で記憶しているわけではありません。

コンピュータの内部では、すべてのデータが数値として扱われます。文章に含まれる文字にも番号が割り当てられ、その番号をもとに保存、送信、表示が行われます。

たとえば、アルファベットのAには決められた番号があり、ひらがなのあにも別の番号があります。漢字、記号、絵文字などにも、それぞれを識別するための番号が割り当てられています。

文字と番号を対応させるための規則を、広い意味で文字コードと呼びます。

コンピュータ同士が正しく文章をやり取りするには、送る側と受け取る側が同じ規則を使う必要があります。

たとえば、送信側がUTF-8で保存した日本語を、受信側がShift_JISとして解釈すると、本来とは異なる文字の並びとして認識されることがあります。

文字化けを防ぐには、文字を書いたとき、ファイルへ保存したとき、サーバから送信したとき、ブラウザで読み取ったときに、同じ文字コードを使用することが重要です。

文字コードはデータを共有するための共通ルール

文字コードは、文字をデータとして保存するためだけのものではありません。

作成した文章を別のパソコンで開いたり、Webサーバからブラウザへ送ったり、データベースへ保存したりするときにも使用されます。

共通の文字コードがなければ、ある環境で作成した文章を別の環境で正しく読み取れません。

文字コードは、次のような場面に関係しています。

文字コードを正しく理解すると、HTMLの文字化けだけでなく、メール、CSVファイル、データベースなどで起こる文字の問題も理解しやすくなります。

図1：文字が保存されて再び表示されるまで

この図から分かること

キーボードから入力した文字は、そのままの形でHTMLファイルに保存されるわけではありません。

文字集合で決められたコードポイントをもとに、UTF-8などの符号化方式を使ってバイト列へ変換されます。この変換を符号化といいます。

保存されたHTMLがWebサーバからブラウザへ送られると、ブラウザはバイト列を文字へ戻します。この処理が正しく行われることで、日本語の文章が意図したとおりに表示されます。

保存するときと読み取るときに異なる符号化方式を使用すると、バイト列を正しく文字へ戻せません。その結果、意味の分からない記号や別の文字が表示される文字化けが起こります。

代表的な文字コードの種類

文字をコンピュータで扱うための規則は、時代や用途に応じて複数作られてきました。

代表的なものにはASCII、Shift_JIS、EUC-JP、Unicodeなどがあります。

これらはすべて同じ種類のものとして扱われることがありますが、厳密には役割が異なります。

ASCII、Shift_JIS、EUC-JPは、文字とデータ表現の関係が比較的まとまった形で設計された文字コードです。

Unicodeは、世界中の文字に共通の番号を割り当てる文字集合です。Unicodeで定義された番号を実際のバイト列へ変換する方法として、UTF-8やUTF-16などがあります。

ASCIIは基本的な英数字を扱う

ASCIIは、コンピュータで文字を扱うための基本的な規格の一つです。

英語のアルファベット、数字、基本的な記号、改行などの制御文字を含む128種類を定義しています。

HTMLのタグ名、属性名、ファイル名、URLなどでは、ASCIIに含まれる半角英数字や記号が多く使われます。

ただし、ASCIIだけでは、ひらがな、カタカナ、漢字などの日本語を表せません。そこで、日本語を扱うための文字コードが作られました。

Shift_JISは日本語環境で広く使われてきた

Shift_JISは、日本語を扱うための文字コードとして、長い間幅広く使われてきました。

特に、日本語版Windowsの文書や古いWebサイト、業務システムなどで見かけることがあります。

ASCIIに含まれる半角英数字と、日本語の全角文字や半角カタカナなどを扱えます。

現在でもShift_JISを使用するシステムはありますが、新しく作成するWebページでは、特別な理由がなければUTF-8を選ぶのが一般的です。

EUC-JPはUNIX系の日本語環境で使われた

EUC-JPは、日本語の文字を扱うための符号化方式です。

以前は、UNIX系OSを利用したサーバや電子メール、Webシステムなどで広く使われていました。

Shift_JISと同じように日本語を扱えますが、文字の割り当て方やバイト列の構成は異なります。

そのため、EUC-JPで保存されたファイルをShift_JISとして読み込むと、正しい日本語として表示されません。

現在のWeb制作で新しくEUC-JPを採用する機会は多くありませんが、古いWebシステムを管理するときには目にすることがあります。

Unicodeは世界の文字を共通の体系で管理する

Unicodeは、世界中で使用されるさまざまな文字を、一つの共通した体系で扱うことを目指して作られた文字集合です。

日本語、英語、中国語、韓国語、アラビア語、ギリシャ文字、数学記号など、多くの文字や記号に固有のコードポイントが割り当てられています。

Unicodeが登場する以前は、言語や地域ごとに異なる文字コードが使われていました。

そのため、複数の言語を一つの文書に含めることが難しかったり、別の国や地域の環境で文字化けしたりする問題がありました。

Unicodeによって文字へ共通の番号を割り当てることで、多くの言語を同じ仕組みの中で扱いやすくなりました。

文字集合と符号化方式は役割が異なる

文字コードを理解するときに、文字集合と符号化方式を分けて考えることが重要です。

文字集合は、どの文字を扱うか、各文字にどの番号を割り当てるかを定めます。

符号化方式は、その番号をコンピュータ上でどのようなバイト列として保存するかを定めます。

たとえば、ひらがなのあには、UnicodeでU+3042というコードポイントが割り当てられています。

U+3042は、文字集合の中での番号です。HTMLファイルへ保存するときは、この番号をUTF-8やUTF-16などの規則に従ってバイト列へ変換します。

同じUnicodeの文字でも、使用する符号化方式が異なれば、ファイル内のバイト列も異なります。

コードポイントは文字を識別する番号

コードポイントは、文字集合の中で各文字を識別するための番号です。

Unicodeのコードポイントは、一般にU+の後ろへ16進数を付けて表します。

コードポイントそのものは、ファイルへ保存されるバイト列を直接表しているわけではありません。

コードポイントをUTF-8やUTF-16などで符号化することで、コンピュータが保存や送信に使用できるデータになります。

UTF-8はUnicodeの符号化方式

UTF-8は、Unicodeで定義された文字をバイト列へ変換するための符号化方式です。

英数字などのASCII範囲は1バイトで表し、それ以外の文字は2～4バイトで表します。

日本語の多くは、UTF-8では1文字あたり3バイトで表されます。

UTF-8は可変長の符号化方式です。文字によって必要なバイト数が異なります。

ASCII範囲の文字は従来のASCIIと同じバイト値になるため、英数字を中心とした既存のデータや仕組みと相性がよいことも特徴です。

図2：文字集合と符号化方式の違い

この図から分かること

UnicodeとUTF-8は、同じものではありません。

Unicodeは、文字とコードポイントの対応を定める文字集合です。A、あ、日などの文字に、それぞれ固有の番号を割り当てます。

UTF-8は、Unicodeのコードポイントをファイルへ保存したり、ネットワーク上で送信したりするためのバイト列へ変換する符号化方式です。

Unicodeという文字の一覧を、UTF-8という保存方法でデータにすると考えると分かりやすいでしょう。

同じUnicodeのコードポイントでも、UTF-8とUTF-16では異なるバイト列になります。そのため、ファイルを保存した方式と読み取る方式を一致させる必要があります。

UTF-8がWeb制作で広く使われる理由

現在のWeb制作では、UTF-8が標準的な選択肢として広く使用されています。

UTF-8が使われる理由の一つは、世界中の多くの文字を一つの符号化方式で扱えることです。

日本語のページに英語や中国語を含める場合でも、UTF-8で統一しておけば、文字コードを切り替えずに記述できます。

新しくWebサイトを制作する場合は、特別な制約がない限り、HTML、CSS、JavaScript、サーバ側の処理、データベースなどをUTF-8へそろえると管理しやすくなります。

一部だけShift_JIS、別の部分だけUTF-8というように文字コードが混在すると、データを受け渡す途中で文字化けが起こりやすくなります。

UTF-16との違い

UTF-16も、Unicodeの文字を表すための符号化方式です。

多くの文字を2バイトで表し、一部の文字を4バイトで表します。

UTF-16は、一部のプログラミング環境やソフトウェア内部で使用されています。

しかし、HTMLファイルやWeb通信では、ASCIIとの互換性があり、多くの環境で扱いやすいUTF-8が一般的です。

HTMLではmeta要素で文字コードを指定する

HTMLでは、meta要素のcharset属性を使用して、文書の文字コードを指定できます。

UTF-8を指定する場合は、head要素の中へ次のように記述します。

<meta charset="UTF-8">

この指定によって、ブラウザへ、このHTML文書はUTF-8で符号化されていることを伝えます。

基本的なHTML文書では、次のように記述します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>文字コードの学習</title>
  </head>
  <body>
    <h1>HTMLで日本語を表示する</h1>
    <p>このページはUTF-8で保存されています。</p>
  </body>
</html>

meta要素は、ブラウザのページ内に文章として表示するものではありません。

ページに関する情報をブラウザへ伝えるために使用するため、head要素の中へ記述します。

charset属性はHTMLの保存形式と一致させる

meta要素へUTF-8と書くだけでは、文字化け対策として十分ではありません。

HTMLファイル自体もUTF-8で保存する必要があります。

HTML内でUTF-8を宣言していても、エディタがShift_JISでファイルを保存していれば、宣言と実際のデータが一致しません。

ブラウザはUTF-8のデータだと考えて読み取るため、正しい日本語として表示できない可能性があります。

文字コードの指定と、ファイルの保存形式は必ずそろえましょう。

meta要素はhead要素の早い位置へ記述する

文字コードを指定するmeta要素は、head要素の中でも、できるだけ先頭に近い位置へ記述します。

ブラウザはHTMLを先頭から読み進めるため、文字コードの指定を早い段階で確認できるほうが安全です。

次の順番を基本として覚えておくと分かりやすいでしょう。

<head>
  <meta charset="UTF-8">
  <title>ページタイトル</title>
</head>

文字コードが分からない状態で日本語などを先に読み込むと、ブラウザが誤った方法で文字を解釈する可能性があります。

そのため、meta要素による文字コードの指定は、HTML文書の先頭に近い場所へ記述することが大切です。

lang属性とcharset属性は役割が違う

HTMLでは、html要素にlang属性を指定することがあります。

日本語を中心としたページでは、次のように記述します。

<html lang="ja">

lang属性とcharset属性は、どちらも言語や文字に関係しているように見えますが、役割は異なります。

lang属性は、ページの文章が何語で書かれているかを、ブラウザ、検索エンジン、読み上げソフトなどへ伝えます。

charset属性は、ファイル内のバイト列をどの符号化方式で文字へ戻すかをブラウザへ伝えます。

日本語のページでは、lang属性とcharset属性の両方を適切に指定します。

HTMLファイルはテキストエディタでUTF-8保存する

HTMLファイルを作成するときは、使用しているテキストエディタの保存設定も確認します。

多くのコードエディタでは、新しく作成したファイルをUTF-8で保存する設定が標準になっています。

ただし、古いエディタ、業務用ソフト、既存ファイルを編集する場合などは、Shift_JISや別の文字コードで保存されることがあります。

確認する項目は次のとおりです。

文字化けした状態のファイルをそのままUTF-8で保存すると、崩れた文字が新しいデータとして確定してしまうことがあります。

文字コードを変換するときは、最初に正しい文字コードでファイルを開き、文章が正常に表示されていることを確認してから保存します。

Webサーバから送られる情報も文字表示に関係する

WebサーバはHTMLをブラウザへ送るとき、HTTPレスポンスにContent-Typeという情報を含めることがあります。

Content-Typeは、送信するデータの種類をブラウザへ伝えるための情報です。HTMLの場合は、文字コードも一緒に示されることがあります。

概念的には、次のような内容です。

Content-Type: text/html; charset=UTF-8

HTML内のmeta要素だけでなく、Webサーバから送られる文字コード情報も表示に関係します。

これらの設定がUTF-8で統一されていると、文字化けの可能性を減らせます。

Web制作の初期段階では、まずHTML内のmeta要素と、エディタの保存形式をUTF-8へそろえることから始めましょう。

図3：HTMLの文字化けを防ぐ設定

この図から分かること

HTMLの文字を正しく表示するには、meta要素だけでなく、ファイルの保存形式やWebサーバの設定も一致させる必要があります。

コードエディタでHTMLをUTF-8として保存し、HTML内でもmeta要素によってUTF-8を指定します。Webサーバが文字コードを送信する場合は、その設定もUTF-8にそろえます。

すべてがUTF-8で統一されていれば、ブラウザは受け取ったバイト列を正しく日本語へ変換できます。

どこか一つだけShift_JISなどの別の文字コードになっていると、正しい文字を復元できず、文字化けが起こる可能性があります。

文字化けは解釈の不一致によって起こる

文字化けは、文字データそのものが突然別の文字へ変化して起こるわけではありません。

保存されているバイト列を、本来とは異なる規則で文字へ変換することで起こります。

たとえば、UTF-8で保存された日本語は、UTF-8の規則に従って読み取れば正しく表示されます。しかし、同じバイト列をShift_JISとして読み取ると、別の文字や記号として解釈されます。

文字化けが見つかったときは、表示結果だけを見て文字を書き直すのではなく、データがどの文字コードで保存され、どの文字コードとして読み取られているかを確認します。

文字化けが起きたときの確認手順

HTMLで文字化けが起きた場合は、次の順番で確認すると原因を見つけやすくなります。

HTMLのmeta要素を確認する

head要素内に、次の指定があるか確認します。

<meta charset="UTF-8">

charset属性の値に入力ミスがないか、head要素の早い位置へ記述されているかも確認します。

ファイルの保存形式を確認する

コードエディタで、HTMLファイルが実際にUTF-8で保存されているか確認します。

meta要素へUTF-8と記述していても、ファイルがShift_JISで保存されていれば文字化けする可能性があります。

正しい文字コードで開き直す

既存ファイルの文字コードが分からない場合は、エディタの文字コード指定機能を使って開き直します。

日本語が正しく表示される文字コードを見つけたら、その状態からUTF-8へ変換して保存します。

Webサーバの設定を確認する

ローカル環境では正常に表示されるのに、Webサーバへ公開すると文字化けする場合は、サーバが送信するContent-Typeを確認します。

サーバ側で別の文字コードが指定されていると、HTML内の指定と一致しない場合があります。

ブラウザのキャッシュを確認する

設定を修正しても古い表示が残る場合は、ブラウザに以前のHTMLが一時保存されている可能性があります。

ページを再読み込みしたり、キャッシュを無視して再取得したりして、最新のファイルを確認します。

関連するデータの文字コードを確認する

HTML自体が正しくても、データベースや外部ファイルから取得した文章だけが文字化けすることがあります。

その場合は、HTMLだけでなく、データの保存先、サーバ側のプログラム、データベース接続などの文字コードも確認します。

文字コードを途中で変換するときの注意点

古いWebページをUTF-8へ変更するときは、meta要素だけを書き換えてはいけません。

たとえば、Shift_JISで保存されたHTMLの指定だけをUTF-8へ変更すると、実際のデータと宣言が一致しなくなります。

正しい変換手順は次のとおりです。

1. 現在の文字コードを確認する
2. 現在の文字コードとしてファイルを正しく開く
3. 日本語が正常に表示されていることを確認する
4. エディタの機能を使ってUTF-8へ変換する
5. meta要素のcharset属性をUTF-8にする
6. 保存後にブラウザで表示を確認する
7. リンク先や関連ファイルも確認する

文字化けした状態の文字を手作業で直すより、正しい文字コードで元データを開き直すほうが安全です。

一度誤った変換を行い、その状態で上書き保存すると、元の文字情報を復元しにくくなることがあります。変換前のファイルは、念のためバックアップしておくと安心です。

BOM付きUTF-8とBOMなしUTF-8

UTF-8のファイルには、先頭にBOMと呼ばれるデータが付いている場合があります。

BOMはByte Order Markの略です。UTF-16などではバイト順を示すために使われますが、UTF-8にはバイト順の違いがありません。

UTF-8では、ファイルがUTF-8であることを示す目印としてBOMが付けられる場合があります。

通常のHTMLファイルでは、UTF-8のBOMなしで保存する方法が広く利用されています。

ただし、HTMLではBOM付きUTF-8も扱えます。問題になりやすいのは、サーバ側のプログラムや一部のファイル形式で、BOMが意図しない出力として扱われる場合です。

学習段階では、エディタの保存形式としてUTF-8を選び、選択肢がある場合はUTF-8 BOMなしを使用すると管理しやすいでしょう。

機種依存文字や特殊な文字にも注意する

UTF-8を使用すれば、多くの文字を保存できます。

しかし、文字が保存できることと、すべての端末で同じ形に表示されることは別の問題です。

利用者の環境に対応するフォントがなければ、四角形などの代替記号として表示されることがあります。

多くの人に読んでもらうWebページでは、特殊な文字だけに意味を持たせないことも大切です。

必要な情報は文章でも説明し、特定の記号が表示できない環境でも内容が伝わるようにします。

HTMLの特殊文字は文字参照で記述する

HTMLでは、<、>、&などの記号が、タグや文字参照の開始記号として特別な意味を持ちます。

これらを文章として表示したい場合は、文字参照を使用します。

たとえば、HTMLの説明文で開始タグの形をそのまま表示したい場合、<を<として記述します。

文字参照は文字コードとは異なる仕組みです。

文字コードは文字をバイト列として保存する方法であり、文字参照はHTMLの文法上、そのまま記述すると特別な意味を持つ文字などを表現する方法です。

UTF-8で保存していても、HTMLの文法と重なる記号には文字参照が必要になる場合があります。

ファイル名にも扱いやすい文字を使用する

UTF-8を利用すれば、日本語のファイル名を扱える環境も増えています。

しかし、Webサイトで使用するHTMLや画像のファイル名は、半角英数字を中心に付けると管理しやすくなります。

たとえば、会社案内ページであればcompany.html、文字コードの説明ページであればcharacter-encoding.htmlのような名前を付けられます。

ファイル名の文字コード問題やURLの扱いを単純にするためにも、分かりやすい半角英数字を使用する方法が一般的です。

多言語ページでもUTF-8を利用できる

UTF-8では、一つのHTMLファイル内に複数の言語を含められます。

たとえば、日本語の商品名に英語の説明を加えたり、中国語や韓国語の案内を同じページへ掲載したりできます。

ページ全体が日本語の場合は、html要素へlang="ja"を指定します。

文章の一部分だけが英語の場合は、その部分にlang="en"を指定する方法もあります。

UTF-8は文字を保存するための基盤ですが、多言語対応では、文章の言語、文字方向、フォント、レイアウトなども考慮する必要があります。

新しいWebページではUTF-8へ統一する

新しくHTMLファイルを作成するときは、特別な理由がなければUTF-8を選択します。

HTMLだけでなく、関連するファイルやシステムもUTF-8へそろえることで、文字化けの原因を減らせます。

文字コードは、Webページの見た目を大きく変える機能ではありません。そのため、HTML学習では目立たない存在に感じるかもしれません。

しかし、どれほど丁寧に文章を書いても、文字コードが一致していなければ、利用者へ正しい内容を届けられません。

HTMLの基本文書を作成するときは、head要素の先頭付近にmeta charset="UTF-8"を記述し、ファイルもUTF-8で保存する習慣を付けましょう。

文字コードを正しくそろえることは、日本語を正常に表示するためだけでなく、さまざまな言語や環境から利用できるWebページを作るための大切な土台になります。