画像を使わずにレ点を表示する方法
ウェブ上でレ点を見るのは珍しくありません。長い文章の後に、まとめ項目で「レ点＋箇条書き」とか、チェックしてほしい内容を「レ点＋箇条書き」といった感じで、使われているのを見ます。
レ点を使うとなると、以前だったら画像一択。もしかしたら、フォントによっては、レ点があったかもしれません。でも、そのフォントを誰もが持っているわけじゃない。サイトを閲覧している人の端末によって、入っているフォントは違うし、自分のサーバーにアップするとなると、別の問題が絡んでくる。
結果、画像だったわけですが、久しぶりに調べてみいたら、幾つか方法が増えていたので、メモ代わりに書いておくことにしました。
「Font-Awesome」を使う方法
「Font-Awesome」は、ウェブ上で使えるアイコン・フォントのサービスです。フォントなので画像より軽いですし、何より使いやすい。無料のフリー版と、有料のプロ版があり、フリーでは使用できるアイコンに制限があります。
ちなみに、フリーで使えるのは下記リンク先のもの。
「Font-Awesome」を使うには、サイト上でスタイルシートを読み込む必要があります。「link rel="stylesheet" href="～"」といった具合に。スタイルシートは、「fontawesome」のサーバーにあるデータを読み込むか、「fontawesome」でデータをダウンロードして、自分のサーバーに上げて読み込むかの二択。
ちなみに、下記リンク先に詳細が書いています。英語だけど。
こんなことを書いているなら、「Font-Awesome」を使っているように思われますが、今のところ使っていません。理由は、特定の環境では表示されないから。
もし、これから使うというのでしたら、バージョンがあるようなので、そこに気を付けた方がいいかも。あと、使用の際には「\f002」といった感じに、割り当てられた文字コードを使うのですが、公式なのにコードが間違っているものも……？
それは別にしても、公式サイトでは目的のアイコン＆コードが探しづらいので、下記リンク先を見た方が早いかも。
「css icon」を使う方法
画像でもフォントでもない方法、それが「css icon」を使う方法です。文字通り、cssの記述だけでアイコンを描画するもの。可能性としては考えますが、こういうのを行動に移す人は少ない気がします。
使い方の説明は不要でしょうが、一応……。「css icon」は「css」として使います。cssに使いたいアイコンの記述を増やし、divタグのclassで指定する感じ。当然、絵柄の複雑さに比例してcssの記述が増えていきます。
正直、ひとつの絵文字を使いたいがために、このcssを読み込ませるのかって思いました。あまり読み込む量を増やしたくなかったので……。
「css icon」は下記リンク先で見られます。アイコンをクリックすると、右側にコードが表示されるので、それをコピーして使います。
⇒「css icon」
最後に
アイコンによる装飾の話を書いているのに、ずいぶんとサッパリしたページじゃないか。このサイトは。
そう思われる人もいるでしょう。私も、もう少し飾り付けた方がいいかなとは思っています。一方で、文字の読みやすさだけを追求すると、色数が少ない白黒の世界がベストのような気もするんです。カラフルなページで文字を読むより、モノトーンのページで読む方が疲れないし……。
ということで、このサイトは簡素な作りとなっています。単に面倒なだけかもしれません。