CSSだけで全画面オーバーレイを表示させる

下の実行結果のように、CSSだけを使って、全画面のオーバーレイを表示させるコードを解説。

Overlay001

下の「クリック!」で試すことができます。

step 0

HTMLファイルのテンプレートからスタート。

step 1

※ この設定は見やすくするためだけであり、本質的な内容ではない

<body>要素のフォントの大きさ(font-size)を変更し、背景色(background)を変える。

[ 実行結果 (空の画面) ]

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>サンプル</title>
<style>
body {
		font-size:			x-large;
		background:			lightgoldenrodyellow;
}
</style>
</head>
<body>
<div id="container">

</div>

</body>
</html>

step 2

フォーカスすると色が変わるボタンを作る。 <a>要素が<div>要素の外側にある理由は、ここを参照。

<a>要素の移動先(href)には「#gray(grayのid)」を指定しているが、まだ移動先(#gray)を設定していないので移動しない。

[ 実行結果 (ボタンだけある) ]

Overlay020
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>サンプル</title>
<style>
body {
		font-size:			x-large;
		background:			lightgoldenrodyellow;
}
.abtn {
		text-decoration:	none;
}	
.btn {
		padding:			10px 20px;
		color:				white;
		background:			orangered;
		border:				1px solid orangered;
		border-radius:		10px;
		display:			inline-block;
		
}
	.btn:hover {
		color:				orangered;
		background:			white;
		box-shadow:			0px 0px 5px orangered;
	}
</style>
</head>
<body>
<div id="container">
	<a href="#gray" class="abtn">
		<div class="btn">クリック!</div>
	</a>
</div>

</body>
</html>

step 3

移動先(#gray)として、半透明(opacity)灰色(background)のオーバーレイを作る。

半透明なので、下のオレンジ色のボタンは見えているが、クリックはできない。

[ 実行結果 (ボタンを押せない) ]

Overlay030
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>サンプル</title>
<style>
body {
		font-size:			x-large;
		background:			lightgoldenrodyellow;
}
.abtn {
		text-decoration:	none;
}	
.btn {
		padding:			10px 20px;
		color:				white;
		background:			orangered;
		border:				1px solid orangered;
		border-radius:		10px;
		display:			inline-block;
		
}
	.btn:hover {
		color:				orangered;
		background:			white;
		box-shadow:			0px 0px 5px orangered;
	}
#gray {
		position:			fixed;
		top:				0;
		left:				0;
		height:				100%;
		width:				100%;
		background:			gray;
		opacity:			0.5;
		z-index:			1;
}
</style>
</head>
<body>
<div id="container">
	<a href="#gray" class="abtn">
		<div class="btn">クリック!</div>
	</a>
</div>
<div id="gray">
</div>

</body>
</html>

step 4

#grayの上に、#greenを表示させる。#greenが#grayよりも上にするために、#greenのz-indexを「2」に、#grayのz-indexを「1」に指定している。

なお、まだ「閉じる」をクリックしても閉じない。

[ 実行結果 (オーバレイを閉じれない) ]

Overlay040
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>サンプル</title>
<style>
body {
		font-size:			x-large;
		background:			lightgoldenrodyellow;
}
.abtn {
		text-decoration:	none;
}	
.btn {
		padding:			10px 20px;
		color:				white;
		background:			orangered;
		border:				1px solid orangered;
		border-radius:		10px;
		display:			inline-block;
		
}
	.btn:hover {
		color:				orangered;
		background:			white;
		box-shadow:			0px 0px 5px orangered;
	}
#gray {
		position:			fixed;
		top:				0;
		left:				0;
		height:				100%;
		width:				100%;
		background:			gray;
		opacity:			0.5;
		z-index:			1;
}
#green {
		height:				200px;
		width:				300px;
		background:			green;
		border:				1px solid darkgreen;
		position:			fixed;
		top:				50%;
		left:				50%;
		margin-top:			-100px;
		margin-left:		-150px;
		z-index:			2;
}
.close {
		padding:			15px;
		color:				white;
		background:			black;
		display:			inline-block;
}
</style>
</head>
<body>
<div id="container">
	<a href="#gray" class="abtn">
		<div class="btn">クリック!</div>
	</a>
</div>
<div id="gray">
</div>
<div id="green">
	<a href="#" class="abtn">
		<div class="close">閉じる</div>
	</a>
</div>

</body>
</html>

step 5

#grayと#greenのdisplayを「none」にすると、表示されなくなる。

「#gray:target」というのは、URLとして#grayが指定されている場合(この例で言うと、Overlay050.html#gray の場合)に適用されるスタイルである。よって、#grayに遷移すると#grayのdisplayが「block」になり、表示される。

またCSSで「セレクタ + セレクタ」の意味は、兄弟要素で前のセレクタの直後に現われるセレクタを示す。よって、この場合、「#gray:target + #green」を指定しているので、「#gray:target」が適用されると、自動的に「#green」のdisplayも「block」になり、表示されるようになる。

よって、「Overlay050.html」の場合は、オレンジのボタンが表示され、「Overlay050.html#gray」の場合は、全画面のオーバレイが表示されるようになる。

[ 実行結果 (完成!) ]

Overlay001
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>サンプル</title>
<style>
body {
		font-size:			x-large;
		background:			lightgoldenrodyellow;
}
.abtn {
		text-decoration:	none;
}	
.btn {
		padding:			10px 20px;
		color:				white;
		background:			orangered;
		border:				1px solid orangered;
		border-radius:		10px;
		display:			inline-block;
		
}
	.btn:hover {
		color:				orangered;
		background:			white;
		box-shadow:			0px 0px 5px orangered;
	}
#gray {
		position:			fixed;
		top:				0;
		left:				0;
		height:				100%;
		width:				100%;
		background:			gray;
		opacity:			0.5;
		z-index:			1;
		display:			none;
}
#green {
		height:				200px;
		width:				300px;
		background:			green;
		border:				1px solid darkgreen;
		position:			fixed;
		top:				50%;
		left:				50%;
		margin-top:			-100px;
		margin-left:		-150px;
		z-index:			2;
		display:			none;
}
.close {
		padding:			15px;
		color:				white;
		background:			black;
		display:			inline-block;
}
#gray:target, #gray:target + #green {
	display:			block;
}
</style>
</head>
<body>
<div id="container">
	<a href="#gray" class="abtn">
		<div class="btn">クリック!</div>
	</a>
</div>
<div id="gray">
</div>
<div id="green">
	<a href="#" class="abtn">
		<div class="close">閉じる</div>
	</a>
</div>

</body>
</html>

以上

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA