見出し画像

実体参照で文字化けしない①を。

UTF-8では①は文字化けしません。
でもShift-jisを使用しているサイトで①を使いたい場合、実体参照にすることで文字化けを心配せず利用できます。



①の実体参照


①の文字は実は2種類あります。
①と➀です。見た目の違いが分かりづらいですね。フォントにもよりますが、少し違います。

ここでのポイントは①は実体参照が㊿まである事です。
➀の方は➉までです。特に①と➀の差が大きく見える場合、⑪以降もある方を利用する事で統一感がでます。これは実体参照にしなくてもいいUTF-8でも同じ事です。

⓪:⓪ 、①:① ~ ㊿:㊿

🄋:🄋 、➀:➀ ~ ➉:➉



⓵もあるよ


二重丸です。こちらは1種類で⓾までです。

⓵:⓵  ~ ⓾:⓾



ここが本題。➊使ってます?


文章内で使われることの多い①とは違い、存在すら知らないなんてこともあるかもしれない➊。
文字色を変えてリストの文頭で使ってみます。(noteで文字色が変えられなくて凹)

➊ テキストテキストテキストテキスト
➋ テキストテキストテキスト
➌ テキストテキストテキストテキストテキスト

いかがですか?雰囲気伝わりますかね。cssで背景、角丸で作らなくてもできます。
円と文字の間隔が調整できないので、デザインで合わない場合はやっぱりcssでとなりますが、CMSとかのリストでささっと作るリストには出番がありそう。

🄌:⓿ 、➊:❶ ~ ⓴:⓴
⓿:🄌 、❶:➊ ~ ❿:➓



おまけのローマ数字


数字の実体参照でよく使うものをもう1つ。
ローマ数字です。
アルファベットなのでIやVで表記できますが、1個分の幅の揺れを考えると実体参照にするのがいいかなぁと思います。

Ⅰ:Ⅰ ~ Ⅻ:Ⅻ

ⅰ:ⅰ ~ ⅻ:ⅻ