【初心者向け】HTML DOMのfilterプロパティとは？使い方とフィルター効果一覧を解説
HTML DOMのスタイルfilterプロパティは、要素に対してさまざまな視覚効果（フィルター）を適用するために使用されます。ぼかしや明るさの調整、グレースケール変換など、CSSのfilter機能をJavaScriptから動的に操作できるのが特徴です。
構文
filterプロパティを設定する際の基本構文は以下の通りです。
object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"
filterプロパティに指定できる値
各フィルター値とその役割は以下の通りです。
| フィルター | 説明 |
|---|---|
| none | 効果なし（デフォルト状態）。 |
| blur(px) | 画像にぼかし効果を適用します。 |
| brightness(%) | 画像の明るさを調整します。100%が元の画像で、それ以上の値を指定するとより明るくなります。 |
| contrast(%) | 画像のコントラストを調整します。0%で完全に黒、100%が元の画像となり、100%を超えるとコントラストが強調されます。 |
| drop-shadow(h-shadow v-shadow blur spread color) | 画像にドロップシャドウ（影）を適用します。 |
| grayscale(%) | 画像をグレースケールに変換します。0%が元の画像で、100%で完全にグレーになります。 |
| hue-rotate(deg) | 指定した角度で色相を回転させます。デフォルトは0度（元の画像）で、最大360度まで指定可能です。 |
| invert(%) | 画像の色を反転（ネガポジ反転）させます。 |
| opacity(%) | 画像の不透明度を設定します。0%（完全に透明）〜100%（元の画像・デフォルト値）の範囲で指定します。 |
| saturate(%) | 画像の彩度を調整します。 |
| sepia(%) | 画像をセピア調に変換します。 |
使用例
次の例では、あらかじめ画像にhue-rotateフィルターを適用しておき、ボタンをクリックするとsepiaフィルターに切り替わるデモを紹介します。
<!DOCTYPE html>
<html>
<head>
<style>
#one {
filter: hue-rotate(90deg);
}
</style>
<script>
function changeFilter() {
document.getElementById("one").style.filter = "sepia(40%)";
document.getElementById("Sample").innerHTML = "上の画像にセピア（sepia）フィルターが適用されました";
}
</script>
</head>
<body>
<img id="one" src="https://www.tutorialspoint.com/big_data_analytics/images/big-data-analytics-mini-logo.jpg">
<p>下のボタンをクリックすると、上の画像のfilterプロパティが変更されます</p>
<button onclick="changeFilter()">フィルターを変更</button>
<p id="Sample"></p>
</body>
</html>
実行結果
「フィルターを変更」ボタンをクリックすると、画像にセピア効果が適用され、メッセージが表示されます。
-
HTML DOMのborderImageSliceプロパティとは？構文と使い方を徹底解説
HTML DOM の borderImageSlice プロパティは、ボーダー画像（境界線に使用する画像）をどのように領域へ分割するかを定義するために使用されます。分割位置は、画像からのオフセットを数値（number）・パーセンテージ（%）・グローバル値で指定することによって決まります。borderImageSliceプロパティの構文borderImageSlice プロパティを設定する際の基本的な構文は以下のとおりです。object.style.borderImageSlice = number|%|fill|initial|inherit;指定できる値の一覧値説明numberラスター画像の
-
HTML DOMのlistStyleImageプロパティとは？使い方をコード例付きで解説
HTML DOM の listStyleImage プロパティは、リスト項目（<li>）のマーカーとして画像を設定したり、現在設定されている画像を取得したりするために使用されるプロパティです。通常の「●」や「■」といった箇条書き記号の代わりに、任意の画像をリストマーカーとして表示できます。 listStyleImageプロパティの構文 listStyleImage プロパティを設定する場合の構文は以下のとおりです。 object.style.listStyleImage = none|url|initial|inherit 指定できる値の一覧 それぞれの値の意味は次の表のとおり