HTML
HTML character encoding is the mechanism by which the browser is informed of the rules (character codes) that convert text into numeric values, ensuring that characters are correctly displayed on a webpage.
文字エンコーディング
文字エンコーディングとは？
文字エンコーディングの概要
コンピューターは内部的に文字を数値として扱います。私たちが普段使う「文字」は、コンピューター上で「文字コード」という形で識別されます。たとえば「A」は 65、「あ」は特定の値…というように、文字ごとに対応する数値が割り当てられているわけです。
文字エンコーディング（文字コード化方式）とは、文字と数値をどのように対応づけるかを定義した仕組みのことです。Webページを正しく表示するには、送信側（サーバーやHTMLファイル）と受信側（ブラウザ）が同じ文字エンコーディングを使用し、共通のルールで文字と数値をやり取りする必要があります。
なぜ文字エンコーディングが重要か
文字化けの防止
誤ったエンコーディングを使うと「�」や「????」などの文字化けが発生します。
国際化対応
インターネットは世界中で利用されるため、多言語の文字を扱う機会が増えています。
SEO・ユーザビリティ
正しくエンコーディングされたページは、検索エンジンやブラウザに適切に認識され、ユーザーも快適に利用できます。
主な文字エンコーディングの種類
ASCII
ASCII（American Standard Code for Information Interchange）は、英語アルファベットや数字、記号のみをカバーする7ビットコードです。0～127の数値で表され、歴史的にも最も基本的な文字コード体系です。
現在はより多くの文字を扱うため、ASCIIを拡張したエンコーディングが数多く存在します。
ISO-8859 系 (Latin-1など)
主に欧文の言語に対応した拡張コードです。ヨーロッパの言語を中心にカバーしていますが、日本語などの多バイト文字には対応していないため、日本語サイトではあまり使われません。
Shift_JIS
日本国内で長年広く使われてきた文字エンコーディングです。Windows環境やメールソフトで採用されてきた歴史があります。
ただし、文字数の拡張や特殊文字の扱いなどの複雑さもあり、Unicode（特にUTF-8）の利用が増えた現在では新規プロジェクトでの採用は減少しています。
EUC-JP
かつてUNIX系システムでよく使われていた日本語エンコーディングです。
Shift_JISと同様、レガシーなシステムや一部の古いWebサイトで利用されるケースがありますが、UTF-8への移行が進んでいます。
Unicode
Unicodeとは
全世界の文字を統一的に扱う目的で作られた文字コード体系。あらゆる言語の文字を、できるだけ網羅的に1つのコード体系で扱えるように設計されています。
Unicode自体は概念上のコードポイントの集合であり、実際のファイルに保存するときにエンコーディング方式（UTF-8、UTF-16、UTF-32など）を選びます。
UTF-8
最も広く使われているUnicodeのエンコーディング方式。ASCII文字は1バイトのまま（ASCIIの値をそのまま利用）で表現され、多言語文字は複数バイト（最大4バイト）で表現します。
Webサイトやメール、アプリケーションなど多くの分野で標準的に使われるようになりました。
メリット : 1) ASCII互換がある、2) 世界中の文字を1つのフォーマットで扱える、3) 多くのツールや環境がサポートしている
注意点 : 一部の古い環境ではShift_JISなどが前提になっている場合があるため、混在しないように注意が必要
HTMLでの文字エンコーディング指定方法
<meta charset="UTF-8"> の利用HTML5 では、ページのエンコーディングを指定する最も簡単な方法が以下の一行です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
</head>
<body>
<p>こんにちは</p>
</body>
</html>
<meta charset="UTF-8"> と書くだけでUTF-8がブラウザに伝えられます。旧来のHTML4などでは <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> のような書き方をする場合もありますが、HTML5ではよりシンプルになりました。
HTTPヘッダで指定する方法
サーバーの設定（たとえばApacheの.htaccessやNGINXの設定ファイルなど）で、HTTPレスポンスヘッダに Content-Type: text/html; charset=UTF-8 を設定することもできます。
ブラウザは通常、HTTPヘッダで指定されているエンコーディングを最優先します。そのため、サーバー側から正しく指定しておくことも重要です。
BOM（Byte Order Mark）の扱い
UTF-8にはBOM（バイトオーダーマーク）と呼ばれる特別なバイト列を先頭に付与する場合があります。
一部のエディタはUTF-8で保存する際にBOMを付与する設定がデフォルトの場合があるため、ファイルによってはBOMつきのUTF-8（UTF-8 with BOM）になることがあります。
HTMLやCSS、JavaScriptなどのファイルでBOMがあると誤動作するケースも一部存在するため、必要に応じてBOMなしのUTF-8で保存することが推奨されます。
文字化けを防ぐための注意点
フォームやデータベースとの連携
Webフォームで文字を入力し、それをサーバーサイドで処理する場合、送信・受信ともにUTF-8で統一することが望ましいです。
たとえばPHPであれば mb_internal_encoding("UTF-8"); の設定や、HTMLの <meta charset="UTF-8"> が一致していることなどを確認しましょう。
データベース（MySQLやPostgreSQLなど）でも、テーブルやカラムをUTF-8（MySQLの場合はutf8mb4推奨）に設定することで、文字化けを減らせます。
テキストエディタの設定
文字コードを扱うテキストエディタを使ってファイルを編集するときには、常にエンコーディング設定を確認してください。
Visual Studio Code など、多くのエディタではエンコーディングを明示的に変更でき、BOMの有無も設定できます。
プロジェクト単位でUTF-8に統一するなど、チーム内のルールを決めておくと混乱が減ります。
サーバー・ブラウザ側の自動判別
サーバー設定において、AddDefaultCharset などの指示子を使ってデフォルトの文字コードを指定している場合があります。
ブラウザには過去の互換性のために、HTMLで明示されていない場合に自動判別を行う機能があります。しかし自動判別は誤判定を引き起こす可能性が高いので、必ず明示的に指定することが望ましいです。
HTMLエンティティ・数値文字参照
HTMLエンティティとは
HTMLエンティティは、特殊文字や一部の記号などを安全に表示するために用いる文字参照です。
例: （ノーブレークスペース）、<（<）、>（>）、&（&）、©（©）など。
UTF-8であれば多くの文字は直接打ち込んでも問題ないですが、ソースコード内で誤解を招く可能性がある場合や、ブラウザへの安全性を高めるためにエンティティを使うことがあります。
数値文字参照（&#xHH; / &#NN;）
特殊文字を16進数（&#x...;）または10進数（&#...;）で指定する方法です。
たとえば あ は「あ」を表します。これはUnicodeのコードポイント 3042 (16進) を表しています。
文字化け対策として使われる場合もありますが、現在はUTF-8で直接文字を入れるケースが一般的になっています。
Unicodeに関連する上級知識
正規化（Normalization）
Unicodeでは同じ見た目の文字が複数のコードポイントで表現される場合があります。代表的なのは「結合文字」の扱いです。
例: “é” は「e + アクセント」の2文字の組み合わせでも表現可能、また別に1文字の「é」もあります。
これらを同一と見なすための仕組みがUnicode正規化（NFC、NFDなど）です。
特殊文字の整合性を保ちたい場合、システム内部でNFCを統一使用するなどの運用ルールを設定することが多いです。
半角・全角など日本語独特の問題
日本語には半角カナ・全角カナ、全角アルファベットなど、多くのバリエーションが存在します。
ユーザー入力を想定するフォームなどでは、意図しない全角文字が混在しても問題がないかを確認し、必要に応じて正規化処理を施す（半角へ変換する、全角へ統一するなど）ことが望ましいです。
文字エンコーディングの移行（Shift_JIS から UTF-8 へ）
移行のメリット
文字化けのリスク低減
他言語対応・グローバル対応の容易化
新しいツールやライブラリの互換性が高い
移行時の手順例
１．バックアップ
既存ファイル、データベースのバックアップを取得。
２．テスト環境での変換
テキストエディタやコマンドラインツール（iconvなど）を使い、ファイルをUTF-8に変換。
３．ヘッダやメタタグの修正
<meta charset="UTF-8"> に変更し、サーバーのHTTPヘッダ設定も合わせる。４．データベースの文字コード変更
必要に応じてテーブルやカラムをUTF-8(utf8mb4)に変更。
５．テスト＆デバッグ
ページが正しく表示されるか、フォーム入力やDB連携が問題ないか確認。
６．本番反映
テスト環境で問題がなければ、本番環境に反映し最終確認。
文字エンコーディングのデバッグ方法
ブラウザのデベロッパーツール
ChromeやFirefoxの検証ツール（F12キーなど）で、実際に受信しているHTTPヘッダを確認できます。Content-Type: text/html; charset=UTF-8 が含まれているかどうかをチェックします。
テキストエディタでファイルのエンコーディングを確認
エディタ上で、現在のファイルのエンコーディングがどうなっているかを把握し、必要に応じて変更します。BOMの有無も確認します。
サーバー設定のチェック
Apacheの場合
.htaccess に AddDefaultCharset UTF-8 や AddType 'text/html; charset=UTF-8' html があるかどうか
NGINXの場合
charset utf-8; が設定されているかどうかPHPの場合
default_charset が UTF-8 になっているか（php.ini など）
実際に文字化けする部分をHTMLエンティティなどで表示してみる
<div>あ</div> のように手動でコードポイントを指定し、正しく表示されるかテストすると、エンコーディングの問題か文字自体の問題かを切り分けられます。
SEOやパフォーマンス面での考慮
SEOと文字エンコーディング
Googleなどの検索エンジンはUTF-8を推奨しています。
UTF-8以外のエンコーディングを使用した場合、クローラーが異なる推測をする可能性があります。日本語サイトでもUTF-8にしておくのが無難です。
パフォーマンスの違い
UTF-8は文字コードの可変長方式のため、ASCII範囲外の文字（日本語など）は1文字あたり2～4バイトを使用します。
ただし、現代のネットワークやブラウザの処理速度を考えると、Shift_JISなどと比較しても大きなパフォーマンス差はほぼありません。むしろ世界中の開発者コミュニティがUTF-8を標準とみなしているため、トラブルが少なく開発効率が高いというメリットの方が大きいです。
まとめ
Webページの文字エンコーディングは、ページを正しく表示し、多言語対応や検索エンジンへの適切な認識を行う上で極めて重要です。
HTML5では <meta charset="UTF-8"> を使うことで簡単にUTF-8を指定できますが、サーバー設定・テキストエディタ・データベースなど、あらゆる関連システムで整合性をとる必要があります。
Shift_JISやEUC-JPなどのレガシーコードを使う環境では、可能な限り早めにUTF-8への移行を検討すると、国際化や文字化け防止に大きく寄与します。
文字化けに悩んだ場合は、ブラウザの開発者ツールでHTTPレスポンスヘッダを確認したり、テキストエディタやサーバー設定を見直したりすることで原因究明が進むでしょう。
以上が、HTMLの文字エンコーディングに関する基礎から応用までをカバーした解説となります。文字エンコーディングを正しく理解し、適切に運用することで、Webサイトの信頼性や使いやすさが向上します。
Home HTML (HyperText Markup Language) ウェブページの基本的な構造を作成します。見出し、段落、リンク、画像などの要素を定義します。
<!DOCTYPE> 書かれた HTML文書が、どのバージョンで書かれたものかを宣言します。（文書型宣言）
body 要素 ドキュメントの本文
head 要素 ドキュメントのメタデータを格納します。
html 要素 Webページのルート要素であり、全ての要素を囲む親要素です。
meta 要素 その文書に関する情報（メタデータ）を指定する際に使用します。
p 要素 段落を表す。
title 要素 ドキュメントのタイトル
CSS (Cascading Style Sheets) ウェブページのデザインやレイアウトを設定します。色、フォント、レイアウトなどのスタイルを指定します。
JavaScript ウェブページにインタラクティブな動作を追加します。フォームの検証、アニメーション、リアルタイムのデータ処理などを行います。
PHP (Hypertext Preprocessor) サーバー上で動作してデータベースと連携し、動的なWebページを簡単に作成できるスクリプト言語です。