画像を加工せず、複数の画像に「影」を付加(2ページ目)

Step.1 影画像を用意する

各画像に影を加えるために、影だけを独立した画像ファイルとして用意します。ここでは、以下のGIF画像を使っています。

：影画像「bg120x96.gif」（2.3KB）

この影画像は「横127×縦104ピクセル」の画像です。
紺色部分の大きさは「横120×縦96ピクセル」で、そこに影を加えることで「横127×縦104ピクセル」になっています。 （影の部分は、右側が幅7ピクセル、下側が高さ8ピクセルです。） ※影を加える対象の画像は、この影画像の「紺色部分」と同じ大きさ（120×96）でなければなりません。（対象の画像サイズに合わせて影画像を作って下さい。）

この影画像を、スタイルシートを使って各画像の「背景」に表示させることで、複数の画像に影を加えられます。

Step.2 スタイルシートを適用できるようHTMLを記述

影画像の合成はスタイルシートで行います。 そこで、画像を表示するHTMLに対してclass名を加えて、スタイルシートで装飾できるようにします。

画像を表示するimgタグに対してclass属性を加えても良いのですが、対象画像がたくさんある場合にはHTMLの編集が面倒です。 ここでは、対象画像全体をdiv要素に含め、そのdiv要素に対してclass属性を加えることにします。

<div class="sampleimages">
   <img src="p1.jpg" width="120" height="96" alt="森林">
   <img src="p2.jpg" width="120" height="96" alt="新緑">
   <img src="p3.jpg" width="120" height="96" alt="森花">
　　：　　：　　：
   <img src="p12.jpg" width="120" height="96" alt="砂浜">
</div>

上記では、「sampleimages」というclass名を付加したdiv要素に、対象画像（img要素）を含めています。 このdiv要素内に記述された画像（img要素）だけを対象にして、影を付加します。

それでは、最後に「影画像」を付加するためのスタイルシートを記述しましょう。