CSSで画像に本物の写真のように枠とドロップシャドウを付ける

CSSで画像に本物の写真のように枠をつけてドロップシャドウ（影）を付ける方法は、最近普及してきています。
下の画像も、CSSで枠（白太枠+その外側のグレー細枠）とドロップシャドウを表示させています。

枠とドロップシャドウを含めて1つの画像ではなく、
写真部分だけがimgで置いてあり、枠とドロップシャドウはCSSで表示させています。

CSSで表示させるメリット

「Photoshopで画像を加工したほうが簡単でしょ。」
そう最初は私も思っていました。
Web用に画像をサイズ変更や色調補正するからそのついでに。
でも毎回Photoshopでドロップシャドウをつける作業がないのは楽です。
そして、例えばすでにサイズもそのままで良くて色調も良い場合や、Flickrの画像を載せるとかPhotoshopを使わないときにはこの上なく便利。
CSSでこの写真枠とドロップシャドウを指定した画像に対して統一して表示をさせられるのもメリット。

Windows IE6（and lower）の後方互換モードへの対策

Windows IE6では、XHTMLでXML宣言をしていると後方互換モードになってしまうというバグがあります。（他のブラウザでは標準モードです。）
後方互換モードでは、指定したCSSが効かない場合があります。
"写真枠とドロップシャドウをつけるCSS"の一般的なCSS記述方法の場合、
XHTMLでXML宣言をしているとWindows IE6（and lower）でのみ写真枠の表示ができません。（ドロップシャドウは表示されます。）
これをWindows IEでも写真枠の表示をさせるには、私が解る限りでは以下の3つの方法があります。

1. XML宣言を削除してしまう
2. PHPでXML宣言をWindows IE6の時にだけ消す
3. CSSハックを使用してなんとか表示させる

1のXML宣言を削除する方法は、Web標準から外れるので避けたい。
2のPHPの方法はページに記述するだけなのでスマートですが、もう少し広く使用できるものにしたい。
そこで、私が選んだ道は、3です。

（※XHTMLではなくHTMLで記述している方や、XML宣言を削除しても良い又は元々XML宣言していないという方は、一般的な方法が小粋空間さんの「CSSで画像に影をつける」に詳しく書かれていますので参考になると思います。）

CSSハックを使ってWindows IE6（and lower）含めて写真枠とドロップシャドウを表示させる

Windows IE6（and lower）に他のブラウザと同じ表示をさせるために色々試しましたが、
私がたどり着いた結果はCSSハックを3種類使用してCSSを記述する方法。
使用するCSSハックは以下です。

• Star Hack
• Holly Hack
• The Owen Hack

HTML記述方法

Windows IE対策として、imgをspan要素で2重に括ります。
外側のspan要素は、class属性"photo"として、
内側のspan要素は、class属性"photo_ie"とします。

<span class="photo">
<span class="photo_ie">
<img alt="sky" src="0828.1.jpg" width="262" height="120" />
</span>
</span>

CSSの追加

少し長いですが、下記を追加します。

/* Hides CSS from MacIE \*/
* html .photo {
background: url(ドロップシャドウ画像のパス) right bottom;
margin-top: 8px;
float: left;
}
/* */

.photo {
background: url(ドロップシャドウ画像のパス) right bottom;
float: left;
}

/* Hides CSS from MacIE \*/
* html .photo_ie {
position: relative;
left: -4px;
top: -4px;
padding: 4px;
background-color: #fefefe;
border: 1px solid #98a5b9;
display: block;
}
/* */

head:first-child+body .photo img {
position: relative;
left: -4px;
top: -4px;
padding: 4px;
background-color: #fefefe;
border: 1px solid #98a5b9;
}

1番上の.photoと3番目の.photo_ieは、
Star HackとHolly Hackを組み合わせています。
Windows IE4～6とMac IE4～5のみにスタイルを適応するStar Hack（* html）を指定しておいて、
Mac IEにスタイルを適応させないHolly Hackをかぶせて指定してWindows IE 4～6のみにスタイルを適応させています。
4番目の.photo imgにはThe Owen Hack（head:first-child+body）を指定して、Windows IE4～6にスタイルを適応させないようにしています。

backgroundにある"ドロップシャドウ画像へのパス"は、背景画像として使用するアップロードしたドロップシャドウ画像へのパスを指定してください。
私が作ったのはこちらのドロップシャドウ画像です。
上記CSSは.photoで「float: left」を指定して右にテキストが回り込むようにしているので、
途中で回り込みをやめたい場合はbrなどにclass属性を与えて「clear: both」で解除していただければ良いかと思います。

もっとスマートな方法があるかもしれませんが、現時点ではこんな感じの結果になりました。

Special Thanks!

mikiちゃん、05さん、ちにゃと先生、
Macを含む各ブラウザでの確認のご協力いただきどうもありがとう！
こだわりだしたら止まらない、みんなを巻き込む迷惑な女pasに付き合ってくれて本当に感謝です。