特殊記号や特殊文字をサイトで表示する方法
特殊記号や特殊文字、絵文字をサイトで利用するには、主に以下の4種類の方法があります。
- 文字としてそのまま貼り付ける
- 名前付き文字参照
- 16進数値文字参照
- 10進数値文字参照
Unicodeで扱うすべての文字には、コードポイントと呼ばれる4～6桁の番号が「U+16進数」の形式で割り当てられており、その数は15万以上にのぼりますが、そのまま「U+0260E」などと記載してもその文字は表示されません。
Unicode文字は Unicode Consortium によって定義されていますが、Web ページでの記載方法については WHATWG / W3C によって定義されているため、そちらの書き方に従う必要があります。
そのため、サイト上で特殊記号や特殊文字を表示させるには、「☎」などと文字としてそのまま記載するか、「&」で開始して「;」で終わる「☎」や「☎」、「☎」などの形式で記載する必要があります。
■例：コードポイント「U+0260E」
- 文字としてそのまま貼り付ける「☎」
- 名前付き文字参照「☎」
- 16進数値文字参照「☎」
- 10進数値文字参照「☎」
以前までは、Shift-JISで作成されているサイトも多く、そのまま貼り付けると文字化けするケースもありました。けれども、HTML5以降はUTF-8が標準となり、文字コードが原因による文字化けの懸念はなくなりましたので、基本的にはキー入力候補から文字として入力するか、コピペでそのまま貼り付けることをおすすめします。
文字としてそのまま貼り付ける（※UTF8の場合）
上記の4種類のうちで一番簡単なのは、特殊記号や特殊文字を通常の文字としてHTMLソースにそのまま貼り付ける方法です。
最新のHTML5では、UTF-8の文字コードが標準となっており、このUTF-8は「Unicode Transformation Format-8（Unicode変換フォーマット-8）」の略称で、Unicodeの文字を扱う仕組みの１つです。
そのため、Unicodeで定義されている膨大な特殊記号や特殊文字、絵文字をそのまま扱うことができ、編集画面にそのままコピペで貼り付けたり、キー入力の候補で入力して保存しても問題なく表示されます。
ちなみに、Windowsの標準機能では、キーボードの「Win + .（ピリオド）」で絵文字パネルが立ち上がり、そちらから選択して簡単に入力することができます。
このような方法で入力する場合は、文字としてそのまま貼り付ける形となります。
ただ、XHTMLなどの古いサイトでShift-JISなどの文字コードを使用している場合、そのままコピペで貼り付けて保存しても文字化けしてしまいます。その場合には、以下の「文字実体参照」や「数値文字参照」で記載する必要がありますが、最新のHTML5（UTF-8）でサイトを作成している場合には、そのままUnicode文字として貼り付けても問題ありません。
その場合でも、HTMLで使用する「<」、「>」、「&」の特殊記号については、名前付き文字参照などでエスケープして使用する必要があります。
名前付き文字参照で記載する方法
名前付き文字参照は、文字に割り当てられたUnicodeコードポイント（U+1F600など）ではなく、文字につけられた名前（copy,ltなど）で記載する方法です。
例えば、「<」と表示する場合、HTMLソースにはless thanの意味で付けられた「lt」の名前に、「&」と「;」を付与して「<」と記載します。
この「名前」と「文字」の対応表につきましては、Living Standardの公式サイトにて記載がされています。
ただ、よく使用する重要な文字しか名前は付けられておらず、その数はせいぜい2000程度のため、全ての文字に名前が付いているわけではありません。そのため、名前が付いていない場合には、文字としてそのまま記載するか、数値文字参照で記載する必要があります。
この名前付き文字参照については、古いHTML4やXHTMLのDTDバージョンで使用されていた文字実体参照と基本的には同じ記述方法になります。HTML5ではDTDによるentityの定義がなくなり、以前とは定義の仕組みが多少は異なってはいるものの、文字実体参照から名前付き文字参照に名称が変更されて整理されたもののため、記載方法に大きな違いはありません。
■その他：文字実体参照（※HTML5以外）
XHTMLなどの古いサイトでは、依然としてDTDのentity（実体）で定義された文字実体参照の扱いになり、厳密にいえば、名前付き文字参照とは定義方法が異なります。ただ、記述方法などの中身はほぼ変わりはなく、基本的な使い方は共通しているため、当サイトでは「文字実際参照」と「名前付き文字参照」はほぼ同様のものとして扱っています。
数値文字参照（16進数、10進数）で記載する方法
Unicodeではすべての文字に4～6桁の番号（コードポイント）が割り当てられており、その数は15万以上と膨大な数になります。この番号順で参照する方法は数値文字参照といわれており、2000程度しかない名前付きの文字とは違い、すべての文字を網羅しています。
この数値文字参照については、16進数と10進数の二通りの方法がありますが、コンピューターが分かりやすい16進数か、人間が分かりやすい10進数かの違いのため、結果として表示される文字はどちらの方法でも変わりはありません。
当サイトの特殊文字・特殊記号の一覧のページでは、16進数から10進数への変換、あるいは10進数から16進数への変換、コピペした絵文字から数値文字参照への変換などができますが、いずれの方法で記載しても同じ文字が表示されます。
■16進数値文字参照(&#x...;)
文字に番号を割り当てる際、コンピューターは「0」と「1」の２進数のため、16進数で表現するのが都合が良いです。「0～F」までの16進数となるため、これらの文字数字の組み合わせで表示します。
例えば、「1F600」番の文字の場合、数字の先頭に大文字か小文字の「x」を付け、さらに「&#」を付与して「;」で閉じ、「😀」などと記載します。一般的には4～6桁で記載するため、2桁の場合などは先頭を「0」で埋めて4桁にします。
■10進数値文字参照(&#...;)
人間が直感的に分かりやすいのは、10進数での数値文字参照になります。記載する方法は、単純に番号に「&#」を付けて「;」で閉じ、「😀」などと記載します。
ただ、HTMLのエスケープ文字などは上記の名前付き文字参照で記載するのが一般的ですし、絵文字などもそのままコピペで貼り付けるケースが多いため、この数値文字参照はそれほど使う機会はないかもしれません。
とはいえ、これら16進数や10進数など、数値文字参照の番号で指定した方が正確で間違いのない方法となります。
複合絵文字の結合による「ZWJ」と「国旗」の記載方法
絵文字には単一の絵文字だけでなく、複数の絵文字を組み合わせることで一つの絵文字として表示するものがあります。これには主に、「ZWJシーケンス」と「国旗」があります。
■ZWJシーケンス
ZWJシーケンスには、例えば、以下のような家族の絵文字が該当します。
👨👩👧👦
これは、以下の４つの絵文字を結合して作成されたものです。
U+1F468「👨」
U+1F469「👩」
U+1F467「👧」
U+1F466「👦」
その際、これら複数の絵文字を結合する「ZWJ」(Zero Width Joiner：U+200D)と呼ばれる文字幅がゼロの制御文字を使用し、以下のように間にスペースも何も入れずに連続して記載します。
👨‍👩‍👧‍👦「」
つまり、ZWJの‍を接着剤にして、複数の絵文字を連結させていくイメージです。
この家族の絵文字については、Unicodeが定義した特定の並び順の時にだけ合成されるため、定義されていない順序の場合にはバラバラに表示されます。
これはZWJシーケンスと呼ばれていますが、「文字幅ゼロの制御文字であるZWJを含む、Unicode が絵文字として扱うことを意図して定義したコードポイントの並び」の意味になります。このZWJシーケンスには、家族のほか、👨⚕「職業」などもあります。
■国旗
国旗についても、複数の絵文字が組み合わさったものですが、こちらについてはZWJは使用されず、RIS（Regional Indicator Symbols）を二つ並べて記載します。ZWJシーケンスは複数の組み合わせが可能なものの、国旗については必ず２つだけ並べるという点で違いがあります。
例えば、日本の国旗は以下のようになります。
🇯🇵「🇯🇵」
U+1F1EF「🇯」
U+1F1F5「🇵」
これだけ見ると、ただのアルファベットのようにも見えますが、国旗専用のため、通常のアルファベットのJPなどと記載しても国旗は表示されません。国旗を表示するには、RISの文字を二つ使用する必要があります。
自分の環境の場合、iPhoneでは国旗として表示されるものの、パソコンで閲覧しても単に「JP」とだけ表示されるため、環境によってはうまく表示されないこともあるかもしれません。
そのほか、地域旗のタグ付き絵文字などもありますが、こちらはほぼ廃止される方向のため、ここでは省略します。