大学様向けウェブサイト制作・システム開発・教育支援

文字サイズ

お問い合わせ

毎日更新! AC BLOG 愛知県岡崎市で教育支援を行うA.C.Planetのスタッフが綴るブログです。

ホーム > ACブログ > ウェブ記事一覧 > アイコンを表示させる4つの方法

アイコンを表示させる4つの方法

by horiuchi

ウェブ

こんにちは、horiuchiです。
秋らしさがますます感じられる今日この頃。。。
今回はアイコンを表示させる方法をまとめてみました

画像(pngやgif)を使う①

一番王道なpngやgif画像を使う方法ですね

メリット

  • ブラウザに依存しない

デメリット

  • 元サイズより大きく表示すると画像が荒くなる
  • 加工ソフトがないと色が変更できない

画像(svg)を使う②

SVGファイルとは拡大や縮小に強いベクター形式の画像です
しかし、複雑なアイコンであればあるほどソースが長くなり、ファイルが重くなる可能性があるのでシンプルなものに限って使用したほうが無難かもしれません。

メリット

  • ブラウザに依存しない
  • テキストエディタでサイズや色が変えられる

デメリット

  • アイコンが複雑なものだとソースが長くなり、かえって重くなることも

疑似要素(:bofore,:after)を使う

ウェブページを更新する方なら分かると思いますが、やっぱりなるべく加工ソフトを使わずにスタイルシートだけで変更できるのが理想ですよね。

参考サイトは下記参照

CSS ICON

メリット

  • スタイルシートだけで色が変更できるので更新が楽

デメリット

  • ブラウザや既存ページのスタイルによって上手く表示されない場合も
  • スタイルシートでできるアイコンに限りがある
  • スタイルシートの記述が増える

Font Awesomeを使う

アイコンの種類は下記参照

Font Awesome

使い方は下記参照

【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう

メリット

  • 簡単にアイコンを設置できる

デメリット

  • HTMLソースの記述が長くなる

最後に

やっぱりアイコンひとつとっても「更新のしやすさ」「拡張性」は重要な要素ですよね。
私も「誰もが使いやすい」ページを目標にこれからのサイト制作に励んでいきたいと思います^^

TOP