HTMLでの絵文字の入れ方！Unicodeと文字コード一覧も紹介

Webサイトやブログの記事に絵文字を加えるだけで、コンテンツはより魅力的で、親しみやすい印象になります。

HTMLに絵文字を挿入する方法はいくつかありますが、その背景にある「Unicode」と「文字コード」の仕組みを理解することが、文字化けを防ぎ、正しく表示させるための鍵となります。

そこでこの記事では、絵文字とUnicodeの関係性から、HTMLに絵文字を挿入するための具体的な方法、そして代表的な絵文字のUnicode一覧まで幅広く解説していきます。

【著者プロフィール＆本記事の信頼性】

著者は元エンジニア
大手プログラミングスクールのWebディレクター兼ライターを経験
自らも地元密着型のプログラミングスクールを運営

⇒プロフィール詳細はコチラ

日本最大級の比較サイトで「4年連続人気NO.1」！
SNSでの評判の良さも圧倒的なプログラミングスクール『RUNTEQ（ランテック）』！

【RUNTEQの特徴】
✅受講生からの評判が驚くほど良い
✅学習はハードだが未経験とは思えないほど高いスキルが身に付く
✅挫折させない万全なサポート体制が用意されている
✅採用面接で担当者に刺さるレベルの高い「ポートフォリオ」を作成できる
✅給付金を使えば実質約13万円という格安料金で受講できる

当ブログ著者

忖度一切なしで、未経験から本気で
エンジニア転職を目指すならRUNTEQ一択です。

＼勧誘行為は一切なし！　相談だけでもOK！／

無料カウンセリング予約はこちら
≪RUNTEQ公式サイト≫

絵文字の正体はUnicode
最重要！文字化けを防ぐmetaタグの設定
HTMLで絵文字を入れる方法①：直接コピー＆ペーストで入れる
HTMLで絵文字を入れる方法②：文字参照（数値文字参照）で入れる
1. サンプルコード
2. ソースコードの解説
HTMLで絵文字を入れる方法③：CSSを使って装飾として入れる
1. サンプルコード
2. ソースコードの解説
よく使う絵文字のUnicodeコードポイント一覧
絵文字を使う際の注意点
初心者がHTMLでの絵文字の入れ方などを効率的に学ぶには

絵文字の正体はUnicode

私たちが普段使っている絵文字は、実は一つ一つが「Unicode」という世界共通の文字コード規格によって定義されています。

Unicodeは、世界中のあらゆる言語の文字や記号に、重複しないようにユニークな番号（コードポイント）を割り当てたものです。

絵文字もその中に含まれており、「😀」という絵文字にはU+1F600というように、固有の番号が与えられています。

つまり、HTMLで絵文字を表示するということは、このUnicodeで定義された番号に対応する文字を描画している、ということなのです。

この仕組みを理解することが、文字化け問題を解決する第一歩となります。

最重要！文字化けを防ぐmetaタグの設定

絵文字を正しく表示させるために、何よりも先に設定すべき最も重要な項目が「文字エンコーディング」の指定です。

HTMLファイルの<head>タグ内に、以下の1行を必ず記述してください。

<meta charset="UTF-8">

これは、このHTMLファイルが「UTF-8」という文字エンコーディング（符号化方式）で書かれていることをブラウザに伝えるための宣言です。

UTF-8は、Unicodeに定められたすべての文字（絵文字を含む）を表現できる、現在最も標準的なエンコーディング方式です。

この記述がないと、ブラウザがShift_JISなど別のエンコーディングと誤認し、絵文字のコードポイントを正しく解釈できずに文字化け（「□」や意味不明な記号で表示される）を引き起こします。

HTMLで絵文字を入れる方法①：直接コピー＆ペーストで入れる

最も手軽で直感的な方法が、使いたい絵文字をそのままコピーして、HTMLファイルに直接貼り付ける方法です。

絵文字の一覧サイトや、OSに付属の絵文字キーボードから好きな絵文字を選んでコピーし、HTMLのテキストを記述したい場所にペーストするだけです。

これは、コピーしたUnicode文字をエディタが解釈し、UTF-8としてファイルに保存してくれるため、正しく表示されます。

HTMLで絵文字を入れる方法②：文字参照（数値文字参照）で入れる

エディタの環境に依存せず、より確実に絵文字を表示させたい場合は、「文字参照」を使う方法が推奨されます。

これは、絵文字のUnicodeコードポイントを直接HTMLに記述する方法です。

文字参照には、10進数と16進数の2つの書き方があります。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>文字参照で絵文字</title>
</head>
<body>
    <!-- 「にこやかな笑顔」😀 のコードポイントは 10進数で 128512, 16進数で 1F600 -->
    <h1>ようこそ！ &#128512; （10進数）</h1>
    <h1>ようこそ！ &#x1F600; （16進数）</h1>
</body>
</html>

ソースコードの解説

10進数: &#と;の間に、Unicodeコードポイントの10進数値を記述します。
16進数: &#xと;の間に、16進数値を記述します。xを忘れないように注意してください。

どちらの書き方でも表示結果は同じです。

この方法は、テキストファイルがどのような環境で扱われても、文字情報が壊れるリスクを最小限に抑えられる非常に堅牢なテクニックと言えるでしょう。

HTMLで絵文字を入れる方法③：CSSを使って装飾として入れる

HTMLのコンテンツとしてではなく、あくまでデザイン上の「装飾」として絵文字を使いたい場合は、CSSの疑似要素とcontentプロパティを組み合わせます。

この方法では、Unicodeコードポイントの16進数を使います。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>CSSで絵文字</title>
    <style>
        .warning::before {
            /* 警告マーク ⚠️ の16進数コードは 26A0 */
            content: "\26A0\FE0F  ";
        }
        .success::before {
            /* チェックマーク ✅ の16進数コードは 2705 */
            content: "\2705  ";
        }
    </style>
</head>
<body>
    <p class="warning">注意してください。</p>
    <p class="success">処理は正常に完了しました。</p>
</body>
</html>

ソースコードの解説

CSSのcontentプロパティ内で、16進数コードの前にバックスラッシュ(\)を付けて記述します。

この方法のメリットは、HTMLの構造を変更することなく、CSSだけで特定の要素にアイコンのように絵文字を追加できる点です。

リストのマーカーなど、デザイン上のアクセントとして使いたい場合に非常に有効なテクニックとなります。

よく使う絵文字のUnicodeコードポイント一覧

絵文字のコードポイントを毎回調べるのは手間がかかるため、よく使われる代表的な絵文字をカテゴリ別に一覧でまとめました。

コピーしてご自由にお使いください。

顔・感情

絵文字	10進数	16進数
😀	`😀`	`😀`
😊	`😊`	`😊`
😂	`😂`	`😂`
😍	`😍`	`😍`
🥰	`🥰`	`🥰`
🤔	`🤔`	`🤔`
😢	`😢`	`😢`
😭	`😭`	`😭`
😠	`😠`	`😠`
🤯	`🤯`	`🤯`
😴	`😴`	`😴`
🥳	`🥳`	`🥳`
🥺	`🥺`	`🥺`
❤️	`❤`	`❤`
🎉	`🎉`	`🎉`

人・ジェスチャー

絵文字	10進数	16進数
👋	`👋`	`👋`
👍	`👍`	`👍`
👎	`👎`	`👎`
👌	`👌`	`👌`
✌️	`✌`	`✌`
🤞	`🤞`	`🤞`
🙏	`🙏`	`🙏`
💪	`💪`	`💪`
👈	`👈`	`👈`
👉	`👉`	`👉`
👆	`👆`	`👆`
👇	`👇`	`👇`
👨‍💻	`👨‍💻`	`👨‍💻`
👩‍🎓	`👩‍🎓`	`👩‍🎓`
👶	`👶`	`👶`

動物・自然

絵文字	10進数	16進数
🐶	`🐶`	`🐶`
🐱	`🐱`	`🐱`
🐼	`🐼`	`🐼`
🦁	`🦁`	`🦁`
🌸	`🌸`	`🌸`
🌳	`🌳`	`🌳`
☀️	`☀`	`☀`
🌙	`🌙`	`🌙`
⭐	`⭐`	`⭐`
🔥	`🔥`	`🔥`
💧	`💧`	`💧`
🌈	`🌈`	`🌈`
🌎	`🌎`	`🌎`

食べ物・飲み物

絵文字	10進数	16進数
🍕	`🍕`	`🍕`
🍔	`🍔`	`🍔`
🍜	`🍜`	`🍜`
🍣	`🍣`	`🍣`
🍙	`🍘`	`🍘`
🍰	`🍰`	`🍰`
🍩	`🍩`	`🍩`
🍦	`🍦`	`🍦`
🍓	`🍓`	`🍓`
☕️	`☕`	`☕`
🍺	`🍺`	`🍺`

アクティビティ・物

絵文字	10進数	16進数
⚽️	`⚽`	`⚽`
🏀	`🏀`	`🏀`
🎸	`🎸`	`🎸`
🚗	`🚗`	`🚗`
✈️	`✈`	`✈`
🚀	`🚀`	`🚀`
💻	`💻`	`💻`
📱	`📱`	`📱`
💡	`💡`	`💡`
🔑	`🔑`	`🔑`
🎁	`🎁`	`🎁`
✉️	`✉`	`✉`
📎	`📎`	`📎`
✂️	`✂`	`✂`

記号・矢印

絵文字	10進数	16進数
✨	`✨`	`✨`
✅	`✅`	`✅`
⚠️	`⚠`	`⚠`
❓	`❓`	`❓`
❗	`❗`	`❗`
⭕	`⭕`	`⭕`
❌	`❌`	`❌`
➡️	`➡`	`➡`
➕	`➕`	`➕`
➖	`➖`	`➖`
✖️	`✖`	`✖`
➗	`➗`	`➗`
©️	`©`	`©`
®️	`®`	`®`
™️	`™`	`™`