CSS マスキング (Masking)

CSS マスキングを使用すると、マスクレイヤー（特定の画像やグラデーション）を使用して要素の一部を隠したり、表示したりすることができます。

1. CSS マスキング

CSS マスキングは、画像をマスクレイヤーとして使用することで、要素のどの部分を「表示」するかを定義する手法です。マスクとして指定された画像の透過（アルファチャンネル）や輝度に基づいて、背後の要素が切り抜かれたようにレンダリングされます。

2. mask-image プロパティ

mask-image プロパティは、要素のマスクレイヤーとして使用する画像を指定します。

2.1 画像を使用したマスキングの例

以下の例では、PNG 画像をマスクとして使用し、その形状に沿って元の画像を切り抜いています。

.mask1 {
  /* WebKit系ブラウザ（Chrome, Safari等）向けのプレフィックス */
  -webkit-mask-image: url(w3logo.png);
  /* 標準プロパティ */
  mask-image: url(w3logo.png);
  mask-repeat: no-repeat;
}

3. mask-repeat プロパティ

mask-repeat プロパティは、マスク画像を繰り返すかどうか、またはどのように繰り返すかを指定します。

3.1 繰り返し設定の例

.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  /* マスクを繰り返さない設定 */
  mask-repeat: no-repeat;
}

4. グラデーションを使用したマスキング

CSS グラデーションをマスクとして使用することで、要素を徐々に透過させる（フェードアウトさせる）ような効果が簡単に作成できます。

4.1 線形グラデーション（Linear Gradient）の例

以下のコードは、上から下にかけて不透明から透明になるマスクを適用します。

.mask3 {
  /* 上から下へ向かってマスクを適用 */
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}

4.2 放射状グラデーション（Radial Gradient）の例

特定の形状（円形など）で要素をマスクすることも可能です。

.mask4 {
  /* 中央から外側へ向かって円形にマスクを適用 */
  -webkit-mask-image: radial-gradient(circle, black 50%, rgba(0,0,0,0.5) 70%, transparent 90%);
  mask-image: radial-gradient(circle, black 50%, rgba(0,0,0,0.5) 70%, transparent 90%);
}

5. SVG を使用したマスキング

SVG の <mask> 要素を使用すると、より複雑で精密なマスク形状を定義し、それを CSS から呼び出すことができます。

5.1 SVG マスクの実装例

.mask5 {
  /* SVG内のIDを指定してマスクを適用 */
  -webkit-mask-image: url(#masking);
  mask-image: url(#masking);
}

6. マスキングプロパティ一覧

CSS マスキングに関連する主要なプロパティは以下の通りです。

CSS マスキングは、これまで Photoshop などの画像編集ソフトで行っていた作業を、ブラウザ上でリアルタイムかつ動的に制御することを可能にします。これにより、マウスホバー時にマスクの位置をアニメーションさせるといった、インタラクティブな表現も容易になります。

現在のブラウザ実装では、Chrome や Safari において -webkit- プレフィックスが必要な場合が多いため、クロスブラウザ対応を考慮した記述を忘れないようにしましょう。