概要

maskは、CSSのプロパティで、要素の形状や表示範囲を画像やグラデーションに基づいてカスタマイズするための強力なツールです。このプロパティを使用することで、四角形の要素を複雑な形状に変えたり、部分的に透明にしたりすることができます。視覚的なエフェクトを追加するために、クリッピングパス（切り抜き）を簡単に作成でき、デザインの幅が広がります。

基本的な使い方

maskプロパティは、要素の表示部分を指定された画像やグラデーションに基づいてマスクするために使用されます。要素は、指定されたマスク画像の不透明部分に応じて表示され、不透明部分が要素の表示領域になります。

構文

.element {
  mask-image: url('path/to/image.png'); /* 画像を使用したマスク */
  mask-mode: match-source; /* マスクのモードを指定 */
  mask-size: contain; /* マスク画像のサイズ */
  mask-position: center; /* マスクの位置 */
  mask-repeat: no-repeat; /* マスクの繰り返し設定 */
}
  • mask-image
    マスクに使用する画像やグラデーションを指定します。
  • mask-mode
    マスクの表示モードを指定します（通常はmatch-source）。
  • mask-size
    マスクのサイズを指定します（contain, cover, autoなど）。
  • mask-position
    マスクの位置を指定します。
  • mask-repeat
    マスクの繰り返し方法を指定します。

例

以下は、マスク画像を使用して要素をカスタマイズする基本的な例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>`CSS` Mask Example</title>
<style>
  .masked-element {
    width: 300px;
    height: 300px;
    background: url('https://via.placeholder.com/300') no-repeat center/cover;
    mask-image: url('https://via.placeholder.com/300/000000/ffffff?text=Mask'); /* マスク画像を指定 */
    mask-size: cover;
    mask-repeat: no-repeat;
  }
</style>
</head>
<body>
<div class="masked-element"></div>
</body>
</html>

このコードでは、.masked-elementクラスにmask-imageを使ってマスク画像を設定しています。この設定により、指定された画像の形状に沿って要素が表示されます。

maskの利点

  • 自由な形状の作成: 要素を複雑な形状にカスタマイズできるため、デザインの自由度が高まります。
  • 視覚的なエフェクト: 画像やグラデーションを利用して、部分的な透明化や特殊な表示効果を簡単に実現できます。
  • コードの簡素化: マスク効果を使用することで、複雑な画像編集ソフトを使わずにデザインを調整できます。

応用例

グラデーションを使用したマスク

画像の代わりにグラデーションを使用して、要素の一部をフェードアウトするような視覚効果を作成することも可能です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width