Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

filter

画像やテキストなど指定した要素に様々なフィルタ効果を指定することができます。元々は、IE独自の仕様でしたが、他のブラウザでもcss3から使用することができ、指定の方法も昔の物と異なりますので、注意して下さい。ブラウザのバージョンによっては、ベンダープレフィックス『webkit』『moz』を指定する必要があるので、使用する時は、ベンダープレフィックスの物と一緒に指定しましょう。こちらのcssを複数使用したり、大きい要素（ページの背景になっている様な要素）で使用すると、ページの読み込み時間が通常より遅くなるので、注意してください。

IE10と11は未対応の為、ベンダープレフィックスを指定しても適応されません。

サンプルコード

-webkit-filter: blur(5px); /* 古いバージョンのChromeとSafariに対応時に指定 */
-moz-filter: blur(5px); /* 古いバージョンのFoxに対応時に指定 */
filter: blur(5px);

指定可能な値一覧

値	デフォルト値	効果
brightness()	1.0	明るさ
blur()	0px	ぼかし
contrast()	100%	コントラスト
grayscale()	0%	グレースケール
hue-rotate()	0deg	色相変換
invert()	0px	色相反転
saturate()	100%	彩度
sepia()	0%	セピア
opacity()	1.0	透明度
drop-shadow()	none	ドロップシャドウ

ブラウザでの表示結果

サンプルは下記の画像にフィルタ効果を適応させています。

img{
	-webkit-filter: brightness(1.5);
	-moz-filter: brightness(1.5);
	filter: brightness(1.5);
}

img{
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	filter: blur(5px);
}

img{
	-webkit-filter: contrast(200%);
	-moz-filter: contrast(200%);
	filter: contrast(200%);
}

img{
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	filter: grayscale(100%);
}

img{
	-webkit-filter: hue-rotate(180deg);
	-moz-filter: hue-rotate(180deg);
	filter: hue-rotate(180deg);
}

img{
	-webkit-filter: invert(40%);
	-moz-filter: invert(40%);
	filter: invert(40%);
}

img{
	-webkit-filter: saturate(200%);
	-moz-filter: saturate(200%);
	filter: saturate(200%);}

img{
	-webkit-filter: sepia(100%);
	-moz-filter: sepia(100%);
	filter: sepia(100%);}

img{
	-webkit-filter: opacity(0.5);
	-moz-filter: opacity(0.5);
	filter: opacity(0.5);}

img{
	-webkit-filter: drop-shadow(5px 5px 5px red);
	-moz-filter: drop-shadow(5px 5px 5px red);
	filter: drop-shadow(5px 5px 5px red);

対応ブラウザ

IE6	IE7	IE8	IE9	IE10	IE11	Safari	Chrome	Firefox	Opera

iPhone Safari	Android2系標準ブラウザ	Android4系標準ブラウザ

※Android5系の標準ブラウザから対応してます。

※IE9以下は指定の方法が違うので、下記の概要を参照してください。

概要

画像やテキストなど指定した要素に様々なフィルタ効果を指定することができます。

元々はIE独自のプロパティで、IE9以下で使用するときは上記で説明した使い方ではなく値を『progid:DXImageTransform.Microsoft.フィルタ名()』と指定して使用する必要があります。使用できるフィルタの種類と値も違っております。

IE9以下で使用できる値一覧

値	効果
Blur(PixelRadius=数値)	ぼかし
gradient()	グラデーション
alpha(opacity=数値)	透明度

※下記のサンプルはIE9以下でのプロパティの為、IEの開発者ツール等で確認してください。

img{
	filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=80);
}

gradient()はCSSの『linear-gradient()』と効果は同じですが、細かな調整ができず『開始時の色』、『終了時の色』、『グラデーションの縦横方向』のみ指定ができます。また円形のグラデーション『radial-gradient()』にも対応はできません。指定の仕方は『progid:DXImageTransform.Microsoft.gradient(startColorstr="開始時の色", endColorstr="終了時の色",GradientType=0 )』縦横の方向を指定は、『GradientType=』0で縦方向、1で横方向になり省略することも可能ですが、省略したときは自動的に縦方向になります。

div{
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff0000", endColorstr="#ffffff",GradientType=1);
}

透明度を指定するときは、IE独自の仕様ですが『progid:DXImageTransform.Microsoft.フィルタ名()』を指定する必要はなく『filter:alpha(opacity=数値)』と指定することによりIE9のブラウザでも、『opacity』と同じ効果を指定できます。

img{
	filter:alpha(opacity=70);
}

この他にもIE独自のプロパティがありますが、現在では指定をしても適応しておりません。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

WebProgrammingPortalウェブプログラミングポータル