マスク（切り抜き）によるデザインは媒体を問わず広く使われます。ウェブサイトでもCSS3の登場でマスクを取り入れたサイトをよく目にするようになりました。今回はマスクを可能にするCSSプロパティmask-image clip-path background-clipの3つを見ていきたいと思います。

mask-imageを使ったマスク

mask-imageを見ていきましょう。ここではrepeating-linear-gradientを使って縦ストライプでマスクしています。

See the Pen css-mask by ロウタ (@nqhzuqom-the-looper) on CodePen.

グラデーションを使うとこんな感じになります。

See the Pen css-mask02 by ロウタ (@nqhzuqom-the-looper) on CodePen.

ストライプや色数の多い複雑なグラデーションの記述は大変なのでジェネレーターを使うのがいいでしょう。
その他にもpngやsvgを指定することで、ロゴや複雑なシェイプでマスクすることもできます。画像指定の注意点としてはテスト環境ではローカルのHTTPサーバーを立ち上げないと画像を認識しません。なぜかmask-imageはHTTPプロトコルのリクエストがあるようです。簡単にローカルサーバーを構築できるVS Code の Live Serverがオススメです。

//ストライプでマスク
mask-image:  repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 10% 15%, rgba(0, 0, 0, 1) 15% 20%);
//グラデーションでマスク
mask-image: linear-gradient(to bottom, transparent, black);
//画像のパスを指定
mask-image: url("../images/hoge-mask.png");    //ローカルサーバーが必要

その他の関連プロパティ

mask-imageに関連したプロパティには以下のものがあります。

• mask-mode: マスク画像の適用方法を指定します（alphaやluminanceなど）。
• mask-position: マスク画像の位置を指定します。
• mask-size: マスク画像のサイズを指定します。
• mask-repeat: マスク画像の繰り返し方法を指定します。
• mask-origin: マスク画像の基準となる要素の部分を指定します。
• mask-clip: マスク画像のクリッピング範囲を指定します。

backgroundと同じようなプロパティが並びます。覚えやすく自由度も高いmask-imageがCSSでマスクするときの基本になりそうです。

clip-pathを使ったマスク

clip-pathはmask-imageほど自由度は高くありませんが手軽にマスクがかけられるのでザックリ「菱形」や「円」で切り抜きたいときには便利です。

See the Pen clip-path01 by ロウタ (@nqhzuqom-the-looper) on CodePen.

clip-pathの記述もlinear-gradient同様、ジェネレーターを使えば少し凝った形にすることも簡単です。

See the Pen Untitled by ロウタ (@nqhzuqom-the-looper) on CodePen.

background-clipでテキストを使ったマスク

最後にbackground-clipを見ていきましょう。background-clipはマスクというよりbackgroundの範囲を指定するプロパティですが、値をtextにし色指定をcolor:transparent;することでテキストを使った切り抜きが表現出来ます。

See the Pen mask-text by ロウタ (@nqhzuqom-the-looper) on CodePen.

テキストを使ってマスクする時に気をつけたいのは、背景色と切り抜かれたテキストのコントラスト比を高くする事です。

See the Pen mask-text02 by ロウタ (@nqhzuqom-the-looper) on CodePen.

このように背景色がグレーの時、上下二つのテキスト「MASK」の見え方に違いがあるのがよくわかりますね。空の部分で切り抜かれたテキストは背景色のグレとーコントラス比が高いため、はっきりと読めますが崖の部分で切り抜かれたテキストは背景色に馴染んでしまい読みにくくなっています。これについてはマークアップというよりデザイン寄りの話になりますが、mdn web docsではこのように指摘してます。

アクセシビリティの考慮

background-clip: text を使用する際には、背景色とその上に配置されたテキストの色のコントラスト比が、弱視の人がページの内容を読むことができる程度に高いことを確認してください。

引用元：mdn web docs

まとめ

いかがだったでしょうか。マスクについてはSVGやCanvasを使ったよりインタラクティブな表現方法もありますが、CSSだけでもいろいろなマスク効果が実現出来ることがわかりました。transitionやanimationなど組み合わせてよりリッチな表現も可能でしょう。色々試してオリジナルな表現を探してみるのもいいかもしれません。最後までお読みいただきありがとうございました。