WebページをRetina対応させるテクニック～実践編：jQuery×HTML5×CSS3を真面目に勉強（5）（2/3 ページ）

前回のWebにおけるピクセルの基本的な話を踏まえ、今回はRetinaディスプレイをはじめとした高精細ディスプレイにWebページを対応させるテクニックを紹介する。

[山田　直樹，クラスメソッド] PC用表示関連情報

LINE

Hatena

アイコンフォントを活用する

　アイコンフォントとは、通常のアルファベットや平仮名とは違い、シンボルや絵文字、記号などを収録したフォントのことです。ビットマップ画像とは異なりフォントという性質を持っているため、サイズを大きくしてもぼやけることがなく、CSSで簡単に色を変えられるなど非常に使い勝手の良いものとして、利用するWebサイトがここ最近で一気に増えてきました。

　仕組み自体は特に目新しいものではなく、われわれが普段使っているUnicodeにも一部のアイコンがフォントとして収録されています。アルファベットや平仮名などとは性質が異なるため、HTML上に表示するにはそれぞれのアイコンに割り当てられた文字参照を指定します。非常に多くのアイコンが収録されているため、ちょっとした間に合わせ程度であれば、これだけでも十分にカバーできるでしょう。

　Unicodeフォントについては、次のWebサイトに素晴らしいチートシートがあります。

Unicode character table

※なお、これらのアイコンは機種依存文字に該当するため、利用する際はサポートする動作環境での検証をしっかりと行う必要があります。

　とはいえ、どこかデザインがやぼったかったり、Webページの用途にそぐわないものが多かったりと、決して使いやすいとはいえません。そこで、Webページでの利用により適したアイコンだけをまとめたWebフォントが積極的に作られるようになりました。有料のものもありますが、多くは無料で公開されているため気軽に利用可能です。

　以下にWebフォントを幾つか紹介します。

Font Awesome

　アイコンフォントの中でも、とりわけ広く認知されているライブラリです。Twitter Bootsrap2.xをベースとしつつ、アイコンの種類を大幅に追加したパッケージとなっています。基本的にはBootstrapのプラグインという位置付けですが、単体でも利用可能です。全体的に丸みを帯びたデザインで、ポップな雰囲気を作り出しています。また、LESSやSCSS（Sass）形式でも提供されているため、CSSに簡単に取り込めます。IE7もサポートしています。

アイコン数：361
ライセンス：
- フォント：SIL OFL 1.1（再販しない限り自由）
- ソースコード：MIT License
- ドキュメント：CC BY 3.0

Elusive-Icons

　こちらもBootstrap2.xをベースに大幅にアイコンが追加されたパッケージです。コンセプトとしてはFont Awesomeと類似しており重複しているアイコンも多いですが、Elusive-Iconsにしか収録されていないものもあります。また、Font Awesomeが丸みを帯びたデザインなのに対し、こちらは全体的に角の立ったデザインが特徴で、Bootpstrapの標準的なアイコンに近い仕上がりとなっています。IE7をサポートしており、CSS以外にもLESS形式で提供されています。