CSSを使用して画像にマスク効果を適用する方法

  • CSS

特殊な形で画像を切り抜きたい場合、単純にその形に合わせた1枚の画像を用意するのも一つの方法です。でも、切り抜きたい画像が変わるときに毎回新しい画像を用意するのは面倒ですよね。そんなときに便利なのが、CSSを使って画像を自由な形で切り抜く方法です。この記事では、CSSを使って画像にマスク効果を適用し、好きな形に切り抜く方法をご紹介します。

マスクとは

今回ご紹介するマスク効果とは、画像の一部を特定の形で切り抜く手法です。これを「マスキング」と呼ぶ方が馴染み深い人もいるかもしれません。マスク効果を使用するためには、まずマスク用の画像が必要です。これは、切り抜きたい形状の画像です。そして、実際にマスクされる画像も用意します。この2つの要素を組み合わせることで、画像の一部だけを表示したり、特定の形状に切り抜いたりすることが可能になります。

マスク効果

上記イメージでは星型のマスク用画像を使ってマスクされる画像を星型に切り抜いています。

マスク効果を適用するCSSプロパティ

マスク効果を適用するCSSプロパティには以下のようなコードがあります。

  • mask-image
  • clip-path
  • background-clip

mask-image

それではmask-imageプロパティの使い方をみていきましょう。mask-imageプロパティを使うことで、用意したマスク用画像の形で切り抜くことができます。

mask-imageプロパティ

▼html

<figure class="mskImg">
  <img src="img/bg.jpg" alt="マスクされる画像"/>
</figure>

▼css

.mskImg {
  mask-image: url("img/star.png");/*マスク用画像*/
  mask-repeat: no-repeat;
  mask-position: 3% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url("img/star.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 3% 0;
  -webkit-mask-size: auto 100%;
}

▼関連プロパティ

  • mask-repeat：マスク画像の繰り返し
  • mask-position：マスクする位置
  • mask-size：マスク画像のサイズ

clip-path

clip-pathプロパティはマスク用画像を特に用意せずに、CSS制御のみで正円・楕円・長方形・多角形などの形で切り抜くことができます。

clip-pathプロパティ

▼html

<img src="img/bg.jpg" alt="マスクされる画像" class="clipImg02"/>

▼css

/* 長方形 */
.clipImg01 {
  clip-path: inset(20px 20px 20px 20px round 15px);
}

/* 正円 */
.clipImg02 {
  clip-path: circle(120px at center);

}

/* 楕円 */
.clipImg03 {
  clip-path: ellipse(50% 50% at center);
}

/* 多角形 */
.clipImg04 {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

clip-pathを使って画像にマスク効果を適用する際には Clippy を活用すると非常に便利です。Clippyは視覚的に好きな形状を作成できるオンラインツールで、直感的な操作で多様な形を成形することができます。そして、作成した形状に基づいたclip-pathプロパティのCSSコードが自動的に生成されるため、手動でコードを書く手間が省けます。

▼clip-path: circle（円形）の例

See the Pen
clip-pathプロパティで画像をマスク by DigitalLabo (@DigitalLabo)
on CodePen.


別ウィンドウでDEMOを見る

background-clip

background-clipプロパティはマスクされる画像をテキストで切り抜くことができます。下記デモでは「TEXT」で画像をマスクしています。

background-clipプロパティ

▼html

<div class="bkg">
  <p>TEXT</p>
</div>

▼css

div.bkg {
  background-image: url("img/bg.jpg");
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-align:center;
  display: flex;
  justify-content: center;
  align-items: center;
}
div.bkg p {
  font-size: 100px;
  font-weight: 900;
}

▼注意点

  • 文字色があるとマスクされないので「color: transparent」を指定

See the Pen
background-clipプロパティで画像をマスク by DigitalLabo (@DigitalLabo)
on CodePen.


別ウィンドウでDEMOを見る

まとめ

いかがでしたでしょうか？マスク効果を適用することで、デザインの幅が大きく広がります。画像の一部を特定の形状に切り抜くことで、視覚的なインパクトを与えたり、他の要素と組み合わせる際により一体感のあるデザインを作り上げることもできます。マスク効果を活用することで、画像表示にアクセントを加え、デザイン全体の質を向上させる効果が期待できます。

関連記事

TOP
TOP