CJ Column

コラム

ご存知ですか?アイコンの表示方法

Webサイトにも多用されているアイコン。
視覚的、直感的に分かりやすく情報を伝えてくれます。
さてこのアイコンの表示方法、ただ画像が置いてあるだけに見えるかもしれませんが、アイコンを表示させるにも、様々な方法があるのです。

    1

当然ながら、アイコンを使うとなると、それらは1つだけではなく、ページ上に多数登場することになります。アイコンを都度1つずつ読み込むとなると、それだけ表示速度の低下に繋がってしまいます。直感的に見せたいはずが、本末転倒ですね。

それを解決する主な方法として、「CSSスプライト」があります。

アイコンを1枚の画像にまとめ、1度だけ画像を取り込み、後はCSSにより、そのアイコン群の内のどれを表示させるかと指定する方法です。これであれば、アイコンが複数登場しても読み込みはたった1回で済みます。

しかし、これをレスポンシブサイトで使用すると、環境によっては画像がぼやけてみえることがあります。そこで、この場合は「アイコンフォント」という手法を用います。アイコンをフォントファイルにまとめることで、文字が拡大や縮小をしても綺麗に見えるように、どんなサイズでもぼやけず表示されるのです。

ただ、このアイコンフォントを用いると、基本的には意味の無い1文字にアイコン情報を付与するため、SEO的に情報を持たないという問題もあります。ですので、リガチャ (合字) という技術で、複数の文字を入力に対して1つのアイコン情報を持たせることができます。

アイコンフォントは大変便利ですが、文字は単色しか使えないために、複数の色を用いたアイコンには使えません。そういった場合にはSVGアイコンを使用します。あまり古いブラウザでは表示することが出来ませんが、ベクタ形式ですので環境によってぼやけたりせず、また複数の色を扱えます。普通の画像と同じように任意の代替テキストを持たせることも可能です。


より多くの環境で美しく見えるように。
より多くの情報を持たせるられるように。



一見、昔から同じように見えるWebサイトのアイコンですが、その中身は進化し続けているのですね。

S.I   フロントエンドエンジニア

コラム一覧に戻る
シトラスジャパン チラシ・フライヤー デザインサービス

お問合せ

以下のフォームにご入力の上、送信ボタンをクリックしてください。

企業名 企業名を入力してください
お名前 [必須] お名前を入力してください
メールアドレス [必須] メールアドレスを入力してください
電話番号 電話番号を入力してください
お問い合せ内容 [必須] お問い合わせ内容を入力してください

個人情報保護方針

個人情報の取り扱いについて

個人情報の取り扱いについて同意してください

ログインをすると、
会員限定記事を全文お読みいただけます。

パスワードを忘れた方へ

  • ログインIDを入力してください。
  • ログインIDを正しく入力してください。
  • パスワードを入力してください。
  • パスワードを正しく入力してください。
  • ログインID、パスワードが間違っています。


ログイン実行中

ログイン完了!ページを再読込します。