CSSで画像にくり抜きのマスクをかける方法について詳しく解説します。クリッピングやマスクを使うことで、ウェブデザインにおいて視覚的なインパクトを与えることができます。以下では、さまざまな方法とその実装例を紹介します。
CSS Shapesを使ったクリッピング
CSSのclip-pathプロパティを使用して、画像を特定の形状にクリッピングする方法です。
画像を円形にクリップする
画像を円形にクリップするには、以下のコードを使用します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Mask Example</title>
<style>
.circle-mask {
width: 300px;
height: 300px;
background-image: url('path/to/your/image.jpg');
background-size: cover;
clip-path: circle(50%);
}
</style>
</head>
<body>
<div class="circle-mask"></div>
</body>
</html>このコードでは、clip-path: circle(50%);を使用して画像を円形にクリップしています。
多角形にクリップする
画像を多角形にクリップするには、以下のコードを使用します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Mask Example</title>
<style>
.polygon-mask {
width: 300px;
height: 300px;
background-image: url('path/to/your/image.jpg');
background-size: cover;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
</style>
</head>
<body>
<div class="polygon-mask"></div>
</body>
</html>clip-path: polygon(50% 0%, 0% 100%, 100% 100%);を使用して、三角形にクリップしています。
SVGを使ったマスク
SVGを使って、より複雑な形状に画像をマスクする方法です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Mask Example</title>
<style>
.svg-mask {
width: 300px;
height: 300px;
background-image: url('path/to/your/image.jpg');
background-size: cover;
-webkit-mask: url(#svg-mask);
mask: url(#svg-mask);
}
</style>
</head>
<body>
<svg width="0" height="0">
<defs>
<mask id="svg-mask" x="0" y="0" width="1" height="1">
<rect x="0" y="0" width="100%" height="100%" fill="white"/>
<circle cx="150" cy="150" r="100" fill="black"/>
</mask>
</defs>
</svg>
<div class="svg-mask"></div>
</body>
</html>このコードでは、SVG内で定義したマスクを使用して画像をクリップしています。
mask-imageプロパティを使う
mask-imageプロパティを使用して、画像をマスクとして使用する方法です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Mask Example</title>
<style>
.image-mask {
width: 300px;
height: 300px;
background-image: url('path/to/your/image.jpg');
background-size: cover;
mask-image: url('path/to/your/mask.png');
mask-size: cover;
-webkit-mask-image: url('path/to/your/mask.png'); /* Safari用 */
-webkit-mask-size: cover; /* Safari用 */
}
</style>
</head>
<body>
<div class="image-mask"></div>
</body>
</html>このコードでは、mask-imageプロパティを使って、別の画像をマスクとして使用しています。
まとめ
これらの方法を使うことで、CSSだけで画像にくり抜きのマスクをかけることができます。形状やマスクの複雑さに応じて、適切な方法を選んで使用してください。
