【超シンプル】ポップアップを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サイトにポップアップを実装することができます。専門知識は一切不要です。
無料で利用できますので、ぜひお試しください。