【超シンプル】ポップアップをHTMLとCSSだけで実装する

執筆者:牧野健人
ポップアップをHTMLとCSSだけで作る

HTMLとCSSだけで(JavaScriptを使わずに)ポップアップを実装する方法を解説します。

JavaScriptを使わないため最低限の仕様にはなりますが、HTMLとCSSだけでかなりシンプルなコードで作れます。

コピペOKなので、お役立ていただけると幸いです。

HTMLとCSSだけで作るシンプルなポップアップ

まずはデモとコードをご覧ください。

HTMLとCSSだけで作るシンプルなポップアップのデモページ

<label class="open" for="pop-up">ポップアップを表示する</label>
<input type="checkbox" id="pop-up">
<div class="overlay">
	<div class="window">
		<label class="close" for="pop-up">×</label>
		<p class="text">ポップアップの中身が入ります</p>
	</div>
</div>
.open {
	cursor:pointer; /* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
}
#pop-up {
	display: none; /* label でコントロールするので input は非表示に */
}
.overlay {
	display: none; /* input にチェックが入るまでは非表示に */
}
#pop-up:checked + .overlay {
	display: block;
	z-index: 9999;
	background-color: #00000070;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}
.window {
	width: 90vw;
	max-width: 380px;
	height: 240px;
	background-color: #ffffff;
	border-radius: 6px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.text {
	font-size: 18px;
	margin: 0;
}
.close {
	cursor:pointer;
	position: absolute;
	top: 4px;
	right: 4px;
	font-size: 20px;
}

実装するには上記のコードをコピペしてポップアップの中身を書くだけでOKですが、HTMLとCSSの各記述がどのような意味かを以下で解説します。

HTMLの解説

今回のポップアップは「display: none; にしておいたポップアップを、 input にチェックが入ったらblockにして表示する」という仕組みで成り立っています。

また、デザインに柔軟性を持たせるために、input は非表示にしておき、それと対応する label を配置して for属性で関連付けておくことで、「 label をクリックしたら input にチェックが入る」という状態を作っています。

<label class=”open” for=”pop-up”>ポップアップを表示する</label>
ポップアップを表示するためにクリックする要素です
<input type=”checkbox” id=”pop-up”>
label をクリックするとここにチェックが入りポップアップが表示されます
<div class=”overlay”></div>
ポップアップが表示される時に背景を少し暗くするための部分です
<div class=”window”></div>
ポップアップの本体部分です
<label class=”close” for=”pop-up”>×</label>
ここをクリックすると input のチェックが外れてポップアップが消えます
<p class=”text”>ポップアップの中身が入ります</p>
ポップアップの中身です。自由に書き換えてください

CSSの解説

HTMLの解説部分でお伝えした「display: none; にしておいたポップアップを、 input にチェックが入ったらblockにして表示する」という仕組みを実現するために pop-up:checked + .overlay というセレクタを用いています。

A + B というセレクタは、同じ階層にある直後の要素を指定するためのものなのです。

また、:checked という擬似クラス と使うことで、inputに対して状態の指定(「チェックが入っている」)を行うことができます。

そのため、 pop-up:checked + .overlay と書くことで、「pop-upというクラスを持つ要素(input)にチェックが入ったら、その直後にあるoverlayというクラスを持つ要素(div)にこのCSSを当てる」というふうに設定することがきます。

ポップアップをCSSでカスタマイズ

ポップアップの見た目を指定しているのはCSSのうち下記の部分なので、ここを変えていただくことで自由にデザインをカスタマイズできます。

.window {
	width: 90vw;
	max-width: 380px;
	height: 240px;
	background-color: #ffffff;
	border-radius: 6px;
	/* 省略 */
}

また、見本コードでは下記の記述でポップアップの中身が縦横どちらの方向に対しても中央になるように設定していますが、その必要が無ければ削除してください。

.window {
	/* 省略 */
	display: flex;
	justify-content: center;
	align-items: center;
	/* 省略 */
}

ポップアップの中身は自由に書き換えていただくことが可能なので、例えば下記のようにして画像を表示することもできます。

<label class="open" for="pop-up">ポップアップを表示する</label>
<input type="checkbox" id="pop-up">
<div class="overlay">
	<div class="window">
		<label class="close" for="pop-up">×</label>
		<img src="画像のURL" alt="画像の説明">
	</div>
</div>

画像を aタグ で囲めばリンクを設定することも可能です。

画像でできたポップアップのデモページ

最後にサービスのご紹介です。

ポップアップ作成ツールCAOを使えば、3分の簡単操作でWebサイトにポップアップを実装することができます。専門知識は一切不要です。

無料で利用できますので、ぜひお試しください。

CAO

この記事の執筆者

牧野健人

牧野健人

株式会社リラクス 代表取締役。マーケティング領域におけるクリエイティブ改善を専門としながら、アクセス解析やSEOの知見、ならびにデザイン・コーディングのスキルを活かしクライアントの成果向上のための取り組みに尽力しています。