2. 数値文字参照を使って環境依存文字(機種依存文字)を表示する方法

ウェブページの文字コードがSHIFT-JISやEUC-JPなどのようにUnicode(UTF-8)ではない場合でも、数値文字参照という記述方法を使えば、環境依存文字(機種依存文字)でも文字化けすることなく掲載できます。

数値文字参照とは、文字を数値で表現する仕組みです。主にキーボードから直接は入力できない特殊な文字や記号を表示したい場合に使われます。例えば、著作権記号の「©」、発音記号の「æ」、ハートマーク「♥」、特殊な矢印(1)」など、膨大な文字や記号がこの書き方で表示できます。

以下に、数値文字参照の書き方を簡単に紹介した後、数値文字参照での丸囲み数字とローマ数字の書き方を一覧でご紹介いたします。そのままHTMLソースへコピー&ペーストすれば表示できますので、ご活用下さい。

【このページの目次】


数値文字参照の書き方

HTMLソースの中に数値文字参照を記述した例

HTMLソースの中に数値文字参照を記述した例

数値文字参照とは、「&#」+数値+「;」で構成される記述方法です。例えば「(1)」という文字なら、「①」で表せます。

この「&#」で始まって「;」で終わる仕様に沿った文字列をHTMLソース内に書くことで、数値に対応する文字をウェブページ上に表示できます。すべてを半角文字で記述しなければならない点と、最後に「;」記号が必要な点を忘れないよう注意して下さい。


丸囲みの数字0~50を数値文字参照で書く方法

例えば、HTMLソース中に下記のように記述してみましょう。
<p>丸囲みの数字1は、&#9312;のように表示されます。</p>
ブラウザで表示すると、下図のように見えます。数値文字参照の部分が、対応する文字に置き換わって表示されていることが分かります。

数値文字参照で記述した部分が、丸囲みの数字に置き換わっている

数値文字参照で記述した部分が、丸囲みの数字に置き換わっている


さらに、次のように記述すれば、丸囲みの数字が0~20まで表示できます。数値文字参照の数値は、部分的には連番ですが所々は飛んでいます。

  • 丸囲みの数字 0: (白)&#9450; , (黒)&#9471;
  • 丸囲みの数字 1: (白)&#9312; , (黒)&#10102; , (二重)&#9461;
  • 丸囲みの数字 2: (白)&#9313; , (黒)&#10103; , (二重)&#9462;
  • 丸囲みの数字 3: (白)&#9314; , (黒)&#10104; , (二重)&#9463;
  • 丸囲みの数字 4: (白)&#9315; , (黒)&#10105; , (二重)&#9464;
  • 丸囲みの数字 5: (白)&#9316; , (黒)&#10106; , (二重)&#9465;
  • 丸囲みの数字 6: (白)&#9317; , (黒)&#10107; , (二重)&#9466;
  • 丸囲みの数字 7: (白)&#9318; , (黒)&#10108; , (二重)&#9467;
  • 丸囲みの数字 8: (白)&#9319; , (黒)&#10109; , (二重)&#9468;
  • 丸囲みの数字 9: (白)&#9320; , (黒)&#10110; , (二重)&#9469;
  • 丸囲みの数字10: (白)&#9321; , (黒)&#10111; , (二重)&#9470;
  • 丸囲みの数字11: (白)&#9322; , (黒)&#9451;
  • 丸囲みの数字12: (白)&#9323; , (黒)&#9452;
  • 丸囲みの数字13: (白)&#9324; , (黒)&#9453;
  • 丸囲みの数字14: (白)&#9325; , (黒)&#9454;
  • 丸囲みの数字15: (白)&#9326; , (黒)&#9455;
  • 丸囲みの数字16: (白)&#9327; , (黒)&#9456;
  • 丸囲みの数字17: (白)&#9328; , (黒)&#9457;
  • 丸囲みの数字18: (白)&#9329; , (黒)&#9458;
  • 丸囲みの数字19: (白)&#9330; , (黒)&#9459;
  • 丸囲みの数字20: (白)&#9331; , (黒)&#9460;

上記のソースを表示すると、下図のように見えます。

丸囲みの数字の表示例

丸囲みの数字の表示例


お使いのブラウザで表示を確認してみたい場合や、記号そのものをコピペしたい場合は、サンプルページ「丸囲みの数字0~20の表示例」をご覧下さい。なお、文字コードがSHIFT-JISでも数値文字参照を使えば表示できることを示すために、このサンプルページは文字コードをSHIFT-JISにして記述してあります。

なお、白の丸囲み数字に関しては、さらに21~50まであります。
  • 丸囲みの数字 21~35: &#12881;&#12895;
  • 丸囲みの数字 36~50: &#12977;&#12991;
全てが連番になっているわけではなく、35と36の間は番号が飛んでいますので気をつけて下さい。


ローマ数字1~12などを数値文字参照で書く方法

次のように記述すれば、ローマ数字が1~12まで表示できます。

  • ローマ数字 1: (大文字)&#8544; , (小文字)&#8560;
  • ローマ数字 2: (大文字)&#8545; , (小文字)&#8561;
  • ローマ数字 3: (大文字)&#8546; , (小文字)&#8562;
  • ローマ数字 4: (大文字)&#8547; , (小文字)&#8563;
  • ローマ数字 5: (大文字)&#8548; , (小文字)&#8564;
  • ローマ数字 6: (大文字)&#8549; , (小文字)&#8565;
  • ローマ数字 7: (大文字)&#8550; , (小文字)&#8566;
  • ローマ数字 8: (大文字)&#8551; , (小文字)&#8567;
  • ローマ数字 9: (大文字)&#8552; , (小文字)&#8568;
  • ローマ数字10: (大文字)&#8553; , (小文字)&#8569;
  • ローマ数字11: (大文字)&#8554; , (小文字)&#8570;
  • ローマ数字12: (大文字)&#8555; , (小文字)&#8571;

上記のソースを表示すると、下図のように見えます。

ローマ数字の表示例

ローマ数字の表示例


お使いのブラウザで表示を確認してみたい場合や、記号そのものをコピペしたい場合は、サンプルページ「ローマ数字1~12の表示例」をご覧下さい。なお、文字コードがSHIFT-JISでも数値文字参照を使えば表示できることを示すために、このサンプルページも文字コードをSHIFT-JISにして記述してあります。

なお、ローマ数字には、さらに50、100、500、1000などもあります。

  • ローマ数字50: (大文字)&#8556; , (小文字)&#8572;
  • ローマ数字100: (大文字)&#8557; , (小文字)&#8573;
  • ローマ数字500: (大文字)&#8558; , (小文字)&#8574;
  • ローマ数字1,000: (大文字)&#8559; , (小文字)&#8575;
  • ローマ数字5,000: &#8577;
  • ローマ数字10,000: &#8578;
  • ローマ数字50,000: &#8583;
  • ローマ数字100,000: &#8584;


環境依存文字(機種依存文字)は、UTF-8か数値文字参照で表示

今回は、環境依存文字(機種依存文字)と呼ばれている文字でも閲覧環境に関係なく文字化けせずに表示できる方法として、UTF-8を使う方法と数値文字参照を使う記述方法の2つをご紹介いたしました。

ウェブ上での標準的な文字コードは既にUTF-8になっていますから、これからウェブページを作るなら文字コードにはUTF-8を採用しておきましょう。そうすれば、環境依存文字(機種依存文字)を気にする必要なく、どんな文字でも直接HTMLソースに記述できます。 もし、どうしてもUTF-8にはできない(SHIFT-JISなどを使い続ける必要がある)のであれば、数値文字参照の記述方法を活用して下さい。

なお、丸囲み数字やローマ数字以外の特殊な記号を表示する方法としては、下記の関連記事もご参照下さい。

【関連記事】



※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。