ご存知ですか？アイコンの表示方法
Webサイトにも多用されているアイコン。
視覚的、直感的に分かりやすく情報を伝えてくれます。
さてこのアイコンの表示方法、ただ画像が置いてあるだけに見えるかもしれませんが、アイコンを表示させるにも、様々な方法があるのです。
当然ながら、アイコンを使うとなると、それらは1つだけではなく、ページ上に多数登場することになります。アイコンを都度1つずつ読み込むとなると、それだけ表示速度の低下に繋がってしまいます。直感的に見せたいはずが、本末転倒ですね。
それを解決する主な方法として、「CSSスプライト」があります。
アイコンを1枚の画像にまとめ、1度だけ画像を取り込み、後はCSSにより、そのアイコン群の内のどれを表示させるかと指定する方法です。これであれば、アイコンが複数登場しても読み込みはたった1回で済みます。
しかし、これをレスポンシブサイトで使用すると、環境によっては画像がぼやけてみえることがあります。そこで、この場合は「アイコンフォント」という手法を用います。アイコンをフォントファイルにまとめることで、文字が拡大や縮小をしても綺麗に見えるように、どんなサイズでもぼやけず表示されるのです。
ただ、このアイコンフォントを用いると、基本的には意味の無い1文字にアイコン情報を付与するため、SEO的に情報を持たないという問題もあります。ですので、リガチャ (合字) という技術で、複数の文字を入力に対して1つのアイコン情報を持たせることができます。
アイコンフォントは大変便利ですが、文字は単色しか使えないために、複数の色を用いたアイコンには使えません。そういった場合にはSVGアイコンを使用します。あまり古いブラウザでは表示することが出来ませんが、ベクタ形式ですので環境によってぼやけたりせず、また複数の色を扱えます。普通の画像と同じように任意の代替テキストを持たせることも可能です。
より多くの環境で美しく見えるように。
より多くの情報を持たせるられるように。
一見、昔から同じように見えるWebサイトのアイコンですが、その中身は進化し続けているのですね。
