―CSS

CSSのmask-imageとは？デザインの幅を広げるマスク効果の使い方と注意点

2024.12.17

CSS

mask-imageとは？
基本的な使い方
実装例
メリットと注意点
まとめ
参考文献

mask-imageとは？

mask-imageは、CSSプロパティの一つで、要素にマスク効果を適用するために使われます。 マスク効果とは、要素の一部を透明にすることで、背後にある背景やコンテンツを透過的に見せる技術です。マスクには、画像やグラデーションを使用でき、要素の特定の部分を表示したり隠したりすることが可能です。これにより、複雑なデザインも簡単に実現できます。

基本的な使い方

mask-imageは、CSSで要素にマスク効果を追加する際に使用するプロパティです。
基本的な書き方は以下の通りです。これにより、指定した画像をマスクとして適用し、要素の一部を透明化できます。

.element {
  mask-image: url('画像のURL');
}

よく一緒に使用されるプロパティ

下記はmask-imageと組み合わせて使用される主なプロパティです。

mask-repeat

/* 水平軸　垂直軸　両方の軸の順で画像の繰り返しの指定が可能 */
.element {
  mask-repeat: repeat no-repeat;
}

mask-position

/* 水平方向　垂直方向の順で画像の配置の指定が可能 */
.element {
  mask-position: top bottom;
}

mask-size

/* 幅　高さの順で画像の幅と高さの指定が可能 */
.element {
  mask-size: 50% auto;
}

実装例

linear-gradientを使用してグラデーションで画像を表示させる例

下記で上部を少し透過させたグラデーションを実現しています。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>mask-image</title>
    <style>
        .gradient-mask {
            width: 300px;
            height: 300px;
            background-image: url('https://picsum.photos/300');
            mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
        }
    </style>
</head>

<body>
    <div class="gradient-mask"></div>
</body>

</html>

テキストで画像をマスクする例

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>mask-image</title>
    <style>
        .masked-image {
            position: relative;
        }

        .masked-image svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            mask-image: url(#mask);
        }

        .masked-image img {
            mask-image: url(#mask);
        }
    </style>
</head>

<div class="masked-image">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <mask id="mask">
            <text x="50" y="50" font-size="50" font-family="Arial" fill="#fff">MASK</text>
        </mask>
    </svg>
    <img src="https://picsum.photos/400/300">
</div>

</html>

メリットと注意点

メリット

デザインの幅が広がる
mask-imageを使うことで、特定の形状やグラデーションなどを利用したデザインが簡単に実現できます。

軽量で実装可能
画像やテキストをマスクで部分的に表示する場合でも、CSSプロパティだけで対応できるため、画像加工の手間を省けます。また、HTMLとCSSのみで完結するため、コードが軽量化され、ページの読み込み速度の向上にもつながります。

注意点

ブラウザのサポート状況
mask-imageは主要な最新ブラウザで広くサポートされていますが、一部の古いブラウザでは正しく動作しない場合があります。そのため、WebKit系ブラウザ用の-webkit-プレフィックスを併用して互換性を確保するのをおすすめします。

パフォーマンスへの影響
高解像度の画像や複雑なマスクを使用すると、描画処理が重くなり、特にモバイル端末でパフォーマンスが低下する可能性があります。必要に応じて画像サイズや複雑さを最適化して負荷を軽減する必要があります。

まとめ

mask-imageは、CSSでマスク効果を簡単に実現できる便利なプロパティです。画像やグラデーションを利用して、要素を部分的に表示または非表示にすることで、複雑なデザインを実装出来ます。ただし、古いブラウザへの対応や高解像度画像を使用した際のパフォーマンスには注意が必要です。そのためにWebkitプレフィックスを利用した互換性の確保や、画像サイズの最適化を行うことで、幅広い環境で使用できます。