記事内にはプロモーションが含まれています

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

HTMLでの絵文字の入れ方！Unicodeと文字コード一覧も紹介 プログラミングの疑問解決

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

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

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

【本記事の信頼性】

  • 執筆者は元エンジニア
  • 大手プログラミングスクールのWebディレクター兼ライターを経験
  • 自らも地元密着型のプログラミングスクールを運営
忖度一切なし！
受講生から評判の良いプログラミングスクール
スクール
特徴
受講料金
大手比較サイトで4年連続人気NO.1！受講生からの評判も非常に高く、Web系のエンジニアを目指すならRUNTEQ一択。 550,000円（給付金適用あり）
月単価80万円以上の現役エンジニア講師による指導！一度入会すればサポートは半永久的。 498,000円
格安で質の高いWeb制作スキルを習得したい人におすすめ！業界最安級の料金でありながら、コミュニティやサポートが充実。 129,800円～
完全無料でプログラミングが学べる貴重なスクール！最短1ヶ月で卒業可能。ゼロスク運営会社への就職もできる。 無料
長期間に渡って学習し、希少人材を目指す人に最適なスクール！受講料は高いものの、高収入を得られる人材を目指せる。 96～132万円

絵文字の正体は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進数
😀 &#128512; &#x1F600;
😊 &#128522; &#x1F60A;
😂 &#128514; &#x1F602;
😍 &#128525; &#x1F60D;
🥰 &#129392; &#x1F970;
🤔 &#129300; &#x1F914;
😢 &#128546; &#x1F622;
😭 &#128557; &#x1F62D;
😠 &#128544; &#x1F620;
🤯 &#129327; &#x1F92F;
😴 &#128564; &#x1F634;
🥳 &#129395; &#x1F973;
🥺 &#129402; &#x1F97A;
❤️ &#10084; &#x2764;
🎉 &#127881; &#x1F389;

人・ジェスチャー

絵文字 10進数 16進数
👋 &#128075; &#x1F44B;
👍 &#128077; &#x1F44D;
👎 &#128078; &#x1F44E;
👌 &#128076; &#x1F44C;
✌️ &#9996; &#x270C;
🤞 &#129310; &#x1F91E;
🙏 &#128591; &#x1F64F;
💪 &#128170; &#x1F4AA;
👈 &#128072; &#x1F448;
👉 &#128073; &#x1F449;
👆 &#128070; &#x1F446;
👇 &#128071; &#x1F447;
👨‍💻 &#128104;&#8205;&#128187; &#x1F468;&#x200D;&#x1F4BB;
👩‍🎓 &#128105;&#8205;&#127891; &#x1F469;&#x200D;&#x1F393;
👶 &#128118; &#x1F476;

動物・自然

絵文字 10進数 16進数
🐶 &#128054; &#x1F436;
🐱 &#128049; &#x1F431;
🐼 &#128060; &#x1F43C;
🦁 &#129409; &#x1F981;
🌸 &#127800; &#x1F338;
🌳 &#127795; &#x1F333;
☀️ &#9728; &#x2600;
🌙 &#127769; &#x1F319;
⭐ &#11088; &#x2B50;
🔥 &#128293; &#x1F525;
💧 &#128167; &#x1F4A7;
🌈 &#127752; &#x1F308;
🌎 &#127758; &#x1F30E;

食べ物・飲み物

絵文字 10進数 16進数
🍕 &#127829; &#x1F355;
🍔 &#127828; &#x1F354;
🍜 &#127836; &#x1F35C;
🍣 &#127843; &#x1F363;
🍙 &#127832; &#x1F358;
🍰 &#127856; &#x1F370;
🍩 &#127849; &#x1F369;
🍦 &#127846; &#x1F366;
🍓 &#127827; &#x1F353;
☕️ &#9749; &#x2615;
🍺 &#127866; &#x1F37A;

アクティビティ・物

絵文字 10進数 16進数
⚽️ &#9917; &#x26BD;
🏀 &#127936; &#x1F3C0;
🎸 &#127928; &#x1F3B8;
🚗 &#128663; &#x1F697;
✈️ &#9992; &#x2708;
🚀 &#128640; &#x1F680;
💻 &#128187; &#x1F4BB;
📱 &#128241; &#x1F4F1;
💡 &#128161; &#x1F4A1;
🔑 &#128273; &#x1F511;
🎁 &#127873; &#x1F381;
✉️ &#9993; &#x2709;
📎 &#128206; &#x1F4CE;
✂️ &#9986; &#x2702;

記号・矢印

絵文字 10進数 16進数
✨ &#10024; &#x2728;
✅ &#9989; &#x2705;
⚠️ &#9888; &#x26A0;
❓ &#10067; &#x2753;
❗ &#10071; &#x2757;
⭕ &#11093; &#x2B55;
❌ &#10060; &#x274C;
➡️ &#10145; &#x27A1;
➕ &#10133; &#x2795;
➖ &#10134; &#x2796;
✖️ &#10006; &#x2716;
➗ &#10135; &#x2797;
©️ &#169; &#x00A9;
®️ &#174; &#x00AE;
™️ &#8482; &#x2122;

絵文字を使う際の注意点

絵文字は便利ですが、使う際にはいくつか気をつけるべき点があります。

OSやブラウザによる見え方の違い
同じ絵文字でも、Windows, macOS, Android, iOSなど、閲覧する環境によってデザインが微妙に異なる場合があります。

古い環境での未対応
新しく追加された絵文字は、古いOSやブラウザではサポートされておらず、文字化けと同じように「□」で表示されてしまう可能性があります。

アクセシビリティ
スクリーンリーダーなどの読み上げソフトは、絵文字を「にこやかな笑顔」のように音声で読み上げます。
重要な情報を絵文字だけで伝えようとすると、意図が正しく伝わらない可能性があるため注意が必要です。

まとめ

今回は、HTMLに絵文字を挿入するための3つの方法と、絵文字の文字コード一覧などについて紹介しました。

なお、HTMLを始めとする言語を体系的に学び、効率よくスキルを高めるには、プログラミングスクールを利用するのも有効です。

細かな疑問がすぐに解決するだけでなく、現役エンジニアが「質の高いポートフォリオ」を作成するための手助けをしてくれたり、エンジニア就職・転職のコツを教えてくれたりするなど、様々なメリットがありますので、独学に疲れた方は検討してみてはいかがでしょうか。

【2025年8月最新】初心者におすすめのプログラミングスクールを5つのみ厳選！
「プログラミングについて完全な初心者だけど、プログラミングスクールに通ってエンジニアに転職したい！」 ITエンジニアは高年収の傾向にあり、将来性も非常に高いことから、上記のように「初心者の状態からエンジニアになりたい」と考えている人も非常に...
progneer.net

Follow me!

PAGE TOP