html・webページで丸数字（①②③）を文字化けせずに記入する方法。

Warning: Undefined array key 3 in /home/octo8/dainamo.jp/public_html/wp/wp-content/themes/surfing/lib/table-of-contents-plus/surfing_toc.php on line 1434

Warning: Undefined array key 3 in /home/octo8/dainamo.jp/public_html/wp/wp-content/themes/surfing/lib/table-of-contents-plus/surfing_toc.php on line 1434

Warning: Undefined array key 3 in /home/octo8/dainamo.jp/public_html/wp/wp-content/themes/surfing/lib/table-of-contents-plus/surfing_toc.php on line 1434

こんにちは、エリーです。

webページで丸数字を表示したいけど、機種依存文字なので文字化けしてしまう。

そんなときには「数値文字参照」という方法で表示することができます。

ちなみに丸数字とは

①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳

のような文字ですね。

CSSなどでわざわざ作らなくてもこのように丸数字を表示することができます。

さっそく解説していきます。

数値文字参照とは？

数値文字参照とはHTML文書においては、直接記述できない文字や記号（マークアップで使われる、半角の不等号「<」や「>」など）を表記する際に用いられる方法です。

Web制作などでの文字化けを防ぐため、10進数もしくは16進数の文字列に変換することで、いわゆる機種依存文字や、文章中にソースコードやHTMLタグをそのまま表記したいときなどに利用できます。

丸数字を表示するための数値文字参照一覧

以下の表の文字列を入力することで、ブラウザ上で丸数字を表示することができます。

表示	数値 文字参照	表示	数値 文字参照
①	①	⑪	⑪
②	②	⑫	⑫
③	③	⑬	⑬
④	④	⑭	⑭
⑤	⑤	⑮	⑮
⑥	⑥	⑯	⑯
⑦	⑦	⑰	⑰
⑧	⑧	⑱	⑱
⑨	⑨	⑲	⑲
⑩	⑩	⑳	⑳

表示	数値 文字参照	表示	数値 文字参照	表示	数値 文字参照
❶	❶	➀	➀	➊	➊
❷	❷	➁	➁	➋	➋
❸	❸	➂	➂	➌	➌
❹	❹	➃	➃	➍	➍
❺	❺	➄	➄	➎	➎
❻	❻	➅	➅	➏	➏
❼	❼	➆	➆	➐	➐
❽	❽	➇	➇	➑	➑
❾	❾	➈	➈	➒	➒
❿	❿	➉	➉	➓	➓

まとめ

手順などを説明するときに便利な丸数字。
簡単なのでぜご活用ください。