ホームページを作ろうヨ!!

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

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

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

VOL13. IE独自拡張による設定　その2 ★ フィルタ6 ウエーブをつける （IE5.5以降で有効）

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

filter: progid:DXImageTransform.Microsoft.Wave（詳細設定）

freq ... 波の数（整数値）

※数値が大きくなるほど波の数が多くなり、間隔は狭くなります。

lightstrength ... 光の強さ(0～100)

※画面上に波の立体感を出します。数値が大きくなるほど全体に光が強く当たっている表現になるので、画面全体に波の谷間が濃く反映されます。

phase ... 波の開始位置(0～100)

※波形をどの部分から始めるかを指定します。

strength ... 波の振幅（整数値、デフォルトは「5」)

※横方向への幅を指定します。数値が大きくなるほど横幅も広くなります。

add ... 元の画像をベースに置くかどうか　（する...「true」もしくは「1」 / しない...「false」もしくは「0」）

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

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

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

filter: progid:DXImageTransform.Microsoft.Wave(freq=4,lightstrength=20,phase=0,strength=10,add=true);

← 元の画像


(freq=4,lightstrength=20,phase=0,strength=10,add=true)	(freq=4,lightstrength=70,phase=0,strength=10,add=true)


(freq=4,lightstrength=20,phase=50,strength=10,add=true)	(freq=4,lightstrength=70,phase=0,strength=30,add=true)

(freq=4,lightstrength=20,phase=0,strength=10,add=false)

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

CSS設定

.wave1 { filter: progid:DXImageTransform.Microsoft.Wave
(freq=4,lightstrength=20,phase=0,strength=10,add=true); }

.wave2 { filter: progid:DXImageTransform.Microsoft.Wave
(freq=4,lightstrength=70,phase=0,strength=10,add=false); }

.wave3 { filter: progid:DXImageTransform.Microsoft.Wave
(freq=4,lightstrength=20,phase=50,strength=10,add=true); }

.wave4 { filter: progid:DXImageTransform.Microsoft.Wave
(freq=4,lightstrength=20,phase=0,strength=30,add=true); }

.wave5 { filter: progid:DXImageTransform.Microsoft.Wave
(freq=4,lightstrength=20,phase=0,strength=10,add=false); }

　HTMLでの呼び出し

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

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

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

2007.4.3.+4.24.