【超シンプル】ポップアップをHTMLとCSSだけで実装する
HTMLとCSSだけで（JavaScriptを使わずに）ポップアップを実装する方法を解説します。
JavaScriptを使わないため最低限の仕様にはなりますが、HTMLとCSSだけでかなりシンプルなコードで作れます。
コピペOKなので、お役立ていただけると幸いです。
HTMLとCSSだけで作るシンプルなポップアップ
まずはデモとコードをご覧ください。
HTMLとCSSだけで作るシンプルなポップアップのデモページ
<input type="checkbox" id="popup">
<label class="popup-open" for="popup">ポップアップを表示する</label>
<div class="popup-overlay">
<div class="popup-window">
<p class="popup-text">ポップアップの中身のテキスト</p>
<label class="popup-close" for="popup">
<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="18" y2="18" stroke="white" stroke-width="3"></line>
<line x1="0" y1="18" x2="18" y2="0" stroke="white" stroke-width="3"></line>
</svg>
</label>
</div>
</div>#popup {
display: none; /* label でコントロールするので input は非表示に */
}
.popup-open {
cursor: pointer; /* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
}
.popup-overlay {
display: none; /* input にチェックが入るまでは非表示に */
}
#popup:checked ~ .popup-overlay {
display: block;
z-index: 99999;
background-color: #00000070;
position: fixed;
width: 100%;
height: 100vh;
top: 0;
left: 0;
}
.popup-window {
width: 90vw;
max-width: 560px;
padding: 20px;
background-color: #ffffff;
border-radius: 6px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.popup-text {
margin: 0;
}
.popup-text:not(:last-of-type) {
margin-bottom: 1em
}
.popup-close {
cursor: pointer;
position: absolute;
top: -26px;
right: 0;
}実装するには上記のコードをコピペしてポップアップの中身を書くだけでOKですが、HTMLとCSSの各記述がどのような意味かを以下で解説します。
HTMLの解説
今回のポップアップは「display: none; にしておいたポップアップを、 input にチェックが入ったらblockにして表示する」という仕組みで成り立っています。
また、デザインに柔軟性を持たせるために、input は非表示にしておき、それと対応する label を配置して for属性で関連付けておくことで、「 label をクリックしたら input にチェックが入る」という状態を作っています。
<label class="open" for="popup">ポップアップを表示する</label>- ポップアップを表示するためにクリックする要素です
<input type="checkbox" id="popup">- label をクリックするとここにチェックが入りポップアップが表示されます
<div class="popup-overlay"></div>- ポップアップが表示される時に背景を少し暗くするための部分です
<div class="popup-window"></div>- ポップアップの本体部分です
<label class="popup-close" for="popup"></label>- ここをクリックすると input のチェックが外れてポップアップが消えます
<p class="popup-text">ポップアップの中身のテキスト</p>- ポップアップの中身です。自由に書き換えてください
CSSの解説
HTMLの解説部分でお伝えした「display: none; にしておいたポップアップを、 input にチェックが入ったら block にして表示する」という仕組みを実現するために #popup:checked ~ .popup-overlay というセレクタを用いています。
A ~ B というセレクタは、同じ階層にある後続の要素を指定するためのものです。
また、:checked という擬似クラス と使うことで、チェックが入っている状態を指定できます。
そのため、 #popup:checked ~ .popup-overlay と書くことで「popupというIDを持つ要素（input）にチェックが入ったら、同じ階層内の後ろにあるpopup-overlayというクラスを持つ要素（div）にこのCSSを当てる」と設定することがきます。
ポップアップをCSSでカスタマイズ
ポップアップの見た目を指定しているのはCSSのうち下記の部分なので、ここを変えていただくことで自由にデザインをカスタマイズできます。
.popup-window {
width: 90vw;
max-width: 560px;
padding: 20px;
background-color: #ffffff;
border-radius: 6px;
/* 省略 */
}最後にサービスのご紹介です。
ポップアップ作成ツールCAOを使えば、3分の簡単操作でWebサイトにポップアップを実装することができます。専門知識は一切不要です。
無料で利用できますので、ぜひお試しください。