Web の文字表示：コードとテキストの分離

実用文字参照・アイコン一覧表

記号・略称	文字実体参照	数値文字参照				備考・名称
記号・略称	文字実体参照	HTML 10進数	HTML 16進数	CSS	JS	備考・名称
基本記号（Basic Symbols）
<	<	<	<	\003c	\u003c	小なり（Less-than）
>	>	>	>	\003e	\u003e	大なり（Greater-than）
&	&	&	&	\0026	\u0026	アンパサンド
©	©	©	©	\00a9	\u00a9	著作権
®	®	®	®	\00ae	\u00ae	登録商標
™	™	™	™	\2122	\u2122	商標
[	[	[	[	\005b	\u005b	左ブラケット
]	]	]	]	\005d	\u005d	右ブラケット

空白文字（White Space）
zwsp	&zwsp;	\200b	\u200b	Zero Width Space、ゼロ幅改行位置指定
hairsp	&hairsp;	\200a	\u200a	Hair Space、極細（1/10 em 程度）
thinsp		\2009	\u2009	Thin Space、細い（1/5 ~ 1/6 em）
puncsp	&puncsp;	\2008	\u2008	Punctuation Space、句読点(ｶﾝﾏ､ﾋﾟﾘｵﾄﾞ)
numsp	&numsp;	\2007	\u2007	Figure Space、数字幅、桁合わせに使用
nbsp		\00a0	\u00a0	Non-Breaking Space、改行禁止空白
ensp	&ensp;	\2002	\u2002	En Space、半角幅（「n」の幅、1/2em）
emsp	&emsp;	\2003	\u2003	Em Space、全角幅（「M」の幅、1em）

矢印・二重矢印（Arrows）
←	←	←	←	\2190	\u2190	左向き矢印
→	→	→	→	\2192	\u2192	右向き矢印
↑	↑	↑	↑	\2191	\u2191	上向き矢印
↓	↓	↓	↓	\2193	\u2193	下向き矢印
↔	↔	↔	↔	\2194	\u2194	左右矢印
↕︎	&varr;	↕	↕	\2195	\u2195	上下矢印
⇐	⇐	⇐	⇐	\21d0	\u21d0	左向き二重矢印
⇒	⇒	⇒	⇒	\21d2	\u21d2	右向き二重矢印
⇑	&uArr;	⇑	⇑	\21d1	\u21d1	上向き二重矢印
⇓	&dArr;	⇓	⇓	\21d3	\u21d3	下向き二重矢印
⇔	⇔	⇔	⇔	\21d4	\u21d4	左右二重矢印
«	«	«	«	\00ab	\u00ab	左二重角引用符
»	»	»	»	\00bb	\u00bb	右二重角引用符
▲	–	▲	▲	\25b2	\u25b2	黒塗り上向き三角
▼	–	▼	▼	\25bc;	\u25bc	黒塗り下向き三角
▶︎	–	▶	▶	\25b6	\u25b6	黒塗り右向き三角
◀︎	–	◀	◀	\25c0	\u25c0	黒塗り左向き三角

約物（Punctuation）
「	–	「	「	\300c	\u300c	カギカッコ（開始）
」	–	」	」	\300d	\u300d	カギカッコ（終了）
…	…	…	…	\2026	\u2026	三点リーダ
―	—	—	—	\2014	\u2014	エムダッシュ
～	–	〜	〜	\301c	\u301c	波ダッシュ
・	–	・	・	\30fb	\u30fb	中黒
¶	¶	¶	¶	\00b6	\u00b6	段落記号
§	§	§	§	\00a7	\u00a7	節記号
†	&dagger;	†	†	\2020	\u2020	短剣符（ダガー）
‡	&Dagger;	‡	‡	\2021	\u2021	二重短剣符

装飾（Decoration）
•	•	•	•	\2022	\u2022	ビュレット（箇条書）
◦	–	◦	◦	\25e6	\u25e6	白ビュレット（小白丸）
・	–	・	・	\30fb	\u30fb	中黒（約物）
※	–	※	※	\203b	\u203b	米印
◊	&loz;	◊	◊	\25ca	\u25ca	ひし形
○	–	○	○	\25cb	\u25cb	白丸
●	–	●	●	\25cf;	\u25cf	黒丸
◎	–	◎	◎	\25ce	\u25ce	二重丸
■	–	■	■	\25a0	\u25a0	黒四角
□	–	□	□	\25a1	\u25a1	白四角
★	–	★	★	\2605	\u2605	黒星
☆	–	☆	☆	\2606	\u2606	白星

数学（Mathematical）
±	±	±	±	\00b1	\u00b1	正負記号
×	×	×	×	\00d7	\u00d7	乗算記号
÷	÷	÷	÷	\00f7	\u00f7	除算記号
∗	&lowast;	∗	∗	\2217	\u2217	アスタリスク演算子
≠	≠	≠	≠	\2260	\u2260	等号否定
≦	≤	≤	≤	\2264	\u2264	常に小さいか等しい
≧	≥	≥	≥	\2265	\u2265	常に大きいか等しい
≒	–	≒	≒	\2252	\u2252	近似
∞	∞	∞	∞	\221e	\u221e	無限大
√	√	√	√	\221a	\u221a	平方根
∑	∑	∑	∑	\2211	\u2211	総和

単位・通貨（Units & Currency）
‰	&permil;	‰	‰	\2030	\u2030	パーミル（千分率）
%	–	%	%	\0025	\u0025	パーセント（百分率）
°	°	°	°	\00b0	\u00b0	度
℃	–	℃	℃	\2103	\u2103	摂氏温度
°F	–	℉	℉	\2109	\u2109	華氏温度
Å	Å	Å	Å	\00c5	\u00c5	オングストローム
¥	¥	¥	¥	\00a5	\u00a5	日本円記号
$	&dollar;	$	$	\0024	\u0024	米ドル記号
¢	¢	¢	¢	\00a2	\u00a2	セント記号
€	€	€	€	\20ac	\u20ac	ユーロ記号
£	£	£	£	\00a3	\u00a3	ポンド記号
元	–	元	元	\5143	\u5143	元（人民元）
₩	–	₩	₩	\20a9	\u20a9	ウォン記号
฿	–	฿	฿	\0e3f	\u0e3f	バーツ記号

技術記号（Technical Symbols）
`	–	`	`	\0060	\u0060	バッククォート
‘	'	'	'	\0027	\u0027	シングルクォート
“	"	"	"	\0022	\u0022	ダブルクォート
′	′	′	′	\2032	\u2032	プライム（分）
″	″	″	″	\2033	\u2033	ダブルプライム（秒）
^	–	^	^	\005e	\u005e	キャレット（ハット）
_	–	_	_	\005f	\u005f	アンダーバー

音楽記号（Musical Symbols）
♩	–	♩	♩	\2669	\u2669	四分音符
♪	–	♪	♪	\266a	\u266a	八分音符
♫	–	♫	♫	\266b	\u266b	連桁付き八分音符
♬	–	♬	♬	\266c	\u266c	連桁付き十六分音符
♭	–	♭	♭	\266d	\u266d	フラット（変記号）
♮	–	♮	♮	\266e	\u266e	ナチュラル（本位記号）
♯	–	♯	♯	\266f	\u266f;	シャープ（嬰記号）

絵文字アイコン（Emoji & Icons）
📌	–	📌	📌	\1f4cc	\u{1f4cc}	プッシュピン
⚡	–	⚡	⚡	\26a1	\u26a1	高電圧（ボルト）
⭐	–	⭐	⭐	\2b50	\u2b50	スター
💡	–	💡	💡	💡	\u{1f4a1}	電球（アイデア）
⚠️	–	⚠	⚠	\26a0	\u26a0	警告
✅	–	✅	✅	\2705	\u2705	チェックマーク（完了）
😀	–	😀	😀	\1f600	\u{1f600}	にっこり顔
🛠️	–	🛠	🛠	\1f6e0	\u{1F6E0}	設定、ビルド、調整
💻	–	💻	💻	\1f4bb	\u{1F4BB}	開発環境
📁	–	📁	📁	\1f4c1	\u{1F4C1}	ファイル管理
🔗	–	🔗	🔗	\1f517	\u{1F517}	リファレンス
📅	–	📅	📅	\1f4c5	\u{1F4C5}	更新履歴
📦	–	📦	📦	\1f4e6	\u{1F4E6}	モジュール・資産
🏷️	–	🏷	🏷	\1f3f7	\u{1F3F7}	タグ、メタ情報

園芸・植物記号（Gardening & Plants）
🌱	–	🌱	🌱	\1f331	\u{1F331}	新芽（初期段階、オリエン）
🌿	–	🍯	🌿	\1f33f	\u{1F33F}	ハーブ（植物、薬草）
🍀	–	🍀	🍀	\1f340	\u{1F340}	四つ葉のクローバー（幸運、植物）
🎍	–	🎍	🎍	\1f38d	\u{1F38D}	門松（竹、正月飾り）
🎋	–	🎋	🎋	\1f38b	\u{1F38B}	七夕の笹（願い事、竹）
🍃	–	🍃	🍃	\1f343	\u{1F343}	風に舞う葉（自然、環境）
🍂	–	🍂	🍂	\1f342	\u{1F342}	落ち葉（秋、季節の移ろい）
🍄	–	🍄	🍄	\1f344	\u{1F344}	きのこ（菌類、秋の味覚）
🌵	–	🌵	🌵	\1f335	\u{1F335}	サボテン（乾燥地帯、多肉植物）
🌴	–	🌴	🌴	\1f334	\u{1F334}	ヤシの木（南国、リゾート）
🌳	–	🌳	🌳	\1f333	\u{1F333}	落葉樹（森林、自然保護）
🌲	–	🌲	🌲	\1f332	\u{1F332}	針葉樹（常緑樹、キャンプ）
🌻	–	🌻	🌻	\1f33b	\u{1F33B}	ひまわり（夏、太陽）
🌸	–	🌸	🌸	\1f338	\u{1F338}	桜（春、開花）
🌷	–	🌷	🌷	\1f337	\u{1F337}	チューリップ（花壇、春）
🌹	–	🌹	🌹	\1f339	\u{1F339}	バラ（愛、情熱）
🌼	–	🌼	🌼	\1f33c	\u{1F33C}	ブロッサム（黄色い花、野花）
💐	–	💐	💐	\1f490	\u{1F490}	花束（贈り物、祝辞）
🌾	–	🌾	🌾	\1f33e	\u{1F33E}	稲穂（収穫、米）
🍇	–	🍇	🍇	\1f347	\u{1F347}	ぶどう（果実、実り）
🍎	–	🍎	🍎	\1f34e	\u{1F34E}	りんご（果物、知恵）

表示形式（絵文字・テキスト）の切り替え（Variation Selectors）
⚠️	–	⚠️	⚠️	\26A0\FE0F	\u26A0\uFE0F	警告（絵文字形式）
⚠︎	–	⚠︎	⚠︎	\26A0\FE0E	\u26A0\uFE0E	警告（テキスト形式）
⌨️	–	⌨️	⌨️	\2328\FE0F	\u2328\uFE0F	キーボード（絵文字形式）
⌨︎	–	⌨︎	⌨︎	\2328\FE0E	\u2328\uFE0E	キーボード（テキスト形式）
✉️	–	✉️	✉️	\2709\FE0F	\u2709\uFE0F	封筒（絵文字形式）
✉︎	–	✉︎	✉︎	\2709\FE0E	\u2709\uFE0E	封筒（テキスト形式）
⚙️	–	⚙️	⚙️	\2699\FE0F	\u2699\uFE0F	歯車（絵文字形式）
⚙︎	–	⚙︎	⚙︎	\2699\FE0E	\2699\FE0E	歯車（テキスト形式）
◀️	–	◀️	◀️	\25C0\FE0F	\u25C0\uFE0F	左向き三角（絵文字形式）
◀︎	–	◀︎	◀︎	\25C0\FE0E	\u25C0\uFE0E	左向き三角（テキスト形式）

文字参照（Character References）

タグなどの予約記号やプログラムをコンテンツのテキストと混同させず表示し、特殊記号や環境依存文字の文字化けを防ぎ、共通表示させるため、本来の文字を「特定のコード」に置き換えて記述し、ブラウザの描画で元の文字へと再変換する仕組み。

実体文字参照（Character Entity References）
¥：¥
人間が理解しやすい名称で指定し、主にHTMLの予約記号をテキストとして扱う際に用いられる。
数値文字参照（Numeric Character References）
Unicode の固有番号（コードポイント：10進数/16進数）を直接指定する。実体文字参照では対応しきれない多言語、記号、絵文字など、あらゆる文字の表示が可能。
- 10進数による指定、HTMLのみ：¥
  Unicode の10進数の通し番号をそのまま代入して文字を呼び出す基礎的な指定方法。
- 16進数による指定、HTML：&#x00a5　CSS： \00a5 　JavaScript：\u00a5
- Unicode 公式規格（U+XXXX）と直結した形式。バイト単位のデータ管理に適しており、開発・参照が容易。
  XXXX（16進数の数字）の部分をコードポイント

16進数の各言語での文法

HTML：「 &#x + 00a5（コードポイント）」&#x00a5
静的なテキスト表示。
CSS：「 \ + 00a5（コードポイント）」\00a5
content プロパティでの記号挿入など装飾目的。CSSでは桁合わせの 0 は任意だが、後の文字と繋がる場合は 003c と書くと安全。
JavaScript：「 \u + 00a5（コードポイント）」\u00a5
文字列操作や動的な文字出力。文法上、4桁を埋めるための「桁合わせ（0埋め）」が必要。
・サロゲートペア：4桁を超える文字（絵文字など）の場合は、😀：\u{1F600} のように波括弧を使って可変長の新しい構文も存在する。

💡 バリアント指定

HTML 末尾を10進数「8 → 9」、16進数「e → f」により「テキスト → 絵文字」となる。

無指定は機種・ブラウザ環境に依存

10進数：テキスト形式 – [本体] + ︎ / 絵文字 – [本体] + ️
16進数：テキスト形式 – [本体] + ︎ / 絵文字 – [本体] + ️

ブラウザの参照から表示までのプロセス

解析（Parsing）
ブラウザ（レンダリングエンジン）が HTML 内の あ や < を検知。
変換（Convert）
内部の共通対照表を参照し、それを Unicode コードポイント（例：U+3042）に変換する。
マッピング（Mapping）
指定されたフォントデータを開き、U+3042 に対応する「曲線のデータ（グリフ）」を探す。
描画（Rendering）
画面上のピクセルにその形を書き込む。

1-16.Web の文字表示：コードとテキストの分離

実用文字参照・アイコン一覧表

文字参照（Character References）

16進数の各言語での文法

ブラウザの参照から表示までのプロセス