HTMLでの絵文字の使用
絵文字はUTF-8文字セットの文字です: 😄 😍 💗
絵文字とは何ですか?
絵文字は画像やアイコンのように見えますが、そうではありません。
これらは、UTF-8(Unicode)文字セットの文字(文字)です。
UTF-8は、世界中のほぼすべての文字と記号をカバーしています。
HTMLcharset属性
HTMLページを正しく表示するには、Webブラウザはページで使用されている文字セットを認識している必要があります。
これは、<meta>tag：
<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 絵文字リファレンスを参照して下さい。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。