アイコンと画像の見極め方
ページ上に存在する画像は、img要素で作りがちですが、ページを飾ったり、タイトルの横に表示したいアイコンやリスト横のアイコンなどはimg要素で作成するのはあまり得策ではありません。
例えば、ページ上にあるタイトルのデザインは同じケースが多いですし、リスト横のアイコンなどはすべて同じ事がほとんどです。
これらをHTML側のimg要素で作成しますと、同じアイコンでありながら、同じソースコードを何度も記述する必要があり、HTMLソースが汚くなってしまいます。
また、メンテナンスが入り、すべてのアイコンを変えないといけなくなったら該当箇所すべてを修正していかなければなりません。
非常に非効率的ですよね。
これらのアイコンをCSSで設定しておけば1か所直すだけで、該当箇所すべてが直ってしまいます。
ですからいろんな意味で画像（img要素）として用意するのか、アイコン（CSS側で設定）として作成するのかでは、大きな違いがあります。
そこで、ページ上の画像をアイコンとして作成したほうがいいのか、画像で作成すべきなのか、判断に迷うなら一度このページを読んでみてください。
１．アイコンとimg要素のどちらを使うべきか
・アイコンは文字の飾りなのでCSS担当になります。
画面上の説明は本来文字があれば伝わるのですが、文字だけだと素気ないですよね？
その為、アクセントとして画像などで文字を飾り、少し華やかにしたい、あるいは文章がどういう意味なのかを解り易くしたい、そういった時に文字に沿える画像、これがアイコンと言われてるものです。
あるいは、行頭に同じ画像を配置する事で同一のグループとして判断しやすく、見た目を解り易くするものもアイコンの類になります。
・ページ内のコンテンツの一部や閲覧者に訴えたい画像、文章の一部や説明に必要な写真などはimg要素で作るべきです。
料理紹介サイトであれば料理に関する画像や写真、お店や立地条件などの情報や画像などはimg要素で作るべきです。
文章を飾ったり目立たせたりする為のアイコン、という考え方と、閲覧者に情報を与えたい、文字の代わりに画像で表現したいという考え方は、目的が大きく違うという事を意識するといいでしょう。
２．アイコンを作る要素を正しく理解する事
アイコンを作る時、大事なのはどの要素のアイコンか、どの文章の纏まり（要素）でアイコンを作ればいいかをよく見極める事です。
例えば、タイトルの横のアイコンなのか、リストの各行のアイコンなのか、それともセクショニングコンテンツとしてのアイコンなのか、どの要素（グループ）のアイコンなのかをよく考察しましょう。
特に、行単位のアイコンか、BOX単位のアイコンかを見極め、適切なアイコンを作成するとHTML文章の骨格がシンプルで解り易く、デザインやレイアウトが崩れにくく、メンテナンス性に優れ、比較的容易にページデザインを作成する事ができるようになります。
３．アイコンの作成方法
アイコンは上記の通り、HTML（img要素）で作成するのではなく、CSS（背景画像、background-image）で作成するのですが、ちょっとしたテクニックと知識が必要になります。
そこでアイコンを作る時の考え方や手順などを解り易く解説しておりますので、参考にしてみてください。
