よく使うHTMLの絵文字コードの一覧(🔰自分用メモ🔰)
HTMLサイトの印象を身近なものにしたいときには絵文字の活用は意外と重要ですよね📌そこでいつも日本語で検索出来て分かりやすい某サイトのお世話になっているのですが、すべての絵文字が複数ページに渡って掲載されていて検索するときに重くて使いにくいので、こちらのページで個人的によく使う絵文字だけをサクッと一覧にまとめておきます😄😄😄
1ページにずらっとHTMLの絵文字コード対応する絵文字を置いておきます👍PCで検索してコードをコピペして使う事を想定しているのでスマホだと見づらいかもしれません。
それとところどころうまく色がつかない絵文字があります。unicodeのFull Emoji List v13.0を参照するとうまくいきそうなんですが・・。さらにさらに、完全に手作業でまとめていったので絵文字の入れ違いがあるかもしれません。中途半端でごめんなさいね😅
Canvaはテンプレートを利用してブログ用アイキャッチや、バナー、ヘッダーなどあらゆる画像を簡単に作成可能なウェブサービス。
*無料テンプレートの種類は数千種類以上。Canvaを使えば、外注費やバナー自作の手間はもう必要ありません。
プロが作成した反応率の高いバナーのテンプレを利用して、ウェブ関連の成果をサクッと上げたい方必携のサービスです。
顔・表情・感情・笑顔などを表す絵文字HTMLコード
笑顔1 | 笑顔2 | 爆笑 | 焦り笑い | 嬉し泣き | 照れ笑い | ウィンク | ほほえみ | 天使の輪 |
---|---|---|---|---|---|---|---|---|
😃 | 😄 | 🤣 | 😅 | 😂 | 😊 | 😉 | 🙂 | 😇 |
😃 | 😄 | 🤣 | 😅 | 😂 | 😊 | 😉 | 🙂 | 😇 |
ラブハート | 目がハート | キス顔 | チュッ | 笑顔キス | 美味しい | ペロリウィンク | しーっ | 考え中 |
---|---|---|---|---|---|---|---|---|
🥰 | 😍 | 😗 | 😘 | 😙 | 😋 | 😜 | 🤫 | 🤔 |
🥰 | 😍 | 😗 | 😘 | 😙 | 😋 | 😜 | 🤫 | 🤔 |
真顔 | 困り顔 | よだれ | 頭爆発 | 不満 | びっくり | 泣き顔 | 大泣き | ぴえん |
---|---|---|---|---|---|---|---|---|
😐 | 😔 | 🤤 | 🤯 | 🙁 | 😳 | 😢 | 😭 | 🥺 |
😐 | 😔 | 🤤 | 🤯 | 🙁 | 😳 | 😢 | 😭 | 🥺 |
怒り | 怒りマーク | ムキュー! | あっかんべー | 汗 |
---|---|---|---|---|
😡 | 💢 | 😆 | 😝 | 💦 |
😡 | 💢 | 😆 | 😝 | 💦 |
キラキラ・星の絵文字HTMLコード
星 | 星2 | 流れ星 | キラキラ | キラキラ2* | スパーク* |
---|---|---|---|---|---|
⭐ | 🌟 | 🌠 | ✨ | ✴ | ❇ |
⭐ | 🌟 | 🌠 | ✨ | ✴ | ❇ |
ハートの絵文字HTMLコード
キラキラハート | 育つハート | 振動ハート | ツインハート | 失恋ハート | 白いハート | 黄色いハート | ラブレーター | 赤いハート* |
---|---|---|---|---|---|---|---|---|
💖 | 💗 | 💓 | 💕 | 💔 | 🤍 | 💛 | 💌 | ❤ |
💖 | 💗 | 💓 | 💕 | 💔 | 🤍 | 💛 | 💌 | ❤ |
手の絵文字HTMLコード
止まれの手 | オッケーサイン | ピースサイン* | 指さし(左) | 指さし(右) | 指さし(上) | 指さし(↓) | ファッキュー! | パンチ |
---|---|---|---|---|---|---|---|---|
🖐 | 👌 | ✌ | 👈 | 👉 | 👆 | 👇 | 🖕 | 👊 |
🖐 | 👌 | � | 👈 | 👉 | 👆 | 👇 | 🖕 | 👊 |
イイね! | BAD! | 拍手 | 万歳! | 握手 | お願い | バイバイ | 一本指* | 握りこぶし |
---|---|---|---|---|---|---|---|---|
👍 | 👎 | 👏 | 🙌 | 🤝 | 🙏 | 👋 | ☝ | 💪 |
👍 | 👎 | 👏 | 🙌 | 🤝 | 🙏 | 👋 | ☝ | 💪 |
人物・ジャスチャーの絵文字HTMLコード
オッケー | こちら! | はーい | 土下座 | お手上げ | 探偵 |
---|---|---|---|---|---|
🙆 | 💁 | 🙋 | 🙇 | 🤷 | 🕵 |
🙆 | 💁 | 🙋 | 🙇 | 🤷 | 🕵 |
サイン・記号の絵文字HTMLコード
注意* | 進入禁止 | 通行止め | 18禁マーク | 初心者マーク | NG | OK | お得* | フリーダイヤル |
---|---|---|---|---|---|---|---|---|
⚠ | ⛔ | 🚫 | 🔞 | 🔰 | 🆖 | 🆗 | 🉐 | ➿ |
⚠ | ⛔ | 🚫 | 🔞 | 🔰 | 🆖 | 🆗 | 🉐 | ➿ |
その他
赤ちゃん | 哺乳瓶 | 虫眼鏡(左) | 虫眼鏡(右) | ドル袋 | 札束(円) | クレカ |
---|---|---|---|---|---|---|
👶 | 🍼 | 🔍 | 🔎 | 💰 | 💴 | 💳 |
👶 | 🍼 | 🔍 | 🔎 | 💰 | 💴 | 💳 |
季節もの
サンタ | クリスマスツリー | 天使 | ケーキ | 乾杯 | シャンパン | プレゼント |
---|---|---|---|---|---|---|
🎅 | 🎄 | 👼 | 🍰 | 🥂 | 🍾 | 🎁 |
🎅 | 🎄 | 👼 | 🍰 | 🥂 | 🍾 | 🎁 |
クラッカー | かぼちゃ | ゴースト | コウモリ | ドクロ | 門松 | 鳥居 |
---|---|---|---|---|---|---|
🎉 | 🎃 | 👻 | 🦇 | 💀 | 🎍 | ⛩ |
🎉 | 🎃 | 👻 | 🦇 | 💀 | 🎍 | ⛩ |
絵文字の使い方・書き方・表示について
サイトの記事内で絵文字を使いたい場合は、各絵文字の下にある「🥰」のような、HTMLコード(HTMLエンティティ)をコピペして使ってください。
使い方の注意点としては、ワードプレスや無料ブログなどで使いたい場合は、ビジュアルモードや見たまま楽々モード的なところに記入しても使えません。
使う時はテキストモードとかHTMLモードみたいなところに使ってください。
絵文字の大きさを変えるには?
普通にCSSのfont-sizeが効きます。
あとはpxでもemでもお好きなように。
💖 ←30px
💖 ←60px
💖 ←3em
*色が無いものがある
unicodeを正しく記述しているんですが、一覧の中に*印をつけた絵文字のようにブラウザによっては注意マークなどには色がつかないようです。
単色でべた塗りのものにはスタイルシートが使えるので、色を変えても違和感なく使えますが、そうでないものはなるべく使わない方向で🙇
一覧の中で色がないものをすべて検証していませんが、赤いハートやキラキラ2はcssで色の変更が効きました。
❤ ←PCだと何もしないと黒なのでCSSで赤色にしてますがスマホで表示させると赤色だったりします。
✴ ←同上
あるいは、最新版の絵文字unicodeで対応済みのコードが出ているかもしれないのでチェックしてみてください💁
*chromeでアクセスしたらセキュリティの警告が出たので、アクセスは自己責任でお願いします。
代替案として、ウィキペディアのUnicodeのEmojiの一覧ページをご紹介しますが、一覧が縦に長すぎるのと、名称がすべて英語なのでちょっと探しにくいかもしれません。
おしまい。
どこかの誰かのお役に立てていたら幸いです!
【追記】
CSSの設定だけで動く絵文字も可能。
使いどころは難しいですけどおもしろいですね。
(CSSはこちらのお方のものを拝借いたしました。有難うございます。
https://q-az.net/buruburu-hurueru-css/)
🙂
ディスカッション
コメント一覧
まだ、コメントがありません