← カテゴリ一覧に戻る

文字コード指定

meta charset

<meta charset> はHTMLファイルの文字エンコーディングをブラウザに伝える。 現代のウェブ開発では UTF-8 を指定するのが標準。<head> の先頭に置くことが重要。

基本的なコード例

<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- 必ず <head> の先頭付近に配置する -->
  <meta charset="UTF-8">

  <title>ページタイトル</title>
</head>
<body>
  <p>日本語テキスト：こんにちは世界</p>
</body>
</html>

なぜ先頭に置く必要があるのか

ブラウザはHTMLを先頭から順番にパースする。 文字コードの指定が遅れると、その前のテキストが誤ったエンコーディングで解釈され、文字化けが発生する可能性がある。 特に <title> の前に置くことが仕様で推奨されている。

避ける（文字化けリスク）

<head>
  <title>日本語タイトル</title>
  <!-- ← title の後に charset を指定 -->
  <meta charset="UTF-8">
</head>

推奨（先頭に配置）

<head>
  <!-- charset を先頭に配置 -->
  <meta charset="UTF-8">
  <title>日本語タイトル</title>
</head>

UTF-8 が標準の理由

エンコーディング特徴現在の使用
UTF-8世界中のすべての文字を表現できる。ASCIIと互換性あり推奨・標準
Shift_JIS日本語に特化。古いシステムで使われていた非推奨・レガシー
EUC-JPUnixシステムで使われた日本語エンコーディング非推奨・レガシー

TipsHTTPヘッダーとの関係

サーバーが返す Content-Type HTTPヘッダーでも文字コードを指定できる。 HTTPヘッダーの指定がHTMLの meta charset より優先される。

# HTTPレスポンスヘッダー（サーバー側で設定）
Content-Type: text/html; charset=UTF-8

# HTMLのmeta charsetと両方指定するのが安全
# → HTTPヘッダーがない場合でもmeta charsetが機能する

注意ファイルの保存エンコーディングも合わせること

meta charset="UTF-8" を指定しても、 ファイル自体がShift_JISで保存されていると文字化けが起きる。 エディタでファイルを UTF-8（BOMなし）で保存することを確認すること。 VSCode・Cursor などのモダンエディタはデフォルトでUTF-8を使用する。

🤖 AIプロンプトテンプレート

以下について、AIへの質問プロンプト例を示します。

- `<meta charset="UTF-8">` の役割と、必ず `<head>` の先頭付近に置く理由を教えてください。
- UTF-8 以外のエンコーディング（Shift_JIS・EUC-JP）を今も使うべきでない理由は何ですか？
- サーバーの `Content-Type` ヘッダーと `meta charset` が競合した場合、どちらが優先されますか？
- ファイルを UTF-8 で保存しているかを確認・変換する方法を教えてください。
- BOM（Byte Order Mark）付き UTF-8 と BOMなし UTF-8 の違いと、HTML で推奨されるのはどちらですか？

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo