サイトで丸数字や★♥など特殊文字を文字化けしないで使う方法

FontAwesomeやGoogleマテリアルアイコンを使って、★や♥をアイコンとして表示することはできますが、わざわざアイコンフォントを使わなくても♥や♠を表示できます。また丸数字（丸付き数字①②③④⑤⑥⑦⑧⑨⑩）など特殊文字を文字化けせずに表示する方法、またCSSの擬似要素(::before,::after）を使って表示する方法などを解説します。

丸数字（丸付き数字）や星などの記号やマークなどは「機種依存文字」と呼ばれており環境によって表示が変わる文字のことを言います。文字化けする可能性がある文字であることから、メールの本文やHTMLなどではそのまま使うことは避けられています。

現在はWebサイトの文字コードはUTF-8が一般的になったのでハートや丸数字をそのまま使っても文字化けしてしまうことはないですが文字コードがShift-JISなどの場合は文字化けしてしまうため「数値実体参照」と言われる文字コードを使います。

丸付き数字や特殊文字をhtmlに記述する場合、「数値文字参照」に変換して表示します。

<p>&#9733;新着記事&#9733;</p>
<p>&#9312;&#9313;&#9314;&#9315;&#9316;&#9317;&#9318;&#9319;&#9320;&#9321;</p>

は

と表示されます。

ウェブサイトで使う機会が多そうなマークや記号をまとめた表は最後に表示しています。今すぐ確認するなら「Webサイトで使う機会の多い記号・特殊文字の文字コード一覧」へジャンプ▼

FontAwesomeやGoogleマテリアルアイコンを使いたい場合は以下の記事でまとめています。

Googleマテリアルシンボルのカスタマイズと表示されないときの対処法

アイコンフォントというとFontAwesomeが定番という感じがしますが、Google製のアイコンも使いやすくて最近は結構よく利用しています。 ここではGoogleマテリアルアイコンの新バージョン、G ...

続きを見る

FontAwesome アイコンを擬似要素で使う、丸で囲む、知ってると便利な使い方

Webサイトでアイコンを使うならFontAwesomeを使えば簡単です。しかし、いくつかのヒントやテクニックを知っておけば、FontAwesomeをさらに活用することができます。 この記事ではFont ...

続きを見る

人気フォントFuturaをウェブサイトで使う方法を知りたいなら

FuturaをWindows,Webサイトで使う方法

有名ブランド・メーカーロゴにも採用されている人気フォント「Futura」（フーツラ）。 フォントウェイトの種類が多く、大文字・小文字でもそれぞれ魅力があって私も大好きなフォントです。 Macを使ってい ...

続きを見る

擬似要素に丸付き数字などの特殊文字を使う場合

HTMLとしてマークアップするのではなく、CSSの擬似要素を使って表示させたい場合は以下のようにすればいいのではと考えます。

p::before{
content:"★";
}

しかし上記のようにしてもそのまま値が表示されてしまい、意図した通りにはなりません。

まず擬似要素に「★」を記述したい場合は10進数ではなく16進数の数値文字参照を使います。

文字	数値実体参照（10進数）	数値実体参照（16進数） サイトで使うのはこちら↓
★	★	★

でも「★」をそのまま入力できませんので以下の要領でエスケープ処理します。

1. 「&」（アンド）を「\」（バックスラッシュ）に変更
2. 「＃」（シャープ）「x」（小文字エックス）を「0」（数字ゼロ）にする
3. 「;」を削除する

結果、

\02605

となりました。これを擬似要素のcontentプロパティに入れます。

p::before{
content:"\02605";
}

これで:beforeや:afterなどの擬似要素で特殊文字を表示させることができます。

Webサイトで使う機会の多い記号・特殊文字の文字コード一覧

丸付き数字とよく使いそうな文字を一覧にまとめました。

文字	文字実体参照	数値参照 10進数	数値参照 16進数	16進数（エスケープ後） contentに入れる値
①		①	①	\02460
②		②	②	\02461
③		③	③	\02462
④		④	④	\02463
⑤		⑤	⑤	\02464
⑥		⑥	⑥	\02465
⑦		⑦	⑦	\02466
⑧		⑧	⑧	\02467
⑨		⑨	⑨	\02468
⑩		⑩	⑩	\02469
»	»	»	»	\0bb
«	«	«	«	\0ab
↑	↑	↑	↑	\2191
→	→	→	→	\02192
↓	↓	↓	↓	\2193
←	←	←	←	\2190
©	©	©	©	\00A9
®	®	®	®	\00AE
■		■	⏎	\23CE
□		□	□	\25A1
▲		▲	▲	\25A2
△		△	△	\25B3
▼		▼	▼	\25BC
▽		▽	▽	\25BD
○		○	○	\25CB
●		●	●	\25CF
♠	♠	♠	♠	\2660
◆		◆	◆	\25C6
◇		◇	◇	\25C7
♢		♢	♢	\2662
♣	♣	♣	♣	\2663
♤		♤	♤	\2664
♥	♥	♥	♥	\2665
♦	♦	♦	♦	\2666
♧		♧	♧	\2667
♨		♨	♨	\2668
♩		♩	♩	\2669
♪		♪	♪	\266q
♫		♫	♫	\266b
♬		♬	♬	\266c

記号など特殊文字を10進数、16進数に変換してくれる便利ツール
https://www.benricho.org/moji_conv/15.html

可愛いイラストのような文字が使えるWebフォント

ウェブサイトのデザインを個性的、魅力的にする要素として、絵文字フォントを活用することができます。

絵文字フォントなら画面サイズや解像度に関係なく鮮明に表示されるのでレスポンシブデザインにぴったりです。また画像よりも軽量なため、ページのロード時間を短縮できる場合があります。

Adobe Fonts の Swing King はコミックタッチで可愛いイラストのフォントです。

abcdefoix ambiguë d’un cœur qui au zéphyr préfère les jattes de kiwi

商用利用,WebフォントOK 無料でも使えるAdobe Fontsの使い方

Adobe Fontsは、無料で登録するだけで利用でき、Webフォントも使えるサービスです。 普通、Adobeはプロ向けの高価なソフトというイメージがありますが、Adobe Fontsは実は無料会員で ...

続きを見る