HTML 中で絵文字を使用する方法

絵文字（Emoji）は UTF-8 文字セットからの文字です：  

絵文字（Emoji）とは何ですか？

絵文字（Emoji）は画像やアイコンに似ていますが、それらではありません。

これらは UTF-8 (Unicode) 文字セットからの文字（文字）です。

ヒント：UTF-8 は世界中のほとんどの文字と記号をカバーしています。

HTML charset 属性

HTML ページを正しく表示するために、Web ブラウザはページで使用される文字セットを知らなければなりません。

これは以下の <meta> タグで指定された：

<meta charset="UTF-8">

ヒント：指定されていない場合、UTF-8 は HTML のデフォルトの文字セットです。

UTF-8 文字

多くの UTF-8 文字はキーボードで入力できませんが、常に数字（エンティティ番号と呼ばれる）を使用して表示できます：

  • A は 65
  • B は 66
  • C は 67

例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>私は A B C を表示します</p>
<p>私は A B C を表示します</p>
</body>
</html>

自分で試してみてください

例解

<meta charset="UTF-8"> 要素が文字セットを定義します。

文字 A、B、C は数字 65、66、および 67 で表示されます。

ブラウザが表示する文字を理解するために、＃で始まり；（セミコロン）で終わるエンティティ番号で指定する必要があります。

絵文字文字

絵文字も UTF-8 文字の一部です：

  • 👆 は 128516
  • 😍 は 128525
  • 👩‍❤️‍👨 は 128151

例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>私の最初の絵文字</h1>
<p>😀</p>
</body>
</html>

自分で試してみてください

絵文字は文字であり、したがって、HTMLの他の文字と同様にコピー、表示、およびサイズの調整ができます。

例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>拡大された表情符号</h1>
<p style="font-size:48px">
😎😍👍👏
</p>
</body>
</html>

自分で試してみてください

UTF-8 中の一部の絵文字シンボル

絵文字 値
👁️ 👁️
👁️ 👁️
👁️ 👁️
👁️ 👁️
👀 👁️
👀 👏
👏 👎
👍 👌
👓 👕
👆 😎
👄 😍

完全なリストが必要な場合は、私たちの HTML Emoji リファレンスマニュアルにアクセスしてください。