HTMLのエンコードとは？初心者向けにわかりやすく解説

Webサイトを作っていると、「文字化けして読めない！」「日本語が???になってしまった…」というトラブルに出くわしたことはありませんか？

その原因の多くは エンコード（文字コード） にあります。エンコードは一見難しそうに思えますが、基本的な仕組みを理解すれば、文字化けの問題を簡単に解決できます。

この記事では、HTMLにおけるエンコードとは何か、なぜ正しく設定しないと文字化けするのか、HTMLでエンコードを指定する方法まで、初心者の方にもわかりやすく解説します。

エンコード（文字コード）とは？

エンコードの基本概念

エンコードとは何か

エンコード（文字コード） 文字（ひらがな・漢字・英語など）をコンピューターが理解できる数字のデータに変換する方式のことです。

身近な例で理解する

翻訳に例えると

日本語の「こんにちは」を英語で「Hello」と表現
同じ意味でも言語によって表現が違う
エンコードも同じで、同じ文字でも方式によって数字の表現が違う

暗号に例えると

「A=1、B=2、C=3」というルール
「HELLO」は「8-5-12-12-15」になる
エンコードも文字を数字に変換するルールのようなもの

コンピューターが文字を扱う仕組み

なぜ数字に変換する必要があるの？

コンピューターの特性

コンピューターは0と1の数字しか理解できない
文字を直接保存することはできない
数字に変換してから保存・送信・表示する

変換の流れ

文字を入力する
エンコード方式で数字に変換
数字として保存・送信
受信側で数字を文字に戻す
画面に文字として表示

具体的な変換例

「A」という文字の場合

ASCII：65（10進数）
UTF-8：65（10進数）
16進数では：0x41

「あ」という文字の場合

UTF-8：227 129 130（3バイト）
Shift-JIS：130 160（2バイト）
EUC-JP：164 162（2バイト）

エンコード方式の種類

主要なエンコード方式

ASCII（アスキー）

英語の文字と基本的な記号のみ
1文字1バイト
日本語は表現できない

Shift-JIS（シフトJIS）

日本で広く使われていた方式
日本語（ひらがな、カタカナ、漢字）を表現可能
Windowsで標準的に使用

UTF-8（ユーティーエフ8）

世界中の文字を表現可能
現在のWeb標準
1文字1〜4バイトの可変長

EUC-JP（Extended Unix Code for Japanese）

Unix系システムで使用
日本語を表現可能
現在はあまり使われない

各方式の特徴比較

対応文字数

ASCII：128文字（英数字・記号のみ）
Shift-JIS：約7,000文字（日本語中心）
UTF-8：100万文字以上（全世界の文字）

ファイルサイズ

英語のみ：ASCII = UTF-8 < Shift-JIS
日本語混在：Shift-JIS ≒ UTF-8
多言語：UTF-8が効率的

なぜ文字化けが起こるの？

文字化けの仕組み

エンコードの不一致

文字化けが起こる流れ

HTMLファイルをUTF-8で作成・保存
ブラウザがShift-JISと誤解釈
UTF-8の数字をShift-JISのルールで文字に変換
正しくない文字が表示される

具体的な例

「こんにちは」の場合

UTF-8での数字：227 129 147 227 130 147 227 129 171 227 129 161 227 129 175
Shift-JISで解釈：繧薙↓縺｡縺ｯ

このように、同じ数字でも解釈する方式が違うと、全く違う文字になってしまいます。

よくある文字化けパターン

文字化けの症状別原因

「???」や「□」が表示される

原因：文字が表示できない
対策：対応するフォントのインストール、エンコード設定の確認

「繧�縺�」のような文字が表示される

原因：UTF-8とShift-JISの不一致
対策：HTMLのmeta charsetの設定確認

「�」（黒いダイヤ）が表示される

原因：バイト列が不正
対策：ファイルの保存エンコードの確認

環境別の文字化け要因

ブラウザでの表示

HTMLのmeta charset設定なし
ファイルの保存エンコードとの不一致
サーバーのエンコード設定

メール送信時

送信者と受信者のエンコード設定の違い
メールサーバーの設定問題

データベース連携時

データベースのエンコード設定
プログラムでの文字コード変換漏れ

HTMLでエンコードを指定する方法

meta要素による指定

基本的な指定方法

HTML5での標準的な書き方

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプルページ</title>
</head>
<body>
  <p>こんにちは、世界！</p>
  <p>これでもう文字化けしません。</p>
</body>
</html>

meta charset の詳細

配置の重要性

<head>
  <!-- 最初の1024バイト以内に配置することが推奨 -->
  <meta charset="utf-8">
  <title>タイトル</title>
  <!-- 他のmeta要素やlinkは後に配置 -->
</head>

なぜ最初に配置するの？

ブラウザはHTMLを上から順番に読む
文字コードが分からないと正しく解釈できない
早めに指定することで確実な表示を保証

古いHTML4での書き方

HTML4/XHTML1.0での指定

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

HTML5との違い

HTML5：<meta charset="utf-8">（簡潔）
HTML4：より詳細な指定が必要
機能的には同じ効果

UTF-8が推奨される理由

技術的なメリット

国際化対応

世界中の文字を1つの方式で表現
日本語、英語、中国語、アラビア語など同時使用可能
絵文字（Emoji）も標準対応

Web標準への適合

HTML5の標準エンコード
HTTP/2、HTTP/3での推奨方式
RESTful APIでの標準

開発効率の向上

文字コード変換の手間が不要
多言語サイトでも統一した扱い
ライブラリやフレームワークでの標準サポート

業界での採用状況

主要プラットフォームでの採用

Google：検索エンジンもUTF-8推奨
GitHub：すべてのファイルがUTF-8
WordPress：標準でUTF-8を使用
Amazon AWS：UTF-8をデフォルトサポート

統計情報

Webサイトの90%以上がUTF-8を使用
新規Webサイトの99%がUTF-8を選択
モバイルアプリでもUTF-8が標準

ファイル保存時のエンコード設定

エディタでの保存設定

Visual Studio Code（VS Code）

エンコードの確認方法

ファイルを開く
画面右下のステータスバーを確認
「UTF-8」と表示されていればOK

エンコードの変更方法

画面右下の文字コード表示をクリック
「Save with Encoding」を選択
「UTF-8」を選択して保存

設定での自動化

{
  "files.encoding": "utf8",
  "files.autoGuessEncoding": false
}

その他のエディタ

Sublime Text

File → Save with Encoding → UTF-8

Atom

画面右下のエンコード表示をクリック
UTF-8を選択

メモ帳（Windows）

名前を付けて保存
「文字コード」でUTF-8を選択
「BOM付きUTF-8」ではなく「UTF-8」を選択

BOM（Byte Order Mark）について

BOMとは

ファイルの先頭に付く特殊なマーカー
エンコード方式を識別するためのもの
UTF-8では通常不要

BOMの問題

PHPなどで予期しない出力が発生
HTTPヘッダーに影響する可能性
HTML表示に支障をきたす場合

対策

「UTF-8（BOMなし）」で保存
多くのエディタでデフォルト設定

サーバー側での設定

Apache（.htaccess）

文字コードの指定

# HTTPヘッダーでUTF-8を指定
AddDefaultCharset UTF-8

# HTMLファイルのみUTF-8を指定
<Files *.html>
    AddCharset UTF-8 .html
</Files>

Nginx

設定ファイルでの指定

# nginx.confまたはサイト設定ファイル
charset utf-8;

# MIMEタイプと組み合わせ
location ~* \.(html|css|js)$ {
    charset utf-8;
}

Node.js/Express

レスポンスヘッダーの設定

app.use((req, res, next) => {
  res.charset = 'utf-8';
  next();
});

// 個別レスポンス
res.set('Content-Type', 'text/html; charset=utf-8');

実際のトラブルシューティング

よくある問題と解決法

問題1：日本語が文字化けする

症状

ã"ã‚"ã«ã¡ã¯ã€ä¸–ç•Œï¼

原因

HTMLはUTF-8で保存されている
ブラウザがISO-8859-1（Latin-1）として解釈

解決法

<meta charset="utf-8">

をheadの最初に追加

問題2：一部の文字だけ化ける

症状

こんにちは、�界！

原因

ファイル保存時のエンコードエラー
文字の一部が破損

解決法

ファイルを正しいエンコードで開き直す
破損した文字を修正
UTF-8で再保存

問題3：サーバーにアップロード後に文字化け

症状

ローカルでは正常
サーバーでは文字化け

原因

サーバーの文字コード設定
FTPクライアントの文字コード設定

解決法

FTPクライアントをUTF-8モードに設定
サーバーの.htaccessで文字コード指定
ホスティング会社に文字コード設定を確認

デバッグ方法

ブラウザの開発者ツール

文字コードの確認

F12で開発者ツールを開く
Networkタブでページをリロード
HTMLファイルをクリック
Responseヘッダーで「Content-Type」を確認

正常な例

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

コマンドラインでの確認

Linuxでの文字コード確認

file -i index.html
# 出力例：index.html: text/html; charset=utf-8

文字コード変換

# Shift-JISからUTF-8に変換
iconv -f SHIFT-JIS -t UTF-8 input.html > output.html

SEOとアクセシビリティへの影響

検索エンジンへの影響

Googleの推奨事項

文字コードの明示

meta charsetの指定は必須
UTF-8が強く推奨される
文字化けページは評価が下がる

クロール効率

正しいエンコードでクロール効率向上
文字化けページはインデックスされにくい

国際SEO

多言語サイト

UTF-8なら全言語を1つのエンコードで統一
言語別のエンコード設定が不要
管理コストの削減

アクセシビリティ

スクリーンリーダー対応

音声読み上げ

正しい文字コードで適切な読み上げ
文字化けは読み上げ不可能
ユーザビリティの大幅低下

多様なデバイス対応

モバイルデバイス

多種多様なブラウザとデバイス
UTF-8なら互換性が最も高い
古いデバイスでも安定表示

高度なエンコード設定

動的コンテンツでの設定

PHP

ヘッダー設定

<?php
header('Content-Type: text/html; charset=utf-8');
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHPページ</title>
</head>

mbstring設定

// 内部エンコードの設定
mb_internal_encoding("UTF-8");

// 出力エンコードの設定
mb_http_output("UTF-8");

JavaScript

文字列の扱い

// JavaScriptは内部的にUTF-16を使用
// UTF-8との変換は自動的に行われる

// 文字コード変換（TextEncoder/TextDecoder使用）
const encoder = new TextEncoder();
const decoder = new TextDecoder();

const utf8Bytes = encoder.encode('こんにちは');
const text = decoder.decode(utf8Bytes);

データベースとの連携

MySQL

データベース作成時

CREATE DATABASE mysite 
CHARACTER SET utf8mb4 
COLLATE utf8mb4_unicode_ci;

テーブル作成時

CREATE TABLE articles (
    id INT PRIMARY KEY,
    title VARCHAR(255) CHARACTER SET utf8mb4,
    content TEXT CHARACTER SET utf8mb4
);

接続時の設定

PHP（PDO）

$pdo = new PDO(
    'mysql:host=localhost;dbname=mysite;charset=utf8mb4',
    $username, 
    $password,
    [PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8mb4"]
);

まとめ

HTMLのエンコードは、文字化けを防ぎ、正しく表示するための重要な設定です。

エンコードの基本

文字を数字に変換する方式のこと
方式が違うと文字化けが発生
UTF-8が現在の標準

HTMLでの設定方法

<meta charset="utf-8"> をheadの最初に配置
ファイル保存時もUTF-8で保存
サーバー設定でも文字コードを指定

UTF-8を選ぶ理由

世界中の文字に対応
Web標準として広く採用
SEOやアクセシビリティに有利

トラブル対策

ブラウザの開発者ツールで確認
エディタのエンコード設定を確認
サーバー側の設定も忘れずに

エンコード（文字コード）とは？

エンコードの基本概念

エンコードとは何か

身近な例で理解する

コンピューターが文字を扱う仕組み

なぜ数字に変換する必要があるの？

具体的な変換例

エンコード方式の種類

主要なエンコード方式

各方式の特徴比較

なぜ文字化けが起こるの？

文字化けの仕組み

エンコードの不一致

具体的な例

よくある文字化けパターン

文字化けの症状別原因

環境別の文字化け要因

HTMLでエンコードを指定する方法

meta要素による指定

基本的な指定方法

meta charset の詳細

古いHTML4での書き方

UTF-8が推奨される理由

技術的なメリット

業界での採用状況

ファイル保存時のエンコード設定

エディタでの保存設定

Visual Studio Code（VS Code）

その他のエディタ

BOM（Byte Order Mark）について

サーバー側での設定

Apache（.htaccess）

Nginx

Node.js/Express

実際のトラブルシューティング

よくある問題と解決法

問題1：日本語が文字化けする

問題2：一部の文字だけ化ける

問題3：サーバーにアップロード後に文字化け

デバッグ方法

ブラウザの開発者ツール

コマンドラインでの確認

SEOとアクセシビリティへの影響

検索エンジンへの影響

Googleの推奨事項

国際SEO

アクセシビリティ

スクリーンリーダー対応

多様なデバイス対応

高度なエンコード設定

動的コンテンツでの設定

PHP

JavaScript

データベースとの連携

MySQL

接続時の設定

まとめ

Youtube

カテゴリー別人気記事

コメント