QueriesNode.jsPanoramioAPIRespond.jsSasstransformTypeScriptVideoWebSocketレスポンシブWebデザインCSS2014.04.30CSSIconFontアイコンフォントの活用フラットなデザインが流行している影響もあり、Web制作において随所でアイコンを利用する機会が増えています。そのようなサイトでは同一のアイコンを、サイズやカラー違いで配置する事も少なくなく、アイコンを画像としてカラーやサイズバリエーションを準備する事に不便さを感じていましたので、アイコンフォントの導入を検討してみました。アイコンフォントとは本エントリーでのアイコンフォントとは、Webフォントのデータをテキストではなく、アイコンで作成されたものを指し、フォントとしてアイコンが表示出来るものを指します。Webフォントとは、例えば通常ゴシック体はWindowsであればメイリオ、Macであればヒラギノなど、端末に所定のフォントがインストールされており、ブラウザの文字表示に利用されています。通常は端末にインストールされていないフォントをCSSで指定しても有効になりませんが、WebフォントでWeb上のフォントデータを指定しておけば端末内に存在しないフォントでも表示・適用出来る技術です。アイコンフォントのメリットアイコンのサイズ・カラーバリエーションが容易に増やせるアイコンを画像として用意する時とは異なり、フォントなのでCSSのfont-sizeでサイズを、colorでカラーを変更出来る。背景色を気にしなくて良いアイコンを画像として用意する時は、背景色が変わっても影響無いように透過pngにしたりしますが、アイコンフォントはベクターデータなのでエッジの処理を気にする必要がありません。HTTPリクエスト数が減らせるアイコンを画像として用意するとアイコンの数だけHTTPリクエストが発生します。アイコンフォントであれば一つのフォントデータを読み込むだけなのでHTTPリクエスト数は減らす事が出来ます。Spriteを採用するとbackground-positionのキーワード指定が使えなくなるなど弊害もあります。Spriteよりも使い勝手が良いですが、勿論メリットばかりではなくデメリットもいくつか存在します。デメリットとしては、アイコン画像よりもファイルサイズが重くなりがちな点やWebフォント未対応ブラウザーの存在でしょうか。色やサイズがCSSで調整出来るため、アイコンフォントのメリットは少なくないと考えています。AwesomeはCDNで提供されており利用も簡単です。標準の利用方法ではクラス名でアイコンを指定する形式ですが、CSSベースなので必要に応じてカスタマイズも可能かと思います。具体的な利用方法は下記ブログが非常にわかりやすく参考にさせていただきました。Awesomeでアイコンを設置する例をいくつかご紹介します。fa-spin"></span>読み込み中...最後にアイコンフォント利用時の注意点として、Webフォントに未対応の環境やスクリーン・リーダー環境下でのアクセシビリティの問題があると言われています。アイコンそのものが重要な意味を成し、意味が伝わらなくなる時は実装方法を検討すべきでしょう。装飾としてのアイコンであれば、対応している環境では表示し、未対応の環境では非表示にする等で差し支えなければ採用を検討されてはいかがでしょうか。Tips安全でアクセシブルなアイコン・フォントHTML5を導入した制作の依頼・ご質問など、お気軽にお問合せください※(株)インフォマークのお問合せフォームへ移動します。重富ビル2FTEL.082-504-8311。