丸囲み数字をホームページで使う方法を紹介します
ステップを追って説明する場合など、「① 何何・・」、「② 次に何何・・」 など視覚的にその順番を簡単に表示できるので丸囲みの数字を使いたくなることがあります。ところが、これら丸囲みの数字は、「機種依存文字」 と言われて、閲覧する機種あるいはOSによって見え方が違ってしまいます。
しかし、HTMLには、そうした機種間の問題を解消してくれる仕組みがあります。「数値文字参照」 という機能です。「数値文字参照」 とは、文字を数値で表現するというHTMLの仕組みで、主に、 キーボードから入力しようのない文字を表現したい場合に活用されています。 例えば、著作権記号の [©] や発音記号の [æ] などです。
これら一般的な特殊文字を 「数値文字参照」 にて入力するには、「挿入」 から 「特殊文字」 を選び、「特殊文字ダイアログ」 から文字を選んでクリックするだけでHTMLページに入力できます。
この時HTMLのソースを見ると、[©] には [©]、[æ] には [æ] という数値文字参照が入力されています。
数値文字参照では、10進数もしくは16進数によって該当文字を指定します。10進数による指定のほうが、多くのブラウザに対して安全に使用できるようです。
この数値文字参照で表現できる文字には、実は「丸囲みの数字」も含まれているのです。
文字参照 とは
文字参照とは、文字を文字コードに依存せずに示すための手法です。HTMLマークアップを行ううえで特別な意味を持つ記号(<、>、&、") や、キーボードから直接入力できない文字 (©、®、™) などを使用する場合はこの方法で記述します。
文字参照には、該当文字を10進数または16進数で指定する 「数値文字参照」(Character Reference) と、特定のキーワード文字列で指定する 「文字実体参照」(Entity Reference) の2種類が存在します。
一般的な文字参照の例:
Windows 7 の IME2007 や Windows Vista の Microsoft IME には JIS2004対応日本語フォント が装備されています。 このため、1から20までの 丸囲み数字 と共に21から50までの 丸囲み数字 が使用できます
1~20の丸囲み数字:
21~50の丸囲み数字:
ということで、丸囲み数字自体は定義されていることが分かりましたが、あくまでも機種依存の文字なので、文字化けを起こしかねません。
これらを文字化けを起こさないよう、ページに入力し使用する二つの方法を記述します。
これら数値参照を HTML ソースの中に入力すると該当の数字を表現することができます。その時の入力形式は [&#xNNNN;] (カッコ不用) で、[&#x] それに最後の[;] (セミコロン) はそのまま入力します。参照する数字 NNNN は上記 「文字一覧」 パッドのそれぞれの箇所にマウスを載せた時に表示される中、Unicode: U+NNNN UTF-16: 0xNNNN などとなっている NNNN を使います。
例えば① は [①] となります。㉑ は [㉑] となります。
なお、ソースへ数値参照で入力した囲み数字は、「ページ編集」では表示されず、「プレビュー」にて確認できます。
以上ここまでは、HTMLのページ作成と出力オプションをどのように設定されていても文字化けを起こさないで使用できる方法です。ただこの場合の難点は、数値文字参照を使うためには、表示したい文字が何番なのかを調べる必要があり、少々面倒です。また、入力した数値文字参照が、「ページ編集」で表示されないことで、編集がやりやすいとは言えません。
次にもうひとつの方法として、ページに直接丸囲み数字を入力し、表示もできる方法を記述します。
次に、ページ編集で直接丸囲み数字を入力する方法について記述します。
ページで使う文字コードを Unicode(UTF-8) にし、出力(保存)するときの文字コードも Unicode(UTF-8) にするページ指定をしておきます。そこヘ 「ページ編集」 で丸囲み数字を直接入力し、編集ページでも当然表示され、文字化けも起こさない方法です。
Unicodeは、世界の文字を共通の文字コードで表現するために作られたもので、丸囲みの数字も定義されています。(参照: 上記「丸囲みの数字」)
① ページ作成前にビルダーのオプションを準備します。
前提として、ページ作成の前に、ビルダーのオプションを確認します。「ツール」 → 「オプション」 → 「ファイル」 タブを開きます。(参照:ホームページ・ビルダーの初期設定: 「ファイル」タブ)
② ページ言語モードの確認
現在編集中のページの入力漢字コード、出力漢字コード
ステータスバーの一番左側には、現在編集中のページの入力漢字コード、出力漢字コードが表示されます。
入力漢字コードが左側、出力漢字コードが右側に表示されます。表示文字 (J, S, E, U) には、以下のような意味があります。
文字 意味
③ 丸囲み数字の入力
④ ページを保存し、再度開いて文字化けが無いことを確認します。