Skip to content

Web/CSS/mask-type を更新 #27935

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 10, 2025
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
180 changes: 103 additions & 77 deletions files/ja/web/css/mask-type/index.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
---
title: mask-type
slug: Web/CSS/mask-type
l10n:
sourceCommit: ce1dfc470d18fa6ba694a5b8bd5c657914e57cc3
---

{{CSSRef}}

**`mask-type`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 SVG の {{svgElement("mask")}} 要素を*輝度*マスクと*アルファ*マスクのどちらとして扱うかを設定します。これは `<mask>` 要素自身に設定します。
**`mask-type`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 SVG の {{svgElement("mask")}} 要素に適用されます。これは、マスクの輝度(明度)またはアルファ (透過率) のどちらのコンテンツを使用するかを定義します。このプロパティは、{{cssxref("mask-mode")}} プロパティによって上書きされる場合があります。 `mask-type` プロパティは、画像マスクやグラデーションマスクには効果はありません。

## 構文

```css
/* キーワード値 */
Expand All @@ -16,21 +20,47 @@ mask-type: alpha;
mask-type: inherit;
mask-type: initial;
mask-type: revert;
mask-type: revert-layer;
mask-type: unset;
```

このプロパティは、マスクが使用される要素に適用され、同じ効果を持つ {{cssxref("mask-mode")}} プロパティによって上書きされることがあります。アルファマスクは全般的に表示が高速です。
### 値

## 構文
- `alpha`
- : `<mask>` のアルファ(透過率)値を使用することを示します。
- `luminance`
- : `<mask>` の[輝度(明度)値](#輝度を理解する)を使用することを示します。

`mask-type` プロパティは以下に示すキーワード値のうちの一つで指定します。
## 解説

### 値
`mask-type` プロパティは、 SVG の `<mask>` 要素にのみ関連します。 `mask-type: luminance` を設定すると、マスクはマスクの各部分の明るさを使用します。 `mask-type: alpha` を設定すると、マスクの各部分の透明度または不透明度を使用します。

- `luminance`
- : 関連付けられたマスク画像が輝度マスクであることを示すキーワードです。すなわち、適用時に[相対輝度](https://en.wikipedia.org/wiki/Luminance_%28relative%29)値が使用されます。
- `alpha`
- : 関連付けられたマスク画像がアルファマスクであることを示すキーワードです。すなわち、適用時に[アルファチャネル](https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%AB%E3%83%95%E3%82%A1%E3%83%81%E3%83%A3%E3%83%B3%E3%83%8D%E3%83%AB)値が使用されます。
### 既定の動作

既定では、 SVG の `<mask>` 要素は `mask-type: luminance` を使用します。これは、マスクコンテンツの色と透過率の両方がマスクに影響することを意味しています。マスクが部分的に不透明になるかどうかは、不透明領域の色の明度によって決まります。

- 完全に不透明な白色領域(輝度 100%)はマスクされ、表示されます。
- 黒(輝度 0%)または完全に透明な領域は切り取られ、表示されません。
- 輝度の値が中間である領域は、マスクの色である輝度と、マスクの各領域のアルファ透過率の両方を反映して、部分的にマスクされます。

### 輝度を理解する

`luminance` マスクの不透明度は、次の式を使用して `rgb()` 色の `R`、`G`、`B`、および `A` の値によって決定されます。

`((0.2125 * R) + (0.7154 * G) + (0.0721 * B)) * A`

例えば、色 `green` (`#008000` または `rgb(0% 50% 0% / 1)`)の輝度値は `35.77%` です。単色の `green` の輝度マスクでマスクされた領域は、`35.77%` で表示されます。`mask-type` が `alpha` に設定されている場合、同じ完全不透明の `green` 色でマスクされた領域は `100%` 表示されます。

SVG の `<mask>` 要素に、50% 透明の黒である `fill="rgb(0 0 0 / 0.5)"` が指定されている場合、 `mask-type` が `alpha` に設定されていると、アルファ値が `0.5` (不透明度 50%)であるため、マスクされた要素上の対応する図形は不透明度 50% で表示されます。しかし、`mask-type` の既定値または `luminance` に設定されている場合、マスクされた領域は輝度が `0` であるため、完全に切り取られ、表示されません。

### `mask-mode` の `mask-type` における効果

`mask-type` プロパティが SVG の `<mask>` 要素に設定されている場合、{{cssxref("mask-mode")}} プロパティは、マスクされる要素(マスクを適用する要素)に設定されます。
マスク画像のソースが SVG の `<mask>` でない場合、このプロパティは効果はありません。

`mask-mode` の既定値は `match-source` です。これは、ブラウザーが `<mask>` 要素の `mask-type` 値を使用して、それをどのように解釈するかを決定することを意味します。`mask-mode` が `match-source` 以外の値に設定されている場合、その値が優先され、適用されたマスクの `mask-type` 値を上書きします。

`<mask>` がマスク画像のソースとして定義されており、 `mask-mode` が `match-source` に設定されているか、または既定値である場合、 `mask-mode` は `<mask>` 要素の `mask-type` 値(`luminance` または `alpha`)に解決されます。明示的に設定されていない場合、値は既定の `luminance` になります。

## 公式定義

Expand All @@ -42,92 +72,84 @@ mask-type: unset;

## 例

### アルファマスクの設定
### `mask-type` プロパティの使用

この例では、 `mask-type` プロパティの使用方法と、そのさまざまな値の効果について説明します。

#### HTML

マスクされる 2 つの画像が設置されています。2 つの画像は、クラス名以外はまったく同じです。
また、2 つの `<mask>` 要素を含む SVG も含まれています。2 つのマスクは、`id` 値以外はまったく同じです。それぞれのマスクは、緑と白のハート形と、半透明の白と黒で塗りつぶされた円から構成されています。

```html
<div class="redsquare"></div>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="0"
height="0">
<defs>
<mask id="m" maskContentUnits="objectBoundingBox" style="mask-type:alpha">
<rect
x=".1"
y=".1"
width=".8"
height=".8"
fill="red"
fill-opacity="0.7" />
</mask>
</defs>
<img
class="alphaMaskType"
src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
alt="Pride flag" />
<img
class="luminanceMaskType"
src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
alt="Pride flag" />

<svg height="0" width="0">
<mask id="alphaMask">
<path
d="M20,70 A40,40,0,0,1,100,70 A40,40,0,0,1,180,70 Q180,130,100,190 Q20,130,20,70 Z"
fill="green"
stroke="white"
stroke-width="20" />
<circle
cx="170"
cy="170"
r="40"
fill="rgb(0 0 0 / 0.5)"
stroke="rgb(255 255 255 / 0.5)"
stroke-width="20" />
</mask>
<mask id="luminanceMask">
<path
d="M20,70 A40,40,0,0,1,100,70 A40,40,0,0,1,180,70 Q180,130,100,190 Q20,130,20,70 Z"
fill="green"
stroke="white"
stroke-width="20" />
<circle
cx="170"
cy="170"
r="40"
fill="rgb(0 0 0 / 0.5)"
stroke="rgb(255 255 255 / 0.5)"
stroke-width="20" />
</mask>
</svg>
```

#### CSS

`mask-type` プロパティを `<mask>` 要素に適用し、次に `<mask>` 要素とマスクソースを画像に適用します。

```css
.redsquare {
height: 100px;
width: 100px;
background-color: rgb(128, 128, 128);
border: solid 1px black;
mask: url("#m");
mask#alphaMask {
mask-type: alpha;
}
```

#### 結果

{{EmbedLiveSample('アルファマスクの設定', '100%', '102')}}

### 輝度マスクの設定

#### HTML

```html
<div class="redsquare"></div>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="0"
height="0">
<defs>
<mask
id="m"
maskContentUnits="objectBoundingBox"
style="mask-type:luminance">
<rect
x=".1"
y=".1"
width=".8"
height=".8"
fill="red"
fill-opacity="0.7" />
</mask>
</defs>
</svg>
```
mask#luminanceMask {
mask-type: luminance;
}

#### CSS
img.alphaMaskType {
mask-image: url(#alphaMask);
}

```css
.redsquare {
height: 100px;
width: 100px;
background-color: rgb(128, 128, 128);
border: solid 1px black;
mask: url("#m");
img.luminanceMaskType {
mask-image: url(#luminanceMask);
}
```

#### 結果

{{EmbedLiveSample('輝度マスクの設定', '100%', '102')}}
{{EmbedLiveSample("Examples", "", "250")}}

`mask-mode` プロパティの既定値は `match-source` であるため、最初のマスクはアルファチャンネルのみを使用してマスクを定義しています。白と緑は完全に不透明であり、 50% の白と黒の色は、色のアルファ値のみが重要であるため、50% 不透明です。2 つ目の例では、色の輝度を使用してマスクの不透明度を決定しています。白は緑よりも明るく、半透明の白は半透明の黒よりも明るくなります。

## 仕様書

Expand All @@ -139,4 +161,8 @@ mask-type: unset;

## 関連情報

- その他のマスクに関するプロパティ: {{cssxref("mask")}}, {{cssxref("mask-mode")}}
- {{cssxref("mask")}}
- {{cssxref("mask-mode")}}
- [CSS マスク入門](/ja/docs/Web/CSS/CSS_masking/Masking)
- [CSS マスク](/ja/docs/Web/CSS/CSS_masking)モジュール
- SVG の {{svgattr("mask-type")}} 属性