HTML・CSS

IE対策として「text-shadow」の代わりに「filter」を使っても表示されない

この記事は2013年4月に公開したものです(13年以上前)。当時の情報にもとづいており、現在の仕様とは異なる場合があります。

CSS3からtext-shadowというプロパティが追加されました。
このプロパティは、テキストに影をつける効果があります。

text-shadowプロパティの書き方

[code].text-shadow { text-shadow: 0 0 5px #333333; }[/code]

左から「水平方向の距離」、「垂直方向の距離」、「影のぼかし半径」、「影の色」を指定します。
詳しくはリファレンスなどをご覧ください。
HTMLクイックリファレンス

このプロパティは(当然のことのように)IEで効きません。
そのため、IEではjavascriptを使用するか、IE独自の「filter」を使う必要があります。

IE対策

対策としては以下2つの方法があります。

  1. javascriptを使用する
  2. IE独自filterを使う

javascriptを使用する場合

以下のサイトを参考にしてください。
asamuzaK.jp : IE9で(ついでにIE7、IE8でも)text-shadow

IE独自filterを使う場合

glowというfilterを使用します。
このfilterでは、背後から光を当てたような効果(グロー効果)を与えることができます。

[code]filter: glow(color=#333333,strength=5px);[/code]

colorで色を、strengtで効果の強さを指定します。

このfilterを使ってもテキストシャドウが表示されないことがあります。
どうやらCSSのbackgroundプロパティと同時に使えないようです。

filterが表示されない

[code].title {
background: #dddddd;
filter: glow(color=#333333,strength=5px);
}[/code]

filterが表示される

[code].title {
background: #dddddd;
}
.title span {
display: block;
filter: glow(color=#333333,strength=5px);
}[/code]

このように、spanなどを使用し、backgroundプロパティと同時に使用するのを避けてください。
またこの時、spanをブロック要素にする必要もあるので併せてご注意ください。

ウェブサイトの制作・改善や、社内の困りごとのご相談を承っています。

相談してみる