★このページでは、IEで独自に拡張された設定について解説しています。

動作確認されているのはIE6.0のみですので、それ以外のバージョン、ブラウザでは正しく表示されない場合があります。

　

初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう

VOL13. IE独自拡張による設定　その2 ★ フィルタ2 輪郭に効果をつける−影と発光−（IE5.5以降で有効）

※フィルタそのものはIE4.0以降から有効なものもありますが、指定する書式が違い、IE5.5以前のブラウザは既に一般的でないため、ここではIE5.5以降で有効な書式で解説してゆきます。形式は、どのフィルタも「filter: progid:DXImageTransform.Microsoft.」の後に入る部分を変えることにより、種類を指定します。

　

要素の輪郭に付けられる影には、以下の3種類があります。

filter: progid:DXImageTransform.Microsoft.DropShadow（詳細設定） ... ぼかしのない影を付けます。

filter: progid:DXImageTransform.Microsoft.Shadow（詳細設定） ... ぼかしの付いた影を付けます。

filter: progid:DXImageTransform.Microsoft.Glow（詳細設定） ... 発光しているような色彩の輪郭が付きます。

　

　

１.「filter: progid:DXImageTransform.Microsoft.DropShadow（詳細設定）」

offx ... 影の横方向への距離（ピクセル単位で「+」の値の時は右、「-」の値の時は左へ影が伸びる）

offy ... 影の上下方向への距離（ピクセル単位で「+」の値の時は下、「-」の値の時は上へ影が伸びる）

color ... 影の色(RGB値、もしくは色名)

※スタイルシートで使える色指定について詳しくは「Column 8.スタイルシートと色指定」を参照して下さい。

positive ... 画像の輪郭に沿った影を付ける（「true」 もしくは「1」）か、透過している部分を影として表示する（「false」 もしくは「0」）か。

※「false」とした場合、透過GIF画像は元の画像で透過している部分が影として表示されますが、通常の画像は影が表示されません。下の例を参照して下さい。

enabled ... フィルタの実行　（実行...「true」 もしくは「1」 / 実行しない...「false」 もしくは「0」）

（但し、enabled はデフォルトが「true」のため、特に指定しなくても実行されます。）

　

これらの詳細は、下の例のように（）内に「,」で区切って並べます。

filter: progid:DXImageTransform.Microsoft.DropShadow(offx=10,offy=5,color=#FF6633,positive=false);

　

★透過GIF画像で「positive」を変えてみた例★

元の画像

positive=false

positive=true

　

★通常の画像で「positive」を変えてみた例★

positive=false

positive=true

　

CSSとHTMLでは、それぞれ以下のように書かれています。

CSS設定

.dropshadow1 { filter: progid:DXImageTransform.Microsoft.DropShadow
(offx=10,offy=5,color=#FF6633,positive=false); }

.dropshadow2 { filter: progid:DXImageTransform.Microsoft.DropShadow
(offx=10,offy=5,color=#FF6633,positive=true); }

　

　

　HTMLでの呼び出し

<img class="dropshadow1" src="sample_filter2.gif" width="136" height="134">
<img class="dropshadow2" src="sample_filter2.gif" width="136" height="134"> 

　

　

２.「filter: progid:DXImageTransform.Microsoft.Shadow（詳細設定）」

color ... 影の色(RGB値、もしくは色名)

（スタイルシートで使える色指定について詳しくは「Column 8.スタイルシートと色指定」を参照して下さい。）

direction ... 影の方向（0、45、90、135、180、225、270、315）=45度単位

0

45

90

135

180

225

270

315

上

右上

右

 右下 下 左下 左 左上

strength ... 影の長さ（1〜255、デフォルトは「5」）

enabled ... フィルタの実行　（実行...「true」 もしくは「1」 / 実行しない...「false」 もしくは「0」）

（但し、enabled はデフォルトが「true」のため、特に指定しなくても実行されます。）

　

これらの詳細は、下の例のように（）内に「,」で区切って並べます。

filter: progid:DXImageTransform.Microsoft.Shadow(color=#FF6633,direction=135,strength=20);

元の画像

color=#FF6633,direction=135,strength=20

　

CSSとHTMLでは、それぞれ以下のように書かれています。

CSS設定

.shadow { filter: progid:DXImageTransform.Microsoft.Shadow
(color=#FF6633,direction=135,strength=20); }

　

HTMLでの呼び出し

　<img class="shadow" src="sample_filter2.gif" width="136" height="134"> 

　

　

３.「filter: progid:DXImageTransform.Microsoft.Glow（詳細設定）」

color ... 周囲の発光色(RGB値、もしくは色名)

※スタイルシートで使える色指定について詳しくは「Column 8.スタイルシートと色指定」を参照して下さい。※

strength ... 影の長さ（1〜255）

※数値が大きくなるほど発光する部分も大きくなります。

enabled ... フィルタの実行　（実行...「true」 もしくは「1」 / 実行しない...「false」 もしくは「0」）

（但し、enabled はデフォルトが「true」のため、特に指定しなくても実行されます。）

　

これらの詳細は、下の例のように（）内に「,」で区切って並べます。

filter: progid:DXImageTransform.Microsoft.Glow(color=#FF0000,strength=15);

元の画像

color=FF0000,strength=15

　

CSSとHTMLでは、それぞれ以下のように書かれています。

CSS設定

.glow { filter: progid:DXImageTransform.Microsoft.Glow
(color=#FF0000,strength=15); }

HTMLでの呼び出し

　<img class="shadow" src="sample_filter3.gif" width="136" height="134"> 

　

　

以上は画像を使って解説しましたが、段落（ｐ）などの要素にフィルタをかけて文字を装飾することもできます。詳細はこちらをご覧下さい。

　

初級篇2.VOL13. IE独自拡張による設定・その2-1 <<

初級篇2.VOL13. IE独自拡張による設定・その2-3

　

2007.4.1.