HTML-CSS 入門講座

HTML-CSS 入門講座

こんにちは!
今日も頑張ろう

画像のマスキング

説明

概要

画像(写真)のマスキング方法を説明します。

次の各要素を使用してでのマスキングを行います。

  • グラデーションを使用してマスキング
  • 画像ファイルを使用してマスキング
  • 画像ファイルとグラデーションを併用してマスキング
  • パスデータを使用してマスキング
  • 文字データを使用してマスキング

(1) グラデーションを使用してマスキング

グラデーションデータを使用してマスキングを行います。

マスキングは、次の手順で実施します。

  • マスク前の画像ファイルを用意
  • マスク用のグラデーションデータを用意
  • mask-image プロパティを使用してマスキングを実施

マスキング生成を確認するために別ウィンドウで表示してください。

ソースコード表示(画像のマスキング-01)

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像のマスク</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>

* {
	padding: 0;
	margin: 0;
	word-wrap: break-word;
	box-sizing: border-box;
}
.container {
	border: #fff 1px solid;
}
.wrapper {
	max-width: 400px;
	margin: 0 auto;
}
img {
	width: 100%;
	vertical-align: top;
}
p {
	font-size: 1.0rem;
}
.mask1 {
}
.mask2 {
	background: radial-gradient(red, transparent 100%);
}
.mask3 {
	mask-image: radial-gradient(red, transparent 100%);
	-webkit-mask-image: radial-gradient(red, transparent 100%);
}
</style>
</head>

<body>

<div class="container">
	<div class="wrapper">
		<p>【マスク前画像】</p>
		<div class="mask1">
			<img src="images/mask-sample.jpg" alt="画像のマスクサンプル">
		</div>
		<p>【マスク用グラデーション】</p>
		<div class="mask2">
			<img src="images/mask-transparent.png" alt="画像のマスクサンプル">
		</div>
		<p>【マスク結果】</p>
		<div class="mask3">
			<img src="images/mask-sample.jpg" alt="画像のマスクサンプル">
		</div>
	</div>
</div>

</body>
</html>

(2) 画像ファイルを使用してマスキング

グラデーションデータを使用してマスキングを行います。

マスキングは、次の手順で実施します。

  • マスク前の画像ファイルを用意
  • マスク用の画像ファイルを用意
  • mask-image プロパティを使用してマスキングを実施
  • mask 関連プロパティを使用してマスキング内容を調整

【注意事項】
本指定は、サーバーに配置しないと正しく動作しません。サーバーに配置して動作確認をしてください。

マスキング生成を確認するために別ウィンドウで表示してください。

ソースコード表示(画像のマスキング-02)

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像のマスク</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>

* {
	padding: 0;
	margin: 0;
	word-wrap: break-word;
	box-sizing: border-box;
}
.container {
	border: #fff 1px solid;
}
.wrapper {
	max-width: 400px;
	margin: 0 auto;
}
img {
	width: 100%;
	vertical-align: top;
}
p {
	font-size: 1.0rem;
}
.mask1 {
}
.mask2 {
}
.mask3 {
	-webkit-mask-image: url('images/mask-heart.png');
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
    -webkit-mask-position: center;
	mask-image: url('images/mask-heart.png');
	mask-repeat: no-repeat;
	mask-size: contain;
    mask-position: center;
}
</style>
</head>

<body>

<div class="container">
	<div class="wrapper">
		<p>【マスク前画像】</p>
		<div class="mask1">
			<img src="images/mask-sample.jpg" alt="画像のマスクサンプル">
		</div>
		<p>【マスク用画像ファイル】</p>
		<div class="mask2">
			<img src="images/mask-heart.png" alt="画像のマスクサンプル">
		</div>
		<p>【マスク結果】</p>
		<div class="mask3">
			<img src="images/mask-sample.jpg" alt="画像のマスクサンプル">
		</div>
	</div>
</div>

</body>
</html>

(3) 画像ファイルとグラデーションを併用してマスキング

グラデーションデータを使用してマスキングを行います。

マスキングは、次の手順で実施します。

  • マスク前の画像ファイルを用意
  • マスク用の画像ファイルを用意
  • マスク用のグラデーションデータを用意
  • mask-image プロパティを使用してマスキングを実施
  • mask 関連プロパティを使用してマスキング内容を調整

【注意事項】
本指定は、サーバーに配置しないと正しく動作しません。サーバーに配置して動作確認をしてください。

マスキング生成を確認するために別ウィンドウで表示してください。

ソースコード表示(画像のマスキング-03)

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像のマスク</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>

* {
	padding: 0;
	margin: 0;
	word-wrap: break-word;
	box-sizing: border-box;
}
.container {
	border: #fff 1px solid;
}
.wrapper {
	max-width: 400px;
	margin: 0 auto;
}
img {
	width: 100%;
	vertical-align: top;
}
p {
	font-size: 1.0rem;
}
.mask1 {
}
.mask2 {
}
.mask3 {
	background: radial-gradient(red, transparent 100%);
}
.mask4 {
	-webkit-mask-image: url('images/mask-heart.png'), radial-gradient(red, transparent 100%);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
    -webkit-mask-position: center;
	mask-image: url('images/mask-heart.png'), radial-gradient(red, transparent 100%);
	mask-repeat: no-repeat;
	mask-size: contain;
    mask-position: center;
}
</style>
</head>

<body>

<div class="container">
	<div class="wrapper">
		<p>【マスク前画像】</p>
		<div class="mask1">
			<img src="images/mask-sample.jpg" alt="画像のマスクサンプル">
		</div>
		<p>【マスク用画像ファイル】</p>
		<div class="mask2">
			<img src="images/mask-heart.png" alt="画像のマスクサンプル">
		</div>
		<p>【マスク用グラデーション】</p>
		<div class="mask3">
			<img src="images/mask-transparent.png" alt="画像のマスクサンプル">
		</div>
		<p>【マスク結果】</p>
		<div class="mask4">
			<img src="images/mask-sample.jpg" alt="画像のマスクサンプル">
		</div>
	</div>
</div>

</body>
</html>

(4) パスデータを使用してマスキング

グラデーションデータを使用してマスキングを行います。

マスキングは、次の手順で実施します。

  • マスク前の画像ファイルを用意
  • マスク用のパスデータを用意
  • clip-path プロパティを使用してマスキングを実施

マスキング生成を確認するために別ウィンドウで表示してください。

ソースコード表示(画像のマスキング-04)

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像のマスク</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>

* {
	padding: 0;
	margin: 0;
	word-wrap: break-word;
	box-sizing: border-box;
}
.container {
	border: #fff 1px solid;
}
.wrapper {
	max-width: 400px;
	margin: 0 auto;
}
img {
	width: 100%;
	vertical-align: top;
}
p {
	font-size: 1.0rem;
}
.mask1 {
}
.mask2 {
	clip-path: circle(111px at center);
}
.mask3 {
	clip-path: ellipse(50% 50% at center);
}
.mask4 {
	clip-path: inset(20px 20px 20px 20px round 15px);
}
.mask5 {
	clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
</style>
</head>

<body>

<div class="container">
	<div class="wrapper">
		<p>【マスク前画像】</p>
		<div class="mask1">
			<img src="images/mask-sample.jpg" alt="画像のマスクサンプル">
		</div>
		<p>【正円でのマスク結果】</p>
		<div class="mask2">
			<img src="images/mask-sample.jpg" alt="画像のマスクサンプル">
		</div>
		<p>【楕円でのマスク結果】</p>
		<div class="mask3">
			<img src="images/mask-sample.jpg" alt="画像のマスクサンプル">
		</div>
		<p>【長方形でのマスク結果】</p>
		<div class="mask4">
			<img src="images/mask-sample.jpg" alt="画像のマスクサンプル">
		</div>
		<p>【多角形でのマスク結果】</p>
		<div class="mask5">
			<img src="images/mask-sample.jpg" alt="画像のマスクサンプル">
		</div>
	</div>
</div>

</body>
</html>

(5) 文字データを使用してマスキング

グラデーションデータを使用してマスキングを行います。

マスキングは、次の手順で実施します。

  • マスク前の画像ファイルを用意
  • マスク用の文字データを用意
  • background-clip プロパティを使用してマスキングを実施
  • background 関連プロパティを使用してマスキング内容を調整

マスキング生成を確認するために別ウィンドウで表示してください。

ソースコード表示(画像のマスキング-05)

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像のマスク</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>

* {
	padding: 0;
	margin: 0;
	word-wrap: break-word;
	box-sizing: border-box;
}
.container {
	border: #fff 1px solid;
}
.wrapper {
	max-width: 400px;
	margin: 0 auto;
}
img {
	width: 100%;
	vertical-align: top;
}
p {
	font-size: 1.0rem;
}
.mask1 {
}
.mask2 {
	font-size: 5rem;
	font-weight: bold;
	text-align: center;
}
.mask3 {
	font-size: 5rem;
	font-weight: bold;
	text-align: center;
	background-image: url("images/mask-sample.jpg");
	background-position: center;
	background-size: cover;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}
</style>
</head>

<body>

<div class="container">
	<div class="wrapper">
		<p>【マスク前画像】</p>
		<div class="mask1">
			<img src="images/mask-sample.jpg" alt="画像のマスクサンプル">
		</div>
		<p>【マスク用文字】</p>
		<div class="mask2">
			MOMIJI
		</div>
		<p>【マスク結果】</p>
		<div class="mask3">
			MOMIJI
		</div>
	</div>
</div>

</body>
</html>

ロケット本体
PAGE
TOP
ロケット炎