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要素)だけを対象にして、影を付加します。

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