Step.3 影画像を加えるスタイルシートを記述

スタイルシートは、以下のように記述します。
影画像のファイル名が「backshadow.gif」であり、影部分の大きさが「右側 7px・下側 8px」の場合、次のようなソースになります。

<style type="text/css"><!--
div.sampleimages img {
   background-image: url("backshadow.gif");
   background-repeat: no-repeat;
   background-position: right bottom;
   padding: 0px 7px 8px 0px;
}
--></style>

■background-image: url("backshadow.gif");
画像の背景に影画像「backshadow.gif」を表示させています。 「画像の背景に画像を表示する」と表現すると変に感じられるかもしれませんが、スタイルシートを使えばimg要素(画像)に対しても「背景画像」として別の画像を表示させることができます。

■padding: 0px 7px 8px 0px;
img要素に対して、ただ背景画像を指定しただけでは、背景画像は表示されません。 なぜなら、「img要素の表示面積」は「画像の面積」と同じになるため、背景画像を表示する余白がないからです。
そこで、paddingプロパティ(内側の余白)を使って、画像の右側と下側に余白を加えています。 その結果、余白部分にだけ背景画像(=ここでは影画像)が表示されるようになります。
※paddingプロパティに値を4つ指定すると、「上」→「右」→「下」→「左」の順(=「上」から時計回り)で余白量を指定したことになります。
※ここでは、影画像の「影」の部分が、右側は7ピクセル、下側は8ピクセルなので、上記のように余白量を設定しています。実際に用意した画像に合わせて値を修正して下さい。

■background-repeat: no-repeat;
背景画像は、そのままではタイル状に繰り返して表示されます。影画像は1つだけ表示されれば十分なので「no-repeat」を指定して、背景画像を繰り返さないように指定しています。

■background-position: right bottom;
背景画像の表示位置を「右下」に揃えるよう指定しています。影画像(backshadow.gif)の影の部分は右下にあるからです。

これで、「sampleimages」クラスの付加されたdiv要素内にある画像には、すべて影が付くようになります。

いくつでも画像に影を付加できる例
▲対象画像がいくつあっても、影画像1つですべての画像に影を付加できます。
サンプルページを表示させる

備考

Internet Explorerでは、描画モードが「互換モード」だと、img要素に指定したpaddingプロパティが無視されるため、影が表示できません。 描画モードが「標準モード」になるようにDOCTYPE宣言を記述したページでのみ、影を加えられます。(標準モードで表示されるDOCTYPE宣言には、例えば以下のようなものがあります。)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

※「DOCTYPE宣言」とは、HTMLソースの先頭に記述するもので、「そのHTMLがどのバージョンの文法に従って記述されているのか」などの情報を示す記述です。

おわりに

今回は、画像を直接加工することなく、複数の画像に影を付加する方法をご紹介いたしました。
影を付加したい画像がたくさんある場合は、画像加工ソフトを使って作業するよりも楽です。 ぜひ、試してみて下さい。



※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。