画像の考え方

人によりその考え方は、様々ですが、少なくとも、訳もなく動き回る画像や、文章内容に適さない画像を、 使用する人は、まずいないでしょう。

画像をどのように使う？

ここで、画像が使われる条件を考えて見ましょう。

1. 文章内容が少しでも、より理解しやすくするために使う。
2. ページ全体の雰囲気を表すための、背景として使用する。
3. リストマークをデザイン的に統一するために使用する。
4. タイトル、ロゴとして使用する。
5. メニューボタンとして使用する。

これら以外に使用する場合は、ほとんど意味のない画像と判断されるのではないでしょうか？

文章構造により使い分ける

画像は、文章構造により、その使い方をある程度決めることができます。

• ページ全体の背景として使用する。（CSS内でbackground-imageとして使用）
• ロゴとして表示する。（HTML内でimgとして使用）
• 見出しなどの、背景として使用する。（CSS内でbackground-imageとして小さな画像を使用）
• リストマークとして使用する。（CSS内でbackground-imageとして小さな画像を使用）
• 説明画像として使用する。（HTML内でimgとして使用）
• ナビゲーションとして使用する。（CSS内でbackground-imageとして小さな画像を使用）

HTMLでの記述方法

画像を表示するには、下記のように記述します。

<img src="画像のある場所と画像名" width="画像の幅" height="画像の高さ" alt="画像が表示されない場合の代替え文字">

オーサリングなどでは、ソース内に、border（枠線）の指定をするものがありますが、<img>要素内に、borderは記述 しません。（CSS内で指定する）また、altは必ず記述します。意味のない画像の場合は、alt=""と記述しておきましょう。

画像でなくても表現できる場合もある

よく見かけるページに、メニューボタンから、本文に至るまで画像だらけというものがあります。 画像を使えば、何でも表示できるという、考えなのでしょうが、これは、いただけません。

画像を使用すれば、ソースの容量が増え、ネット環境においては、その表示が遅くなってしまうからです。

できるだけ画像を小さく、少なく、より美しく見せるには、どうすればいいのでしょうか？
ココで発想の転換が必要となります。何かいいタグはないか？・・・そうあるのです。

それが、border（枠線）の応用です。このページにも使用していますが、枠線と背景色をうまく使用すれば 画像を使わなくても、表現できる事がたくさんあるのです。