Title

画質フィルターを使用する

目次 (INDEX)

filterとは

filter: 読み: フィルター
意味: ろ過器、こし器

目次に戻る

filterプロパティの概要

このプロパティはコンテンツの描画に対して、フィルターを適用します。つまり、指定されたコンテンツの画質を定められた方法で操作できることになります。

定められた方法とは、フィルター関数を使用する方法と、定義した設定IDを利用して指定するSVGの二つがあります。

フィルター関数を指定する場合は、「関数名(引数)」のような記述方法で()の中に効果の度合いを指定するための引数を与えます。フィルター関数では、10種類のフィルタを簡単に指定することが出来てとても便利ですが、SVGフィルタを使うことで更に表現の幅を広げることができます。

SVGの指定方法は、url関数の引数にIDを指定することで使用可能です。また、各フィルタの効果を半角スペースで区切って指定することにより、複数の効果を同時に指定することもできます。

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

このページで検証に使う要素は、 img要素です。この要素は置換要素であり、ページ内に画像を配置するための要素となります。

構文

セレクター{filter: 設定値}

初期値: none

初期値のnoneキーワードは、「ない」という意味です。つまり、フィルターが無いということでコンテンツは通常の画質で表示されます。

サンプル画像:

img{filter: none;}

目次に戻る

フィルター関数: blur()

blur関数は、コンテンツにガウスぼかしを適用します。引数には画素が互いに溶け込むかをピクセル単位で指定することになります。

初期値: none blur(2px)

img{filter: blur(2px);}

目次に戻る

フィルター関数: brightness()

brightness関数を使うと、コンテンツの明るさを調整することができます。

0.5 = 50%
1 = 100%
1.5 = 150%

brightness(50%) brightness(0.5) 初期値: none brightness(1) brightness(150%) brightness(1.5)

img{filter: brightness(100%);}

目次に戻る

フィルター関数: contrast()

contrast関数を使うと、コンテンツのコントラストを調整することができます。コントラストとは画像の最も明るい部分と、最も暗い部分の明暗比のことで、コントラストを抑えると色あせた雰囲気になり、コントラストを上げると色に艶を感じるようになります。

0.5 = 50%
1 = 100%
1.5 = 150%

contrast(50%) contrast(0.5) 初期値: none contrast(1) contrast(200%) contrast(2)

img{filter: contrast(100%);}

目次に戻る

フィルター関数: drop-shadow()

drop-shadow関数を使うと、コンテンツのボックスに、「ずらし」と「指定色でのぼかし」を加えて影のように表示することができます。

この関数に似たCSSのプロパティとして、 box-shadow がありますが、こちらはフィルターなので、ブラウザによってはアクセラレーションの働きで画質が向上する場合があります。

drop-shadow (5px 5px 0px gray) 初期値: none drop-shadow (5px 5px 5px black)

img{filter: drop-shadow(横軸ずらし値 縦軸ずらし値 ぼかし値 カラー);}

目次に戻る

フィルター関数: grayscale()

grayscale関数を使うと、コンテンツのカラーをグレースケールに変換します。グレースケールとは、色の種類と範囲を表す用語の一つで、白と黒とその中間の段階的な灰色のみを用いることを言います。

0 = 0%
0.5 = 50%
1 = 100%

初期値: none grayscale(0) grayscale(50%) grayscale(0.5) grayscale(100%) grayscale(1)

img{filter: grayscale(0%);}

目次に戻る

フィルター関数: hue-rotate()

hue-rotate関数を使うと、コンテンツのフィルターカラーを色相環の回転により調整します。

hue: 読み: ヒュー
意味: 色相
rotate: 読み: ローテート
意味: 回転

色相とは色の要素のうち、彩度と明度を取り除いた残りの要素のことを言います。そして、色相環を具体的に言うと、色を体系化する際に用いる方法の一つとして色相環(hue circle)という、赤・橙・黄・緑・青・紫の連続的に変化していく円状のカラーパレットのことを言います。

また、引数に定義される値の単位「deg 」とはdegreeの略で、意味としては単位の「度」にあたります。度とは記号にすると「°」となり、例えば温度とか、角度、経度、緯度などに使われる単位です。

この関数の引数としては、角度として指定することになり、色相環の回転角度を調整する値を定義します。なお、この値は回転角なので0deg~360degの範囲で定義することになりますが、360degを超えても問題なく、回り込みの値として処理されます。

初期値: none hue-rotate(0deg) hue-rotate(90deg) hue-rotate(180deg) hue-rotate(270deg) hue-rotate(360deg)

img{filter: hue-rotate(0deg);}

目次に戻る

フィルター関数: invert()

invert関数を使うと、コンテンツの色を反転します。

0 = 0%
0.5 = 50%
1 = 100%

初期値: none invert(0) invert(25%) invert(50%) invert(75%) invert(100%)

img{filter: invert(0%);}

目次に戻る

フィルター関数: opacity()

opacity関数を使うと、コンテンツの透過度を調整することができます。

0 = 0%
0.5 = 50%
1 = 100%

この関数の引数では0が完全な透明を表し、1が不透明の状態を表します。効果は線形乗数になります。

初期値: none opacity(100%) opacity(75%) opacity(50%) opacity(25%) opacity(0)

img{filter: opacity(100%);}

目次に戻る

フィルター関数: saturate()

saturate関数を使うと、コンテンツの彩度を調整することができます。

0 = 0%
1 = 100%
1.5 = 150%

saturate(0.3) saturate(30%) 初期値: none saturate(100%) saturate(1.7) saturate(170%)

img{filter: saturate(100%);}

目次に戻る

フィルター関数: sepia()

saturate関数を使うと、コンテンツセピア超することができます。

0 = 0%
0.5 = 50%
1 = 100%

初期値: none sepia(0) sepia(50%) sepia(0.5) sepia(100%) sepia(1)

img{filter: sepia(0);}

目次に戻る

SVGフィルター要素を利用する: url()

filterプロパティにurl関数を指定することでSVGフィルターを読込み、コンテンツに任意のフィルターを適用することができます。

SVG とはスケーラブルベクターグラフィックスの略で、 XMLの記法を用いて記述します。

SVGの詳細については、ここでは割愛させていただきますが、簡単なサンプルを下記に掲載させていただきます。このサンプルでは、drop-shadow関数と同じ機能を表現しています。

これは、HTML文書内に記述して利用しています。また、別途svgファイルを作成して外部ファイルへの参照もできますが、ブラウザによってはうまく動作しない事例もあるようです。

img{filter: url(#svgExample);}

以下、svgフィルター要素の定義部分のコードです。

<svg>
	<defs>
		<filter id="svgExample">
			<feGaussianBlur in="SourceAlpha" stdDeviation="8" result="blur"/>
			<feOffset in="blur" dx="8" dy="8" result="offsetBlur"/>
			<feMerge>
				<feMergeNode in="offsetBlur"/>
				<feMergeNode in="SourceGraphic"/>
			</feMerge>
		</filter>
	</defs>
</svg>
<img src="画像のURL" alt="画像の説明"/>

目次に戻る

サンプル: 複数の関数を組み合わせる

上記で説明してきたフィルター関数は、複数で組み合わせて利用することができます。

初期値: none contrast(150%) drop-shadow(5px 5px 5px) sepia(50%)

img{filter: contrast(150%) drop-shadow(5px 5px 5px) sepia(50%);}

目次に戻る

グローバル値

filterプロパティに対してのグローバルキーワードは以下の3つです。ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

inheritは親要素の値の継承を促します。
initialは値を初期値のnoneに戻します。
unsetは継承の初期値に戻します。
※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。

div{filter: グローバル値;}

目次に戻る

補足説明

すべての要素に適用可能
親要素の値を継承しない

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。コードの部分をクリックすると、サンプルにCSSが反映されます。

filter: none;

filter: blur(2px);

filter: brightness(50%);

filter: contrast(150%);

filter: drop-shadow(5px 5px 5px black)

filter: grayscale(100%);

filter: hue-rotate(180deg);

filter: invert(100%);

filter: opacity(50%);

filter: saturate(150%);

filter: sepia(100%);

サンプル: ブロック要素サンプル: インライン要素

目次に戻る