charsetとUnicodeの処理：特殊文字
UTF-8とHTMLエンティティであらゆる文字を正しく表示します
「charsetとUnicodeの処理：特殊文字」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
charset宣言
すべてのHTML文書では、文字エンコーディングを宣言する必要があります。標準はUTF-8で、<head>の最初の要素として<meta charset="utf-8">を記述します。これがないとブラウザーが推測することになり、ASCII以外のテキストでは誤判定が起こりやすくなります。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page</title>なぜUTF-8なのか
UTF-8は、あらゆるUnicode文字、つまりすべての文字体系、絵文字、記号をエンコードできます。ASCIIと後方互換性があり（a-zや0-9は1バイトのままです）、現代のWebで最も広く使われているエンコーディングです。2024年時点では、ページの98%以上がUTF-8です。
配置が重要な理由
charsetのmetaタグは、文書の最初の1024バイト以内、通常は<head>の最初の行に記述する必要があります。ブラウザーはそのバイト列からエンコーディングを推測するため、charsetを後から宣言しても推測結果に影響しない場合があります。
ファイルをUTF-8で保存する
metaタグはエンコーディングを宣言するだけであり、エディターが実際にそのエンコーディングでファイルを保存する必要があります。VS Code、IntelliJ、Sublimeは、いずれも最近のバージョンではUTF-8がデフォルトです。Windows-1252やISO-8859-1で保存されたファイルは、正しいmetaタグがあっても文字化けを引き起こします。
HTMLエンティティ
特殊なHTML文字（<、>、&、"）は、パーサーの混乱を防ぐためにエスケープする必要があります。<には<、>には>、&には&、"には"を使用します。属性値内では、値を二重引用符で囲む場合に"が必須です。
数値文字参照
任意のUnicode文字は、そのコードポイントで参照できます。雪だるま（☃）には☃または☃を使用できます。文字を直接入力するのが難しい場合（まれな記号や制御文字など）に便利ですが、エディターが対応しているならリテラルのUnicode文字を優先してください。
絵文字とサロゲートペア
絵文字はU+FFFFを超えるUnicode文字であり、UTF-16（JavaScriptの文字列内部で使われるエンコーディング）ではサロゲートペアとして表現されます。UTF-8では4バイトのシーケンスとしてエンコードされます。charset="utf-8"を設定すれば、絵文字はエンティティを使わずそのまま表示されます。
よくあるエンコーディングのバグ
"Don't"が"Donât"として表示される場合、ファイルはUTF-8で保存されているのにLatin-1として解釈されています。ファイルをUTF-8で保存し、<meta charset="utf-8">が存在することを確認して修正します。モダンブラウザーがUTF-8をデフォルトにするのは、metaタグがない場合で、かつファイルがUTF-8らしいと判断できる場合だけです。
HTTP Content-Typeヘッダー
サーバーは、レスポンスヘッダーでエンコーディングを宣言することもできます：Content-Type: text/html; charset=utf-8。ヘッダーはmetaタグより優先されるため、正しく記述されたHTMLでも、サーバーの設定が誤っているとエンコーディングのバグが発生することがあります。
フォームの扱い
フォームは、デフォルトではページのエンコーディングを使用して送信されます。UTF-8のページではフォームデータもUTF-8で送信されるため、サーバー側でもUTF-8としてデコードする必要があります。ページのエンコーディングとサーバーのデコード設定の不一致は、多言語サイトでユーザー入力が文字化けする一般的な原因です。
BOMを避ける
UTF-8ファイルの先頭には、バイト順マーク（BOM、0xEF 0xBB 0xBF）が付くことがあります。ほとんどのブラウザーは許容しますが、一部のツールやCDNは対応しておらず、エディターによってはBOMが表示可能な文字として現れることもあります。予期しない問題を避けるため、ファイルは"UTF-8 without BOM"として保存してください。
理解度チェック
HTML文書の最初の1024バイト以内にを記述しなければならないのはなぜですか？
まとめ
<head>の最初の子要素として<meta charset="utf-8">を宣言し、ファイルをUTF-8で保存します。UTF-8は、絵文字やすべての文字体系を含むあらゆるUnicode文字をエンコードします。<、>、&、"はエンティティとしてエスケープし、まれな文字には数値参照を使用します。HTTPのContent-Typeによってmetaタグが上書きされることや、一部のツールでBOMが表示可能な文字として現れることにも注意してください。
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 40
- レッスン
- 159
よくある質問
「charsetとUnicodeの処理：特殊文字」レッスンは無料ですか？
はい。「charsetとUnicodeの処理：特殊文字」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「charsetとUnicodeの処理：特殊文字」で何を学びますか？
UTF-8とHTMLエンティティであらゆる文字を正しく表示します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「charsetとUnicodeの処理：特殊文字」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- lang属性とスクリーンリーダー
- 右から左へ書くテキストのdir=rtl
- bdi要素とbdo要素
- charsetとUnicodeの処理：特殊文字