当サイトについて リンク集 基礎編1 基礎編2 色リファレンス 小技集 テキスト フォント 背景 配置 ボーダー ボックス リスト テーブル フィルタ その他
初心者による初心者の為のスタイルシート・リファレンス！ 基礎から応用までの解説とサンプルを是非あなたのホームページ作りに生かして下さい！

■フィルター

トップページ

■半透明

filter:alpha()

半透明の効果を作ります。透明度が増した分、背景の色や絵が透けて見えてきます。
簡単に透明感を演出する事が出来、用途は多彩。非常に有用なフィルターです。

透明度の指定や透明にする場所も指定する事が出来ます。
設定方法は以下の通り。

enabled style 0 1 2 3 opacity	フィルタ実行の有無。ture,false,0,1で指定。 フィルタのグラデーション種別を0〜3で選びます。 　　グラデーション無し（均一に半透明化する） 　　直線方向 　　中心から放射状 　　中心から長方形 透明度の設定。0〜100で設定し、低いほど透明、高いと不透明になります。
--------- 以下はStyle=1〜3と指定した場合のみ有効 ---------
finishopacity startx starty finishx finishy	グラデーション終了地点の透明度。設定方法はopacityと同じ。 開始地点のX座標。幅に対する割合で0〜100で指定。 開始地点のY座標。高さに対する割合で0〜100で指定。 終了地点のX座標。幅に対する割合で0〜100で指定。 終了地点のY座標。高さに対する割合で0〜100で指定。

※座標の位置は、左上端が(0,0)、右下端が(100,100)となります。

サンプル

■style=0（均一に透明化）の場合

Opacity=10	Opacity=20	Opacity=30	Opacity=40	Opacity=50
Opacity=60	Opacity=70	Opacity=80	Opacity=90	Opacity=100

■設定例
<div style="width:100%;filter:Alpha(opacity=10)">
<div style="background-image:url(sample3.jpg);height:60px;"></div>
<div style="font-size:18px;font-weight:bold;background-color:orange">Opacity=10</div>
</div>

■style=1（直線方向にグラデーション）の場合

	まず座標の考え方について理解する為、左の図に対してフィルタをかけてみましょう。 分かり易くするため、開始地点と終了地点に絵を書いておきました。 ちなみに座標は、要素の左上が(0,0)、右下が(100,100)という構図になります。
	開始地点を(30,30),終了地点を(80,60)でフィルターした場合。 二点間を結ぶ直線方向にグラデーションがかかります。 その外側はopacity及びfinishopacityで指定した透明度で均一になります。 <div style="width:100%;filter:Alpha(style=1,opacity=0,finishopacity=100, startx=30,starty=30,finishx=80,finishy=60)"> <img src="alpha.gif"></div>
	これはstyle=1だけ設定したデフォルト状態。 <div style="width:100%;filter:Alpha(style=1)"> <div style="background-color:orange;"></div></div>
	縦方向にグラデーションをかけた場合 <div style="width:100%;filter:Alpha(style=1,opacity=0,finishopacity=100,startx=100,starty=0,finishy=100)"> <div style="background-color:orange;"></div></div>
Style=1	写真や文字にもグラデーションがかかります。 <div style="width:100%;filter:Alpha(style=1,opacity=10,finishopacity=100)"> <image src="sample.jpg"> <div style="font-size:18px;font-weight:bold;background-color:orange">Style=1</div> </div>

■style=2（放射状にグラデーション）の場合

	<div style="width:100%;filter:Alpha(style=2,opacity=0,finishopacity=100)"> <div style="background-color:orange;height:150px;"></div></div>
	<img src="sample.jpg" style="filter:Alpha(style=2,opacity=0,finishopacity=100)">
style=2	<div style="width:100%;filter:Alpha(style=2,opacity=0,finishopacity=100)"> <div style="font-size:18px;font-weight:bold;background-color:orange;text-align:center;height:20px;">style=2</div></div>

■style=3（長方形にグラデーション）の場合

	<div style="width:100%;filter:Alpha(style=3,opacity=0,finishopacity=100)"> <div style="background-color:orange;height:150px;"></div></div>
	<img src="sample.jpg" style="filter:Alpha(style=3,opacity=0,finishopacity=100)">
style=3	<div style="width:100%;filter:Alpha(style=3,opacity=0,finishopacity=100)"> <div style="font-size:18px;font-weight:bold;background-color:orange;text-align:center;height:20px;">style=3</div></div>

■影（落とす）

filter:dropshadow(）

■影（のばす）

filter:shadow(）

■発光

filter:glow ()

■ウェーブをかける

filter:wave(）

波打ったような効果を出します。

freq lightstrength phase strength add enabled

波の数。この数によって波の間隔も同時に変化する。 光の強さ、つまり影の濃さ。0〜100の範囲で指定、0で影無し、100で影が黒くなる。 波の開始位置。0〜100の範囲で指定。 振幅。初期値5。 元の画像を残すかどうか。1,ture、又は0,falseで指定。残すと非常に見にくくなる。 フィルタの実行を指定します。tureかflaseで指定し、初期値はtrue。

サンプル

すたいるシート オリジナルの状態。

すたいるシート

各パラメータを適当に設定した場合。 <div style="filter:wave(freq=4,lightstrength=20,phase=50,strength=5,add=0);"><img src="xxx.jpg">すたいるシート Stylesheet</div>

すたいるシート

add=1とすると元画像も重なって表示される。視認性がわるい。 <div style="filter:wave(freq=4,lightstrength=20,phase=50,strength=5,add=1);"><img src="xxx.jpg">すたいるシート Stylesheet</div>

freq=1	freq=2	freq=3	freq=5	freq=8
lightstrength=0	lightstrength=25	lightstrength=50	lightstrength=75	lightstrength=100
phase=0	phase=25	phase=50	phase=75	phase=100
strength=0	strength=3	strength=5	strength=10	strength=15

■ぼかし

filter:progid:DXImageTransform.Microsoft.Blur(）

水でにじんだ様なボカシの効果を作ります。
IE5.5以上でサポート、表記もIE5.5以上の表記でないと有効になりません。
設定出来るプロパティは以下のとおり。

pixelradius shadowopacity makeshadow enabled

ぼかしの量（広がり）を0〜100で指定（初期値2）。この値が大きいとにじみの範囲が大きくなります。 ぼかしの濃度を0〜1.0で指定（初期値0.75）。この値が大きいとぼかしが強くなります。 要素を黒くして影のように表示します。tureかflase、又は1か0で指定し、初期値はfalse。 フィルタの実行を指定します。tureかflaseで指定し、初期値はtrue。

サンプル

	オリジナル画像
	ぼかしをかけた場合（パラメータ未設定） <img src="sample.jpg" style="filter:progid:DXImageTransform.Microsoft.Blur()">
	影にしたぼかし（要素は黒く塗りつぶされます） <img src="sample.jpg" style="filter:progid:DXImageTransform.Microsoft.Blur(makeshadow=1)">

■pixelradius（ぼかしの量）を変えた場合

pixelradius=0	pixelradius=1	pixelradius=2	pixelradius=3	pixelradius=4
pixelradius	pixelradius	pixelradius	pixelradius	pixelradius

例： <img src="sample.jpg" style="filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=0)">

■shadowopacity（濃度）を変えた場合

shadowopacity=0.0	shadowopacity=0.5	shadowopacity=1.0
shadowopacity	shadowopacity	shadowopacity

例： <img src="sample.jpg" style="filter:progid:DXImageTransform.Microsoft.Blur(shadowopacity=0)">

■ブレをつける

filter:blur (）

ブレの効果を作ります。写真をとる時に手ぶれで画像が揺れたような効果です。

direction strength add enabled

方向（45度ごと） 強さ 元の画像を残すかどうか。1,ture、又は0,falseで指定。画像を残すと視認性が高い。 フィルタの実行を指定します。tureかflaseで指定し、初期値はtrue。

サンプル

すたいるシートToolbox オリジナルの状態です。

すたいるシートToolbox

90度方向のぶれ。add=1として元画像も表示させます。 <div style="filter:blur(direction=90,strength=5,add=1);"><img src="xxx.jpg">すたいるシートToolbox</div>

すたいるシートToolbox

上記の設定でaddのみ0とした場合。視認性が悪くなります。 <div style="filter:blur(direction=90,strength=5,add=0);"><img src="xxx.jpg">すたいるシートToolbox</div>

すたいるシートToolbox

ぶれの角度や強さを変化させました。 <div style="filter:blur(direction=45,strength=30,add=1);"><img src="xxx.jpg">すたいるシートToolbox</div>

すたいるシートToolbox

上記の設定でadd=0とすると、元の状態が殆どわからなくなります。 <div style="filter:blur(direction=45,strength=30,add=0);"><img src="xxx.jpg">すたいるシートToolbox</div>

■エンボス加工

filter:progid:DXImageTransform.Microsoft.emboss (）

対象が鉄板から浮き上がったようなエンボス加工の効果を出します。
グレースケールになります。IE5.5以上のみ対応。

bias enabled

浮き上がりの高さ。-1.0〜1.0の範囲で指定。 フィルタの実行を指定します。tureかflaseで指定し、初期値はtrue。

サンプル

すたいるシート Toolbox

背景無しだとこんな感じになります。

<div style="filter:progid:DXImageTransform.Microsoft.emboss(bias=1.0);">すたいるシート Toolbox</div>

すたいるシート Toolbox	オリジナル
すたいるシート Toolbox	Emboss

背景をつけた文字や、画像はこのような効果になります。

<div style="filter:progid:DXImageTransform.Microsoft.emboss(bias=1.0);"><img src="sora.jpg">すたいるシート Toolbox</div>

■彫りこむ

filter:progid:DXImageTransform.Microsoft.engrave(）

エンボスとは逆に、鉄板に掘り込んだような効果を出します。
IE5.5以上のみ対応。

bias enabled

浮き上がりの高さ。-1.0〜1.0の範囲で指定。 フィルタの実行を指定します。tureかflaseで指定し、初期値はtrue。

サンプル

すたいるシート Toolbox

背景無しだとこんな感じになります。

<div style="filter:progid:DXImageTransform.Microsoft.engrave(bias=1.0);">すたいるシート Toolbox</div>

すたいるシート Toolbox	オリジナル
すたいるシート Toolbox	Engrave

背景をつけた文字や、画像はこのような効果になります。

<div style="filter:progid:DXImageTransform.Microsoft.engrave(bias=1.0);"><img src="sora.jpg">すたいるシート Toolbox</div>

■透過

filter:chroma (）

特定の色を指定して、透過させます。

color enabled

透過させる色 フィルタの実行を指定します。tureかflaseで指定し、初期値はtrue。

サンプル

Stylesheet Toolbox

オリジナルの状態

Stylesheet Toolbox

特定の色を指定して透過しました。

<div style="filter:chroma(color=#ff9a00)">Stylesheet Toolbox</div>

■マスク

filter:mask()
filter:progid:DXImageTransform.Microsoft.MaskFilter(）

マスク処理を行います。
マスク処理は、文字や絵の透過部分を全て一色に塗りつぶし、それ以外を透明にします。
つまり文字や絵の部分がシルエットのように浮き上がってくる効果です。

color enabled

塗りつぶしの色 フィルタの実行を指定します。tureかflaseで指定し、初期値はtrue。

サンプル

すたいるシートToolbox	オリジナル
すたいるシートToolbox	マスク処理後

<div style="filter:mask(color=orange);"><img src="xxx.jpg">すたいるシートToolbox</div>

■色の反転

filter:invert(）

色を反転します。プロパティは無し。IE4.0形式で表記します。

サンプル

すたいるシートToolbox
オリジナル

すたいるシートToolbox

<div style="filter:invert();"><img src="xxx.jpg">すたいるシートToolbox</div>

■X線フィルタ

filter:xray(）

X線写真のような見え方をします。プロパティは無し。IE4.0形式で表記します。

サンプル

すたいるシートToolbox
オリジナル

すたいるシートToolbox

<div style="filter:xray();"><img src="xxx.jpg">すたいるシートToolbox</div>

■グレイスケール

filter:gray (）

グレースケールに変換します。プロパティは無し。IE4.0形式で表記します。

サンプル

すたいるシートToolbox
オリジナル

すたいるシートToolbox

<div style="filter:gray();"><img src="xxx.jpg">すたいるシートToolbox</div>

■反転

fliter:fliph ()、fliter:flipv (）

表示の方向を反転させます。filphは水平方向、flipvは垂直に反転させます。
プロパティは無し。IE4.0形式で表記します。

サンプル

すたいるシートToolbox

オリジナル

すたいるシートToolbox

横反転。

<div style="filter:fliph();"><img src="xxx.jpg">すたいるシートToolbox</div>

すたいるシートToolbox

縦反転。

<div style="filter:flipv();"><img src="xxx.jpg">すたいるシートToolbox</div>

■フィルタの複数指定

fliter:progid:DXImageTransform.Microsoft.BasicImage()

複数のフィルタを同時に指定します。ただし利用出来るフィルタは決められている。
IE5.5以上で有効。従って書き方もIE5.5以上表記にする事。
指定出来るフィルタは以下のとおり。

grayscale invert mask maskcolor mirror opacity rotation xray enabled

グレースケール。1で有効、0で無効。 色の反転。1で有効、0で無効。 マスク。1で有効、0で無効。 マスク色 横方向の反転 透明度。0.0-1.0まで。 回転角度。0〜3で指定。時計方向に、0=0度、1=90度、2=180度、3=270度。 X線のような効果 フィルタ実行の有無。

サンプル

すたいるシートToolbox

オリジナル

StylesheetToolbox

グレイスケール、横反転、半透明化、180度回転の同時設定

<div style="filter:filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1,mirror=1,opacity=0.8,rotation=2);"><img src="xxx.jpg">StylesheetToolbox</div>

StylesheetToolbox

X線効果、半透明化、マスク、270度の回転

<div style="filter:filter:progid:DXImageTransform.Microsoft.BasicImage(xray=1,grayscale=1,mask=0,maskcolor=orange;,opacity=0.2,rotation=3);"><img src="xxx.jpg">StylesheetToolbox</div>