IE6.0 IE5.5 IE5.0 IE4.0 　 　 　 　 　
DirectXを使わないフィルタ効果
本書「フィルタで画像や文字に効果をつけよう」では、DirectXを使ったフィルタを紹介しましたが、実はInternet Explorer4.0でもフィルタが使えます。ここではそれを紹介しましょう。

解説
　 基本的にCSSの一つですので、<div>タグや<span>タグを使った書式は、以下のようになります。他の書式はサンプルで確認してください。 
<div style="filter:フィルタ名 ( 属性 = 値 , 属性 = 値 ,属性 = 値 …)">
：
：
</div>
各フィルタの属性や値は、以下の表のようになります。

フィルタ名 概要 属性 値
Alpha 透過する Opacity 開始部分の透明度を0〜100で指定。0で透明になり100はまったく透明化されない
FinishOpacity 終了部分の透明度を0〜100で指定。0で透明になり100はまったく透明化されない。Styleが0のときは無効
Style 透明化効果の形を均一（0）/直線的（1）/放射状（2）/長方形（3）で指定
StartX 開始部分の水平軸の位置を数字で指定
StartY 開始部分の垂直軸の位置を数字で指定
FinishX 終了部分の水平軸の位置を数字で指定
FinishY 終了部分の垂直軸の位置を数字で指定
Blur 手ぶれのような効果を作成 Add 元画像を重ねて表示(true)するか、重ねないで表示(false)するかを指定
Direction 効果の角度を時計回りで0から45度ずつ315度まで指定。（0/45/90/135/180/225/270/315）
Strength 効果の長さをpixel単位で指定。省略時は5。 最大値は255
Chroma 要素の中の特定の色を透明化 Color 透明化したい色をRGBで指定
DropShadow はっきりとした影をつける Color 効果の色をRGBで指定
OffX 横方向にどれだけオフセットするかを数字で指定。プラス値を指定すると右側にマイナス値を指定すると左側に影ができる
OffY 縦方向にどれだけオフセットするかを数字で指定。プラス値を指定すると下側にマイナス値を指定すると上側に影ができる
Positive 元画像を重ねて表示(true)するか、重ねないで表示(false)するかを指定
FlipH 水平方向に反転 なし --
FlipV 垂直方向に反転 なし --
Glow 光っているようにする Color 効果の色をRGBで指定
Strength 効果の強さを1〜255で指定
Gray グレースケールで表示 なし --
Invert 色相、彩度、輝度の値を反転 なし --
Light 要素にさまざまな光を当てる 属性はなし。
ただし以下のメソッドを使用。
詳細は下記参照
AddAmbient
AddCone
AddPoint
ChangeColor
ChangeStrength
Clear
MoveLight		 --
Mask 要素を指定した色でマスキングする Color マスクしたい色をRGBで指定
Shadow ぼやけた影をつける Color 効果の色をRGBで指定
Direction 効果の角度を時計回りで0から45度ずつ315度まで指定。（0/45/90/135/180/225/270/315）
Wave 波打つようにする Add 元画像を重ねて表示(true)するか、重ねないで表示(false)するかを指定
Freq 波の数を数字で指定
LightStrength 波の山部分と谷部分の光の強さの違いを0 〜100で指定。つまり100を指定するともっとも陰影がはっきりする
Phase 波がどれくらいのオフセットで開始するかを0 〜100で指定。0はオフセットしないという意味
Strength 波の強さを数字で指定
XRay レントゲン写真のように表示 なし --

以下の表はLightフィルタが取る属性と値です。具体的な書式はサンプルで確認してください。

メソッド 概要 属性 値
AddAmbient 全体にぼやけたような光をあてる 例：object.filters.Light.addAmbient ( R , G , B , strength )
R 赤の値を0〜255で指定
G 緑の値を0〜255で指定
B 青の値を0〜255で指定
strength 光の強さを0〜100で指定
AddCone 円すい型（スポットライト）の光をあてる 例：object.filters.Light.addCone ( x1, y1 , z1 , x2 , y2 , R , G , B , strength , spread )
x1, y1, z1 光源の開始部分の位置を指定
x2, y2 光源の終了部分の位置を指定。z2は0
R 赤の値を0〜255で指定
G 緑の値を0〜255で指定
B 青の値を0〜255で指定
strength 光の強さを0〜100で指定
spread 光の広がりの角度を0〜90で指定
AddPoint 放射状の光をあてる 例：object.filters.Light.addPoint ( x , y , z , R , G , B , strength )
x, y, z 光源の位置を指定
R 赤の値を0〜255で指定
G 緑の値を0〜255で指定
B 青の値を0〜255で指定
strength 光の強さを0〜100で指定
ChangeColor 光の色を変更する 例：object.filters.Light.ChangeColor(lightnumber, R , G , B , fAbsolute )
lightnumber 変化させたい光源の識別番号
R 変更する赤の値を0〜255で指定
G 変更する緑の値を0〜255で指定
B 変更する青の値を0〜255で指定
fAbsolute true（0以外）の時は、指定した色に置き換わり、false（0）の時は、指定した色値が現在の値に足されていく
ChangeStrength 光の強さを変更する 例：object.filters.Light.ChangeStrength ( lightnumber , strength , fAbsolute )
lightnumber 変化させたい光源の識別番号
strength 変更する光の強さを0〜100で指定
fAbsolute true（0以外）の時は、指定した光の強さに置き換わり、false（0）の時は、指定した強さが現在の値に足されていく
Clear 光源をクリアする 例：object.filters.Light.Clear
なし 　
MoveLight 光源を移動させる 例：object.filters.Light.MoveLight ( lightnumber , x , y , z , fAbsolute )
lightnumber 移動させたい光源の識別番号
x, y, z 移動する位置を指定
fAbsolute

true（0以外）の時は、光源が移動する。false（0）の時は、指定した移動する位置に光源が新たに増える（つまり光源がどんどん増えてゆくことになる）

Sample-1　Alphaフィルタ　(Alpha.html)
　 
<html>
<head>
<title>Alpha</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
<!--
.filter_typ { filter: Alpha
              ( Opacity = 10,
                FinishOpacity = 100,
                Style = 2,
                StartX = 0,
                StartY = 10,
                FinishX = 100,
                FinishY = 80 ) }
body        { text-align: center}
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<img src="1.jpg" width="200" height="150"><br>
↑元画像　効果付↓<br>
<img src="1.jpg" width="200" height="150" class="filter_typ">
</body>
</html>

Sample-2　Blurフィルタ　(Blur.html)
　 
<html>
<head>
<title>Blur</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
<!--
.filter_typ { filter: Blur
             ( Add = true,
               Direction = 135,
               Strength = 100 ) }
body        { text-align: center}
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<img src="1.jpg" width="200" height="150"><br>
↑元画像　効果付↓<br>
<img src="1.jpg" width="200" height="150" class="filter_typ">
</body>
</html>

Sample-3　Chromaフィルタ　(Chroma.html)
　 
<html>
<head>
<title>Chroma</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
<!--
.filter_typ { filter: Chroma( Color=#ff0000 ) }
body        { text-align: center}
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<img src="2.gif" width="180" height="180"><br>
↑元画像　効果付↓<br>
<img src="2.gif" width="180" height="180" class="filter_typ">
</body>
</html>

Sample-4　DropShadowフィルタ　(DropShadow.html)
　 
<html>
<head>
<title>DropShadow</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
<!--
.filter_typ { padding:20px;
                width:100%;
                filter:DropShadow
                ( Color = #000000,
                  OffX = 5,
                  OffY = 5,
                  Positive = true ) }
body        { text-align: center}
-->
</style>
</head>
<body bgcolor="#66FFFF" text="#000000">
<img src="1.jpg" width="200" height="150"><br>
↑元画像　効果付↓<br>
<span class="filter_typ"><img src="1.jpg" width="200" height="150"></span>
</body>
</html>

Sample-5　FlipHフィルタ　(FlipH.html)
　 
<html>
<head>
<title>FlipH</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
<!--
.filter_typ { filter: FlipH }
body        { text-align: center}
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<img src="1.jpg" width="200" height="150"><br>
↑元画像　効果付↓<br>
<img src="1.jpg" width="200" height="150" class="filter_typ">
</body>
</html>

Sample-6　FlipVフィルタ　(FlipV.html)
　 
<html>
<head>
<title>FlipV</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
<!--
.filter_typ { filter: FlipV }
body        { text-align: center}
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<img src="1.jpg" width="200" height="150"><br>
↑元画像　効果付↓<br>
<img src="1.jpg" width="200" height="150" class="filter_typ">
</body>
</html>

Sample-7　Glowフィルタ　(Glow.html)
　 
<html>
<head>
<title>Glow</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
<!--
.filter_typ { padding:2px;
              width:50%;
              filter: Glow
              ( Color = #FF0000,
                Strength = 100 ) }
body        { text-align: center}
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<img src="1.jpg" width="200" height="150"><br>
↑元画像　効果付↓<br>
<div class="filter_typ"><img src="1.jpg" width="200" height="150"></div>
</body>
</html>

Sample-8　Grayフィルタ　(Gray.html)
　 
<html>
<head>
<title>Glow</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
<!--
.filter_typ { padding:2px;
              width:50%;
              filter: Glow
              ( Color = #FF0000,
                Strength = 100 ) }
body        { text-align: center}
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<img src="1.jpg" width="200" height="150"><br>
↑元画像　効果付↓<br>
<div class="filter_typ"><img src="1.jpg" width="200" height="150"></div>
</body>
</html>

Sample-9　Invertフィルタ　(Invert.html)
　 
<html>
<head>
<title>Invert</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
<!--
.filter_typ { filter: Invert }
body        { text-align: center}
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<img src="1.jpg" width="200" height="150"><br>
↑元画像　効果付↓<br>
<img src="1.jpg" width="200" height="150" class="filter_typ">
</body>
</html>

Sample-10　Lightフィルタ　(Light.html)
　 
<html>
<head>
<title>Light</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
<!--
.filter_typ { filter: Light }
body        { text-align: center }
-->
</style>
<script language="JavaScript">
<!--
function fliter_addAmbient(){
    fliter_Clear();
    sally_pic.filters.Light.addAmbient
    ( 255 , 0 , 0 , 50 );
}
function fliter_AddCone(){
    fliter_Clear();
    sally_pic.filters.Light.addCone
     ( 10 , 10 , 0 , 100 , 100 , 255 , 255 , 255 , 50 , 30 );
}
function fliter_addPoint(){
    fliter_Clear();
    sally_pic.filters.Light.addPoint
    ( 100 , 100 , 100 , 255 , 0 , 0 , 50 );
}
function fliter_ChangeColor(clr){
    var r = 0;
    var g = 0;
    var b = 0;
    if(clr == "red"){
        r = 255;
    }
    if(clr == "green"){
        g = 255;
    }
    if(clr == "blue"){
        b = 255;
    }
    sally_pic.filters.Light.ChangeColor
    ( 0 , r , g , b , true );
}
function fliter_ChangeStrength(){
    sally_pic.filters.Light.ChangeStrength
    ( 0 , 10 , false );
}
function fliter_Clear(){
    sally_pic.filters.Light.Clear();
}
function fliter_MoveLight(){
    sally_pic.filters.Light.MoveLight
    ( 0 , 200 , 200 , 200 , true );
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" onLoad="fliter_AddCone()">
<img id="sally_pic" src="1.jpg" width="200" height="150" class="filter_typ">
<form>
  <table border="1" cellpadding="0" cellspacing="0">
    <tr bgcolor="#00FFFF">
      <td align="center">メソッド名</td>
      <td align="center">使い方</td>
    </tr>
    <tr>
      <td align="center">
        <input type="button" value="addAmbient" onClick="fliter_addAmbient()">
      </td>
      <td>クリックしてみてください。</td>
    </tr>
    <tr>
      <td align="center">
        <input type="button" value="AddCone" onClick="fliter_AddCone()">
      </td>
      <td>クリックしてみてください。</td>
    </tr>
    <tr>
      <td align="center">
        <input type="button" value="addPoint" onClick="fliter_addPoint()">
      </td>
      <td>クリックしてみてください。</td>
    </tr>
    <tr>
      <td align="center">
        <select name="select" onChange="fliter_ChangeColor(this.value)">
          <option value="0" selected>選んで下さい(ChangeColor)</option>
          <option value="red">赤</option>
          <option value="green">緑</option>
          <option value="blue">青</option>
        </select>
      </td>
      <td>addAmbientやAddConeやaddPointをクリックした後に選択すると、
          色を変えることができます。</td>
    </tr>
    <tr>
      <td align="center">
        <input type="button" value="ChangeStrength" onClick="fliter_ChangeStrength()">
      </td>
      <td>addAmbientやAddConeやaddPointをクリックした後に、
          ここをクリックすると、光の強さを変えることができます。
          押す回数で光の強さも変化します。</td>
    </tr>
    <tr>
      <td align="center">
        <input type="button" value="Clear" onClick="fliter_Clear()">
      </td>
      <td>効果をキャンセルできます。</td>
    </tr>
    <tr>
      <td align="center">
        <input type="button" value="MoveLight" onClick="fliter_MoveLight()">
      </td>
      <td>addPointをクリックした後にクリックすると、光を移動できます。</td>
    </tr>
  </table>
  </form>
</body>
</html>

Sample-11　Maskフィルタ　(Mask.html)
　 
<html>
<head>
<title>Mask</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
<!--
.filter_typ { filter: Mask( Color = #ffff00 ) }
body        { text-align: center}
-->
</style>
</head>
<body bgcolor="#0000FF" text="#000000">
<img src="3.gif" width="180" height="180"><br>
↑元画像　効果付↓<br>
<img src="3.gif" width="180" height="180" class="filter_typ">
</body>
</html>

Sample-12　Shadowフィルタ　(Shadow.html)
　 
<html>
<head>
<title>Shadow</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
<!--
.filter_typ { padding: 20px;
              width:100%;
              filter: Shadow( Color = #000000, Direction = 135 ) }
body        { text-align: center}
-->
</style>
</head>
<body bgcolor="#33FF66" text="#000000">
<img src="1.jpg" width="200" height="150"><br>
↑元画像　効果付↓<br>
<span class="filter_typ"><img src="1.jpg" width="200" height="150"></span>
</body>
</html>

Sample-13　Waveフィルタ　(Wave.html)
　 
<html>
<head>
<title>Wave</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
<!--
.filter_typ { filter: Wave
             ( Add=true,
               Freq=10,
               LightStrength=80,
               Phase=25,
               Strength=90 ) }
body        { text-align: center}
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<img src="1.jpg" width="200" height="150"><br>
↑元画像　効果付↓<br>
<img src="1.jpg" width="200" height="150" class="filter_typ">
</body>
</html>

Sample-14　XRayフィルタ　(XRay.html)
　 
<html>
<head>
<title>XRay</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
<!--
.filter_typ { filter: Xray }
body        { text-align: center}
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<img src="1.jpg" width="200" height="150"><br>
↑元画像　効果付↓<br>
<img src="1.jpg" width="200" height="150" class="filter_typ">
</body>
</html>

参照
　 詳細については、マイクロソフトのリファレンスページ（日本語）を参照してください。
<http://www.microsoft.com/japan/developer/library/jpisdk/dhtml/content/filters.htm>