よく使うHTMLの絵文字コードの一覧（🔰自分用メモ🔰）

2020年3月4日2024年5月15日

HTMLサイトの印象を身近なものにしたいときには絵文字の活用は意外と重要ですよね📌そこでいつも日本語で検索出来て分かりやすい某サイトのお世話になっているのですが、すべての絵文字が複数ページに渡って掲載されていて検索するときに重くて使いにくいので、こちらのページで個人的によく使う絵文字だけをサクッと一覧にまとめておきます😄😄😄

1ページにずらっとHTMLの絵文字コード対応する絵文字を置いておきます👍PCで検索してコードをコピペして使う事を想定しているのでスマホだと見づらいかもしれません。
それとところどころうまく色がつかない絵文字があります。unicodeのFull Emoji List v13.0を参照するとうまくいきそうなんですが・・。さらにさらに、完全に手作業でまとめていったので絵文字の入れ違いがあるかもしれません。中途半端でごめんなさいね😅

【PR】ブロガー・オウンドメディア担当者におすすめ

Canva-無料で使える画像作成サイト-

Canvaはテンプレートを利用してブログ用アイキャッチや、バナー、ヘッダーなどあらゆる画像を簡単に作成可能なウェブサービス。
*無料テンプレートの種類は数千種類以上。Canvaを使えば、外注費やバナー自作の手間はもう必要ありません。
プロが作成した反応率の高いバナーのテンプレを利用して、ウェブ関連の成果をサクッと上げたい方必携のサービスです。

Canvaの口コミとレビューはこちら＞＞＞CanvaProで出来る事と有料版をおすすめする人・しない人

顔・表情・感情・笑顔などを表す絵文字HTMLコード

キラキラ・星の絵文字HTMLコード

ハートの絵文字HTMLコード

手の絵文字HTMLコード

人物・ジャスチャーの絵文字HTMLコード

サイン・記号の絵文字HTMLコード

その他

季節もの

絵文字の使い方・書き方・表示について

サイトの記事内で絵文字を使いたい場合は、各絵文字の下にある「🥰」のような、HTMLコード（HTMLエンティティ）をコピペして使ってください。
使い方の注意点としては、ワードプレスや無料ブログなどで使いたい場合は、ビジュアルモードや見たまま楽々モード的なところに記入しても使えません。
使う時はテキストモードとかHTMLモードみたいなところに使ってください。

絵文字の大きさを変えるには？

普通にCSSのfont-sizeが効きます。
あとはpxでもemでもお好きなように。

💖　←30px
💖　←60px
💖　←3em

＊色が無いものがある

unicodeを正しく記述しているんですが、一覧の中に＊印をつけた絵文字のようにブラウザによっては注意マークなどには色がつかないようです。

単色でべた塗りのものにはスタイルシートが使えるので、色を変えても違和感なく使えますが、そうでないものはなるべく使わない方向で🙇
一覧の中で色がないものをすべて検証していませんが、赤いハートやキラキラ２はcssで色の変更が効きました。

❤　←PCだと何もしないと黒なのでCSSで赤色にしてますがスマホで表示させると赤色だったりします。
✴　←同上

あるいは、最新版の絵文字unicodeで対応済みのコードが出ているかもしれないのでチェックしてみてください💁
*chromeでアクセスしたらセキュリティの警告が出たので、アクセスは自己責任でお願いします。

代替案として、ウィキペディアのUnicodeのEmojiの一覧ページをご紹介しますが、一覧が縦に長すぎるのと、名称がすべて英語なのでちょっと探しにくいかもしれません。

おしまい。
どこかの誰かのお役に立てていたら幸いです！

【追記】

CSSの設定だけで動く絵文字も可能。
使いどころは難しいですけどおもしろいですね。
(CSSはこちらのお方のものを拝借いたしました。有難うございます。
https://q-az.net/buruburu-hurueru-css/)
🙂