Yugien - 遊戯苑
テーマ

CSS

この記事では「CSS」について、基本の意味と使い方を初心者向けにやさしく説明します。

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 とは？

mask は、要素の「見えるところ／見えないところ」を“マスク画像”で決めるためのCSSです。

イメージとしては「透明なシート（型紙）を上から重ねて、穴が空いてる部分だけ見せる」感じです。

見せたい
マスク側が「不透明（白っぽい / αが大きい）」
隠したい
マスク側が「透明（黒っぽい / αが小さい）」

この“型紙”として使えるのは、画像（PNGなど）、グラデーション、SVGなどです。

さらに 位置・サイズ・繰り返し まで細かくコントロールできます。

どういう場面で便利？

よくある使いどころ

“似てるけど違う”もの

clip-path
形でバッサリ切る（基本は「境界で切る」）
mask
濃淡で切り抜ける（透明度で“じわっと”もできる）

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

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

多くのケースでは マスク画像の透明度 がそのまま「見える割合」になります。

α=1（完全不透明）
100%見える
α=0（完全透明）
0%見えない
α=0.5
半分だけ見える（薄く見える）

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

mask-image はカンマ区切りで複数指定できて、重ね方（合成）もできます。

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

mask-position / mask-size / mask-repeat は、背景画像の指定方法にかなり近いです。

「背景が分かってる人は覚えやすい」です。

最短で使う：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));
}

ポイント：

画像でくり抜く：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 黒）

例：

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

色は白じゃないとダメ？

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

大事なのは：

つまり、

不透明なら見えます。

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

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

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

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

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

こうすると、

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

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

Plaintext


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

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

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

❌ 背景が白いJPEG

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

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

解像度とサイズの考え方

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

実務的な目安

SVGは使える？

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

SVGマスクのメリット

ただし注意点

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

Photoshop / GIMP / Figma など

  1. 新規キャンバスを作る
  2. 背景を 透明
  3. ロゴや形を 白でベタ塗り
  4. 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つがよく出ます：

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

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 の合成）

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

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

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

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;
}

コツ：

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

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

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

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

対策の考え方：

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

この2つが多いです。

対策：

パフォーマンス

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

実務のコツ：

ブラウザ差分

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

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

関連プロパティ

最初はこれだけで十分です。

慣れてきたら追加

上級者の引き出し

よくある質問（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 の調整を検討します。
ホバーでの動きが重い
アニメーション対象を減らす、マスク画像を軽くする、巨大要素への常時マスクを避ける、で改善しやすいです。