iPentec.com / Doc / CSS / HTML / CSS ドロップシャドウ

ドロップシャドウのある枠を作成する (影を画像で表現する方法) - CSS

ドロップシャドウのある枠をCSS/HTMLで作成するコードを紹介します。

補足

この記事で紹介する方法はCSSのbox-shadow プロパティが利用できない古いWebブラウザでの表現方法です。新しいWebブラウザでは、CSSのbox-shadowプロパティを利用して簡単にドロップシャドウを描画できます。box-shadowプロパティを利用する方法についてはこちらの記事を参照してください。

画像の作成

枠の影の画像を作成します。画像作成にはPhotoshopを利用します。

レイヤーを1枚作成し、おおよその枠のサイズの矩形を作成します。枠の横幅は完成時の横幅と同じ長さにします。

レイヤーを選択し右クリックしポップアップメニューを表示します。メニューの[レイヤー効果]を選択します。

[レイヤースタイル]ダイアログボックスが表示されます。左側の[スタイル]の下から2番目[光彩(外側)]にチェックを付けます。右側のパラメータは下図の通りとします。

[OK]ボタンを押し効果を確定します。下図の画像が描画できます。

レイヤーをラスタ化します。レイヤーを選択し右クリックしてポップアップメニューを表示します。メニューの[レイヤーをラスタライズ]を選択します。

レイヤーがラスタ化されました。背景を非表示にした状態が下図です。

中央部分の画像

1枚目の画像は矩形の中間部分を抜き出した画像(下図)を用意します。

背景を非表示にして透過PNG形式で保存します。
#img("html-css-create-shadowed-frame-using-shadow-image

上端、下端の画像

2枚目の画像は矩形の上端と下端を組み合わせた画像(下図)を用意します。

こちらも背景を非表示にして透過PNG形式で保存します。

画像

作成した画像は下図です。

コード

以下のコードを記述します。

default.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
  Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="Stylesheet" type="text/css" href="Style.css" />
</head>
<body>
<div class="frame">
  <div class="frame-top"></div>
  <div class="frame-side">
    <div class="frame-doc">
    1<br />
    2<br />
    3<br />
    4<br />
    5<br />
    6<br />
    7<br />
    8<br />
    9<br />
    10<br />
    </div>
  </div>
  <div class="frame-bottom"></div>
</div>
</body>
</html>

Style.css

.frame
{
  text-align:center;
  margin-left:auto;
  margin-right:auto;

  width:420px;
}

.frame-top
{
  background:url('./frame-cap.png');
  padding-left:19px;
  width:420px;
  height:20px;
}

.frame-bottom
{
  background:url('./frame-cap.png') 0px -68px;
  padding-left:19px;
  width:420px;
  height:20px;
}


.frame-side
{
  background:url('./frame-side.png') repeat-y left;
  padding-left:19px;
  width:420px;
}

.frame-doc
{
  text-align:left;
  margin-left:8px;
}