画像を使わずにレ点（チェックマーク）を表示する方法

ウェブ上でレ点を見るのは珍しくありません。長い文章の後に、まとめ項目で「レ点＋箇条書き」とか、チェックしてほしい内容を「レ点＋箇条書き」といった感じで使われているのを見ます。

レ点を使うとなると、以前だったら画像一択でした。フォントによってはレ点があったかもしれませんが、そのフォントを誰もが持っているわけじゃない。結果、画像だったわけですが、久しぶりに調べてみたら、画像より軽量で便利な方法がいくつか増えていたので、メモ代わりに書いておくことにしました。

手法 1: Font-Awesome（アイコン・フォント）を使う

「Font-Awesome」は、ウェブ上で使えるアイコン・フォントのサービスです。フォントなので画像より軽いですし、サイズや色もCSSで簡単に変更できるため非常に便利です。

無料のフリー版と有料のプロ版があり、フリーでは使用できるアイコンに制限があります。フリーで使えるアイコンはこちらを参照ください。

使用するには、サイト上でスタイルシートを読み込む必要があります。主に、CDN (Font Awesomeのサーバーにあるデータを読み込む) または、自己ホスト (データをダウンロードして自分のサーバーに上げて読み込む) の二択です。

導入に関する詳細は下記リンク先（英語）を参照ください。

現時点では使っていませんが、特定の環境では表示されない可能性があること、また、コードを扱うためバージョン管理に気を付ける必要があります。

アイコンの割り当てコード（例: \f002）を使って表示しますが、公式サイトでは目的のアイコン＆コードが探しづらいため、下記のような検索サイトを見る方が早いかもしれません。

画像でもフォントでもない方法、それが「CSS Icon」を使う方法です。文字通り、CSSの記述だけでアイコンを描画します。この手法は、描画に画像や外部ファイルを必要としない点で非常に軽量です。

使いたいアイコンのCSS記述をスタイルシートに追加し、HTML側で div タグなどの class で指定する形です。当然、絵柄の複雑さに比例してCSSの記述は増えていきます。

正直、ひとつの絵文字を使いたいがために、このCSSを読み込ませるのは少し手間だと感じました。読み込む量を増やしたくなかったので……。

「CSS Icon」は下記リンク先で見られます。アイコンをクリックすると、右側にコードが表示されるので、それをコピーして使います。

アイコンによる装飾の話を書いているのに、ずいぶんとサッパリしたページじゃないか。このサイトは。

そう思われる人もいるでしょう。私も、もう少し飾り付けた方がいいかなとは思っています。一方で、文字の読みやすさだけを追求すると、色数が少ない白黒の世界がベストのような気もするんです。カラフルなページで文字を読むより、モノトーンのページで読む方が疲れないし……。

ということで、このサイトは簡素な作りとなっています。単に面倒なだけかもしれませんが、読みやすさを優先した結果でもあります。