FontAwesomeやGoogleマテリアルアイコンを使って、★や♥をアイコンとして表示することはできますが、わざわざアイコンフォントを使わなくても♥や♠を表示できます。また丸数字(丸付き数字①②③④⑤⑥⑦⑧⑨⑩)など特殊文字を文字化けせずに表示する方法、またCSSの擬似要素(::before,::after)を使って表示する方法などを解説します。
丸数字(丸付き数字)や星などの記号やマークなどは「機種依存文字」と呼ばれており環境によって表示が変わる文字のことを言います。文字化けする可能性がある文字であることから、メールの本文やHTMLなどではそのまま使うことは避けられています。
現在はWebサイトの文字コードはUTF-8が一般的になったのでハートや丸数字をそのまま使っても文字化けしてしまうことはないですが文字コードがShift-JISなどの場合は文字化けしてしまうため「数値実体参照」と言われる文字コードを使います。
丸付き数字や特殊文字をhtmlに記述する場合、「数値文字参照」に変換して表示します。
<p>★新着記事★</p>
<p>①②③④⑤⑥⑦⑧⑨⑩</p>
は
実際の表示
★新着記事
①②③④⑤⑥⑦⑧⑨⑩
と表示されます。
ウェブサイトで使う機会が多そうなマークや記号をまとめた表は最後に表示しています。今すぐ確認するなら「Webサイトで使う機会の多い記号・特殊文字の文字コード一覧」へジャンプ▼
FontAwesomeやGoogleマテリアルアイコンを使いたい場合は以下の記事でまとめています。
人気フォントFuturaをウェブサイトで使う方法を知りたいなら
擬似要素に丸付き数字などの特殊文字を使う場合
HTMLとしてマークアップするのではなく、CSSの擬似要素を使って表示させたい場合は以下のようにすればいいのではと考えます。
p::before{
content:"★";
}
しかし上記のようにしてもそのまま値が表示されてしまい、意図した通りにはなりません。
まず擬似要素に「★」を記述したい場合は10進数ではなく16進数の数値文字参照を使います。
文字 | 数値実体参照(10進数) | 数値実体参照(16進数) サイトで使うのはこちら↓ |
---|---|---|
★ | ★ | ★ |
でも「★
」をそのまま入力できませんので以下の要領でエスケープ処理します。
- 「
&
」(アンド)を「\
」(バックスラッシュ)に変更 - 「
#
」(シャープ)「x
」(小文字エックス)を「0
」(数字ゼロ)にする - 「
;
」を削除する
結果、
\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