HTMLの絵文字 文字コード表

絵文字の書き方

HTMLで「😀」「👍」のような絵文字を表示したい場合は、記号・特殊文字と同じように「数値文字参照」を使います。

絵文字の入力で使用する「数値文字参照」はUnicodeで定められた16進数、または10進数の値を以下のフォーマットで指定して表示させます。

数値文字参照 (10進数)の書き方

10進数のフォーマットで絵文字のコードを書くときは「&#」と「;」で囲みます。

文字実体参照(10進数)の入力例

😀 // => 😀
👍 // => 👍

数値文字参照 (16進数)の書き方

16進数のフォーマットで絵文字のコードを書くときは「&#x」と「;」で囲みます。
コードの前に「x」が付きます。

文字実体参照(16進数)の入力例

😀 // => 😀
👍 // => 👍

絵文字を使う際はいくつか注意点があります。
まず前提として、絵文字は表示する場所によって同じ絵文字が表示されるわけではありません。
MacやiOS（iPhoneやiPad）と、各種SNSで同じ絵文字の表示の違いを比較してみると以下のように異なる表示を確認することができます。

また、比較的新しい絵文字については表示するOS（オペレーティングシステム）やSNSによって対応しておらず非表示になってしまうこともあるため注意してください。

以降は各絵文字の意味と、Unicodeで定められた10進数／16進数それぞれのコードを一覧にした表です。🐻‍❄️

2つ以上の絵文字を組み合わせた書き方

絵文字は単体のみでなく、2つ以上の絵文字を組み合わせて表示できるものがあります。
例えば肌の色、髪型、性別、動物の色のパターンなどがあります。

肌の色

絵文字には肌の色を表した絵文字が用意されています。

他の絵文字と肌の色を組み合わせて書くことで、以下のようなカラーパターンで絵文字を表示できるようになります。
以下の例では16進数を使っていますが、10進数でも同じ方法で組み合わせ可能です。

肌の色の組み合わせ

// 単体の絵文字
👍 // => 👍
👶 // => 👶

// 組み合わせ
👍🏻 // => 👍🏻
👍🏼 // => 👍🏼
👍🏽 // => 👍🏽
👍🏾 // => 👍🏾
👍🏿 // => 👍🏿

👶🏻 // => 👶🏻
👶🏼 // => 👶🏼
👶🏽 // => 👶🏽
👶🏾 // => 👶🏾
👶🏿 // => 👶🏿

髪型

肌の色と同様に、髪型を表した絵文字が用意されています。

髪型については単純に2つの絵文字を続けて書くだけではなく、2つの絵文字の間に「ゼロ幅接合子」という「‍」を挟む必要があります。
形式的には3つの絵文字を続けて書くイメージです。

肌の色の組み合わせ

// 単体の絵文字
👨 // => 👨
👩 // => 👩

// 組み合わせ
👍‍🦰 // => 👨‍🦰
👍‍🦱 // => 👨‍🦱
👍‍🦲 // => 👨‍🦲
👍‍🦳 // => 👨‍🦳

👶‍🦰 // => 👩‍🦰
👶‍🦱 // => 👩‍🦱
👶‍🦲 // => 👩‍🦲
👶‍🦳 // => 👩‍🦳

// 組み合わせ（肌の色 + 髪型）
👨🏻‍🦰 // => 👨🏻‍🦰
👨🏼‍🦱 // => 👨🏼‍🦱
👨🏽‍🦲 // => 👨🏽‍🦲
👨🏾‍🦳 // => 👨🏾‍🦳

職業

職業は大人、男性、女性の性別による3パターンがありますが、職業によって組み合わせ方が異なります。
また、職業についてもカラーパターンを指定することが可能です。

職業の一部を使って、性別やカラーパターンの組み合わせ方を紹介します。

肌の色の組み合わせ

// 単体の絵文字
👨 // => 👨
👩 // => 👩

// 警察（👮 + ♂/♀）
👮‍🦲 // => 👮（警察 大人）
👮‍♂ // => 👮‍♂（警察 男性）
👮‍♀ // => 👮‍♀（警察 女性）

// 探偵（🕵 + ♂/♀）
🕵 // => 🕵（探偵 大人）
🕵‍♂ // => 🕵‍♂（探偵 男性）
🕵‍♀ // => 🕵‍♀（探偵 女性）

// 教師（🧑/👨/👩 + 🏫）
🧑‍🏫 // => 🧑‍🏫（教師 大人）
👨‍🏫 // => 👨‍🏫（教師 男性）
👩‍🏫 // => 👩‍🏫（教師 女性）

// 教師 女性のカラーパターン
👩&#x1F3FB‍🏫 // => 👩🏻‍🏫
👩&#x1F3FC‍🏫 // => 👩🏼‍🏫
👩&#x1F3FD‍🏫 // => 👩🏽‍🏫
👩&#x1F3FE‍🏫 // => 👩🏾‍🏫
👩&#x1F3FF‍🏫 // => 👩🏿‍🏫

ここで紹介した以外に、一部の動物もネコ 🐈 と黒猫 🐈‍⬛ のような色違いのパターンが用意されていることがあります。

絵文字が絵文字として表示されないときの対処法

絵文字の文字コードを記述したにも関わらず、表示する絵文字によっては絵文字ではなく通常のモノクロの記号として表示されてしまうことがあります。

これは絵文字が表示できないフォントの種類を使っている場合に起こります。
そのため、CSSのfont-familyプロパティで絵文字に対応したフォントを指定することで解決することができます。

以下のCSSではp要素の中にspan要素で囲んだ絵文字があることを想定してfont-familyプロパティを指定しています。

style.css

p span {
	font-family: apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui symbol;
}

スマイリーと人々 コード表

動物と自然 コード表

食べ物と飲み物 コード表

活動 コード表

旅行と場所 コード表

物 コード表

記号 コード表