From 34088c76128db36799f617a42bca7b6b5a60c1b6 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 6 Jan 2022 21:39:11 +0900 Subject: CSS/filter-function 以下を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/filter-function/blur()/index.html | 69 --------------------- files/ja/web/css/filter-function/blur()/index.md | 69 +++++++++++++++++++++ .../css/filter-function/brightness()/index.html | 70 --------------------- .../web/css/filter-function/brightness()/index.md | 70 +++++++++++++++++++++ .../web/css/filter-function/contrast()/index.html | 69 --------------------- .../ja/web/css/filter-function/contrast()/index.md | 69 +++++++++++++++++++++ .../css/filter-function/drop-shadow()/index.html | 65 ------------------- .../web/css/filter-function/drop-shadow()/index.md | 65 +++++++++++++++++++ .../web/css/filter-function/grayscale()/index.html | 42 ------------- .../web/css/filter-function/grayscale()/index.md | 42 +++++++++++++ .../css/filter-function/hue-rotate()/index.html | 70 --------------------- .../web/css/filter-function/hue-rotate()/index.md | 70 +++++++++++++++++++++ .../ja/web/css/filter-function/invert()/index.html | 67 -------------------- files/ja/web/css/filter-function/invert()/index.md | 67 ++++++++++++++++++++ .../web/css/filter-function/opacity()/index.html | 72 ---------------------- .../ja/web/css/filter-function/opacity()/index.md | 72 ++++++++++++++++++++++ .../web/css/filter-function/saturate()/index.html | 67 -------------------- .../ja/web/css/filter-function/saturate()/index.md | 67 ++++++++++++++++++++ .../ja/web/css/filter-function/sepia()/index.html | 67 -------------------- files/ja/web/css/filter-function/sepia()/index.md | 67 ++++++++++++++++++++ 20 files changed, 658 insertions(+), 658 deletions(-) delete mode 100644 files/ja/web/css/filter-function/blur()/index.html create mode 100644 files/ja/web/css/filter-function/blur()/index.md delete mode 100644 files/ja/web/css/filter-function/brightness()/index.html create mode 100644 files/ja/web/css/filter-function/brightness()/index.md delete mode 100644 files/ja/web/css/filter-function/contrast()/index.html create mode 100644 files/ja/web/css/filter-function/contrast()/index.md delete mode 100644 files/ja/web/css/filter-function/drop-shadow()/index.html create mode 100644 files/ja/web/css/filter-function/drop-shadow()/index.md delete mode 100644 files/ja/web/css/filter-function/grayscale()/index.html create mode 100644 files/ja/web/css/filter-function/grayscale()/index.md delete mode 100644 files/ja/web/css/filter-function/hue-rotate()/index.html create mode 100644 files/ja/web/css/filter-function/hue-rotate()/index.md delete mode 100644 files/ja/web/css/filter-function/invert()/index.html create mode 100644 files/ja/web/css/filter-function/invert()/index.md delete mode 100644 files/ja/web/css/filter-function/opacity()/index.html create mode 100644 files/ja/web/css/filter-function/opacity()/index.md delete mode 100644 files/ja/web/css/filter-function/saturate()/index.html create mode 100644 files/ja/web/css/filter-function/saturate()/index.md delete mode 100644 files/ja/web/css/filter-function/sepia()/index.html create mode 100644 files/ja/web/css/filter-function/sepia()/index.md (limited to 'files/ja/web') diff --git a/files/ja/web/css/filter-function/blur()/index.html b/files/ja/web/css/filter-function/blur()/index.html deleted file mode 100644 index 5ccc38f287..0000000000 --- a/files/ja/web/css/filter-function/blur()/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: blur() -slug: Web/CSS/filter-function/blur() -tags: - - CSS - - CSS Function - - Filter Effects - - Function - - Reference -translation_of: Web/CSS/filter-function/blur() ---- -
{{cssref}}
- -

blur() は CSS の関数で、入力画像にガウシアンぼかしを適用します。返値は {{cssxref("<filter-function>")}} です。

- -
{{EmbedInteractiveExample("pages/css/function-blur.html")}}
- - - -

構文

- -
blur(radius)
- -

引数

- -
-
radius
-
ぼかしの半径で、 {{cssxref("<length>")}} で指定します。ガウス関数の標準偏差の値を定義します。つまり、画面上のピクセルをいくつ互いに混合するかということです。すなわち、大きい値になるほどよりぼかしが入ります。 0 の値は入力を変更しません。補間時の欠損値は 0 です。
-
- -

例

- -

ピクセル数と rem を用いた blur の設定

- -
blur(0)        /* 効果なし */
-blur(8px)      /* 半径 8px でぼかす */
-blur(1.17rem)  /* 半径 1.17rem でぼかす */
- -

仕様書

- - - - - - - - - - - - - - -
仕様書状態
{{SpecName('Filters 1.0', '#funcdef-filter-blur', 'blur()')}}{{Spec2('Filters 1.0')}}
- -

関連情報

- - diff --git a/files/ja/web/css/filter-function/blur()/index.md b/files/ja/web/css/filter-function/blur()/index.md new file mode 100644 index 0000000000..5ccc38f287 --- /dev/null +++ b/files/ja/web/css/filter-function/blur()/index.md @@ -0,0 +1,69 @@ +--- +title: blur() +slug: Web/CSS/filter-function/blur() +tags: + - CSS + - CSS Function + - Filter Effects + - Function + - Reference +translation_of: Web/CSS/filter-function/blur() +--- +
{{cssref}}
+ +

blur() は CSS の関数で、入力画像にガウシアンぼかしを適用します。返値は {{cssxref("<filter-function>")}} です。

+ +
{{EmbedInteractiveExample("pages/css/function-blur.html")}}
+ + + +

構文

+ +
blur(radius)
+ +

引数

+ +
+
radius
+
ぼかしの半径で、 {{cssxref("<length>")}} で指定します。ガウス関数の標準偏差の値を定義します。つまり、画面上のピクセルをいくつ互いに混合するかということです。すなわち、大きい値になるほどよりぼかしが入ります。 0 の値は入力を変更しません。補間時の欠損値は 0 です。
+
+ +

例

+ +

ピクセル数と rem を用いた blur の設定

+ +
blur(0)        /* 効果なし */
+blur(8px)      /* 半径 8px でぼかす */
+blur(1.17rem)  /* 半径 1.17rem でぼかす */
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Filters 1.0', '#funcdef-filter-blur', 'blur()')}}{{Spec2('Filters 1.0')}}
+ +

関連情報

+ + diff --git a/files/ja/web/css/filter-function/brightness()/index.html b/files/ja/web/css/filter-function/brightness()/index.html deleted file mode 100644 index afbd7f718f..0000000000 --- a/files/ja/web/css/filter-function/brightness()/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: brightness() -slug: Web/CSS/filter-function/brightness() -tags: - - CSS - - CSS Function - - Filter Effects - - Function - - Reference -translation_of: Web/CSS/filter-function/brightness() ---- -
{{cssref}}
- -

brightness() は CSS の関数で、入力画像に線形乗算を適用し、明るく又は暗くします。その結果は {{cssxref("<filter-function>")}} です。

- -
{{EmbedInteractiveExample("pages/css/function-brightness.html")}}
- - - -

構文

- -
brightness(amount)
- -

引数

- -
-
amount
-
結果の明るさで、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 100% 未満の値では画像が暗くなり、 100% を超える値では画像が明るくなります。 0% の値では画像が完全に黒くなり、 100% の値では入力が変更されないままになります。補間時の欠損値は 1 です。
-
- -

例

- -

数値とパーセント値を使用した brightness の設定

- -
brightness(0%)   /* 完全に黒 */
-brightness(0.4)  /* 明るさ40% */
-brightness(1)    /* 効果なし */
-brightness(200%) /* 明るさ2倍 */
- -

仕様書

- - - - - - - - - - - - - - -
仕様書状態
{{SpecName('Filters 1.0', '#funcdef-filter-brightness', 'brightness()')}}{{Spec2('Filters 1.0')}}
- -

関連情報

- - diff --git a/files/ja/web/css/filter-function/brightness()/index.md b/files/ja/web/css/filter-function/brightness()/index.md new file mode 100644 index 0000000000..afbd7f718f --- /dev/null +++ b/files/ja/web/css/filter-function/brightness()/index.md @@ -0,0 +1,70 @@ +--- +title: brightness() +slug: Web/CSS/filter-function/brightness() +tags: + - CSS + - CSS Function + - Filter Effects + - Function + - Reference +translation_of: Web/CSS/filter-function/brightness() +--- +
{{cssref}}
+ +

brightness() は CSS の関数で、入力画像に線形乗算を適用し、明るく又は暗くします。その結果は {{cssxref("<filter-function>")}} です。

+ +
{{EmbedInteractiveExample("pages/css/function-brightness.html")}}
+ + + +

構文

+ +
brightness(amount)
+ +

引数

+ +
+
amount
+
結果の明るさで、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 100% 未満の値では画像が暗くなり、 100% を超える値では画像が明るくなります。 0% の値では画像が完全に黒くなり、 100% の値では入力が変更されないままになります。補間時の欠損値は 1 です。
+
+ +

例

+ +

数値とパーセント値を使用した brightness の設定

+ +
brightness(0%)   /* 完全に黒 */
+brightness(0.4)  /* 明るさ40% */
+brightness(1)    /* 効果なし */
+brightness(200%) /* 明るさ2倍 */
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Filters 1.0', '#funcdef-filter-brightness', 'brightness()')}}{{Spec2('Filters 1.0')}}
+ +

関連情報

+ + diff --git a/files/ja/web/css/filter-function/contrast()/index.html b/files/ja/web/css/filter-function/contrast()/index.html deleted file mode 100644 index 168dc864cb..0000000000 --- a/files/ja/web/css/filter-function/contrast()/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: contrast() -slug: Web/CSS/filter-function/contrast() -tags: - - CSS - - CSS 関数 - - Reference - - フィルター効果 -translation_of: Web/CSS/filter-function/contrast() ---- -
{{cssref}}
- -

contrast() は CSS の 関数で、入力画像のコントラストを調整します。結果は {{cssxref("<filter-function>")}} です。

- -
{{EmbedInteractiveExample("pages/css/function-contrast.html")}}
- - - -

構文

- -
contrast(amount)
- -

引数

- -
-
amount
-
結果のコントラストで、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 100% 未満の値ではコントラストが下がり、 100% を超える値ではコントラストが上がります。 0% の値では画像が完全に灰色になり、 100% の値では入力が変更されないままになります。補間時の欠損値は 1 です。
-
- -

例

- -

数値とパーセント値を使用した contrast の設定

- -
contrast(0)     /* 完全な灰色 */
-contrast(65%)   /* 65%のコントラスト */
-contrast(1)     /* 効果なし */
-contrast(200%)  /* 2倍のコントラスト */
- -

仕様書

- - - - - - - - - - - - - - -
仕様書状態
{{SpecName('Filters 1.0', '#funcdef-filter-contrast', 'contrast()')}}{{Spec2('Filters 1.0')}}
- -

関連情報

- - diff --git a/files/ja/web/css/filter-function/contrast()/index.md b/files/ja/web/css/filter-function/contrast()/index.md new file mode 100644 index 0000000000..168dc864cb --- /dev/null +++ b/files/ja/web/css/filter-function/contrast()/index.md @@ -0,0 +1,69 @@ +--- +title: contrast() +slug: Web/CSS/filter-function/contrast() +tags: + - CSS + - CSS 関数 + - Reference + - フィルター効果 +translation_of: Web/CSS/filter-function/contrast() +--- +
{{cssref}}
+ +

contrast() は CSS の 関数で、入力画像のコントラストを調整します。結果は {{cssxref("<filter-function>")}} です。

+ +
{{EmbedInteractiveExample("pages/css/function-contrast.html")}}
+ + + +

構文

+ +
contrast(amount)
+ +

引数

+ +
+
amount
+
結果のコントラストで、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 100% 未満の値ではコントラストが下がり、 100% を超える値ではコントラストが上がります。 0% の値では画像が完全に灰色になり、 100% の値では入力が変更されないままになります。補間時の欠損値は 1 です。
+
+ +

例

+ +

数値とパーセント値を使用した contrast の設定

+ +
contrast(0)     /* 完全な灰色 */
+contrast(65%)   /* 65%のコントラスト */
+contrast(1)     /* 効果なし */
+contrast(200%)  /* 2倍のコントラスト */
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Filters 1.0', '#funcdef-filter-contrast', 'contrast()')}}{{Spec2('Filters 1.0')}}
+ +

関連情報

+ + diff --git a/files/ja/web/css/filter-function/drop-shadow()/index.html b/files/ja/web/css/filter-function/drop-shadow()/index.html deleted file mode 100644 index 72f9daa09b..0000000000 --- a/files/ja/web/css/filter-function/drop-shadow()/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: drop-shadow() -slug: Web/CSS/filter-function/drop-shadow() -tags: - - CSS - - CSS 関数 - - Reference - - フィルター効果 - - 関数 -translation_of: Web/CSS/filter-function/drop-shadow() ---- -
{{cssref}}
- -

drop-shadow() は CSS の関数で、入力画像にドロップシャドウ効果を適用します。結果は {{cssxref("<filter-function>")}} です。

- -
{{EmbedInteractiveExample("pages/css/function-drop-shadow.html")}}
- - - -

ドロップシャドウは効果的にぼけ、入力画像のアルファマスクのバージョンからずれ、特定の色で描かれて画像の下に混合されます。

- -
-

注: この関数はいくらか {{Cssxref("box-shadow")}} プロパティと似ています。 box-shadow プロパティは要素のボックス全体の背後に長方形の影を作成しますが、 drop-shadow() フィルター関数は画像そのものの形 (アルファチャネル) に合った影を作成します。

-
- -

構文

- -
drop-shadow(offset-x offset-y blur-radius color)
- -

drop-shadow() 関数は <shadow> 型の引数 ({{cssxref("box-shadow")}} プロパティで定義) を受け付けますが、 inset キーワードがと spread 引数が許可されないという例外があります。

- -

引数

- -
-
offset-x offset-y (必須)
-
影のオフセットを指定する2つの {{cssxref("<length>")}} 値です。 offset-x は水平方向の距離を表し、負の数で影を要素の左方に配置します。 offset-y は垂直方向の距離を表し、負の数で影を要素の上方に配置します。どちらの値も 0 であれば、影は要素の真後ろに配置されます。
-
blur-radius (任意)
-
影をぼかす半径で、 {{cssxref("<length>")}} で指定します。値が大きくなるほど、影は広く薄くなります。指定されていない場合は、既定値の 0 になり、辺がはっきりとしてぼけなくなります。負の数は許可されていません。
-
color (任意)
-
影の色で、 {{cssxref("<color>")}} で指定します。指定されない場合の既定値は、ブラウザーによります。 Firefox 及び Internet Explorer {{cssxref("color")}} プロパティの値が使用されます。一方、 WebKit の影は既定で透明であり、この値を省略する使い方は限られています。
-
- -

例

- -
/* 10px のぼかしで広がりのない黒い影 */
-drop-shadow(16px 16px 10px black)
-
-/* 1rem のぼかしで 3rem の広がりの赤っぽい影 */
-drop-shadow(.5rem .5rem 1rem #e23)
- -

関連情報

- - diff --git a/files/ja/web/css/filter-function/drop-shadow()/index.md b/files/ja/web/css/filter-function/drop-shadow()/index.md new file mode 100644 index 0000000000..72f9daa09b --- /dev/null +++ b/files/ja/web/css/filter-function/drop-shadow()/index.md @@ -0,0 +1,65 @@ +--- +title: drop-shadow() +slug: Web/CSS/filter-function/drop-shadow() +tags: + - CSS + - CSS 関数 + - Reference + - フィルター効果 + - 関数 +translation_of: Web/CSS/filter-function/drop-shadow() +--- +
{{cssref}}
+ +

drop-shadow() は CSS の関数で、入力画像にドロップシャドウ効果を適用します。結果は {{cssxref("<filter-function>")}} です。

+ +
{{EmbedInteractiveExample("pages/css/function-drop-shadow.html")}}
+ + + +

ドロップシャドウは効果的にぼけ、入力画像のアルファマスクのバージョンからずれ、特定の色で描かれて画像の下に混合されます。

+ +
+

注: この関数はいくらか {{Cssxref("box-shadow")}} プロパティと似ています。 box-shadow プロパティは要素のボックス全体の背後に長方形の影を作成しますが、 drop-shadow() フィルター関数は画像そのものの形 (アルファチャネル) に合った影を作成します。

+
+ +

構文

+ +
drop-shadow(offset-x offset-y blur-radius color)
+ +

drop-shadow() 関数は <shadow> 型の引数 ({{cssxref("box-shadow")}} プロパティで定義) を受け付けますが、 inset キーワードがと spread 引数が許可されないという例外があります。

+ +

引数

+ +
+
offset-x offset-y (必須)
+
影のオフセットを指定する2つの {{cssxref("<length>")}} 値です。 offset-x は水平方向の距離を表し、負の数で影を要素の左方に配置します。 offset-y は垂直方向の距離を表し、負の数で影を要素の上方に配置します。どちらの値も 0 であれば、影は要素の真後ろに配置されます。
+
blur-radius (任意)
+
影をぼかす半径で、 {{cssxref("<length>")}} で指定します。値が大きくなるほど、影は広く薄くなります。指定されていない場合は、既定値の 0 になり、辺がはっきりとしてぼけなくなります。負の数は許可されていません。
+
color (任意)
+
影の色で、 {{cssxref("<color>")}} で指定します。指定されない場合の既定値は、ブラウザーによります。 Firefox 及び Internet Explorer {{cssxref("color")}} プロパティの値が使用されます。一方、 WebKit の影は既定で透明であり、この値を省略する使い方は限られています。
+
+ +

例

+ +
/* 10px のぼかしで広がりのない黒い影 */
+drop-shadow(16px 16px 10px black)
+
+/* 1rem のぼかしで 3rem の広がりの赤っぽい影 */
+drop-shadow(.5rem .5rem 1rem #e23)
+ +

関連情報

+ + diff --git a/files/ja/web/css/filter-function/grayscale()/index.html b/files/ja/web/css/filter-function/grayscale()/index.html deleted file mode 100644 index 2f5eb6f89c..0000000000 --- a/files/ja/web/css/filter-function/grayscale()/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: grayscale() -slug: Web/CSS/filter-function/grayscale() -tags: - - CSS - - CSS Function - - CSS 関数 - - Filter Effects - - Reference - - フィルター効果 -translation_of: Web/CSS/filter-function/grayscale() ---- -
{{cssref}}
- -

CSS の grayscale() 関数は、入力画像をグレースケールに変換します。結果は {{cssxref("<filter-function>")}} です。

- -
{{EmbedInteractiveExample("pages/css/function-grayscale.html")}}
- - - -

構文

- -
grayscale(amount)
- -

引数

- -
-
amount
-
変換の度合いで、 {{cssxref("<number>")}} 又は {{cssxref("<percentage>")}} で指定します。 100% の値では完全にグレースケールになり、 0% の値では入力が変更されないままになります。 0% と 100% の間の値は、効果の割合です。補間時の欠損値は 0 です。
-
- -

例

- -
grayscale(0)     /* 効果なし */
-grayscale(.7)    /* 70% グレースケール */
-grayscale(100%)  /* 完全なグレースケール */
- -

関連情報

- - diff --git a/files/ja/web/css/filter-function/grayscale()/index.md b/files/ja/web/css/filter-function/grayscale()/index.md new file mode 100644 index 0000000000..2f5eb6f89c --- /dev/null +++ b/files/ja/web/css/filter-function/grayscale()/index.md @@ -0,0 +1,42 @@ +--- +title: grayscale() +slug: Web/CSS/filter-function/grayscale() +tags: + - CSS + - CSS Function + - CSS 関数 + - Filter Effects + - Reference + - フィルター効果 +translation_of: Web/CSS/filter-function/grayscale() +--- +
{{cssref}}
+ +

CSS の grayscale() 関数は、入力画像をグレースケールに変換します。結果は {{cssxref("<filter-function>")}} です。

+ +
{{EmbedInteractiveExample("pages/css/function-grayscale.html")}}
+ + + +

構文

+ +
grayscale(amount)
+ +

引数

+ +
+
amount
+
変換の度合いで、 {{cssxref("<number>")}} 又は {{cssxref("<percentage>")}} で指定します。 100% の値では完全にグレースケールになり、 0% の値では入力が変更されないままになります。 0% と 100% の間の値は、効果の割合です。補間時の欠損値は 0 です。
+
+ +

例

+ +
grayscale(0)     /* 効果なし */
+grayscale(.7)    /* 70% グレースケール */
+grayscale(100%)  /* 完全なグレースケール */
+ +

関連情報

+ + diff --git a/files/ja/web/css/filter-function/hue-rotate()/index.html b/files/ja/web/css/filter-function/hue-rotate()/index.html deleted file mode 100644 index bdae24f1cc..0000000000 --- a/files/ja/web/css/filter-function/hue-rotate()/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: hue-rotate() -slug: Web/CSS/filter-function/hue-rotate() -tags: - - CSS - - CSS Function - - Filter Effects - - Function - - Reference -translation_of: Web/CSS/filter-function/hue-rotate() ---- -
{{cssref}}
- -

hue-rotate() は CSS の関数で、要素およびその中身のコンテンツの色相環を回転します。結果は {{cssxref("<filter-function>")}} です。

- -
{{EmbedInteractiveExample("pages/css/function-hue-rotate.html")}}
- - - -

構文

- -
hue-rotate(angle)
- -

引数

- -
-
angle
-
入力サンプルの色相の相対的な変化量を、 {{cssxref("<angle>")}} で指定します。 0deg は入力を変更しないままにします。正の回転角は色相の値を増加させるのに対し、負の回転角は色相の値を減少させます。補間時の欠損値は 0 です。最小値又は最大値はなく、 hue-rotate(Ndeg) は N を 360 で割った余りと等価です。
-
- -

例

- -
hue-rotate(-90deg)  /* 270度の回転と同じ */
-hue-rotate(0deg)    /* 効果なし */
-hue-rotate(90deg)   /* 90度の回転 */
-hue-rotate(.5turn)  /* 180度の回転 */
-hue-rotate(405deg)  /* 45度の回転と同じ */
-
- -

仕様書

- - - - - - - - - - - - - - -
仕様書状態
{{SpecName('Filters 1.0', '#funcdef-filter-hue-rotate', 'hue-rotate()')}}{{Spec2('Filters 1.0')}}
- -

関連情報

- - diff --git a/files/ja/web/css/filter-function/hue-rotate()/index.md b/files/ja/web/css/filter-function/hue-rotate()/index.md new file mode 100644 index 0000000000..bdae24f1cc --- /dev/null +++ b/files/ja/web/css/filter-function/hue-rotate()/index.md @@ -0,0 +1,70 @@ +--- +title: hue-rotate() +slug: Web/CSS/filter-function/hue-rotate() +tags: + - CSS + - CSS Function + - Filter Effects + - Function + - Reference +translation_of: Web/CSS/filter-function/hue-rotate() +--- +
{{cssref}}
+ +

hue-rotate() は CSS の関数で、要素およびその中身のコンテンツの色相環を回転します。結果は {{cssxref("<filter-function>")}} です。

+ +
{{EmbedInteractiveExample("pages/css/function-hue-rotate.html")}}
+ + + +

構文

+ +
hue-rotate(angle)
+ +

引数

+ +
+
angle
+
入力サンプルの色相の相対的な変化量を、 {{cssxref("<angle>")}} で指定します。 0deg は入力を変更しないままにします。正の回転角は色相の値を増加させるのに対し、負の回転角は色相の値を減少させます。補間時の欠損値は 0 です。最小値又は最大値はなく、 hue-rotate(Ndeg) は N を 360 で割った余りと等価です。
+
+ +

例

+ +
hue-rotate(-90deg)  /* 270度の回転と同じ */
+hue-rotate(0deg)    /* 効果なし */
+hue-rotate(90deg)   /* 90度の回転 */
+hue-rotate(.5turn)  /* 180度の回転 */
+hue-rotate(405deg)  /* 45度の回転と同じ */
+
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Filters 1.0', '#funcdef-filter-hue-rotate', 'hue-rotate()')}}{{Spec2('Filters 1.0')}}
+ +

関連情報

+ + diff --git a/files/ja/web/css/filter-function/invert()/index.html b/files/ja/web/css/filter-function/invert()/index.html deleted file mode 100644 index ac644cb147..0000000000 --- a/files/ja/web/css/filter-function/invert()/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: invert() -slug: Web/CSS/filter-function/invert() -tags: - - CSS - - CSS Function - - Filter Effects - - Function - - Reference -translation_of: Web/CSS/filter-function/invert() ---- -
{{cssref}}
- -

invert() は CSS の関数で、入力画像の色サンプルを反転します。結果は {{cssxref("<filter-function>")}} です。

- -
{{EmbedInteractiveExample("pages/css/function-invert.html")}}
- - - -

構文

- -
invert(amount)
- -

引数

- -
-
amount
-
変換の度合いで、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 100% の値では完全に反転され、 0% の値では入力が変更されないままになります。 0% と 100% の間の値は、効果の割合です。補間時の欠損値は 0 です。
-
- -

例

- -
invert(0)     /* 効果なし */
-invert(.6)    /* 60% 反転 */
-invert(100%)  /* 完全に反転 */
- -

仕様書

- - - - - - - - - - - - - - -
仕様書状態
{{SpecName('Filters 1.0', '#funcdef-filter-invert', 'invert()')}}{{Spec2('Filters 1.0')}}
- -

関連情報

- - diff --git a/files/ja/web/css/filter-function/invert()/index.md b/files/ja/web/css/filter-function/invert()/index.md new file mode 100644 index 0000000000..ac644cb147 --- /dev/null +++ b/files/ja/web/css/filter-function/invert()/index.md @@ -0,0 +1,67 @@ +--- +title: invert() +slug: Web/CSS/filter-function/invert() +tags: + - CSS + - CSS Function + - Filter Effects + - Function + - Reference +translation_of: Web/CSS/filter-function/invert() +--- +
{{cssref}}
+ +

invert() は CSS の関数で、入力画像の色サンプルを反転します。結果は {{cssxref("<filter-function>")}} です。

+ +
{{EmbedInteractiveExample("pages/css/function-invert.html")}}
+ + + +

構文

+ +
invert(amount)
+ +

引数

+ +
+
amount
+
変換の度合いで、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 100% の値では完全に反転され、 0% の値では入力が変更されないままになります。 0% と 100% の間の値は、効果の割合です。補間時の欠損値は 0 です。
+
+ +

例

+ +
invert(0)     /* 効果なし */
+invert(.6)    /* 60% 反転 */
+invert(100%)  /* 完全に反転 */
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Filters 1.0', '#funcdef-filter-invert', 'invert()')}}{{Spec2('Filters 1.0')}}
+ +

関連情報

+ + diff --git a/files/ja/web/css/filter-function/opacity()/index.html b/files/ja/web/css/filter-function/opacity()/index.html deleted file mode 100644 index 0d1f304a27..0000000000 --- a/files/ja/web/css/filter-function/opacity()/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: opacity() -slug: Web/CSS/filter-function/opacity() -tags: - - CSS - - CSS Function - - Filter Effects - - Function - - Reference -translation_of: Web/CSS/filter-function/opacity() ---- -
{{cssref}}
- -

opacity() は CSS の関数で、入力画像のサンプルに透過性を適用します。結果は {{cssxref("<filter-function>")}} です。

- -
{{EmbedInteractiveExample("pages/css/function-opacity.html")}}
- - - -
-

注: この関数はもっと一般的な {{Cssxref("opacity")}} プロパティと似ています。違いはフィルターの場合、ブラウザーによってはハードウェアアクセラレーションにより性能が上がることです。

-
- -

構文

- -
opacity(amount)
- -

引数

- -
-
amount
-
変換の度合いで、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 100% の値では完全に透明になり、 0% の値では入力が変更されないままになります。 0% と 100% の間の値は、効果の割合です。補間時の欠損値は 0 です。
-
- -

例

- -
opacity(0%)   /* 完全に透過 */
-opacity(50%)  /* 50% 透過 */
-opacity(1)    /* 効果なし */
- -

仕様書

- - - - - - - - - - - - - - -
仕様書状態
{{SpecName('Filters 1.0', '#funcdef-filter-opacity', 'opacity()')}}{{Spec2('Filters 1.0')}}
- -

関連情報

- - diff --git a/files/ja/web/css/filter-function/opacity()/index.md b/files/ja/web/css/filter-function/opacity()/index.md new file mode 100644 index 0000000000..0d1f304a27 --- /dev/null +++ b/files/ja/web/css/filter-function/opacity()/index.md @@ -0,0 +1,72 @@ +--- +title: opacity() +slug: Web/CSS/filter-function/opacity() +tags: + - CSS + - CSS Function + - Filter Effects + - Function + - Reference +translation_of: Web/CSS/filter-function/opacity() +--- +
{{cssref}}
+ +

opacity() は CSS の関数で、入力画像のサンプルに透過性を適用します。結果は {{cssxref("<filter-function>")}} です。

+ +
{{EmbedInteractiveExample("pages/css/function-opacity.html")}}
+ + + +
+

注: この関数はもっと一般的な {{Cssxref("opacity")}} プロパティと似ています。違いはフィルターの場合、ブラウザーによってはハードウェアアクセラレーションにより性能が上がることです。

+
+ +

構文

+ +
opacity(amount)
+ +

引数

+ +
+
amount
+
変換の度合いで、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 100% の値では完全に透明になり、 0% の値では入力が変更されないままになります。 0% と 100% の間の値は、効果の割合です。補間時の欠損値は 0 です。
+
+ +

例

+ +
opacity(0%)   /* 完全に透過 */
+opacity(50%)  /* 50% 透過 */
+opacity(1)    /* 効果なし */
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Filters 1.0', '#funcdef-filter-opacity', 'opacity()')}}{{Spec2('Filters 1.0')}}
+ +

関連情報

+ + diff --git a/files/ja/web/css/filter-function/saturate()/index.html b/files/ja/web/css/filter-function/saturate()/index.html deleted file mode 100644 index e3261f1d8f..0000000000 --- a/files/ja/web/css/filter-function/saturate()/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: saturate() -slug: Web/CSS/filter-function/saturate() -tags: - - CSS - - CSS 関数 - - Reference - - フィルター効果 -translation_of: Web/CSS/filter-function/saturate() ---- -
{{cssref}}
- -

saturate() は CSS の関数で、入力画像の彩度を上げたり下げたりします。結果は {{cssxref("<filter-function>")}} です。

- -
{{EmbedInteractiveExample("pages/css/function-saturate.html")}}
- - - -

構文

- -
saturate(amount)
- -

引数

- -
-
amount
-
変換の量で、 {{cssxref("<number>")}} 又は {{cssxref("<percentage>")}} で指定します。 100% 未満の値では彩度を下げ、 100% を超える値では彩度を上げます。 0% の値では画像が完全に彩度がなくなり、 100% の値では入力が変更されないままになります。補間時の欠損値は 1 です。
-
- -

例

- -
saturate(0)     /* 彩度なし */
-saturate(.4)    /* 彩度40% */
-saturate(100%)  /* 効果なし */
-saturate(200%)  /* 2倍の彩度 */
- -

仕様書

- - - - - - - - - - - - - - -
仕様書状態
{{SpecName('Filters 1.0', '#funcdef-filter-saturate', 'saturate()')}}{{Spec2('Filters 1.0')}}
- -

関連情報

- - diff --git a/files/ja/web/css/filter-function/saturate()/index.md b/files/ja/web/css/filter-function/saturate()/index.md new file mode 100644 index 0000000000..e3261f1d8f --- /dev/null +++ b/files/ja/web/css/filter-function/saturate()/index.md @@ -0,0 +1,67 @@ +--- +title: saturate() +slug: Web/CSS/filter-function/saturate() +tags: + - CSS + - CSS 関数 + - Reference + - フィルター効果 +translation_of: Web/CSS/filter-function/saturate() +--- +
{{cssref}}
+ +

saturate() は CSS の関数で、入力画像の彩度を上げたり下げたりします。結果は {{cssxref("<filter-function>")}} です。

+ +
{{EmbedInteractiveExample("pages/css/function-saturate.html")}}
+ + + +

構文

+ +
saturate(amount)
+ +

引数

+ +
+
amount
+
変換の量で、 {{cssxref("<number>")}} 又は {{cssxref("<percentage>")}} で指定します。 100% 未満の値では彩度を下げ、 100% を超える値では彩度を上げます。 0% の値では画像が完全に彩度がなくなり、 100% の値では入力が変更されないままになります。補間時の欠損値は 1 です。
+
+ +

例

+ +
saturate(0)     /* 彩度なし */
+saturate(.4)    /* 彩度40% */
+saturate(100%)  /* 効果なし */
+saturate(200%)  /* 2倍の彩度 */
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Filters 1.0', '#funcdef-filter-saturate', 'saturate()')}}{{Spec2('Filters 1.0')}}
+ +

関連情報

+ + diff --git a/files/ja/web/css/filter-function/sepia()/index.html b/files/ja/web/css/filter-function/sepia()/index.html deleted file mode 100644 index eecc53bb3e..0000000000 --- a/files/ja/web/css/filter-function/sepia()/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: sepia() -slug: Web/CSS/filter-function/sepia() -tags: - - CSS - - CSS Function - - Filter Effects - - Function - - Reference -translation_of: Web/CSS/filter-function/sepia() ---- -
{{cssref}}
- -

sepia() は CSS の関数で、入力画像をセピア色に、より暖かい、より黄色と茶色の表現に変換します。結果は {{cssxref("<filter-function>")}} です。

- -
{{EmbedInteractiveExample("pages/css/function-sepia.html")}}
- - - -

構文

- -
sepia(amount)
- -

引数

- -
-
amount
-
変換の度合いで、 {{cssxref("<number>")}} 又は {{cssxref("<percentage>")}} で指定します。 100% の値では完全にセピア色になり、 0% の値では入力が変更されないままになります。 0% と 100% の間の値は、効果の割合です。補間時の欠損値は 0 です。
-
- -

例

- -
sepia(0)     /* 効果なし */
-sepia(.65)   /* 65% セピア色 */
-sepia(100%)  /* 完全にセピア色 */
- -

仕様書

- - - - - - - - - - - - - - -
仕様書状態
{{SpecName('Filters 1.0', '#funcdef-filter-sepia', 'sepia()')}}{{Spec2('Filters 1.0')}}
- -

関連情報

- - diff --git a/files/ja/web/css/filter-function/sepia()/index.md b/files/ja/web/css/filter-function/sepia()/index.md new file mode 100644 index 0000000000..eecc53bb3e --- /dev/null +++ b/files/ja/web/css/filter-function/sepia()/index.md @@ -0,0 +1,67 @@ +--- +title: sepia() +slug: Web/CSS/filter-function/sepia() +tags: + - CSS + - CSS Function + - Filter Effects + - Function + - Reference +translation_of: Web/CSS/filter-function/sepia() +--- +
{{cssref}}
+ +

sepia() は CSS の関数で、入力画像をセピア色に、より暖かい、より黄色と茶色の表現に変換します。結果は {{cssxref("<filter-function>")}} です。

+ +
{{EmbedInteractiveExample("pages/css/function-sepia.html")}}
+ + + +

構文

+ +
sepia(amount)
+ +

引数

+ +
+
amount
+
変換の度合いで、 {{cssxref("<number>")}} 又は {{cssxref("<percentage>")}} で指定します。 100% の値では完全にセピア色になり、 0% の値では入力が変更されないままになります。 0% と 100% の間の値は、効果の割合です。補間時の欠損値は 0 です。
+
+ +

例

+ +
sepia(0)     /* 効果なし */
+sepia(.65)   /* 65% セピア色 */
+sepia(100%)  /* 完全にセピア色 */
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Filters 1.0', '#funcdef-filter-sepia', 'sepia()')}}{{Spec2('Filters 1.0')}}
+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf