HTML - 字符コードのエンコーディング

ウェブ開発志望者各位、こんにちは!今日は、HTMLにおける字符コードのエンコーディングという魅力的な世界に飛び込みます。あなたの近所の親切なコンピュータの先生として、私は明確な説明、豊富な例、そして少しのユーモアを交えて、この旅を案内します。では、仮想のメモ pads を握りしめ、始めましょう!

HTML - Character Encodings

HTML Charset 属性

さまざまな字符集合に踏み込む前に、まず网页にどのエンコーディングを使用するか伝える方法について話しましょう。ここで HTML charset 属性が登場します。

charset 属性は通常、HTML ドキュメントの <head> セクション内の <meta> タグに配置されます。以下はその例です:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>私の素晴らしいウェブページ</title>
</head>
<body>
<h1>私のウェブサイトへようこそ!</h1>
</body>
</html>

この例では、ブラウザに UTF-8 エンコーディングを使用するように指示しています(その詳細は後で説明します)。これを、网页が正しくテキストを読むための特別なメガネと考えてください。

ASCII 字符集合

さて、字符集合の旅を始めましょう。まずは ASCII、すべての祖父母的存在であるものから始めます。ASCII は「アメリカ標準情報交換符号」の略で、字符エンコーディングの Model T です – 古いですが、基盤的です。

ASCII は 7 ビットを使用して 128 字符を表現します。これには以下が含まれます:

  • 大文字(A-Z)
  • 小文字(a-z)
  • 数字(0-9)
  • 基本的な句読点

以下は ASCII 字符のみを使用したシンプルな HTML 例です:

<p>Hello, World! 123</p>

この行は ASCII エンコーディングを使用して完全に表示されます。なぜなら、基本的なラテン文字と数字のみを含んでいるからです。

ANSI 字符集合

ANSI(アメリカ国立標準協会)字符集合は、ASCII のもっとクールで多様ないとこのような存在です。ANSI は ASCII を拡張して 8 ビットを使用し、256 字符を許可します。この余分なスペースは、さまざまな言語に特化した字符に使用されます。

しかし、ANSI は単一の標準ではありません – コンピュータの言語設定に依存します。これがおかしな状況を招くことがあります。ANSI で愛の手紙を送信し、あなたの恋人のコンピュータが異なる ANSI コードページを使用しているために、それがごちゃごちゃに表示されることを想象してください!

ISO-8859-1 字符集合

ISO-8859-1、または Latin-1 は、字符集合のヨーロッパのガイドのような存在です。これは、西欧言語に使用される字符を含む 8 ビットのエンコーディングです。

以下は、ASCII を超えた字符を使用した例です:

<p>Café Français</p>

ISO-8859-1 エンコーディングを使用している場合、これはアキュートマークを含めて正しく表示されます。しかし、異なるエンコーディングを使用している場合、代わりに "Café Français" となってしまうかもしれません!

UTF-8 字符集合

さて、字符エンコーディングのスーパーヒーロー、UTF-8 に進みましょう。これは字符集合のスイスアーミー knives で、考えうるほぼすべての字符をエンコードすることができます。

UTF-8 は可変長のバイトを使用して字符を表現します。これは、シンプルな ASCII 字符(1 バイトで)と他の書記系の複雑な字符(複数のバイトで)を効率的に処理できることを意味します。

以下は UTF-8 の多様性を示す例です:

<p>Hello, नमस्ते, こんにちは, مرحبا</p>

UTF-8 エンコーディングを使用すると、この行は英語、ヒンディー語、日本語、アラビア語で正しく表示されます!

ISO 字符集合

ISO はさまざまな言語グループに対して異なる字符集合を開発しています。これらは特定地域向けの特化したツールキットと考えてください。以下は一般的な ISO 字符集合の表です:

字符集合 説明
ISO-8859-1 西欧言語
ISO-8859-2 中央および東欧言語
ISO-8859-3 南欧言語
ISO-8859-4 北欧言語
ISO-8859-5 キリル文字
ISO-8859-6 アラビア語
ISO-8859-7 ギリシャ語
ISO-8859-8 ヘブライ語

UTF 字符集合

UTF(ユニコード変換フォーマット)は字符エンコーディングの現代の解決策です。これは字符集合の国際連合で、世界中のすべての書記系の字符を集めています。

UTF には主に 3 つのエンコーディングがあります:

  1. UTF-8:可変幅エンコーディング、ASCII と後方互換性があります。
  2. UTF-16:最も一般的な字符には 16 ビットを使用し、他の字符にはもっと使用します。
  3. UTF-32:すべての字符に 32 ビットを使用します。

以下は比較表です:

エンコーディング 特性 最適な用途
UTF-8 可変幅(1-4 バイト) ウェブページ、ASCII 対応コンテキスト
UTF-16 可変幅(2 または 4 バイト) オペレーティングシステム、Java
UTF-32 固定幅(4 バイト) 字符への迅速なアクセスが重要な状況

私の教師としての経験では、UTF-8 が最も一般的に使用され、ウェブ開発に推奨されています。字符エンコーディングの「一つの指輪」のように、すべてを統括しています。

最後に、UTF-8 を HTML でどのように使用するかの実用的な例を見てみましょう:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多言語の挨拶</title>
</head>
<body>
<h1>私たちの国際的なページへようこそ!</h1>
<p>英語: Hello</p>
<p>スペイン語: Hola</p>
<p>フランス語: Bonjour</p>
<p>ドイツ語: Guten Tag</p>
<p>ロシア語: Здравствуйте</p>
<p>中国語: 你好</p>
<p>日本語: こんにちは</p>
<p>アラビア語: مرحبا</p>
</body>
</html>

このページは UTF-8 エンコーディングを使用して、複数の言語で挨拶を正しく表示します。

覚えておいてください、適切な字符エンコーディングを選ぶことは、旅のために適切な靴を選ぶのと同じです。UTF-8 は、どこにでも行ける快適なスニーカーのような存在で、他のエンコーディングは特定の地形に特化しているかもしれません。

このレッスンを終えるにあたり、HTML における字符エンコーディングについてしっかりと理解が深まったことを願っています。続けて練習し、好奇心を持ち、さまざまな字符集合を試してみてください。ハッピーコーディング!

Credits: Image by storyset