mask

The mask feature lets you use an image or gradient like a stencil to show only certain parts of an element, or fade parts of it smoothly.

mask

mask は、画像やグラデーションを“型紙”みたいに使って、要素の見える部分だけを切り抜いたり、じわっと消したりできるCSSです。

最短で使う：mask の基本形

例：グラデーションで「下に行くほど消える」マスク

写真やカードの“下端フェードアウト”に超よく使います。

HTML

<div class="photoFade">
	<img src="photo.jpg" alt="プログラミングしている女性の写真">
</div>

CSS

.photoFade {
	text-align: center;
}

.photoFade img {
	width: 100%;
	max-width: 360px;

	/* 下に行くほど透明になるマスク */
	mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}

ポイント：

マスクは「黒→透明」ではなく、“αが1→0” になっていることが大事です（色より透明度が効く）。
rgba(0,0,0,1) は “黒” だけど α=1 なので「見える」側です。

画像でくり抜く：mask-image の実践

例：PNG（透過あり）を型紙にして抜く

“ロゴ形に写真を抜く” みたいな使い方。

HTML

<div class="masked"></div>

CSS

.masked {
	width: 360px;
	height: 220px;

	/* 見せたいコンテンツ（下地） */
	background-image: url("photo.jpg");
	background-size: cover;
	background-position: center;

	/* 型紙（マスク） */
	mask-image: url("logo-shape.png");
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

mask-size: contain: 型紙全体が入るように縮小
mask-repeat: no-repeat: タイル状に増殖させない

ここで準備した透過PNG

logo-shape.png は「見せたい形が不透明、隠したい部分が透明」な画像を用意します。

色そのものより透明度（アルファ値）が決定的に重要です。

イメージとしては、

背景: 完全に透明
ロゴや形の部分: 完全に不透明（白や黒でOK）

これだけです。

具体的に「どういう画像を作ればいいか」

基本形（最もおすすめ）

ファイル形式: PNG
背景: 透明
形（ロゴ・文字・図形）: ベタ塗り（白 or 黒）

例：

透明背景のPNG
中央に白いロゴマーク
それ以外は完全に透明

この白い部分だけが「見える窓」になります。

色は白じゃないとダメ？

いいえ。色はほぼ関係ありません。

大事なのは：

α = 1（完全不透明） → 見える
α = 0（完全透明） → 見えない

つまり、

白でも
黒でも
赤でも

不透明なら見えます。

ただし実務では白ベタで作るのが一番分かりやすく、事故が少ないという理由で白がよく使われます。

グラデーションは使っていい？

はい。むしろ mask の強みです。

例：エッジをふんわりさせたい場合

中央: 不透明（α=1）
外側: 半透明 → 透明（αが徐々に下がる）

こうすると、

ロゴの端が自然にフェード
硬い「切り抜き感」がなくなる

ただし初心者のうちはまずはベタ塗り → 慣れたらグラデーションがおすすめです。

実際の構造を言葉で表すと

Plaintext


[ 透明 ] [ 透明 ] [ 透明 ]
[ 透明 ] [ ロゴ ] [ 透明 ]
[ 透明 ] [ 透明 ] [ 透明 ]

この「ロゴ」の部分だけが表示されます。

やってはいけない例（初心者がよくハマる）

❌ 背景が白いJPEG

JPEGは透明を持てない
全体が不透明 → 全部見えてしまう
マスクとして意味をなさない

❌ ロゴだけ透明、背景が不透明

発想が逆
背景が「見える窓」になる
結果：ロゴ部分が消える

「見せたい形＝不透明」を常に意識します。

解像度とサイズの考え方

小さいPNGを無理に拡大しない

拡大 → ギザギザ・ぼやける
マスクは境界が目立ちやすい

実務的な目安

表示サイズの 1.5〜2倍くらいの解像度で作る
例：
- 表示：200px
- 画像：400px 〜 500px

SVGは使える？

使えます。むしろ理想的です。

SVGマスクのメリット

拡大しても劣化しない
ファイルサイズが小さい
シャープな境界

ただし注意点

SVG内の構造が複雑だと効かないことがある
最初はPNGで理解 → 慣れたらSVG
が安全な学習ルートです。

デザインツールでの作り方

Photoshop / GIMP / Figma など

新規キャンバスを作る
背景を透明
ロゴや形を白でベタ塗り
PNGで書き出し

それだけでOKです。

「ちゃんと効くか」最短チェック方法

CSS側でまずこれを試します：

CSS

.test {
    mask-image: url("logo-shape.png");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

もし効かなければ、一度こうします：

CSS

mask-image: linear-gradient(black, black);

これで効くなら CSSは正しい、画像側の問題と切り分けできます。

位置・サイズ・繰り返し（backgroundに似てるやつ）

マスクを「ちょうどこの位置に置きたい」「ちょっと拡大したい」が出てきます。

mask-position: 配置（例：center, right 20px top 10px）
mask-size: 大きさ（cover/contain や 200px 100px）
mask-repeat: 繰り返すか（no-repeat, repeat）

例：右上に小さめのマスクを置く

HTML

<div class="badgeMasked">
	<img src="photo.jpg" alt="プログラミングしている女性の写真">
</div>

CSS

.badgeMasked img {
	width: 360px;
	height: 220px;

	mask-image: url("badge.png");
	mask-repeat: no-repeat;
	mask-position: right 12px top 12px;
	mask-size: 113px 41px;
}

どこ基準で切り抜く？：mask-clip と mask-origin

ここは混乱しやすいので、最初はこう覚えるのが楽です。

mask-origin: 位置計算の基準（マスクを置く基準箱）
mask-clip: 実際に適用される範囲（どこまでマスクが効くか）

値としては、だいたいこの3つがよく出ます：

content-box
padding-box
border-box

例：ボーダー部分にはマスクを効かせない（中身だけ抜く）

MASK

HTML

<div class="maskCard">
	<div class="maskInner">
		MASK
	</div>
</div>

CSS

/* 外側：ボーダー枠 */
.maskCard {
	width: 260px;
	height: 160px;
	border: 8px solid #000;
	padding: 16px;
	background: #fff;
}

/* 内側：マスクをかける対象 */
.maskInner {
	width: 100%;
	height: 100%;

	/* 中身が分かりやすいように派手な背景 */
	background: linear-gradient(135deg, #ff7a18, #ffd200);

	/* 文字を中央に */
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	font-weight: bold;
	color: #000;

	/* ここが今回の主役 */
	mask-image: radial-gradient(circle, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 61%);
	mask-origin: content-box;
	mask-clip: content-box;
}

“上級者向けの武器”：マスクを複数重ねる（合成）

マスクは複数指定できる

mask-image をカンマ区切りで複数書けます。

CSS

.multiMask {
    mask-image:
        radial-gradient(circle at 30% 50%, rgba(0,0,0,1), rgba(0,0,0,0)),
        linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
    mask-repeat: no-repeat, no-repeat;
    mask-size: 240px 240px, 100% 100%;
    mask-position: left 24px center, center;
}

合成ルール（mask-composite / mask の合成）

複数マスクをどう混ぜるかで表現が一気に増えます。

ただしここはブラウザ差分が出やすい領域なので、実戦では「対応状況を確認しながら」が安全です。

アニメーション（演出がしたい人向け）

マスクは演出と相性が良いです。たとえば「横から現れる」演出。

Hello mask

HTML

<div class="reveal">Hello mask</div>

CSS

.reveal {
	font-size: 40px;
	font-weight: 700;
	display: inline-block;

	mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,1) 100%);
	mask-size: 300% 100%;
	mask-position: 100% 0;
	transition: mask-position 800ms ease;
}

.reveal:hover {
	mask-position: 0 0;
}

コツ：

mask-position や mask-size を動かすと分かりやすい
いきなり複雑にせず「グラデーション1枚」から始めると失敗しにくい

実務でつまずきやすい注意点（重要）

クリックできない／できる範囲が変に感じる

マスクは「見た目を隠す」だけで、要素自体が消えるわけではありません。

そのため、見えないのにクリックできるみたいな違和感が起きることがあります。

対策の考え方：

見た目と当たり判定を一致させたいなら clip-path を検討
どうしても mask を使うなら、クリック領域の要件を設計側と相談

画像マスクがぼやける／汚い

マスク画像の解像度が足りない
mask-size が中途半端な拡大になっている

この2つが多いです。

対策：

マスクにSVGを使う（拡大してもきれい）
画像なら十分な解像度を用意する

パフォーマンス

大きい要素に重いマスク（巨大画像＋アニメーション）をかけると、端末によってはカクつきます。

実務のコツ：

アニメは「サイズや位置を動かす」くらいに抑える
画面全体に常時マスク、は避ける（必要な要素だけ）

ブラウザ差分

マスクは比較的新しい表現が多く、環境差が出ることがあります。

本番導入するなら、対象ブラウザでの目視チェックはかなり大事です。

よくある質問（FAQ）

Q. マスクは「黒が見えて、白が隠れる」んですか？: A. だいたいは逆で、基本は「透明度（α）が高いほど見える、低いほど隠れる」です。色そのものより“透明かどうか”が効くと思うと迷いにくいです。
Q. 画像を型紙にしたいけど、PNGじゃないとダメ？: A. PNGでもOKです。ですが拡大縮小で劣化しやすいので、きれいさ優先ならSVGが便利です。
Q. 見えない部分もクリックできちゃうのはバグ？: A. バグというより仕様に近いです。見た目を隠しても要素の“存在”は残るので、クリック領域が残ることがあります。クリック範囲も形に合わせたいなら clip-path も検討してください。
Q. 背景画像みたいに位置を動かせますか？: A. できます。mask-position と mask-size は background-position / background-size にかなり近い感覚で使えます。
Q. なんだかカクつくときの対策は？: A. 大きな領域に重いマスクをアニメーションさせると負荷が出やすいです。要素を小さくする・アニメ対象を減らす・SVGを使う、などで軽くできます。

よくあるエラー早見

マスクが効かない（何も変わらない）: mask-image が指定できているか、URLのパスが正しいかを確認します。まずは linear-gradient(...) を指定して動くか試すと切り分けが早いです。
マスクがタイル状に増える: mask-repeat が既定で repeat 扱いになっていることがあります。no-repeat を指定してみてください。
位置が思った通りにならない: mask-position / mask-size を明示します。さらに必要なら mask-origin / mask-clip の基準（content-box など）を合わせます。
境界がギザギザ・ぼやける: マスク画像の解像度不足や中途半端な拡大が原因になりがちです。SVG化、または mask-size の調整を検討します。
ホバーでの動きが重い: アニメーション対象を減らす、マスク画像を軽くする、巨大要素への常時マスクを避ける、で改善しやすいです。

CSS

mask とは？

どういう場面で便利？

よくある使いどころ

“似てるけど違う”もの

まず押さえる超重要ポイント

マスクは「透明度（α）」で効くのが基本

マスクは複数枚も重ねられる

マスクの位置・サイズ・繰り返しは “background” と似てる

最短で使う：mask の基本形

例：グラデーションで「下に行くほど消える」マスク

画像でくり抜く：mask-image の実践

例：PNG（透過あり）を型紙にして抜く

ここで準備した透過PNG

具体的に「どういう画像を作ればいいか」

色は白じゃないとダメ？

グラデーションは使っていい？

実際の構造を言葉で表すと

やってはいけない例（初心者がよくハマる）

解像度とサイズの考え方

SVGは使える？

デザインツールでの作り方

「ちゃんと効くか」最短チェック方法

位置・サイズ・繰り返し（backgroundに似てるやつ）

どこ基準で切り抜く？：mask-clip と mask-origin

“上級者向けの武器”：マスクを複数重ねる（合成）

mask ショートハンド（まとめ書き）

アニメーション（演出がしたい人向け）

実務でつまずきやすい注意点（重要）

クリックできない／できる範囲が変に感じる

画像マスクがぼやける／汚い

パフォーマンス

ブラウザ差分

関連プロパティ

よくある質問（FAQ）

よくあるエラー早見