HTMLなどのコーディングにおいて、特殊な字形を持つ文字を表示する際に使用できる方法として“数値文字参照”というものがある。具体的には文字集合に含まれるある特定の文字を10進数や16進数で指定して表示する方法であるが、HTMLの場合には「&#○○○;」という形式で文字番号を指定する。

例えば、ハートマークを表示したい場合には「♥」と記述すると「♥」が表示される。

では、特定の文字の文字番号を知るにはどうすればよいのか？

Web上には文字←→文字番号を相互変換するツールは多数存在しているし、膨大な数の全文字のリストを表示できるサイトも無数に存在しているが、その中から使用したい文字を見つけ出すのも一手間だったりするので、利用し易そうな文字だけを抜き出し、文字番号を簡単に確認できるWebツールを作ってみた。

Webツールとして『METALLIC RATIO』ページに追加した。
☞ 数値文字参照ツール [スマホ非対応]

このWebツールの目的は以下のように考えている。
○字形のリストを大きな表示で見て選択できること。
○カテゴリー毎に字形をまとめてリスト化すること。（矢印系、丸番号系など）
○1クリックで数値文字参照コードをクリップボードにコピーできること。
○iPhone／iPadでカラー絵文字として表示される文字は除外。

現時点で、443文字をリストアップしてある。

数値文字参照を文章内での特殊文字の表示に利用するのは勿論のことだが、ちょっと考え方を変えて、装飾の手段として利用することも可能である。

ひとつ例を挙げてみると、図形の字形を持つ文字とCSSの background-clip: text; を併用して、矩形写真を特別な加工なしに文字の形にトリミングして表示するというような活用方法も考えられる。

以下がその例。backgroundに設定した空き缶の写真を、数値文字参照コード「♽」の「♽」で切り抜いて表示する設定としてある。

♽

昔、HTMLの文字コードはShift-JISが主流だった頃には、特殊な図形などを直接コードに書き入れてしまうと文字化けの原因になっていたため、こうした数値文字参照を利用する必要があったのだが、文字コードにはUTF-8を使用することが主流となっている現在では、数値文字参照で指定しなくても直接図形文字をコード内で使用したとしても実害が発生することはまず無い。

そのため、文字化け対策というような意識ではなく、ちょっとした遊びとして数値文字参照を使ってみようかなと思った時に、利用できる文字をセレクトする際のひとつの参考として気軽にこのWebツールを使ってくれたなら良いと考えている。