背景画像を設定した要素のテキストに IE でもドロップシャドウを表示する方法。

投稿日：2010 年 9 月 17 日

CSS3 には「text-shadow」というプロパティがあり、これを指定するだけでテキスト要素に影を付けることができます（色や距離やぼかし具合もコントロール可）。
ただし、IE 以外ですが。例に漏れず。

IE9 からは CSS3 にもある程度対応するそうですが、現行の IE8 までは完全に無視されます。

で、IE でも CSS3 を使えるようにしたり、ドロップシャドウを擬似的に実現する方法が幾つかあるらしく、色んなところで紹介されています。

ただ、なぜか上記の方法ではうまくいかず、結局「IE の独自拡張を直に書く」というベタ（？）な方法に辿り着きました。
なぜ他の方法が使えなかったのか、詳しい経緯は覚えてません。
ひょっとしたら、「本当はうまくいってたけど設定が間違ってて出来ないと勘違いした」なんてケースもあるかも……。
ちゃんと履歴は残しとかないとダメですねすいません。

さて、独自拡張で何とか「ドロップシャドウっぽい」ことができるようになったのですが、ここでまた問題発生。
どうも背景画像を設定している要素では、うまく効いてくれないようなのです。
その理由は、なんとドロップシャドウが背景画像のさらに下（裏側）に表示されるようになっていたこと。
つまり、一応ドロップシャドウが表示するようにはしてたけど、背景画像で隠れて見えなかった、という訳です。

なので、背景画像を設定した中に、テキスト用の要素をもう一つ追加することで、何とか IE でもドロップシャドウっぽい感じにすることができました。

ソースと設定方法

「h1 要素に背景画像を設定してそのテキストに影を付ける」という仮定で、設定方法をご紹介します。

まずは HTML。

<h1><span class="text">テキスト</span></h1>

「<span class="text">～</span>」がテキスト用（ドロップシャドウ用）に追加した要素です。
もし背景画像を使わないのなら、これは要りません。

そして CSS。

h1 {
background: url("hoge_bg.jpg") left top no-repeat;
}

/* モダンブラウザ用 */
h1 .text {
text-shadow: 1px 1px 1px #000;
}

/*IE6以下用*/
* html h1 .text {
display: block;
width: 100%;
filter: Shadow(Color=#000000, Direction=135, Strength=2);
}

/*IE7用*/
:first-child + html h1 .text {
display: block;
width: 100%;
filter: Shadow(Color=#000000, Direction=135, Strength=2);
}

/*IE8用*/
head~/* */body h1 .text {
display: block;
width: 100%;
filter: Shadow(Color=#000000, Direction=135, Strength=2);
}

IE6、IE7、IE8 用に、それぞれハックで個別に設定をしています。
内容はまったく同じなのでまとめてしまっても良いと思いますが、何となく。

あと、IE の独自拡張の注意点として、自由度の低さがあります。
CSS3 の text-shadow なら大体のことは自由に設定できますが、IE 独自拡張はぼかし具合が設定できません。
距離も確か設定できないはずで、色や角度も効かないことがあったような。（曖昧ですいません）

なので、袋文字みたいな表現はできないと考えた方がいいです。
別の独自拡張を使ったら出来るかも知れないですけど。

ブラウザごとにいちいち設定をしないで済むような時代が早く来れば良いですね……。
来ないかな…………。
来ないんだろうな………………。