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