Webサイトで「お知らせ」や「画像の拡大」などを表示する際、現在のページの上に別のウィンドウを重ねて表示する「ポップアップ（モーダルウィンドウ）」は非常によく使われます。
「JavaScriptを使わないと作れないの？」と思うかもしれませんが、実はHTMLとCSSだけで実装することも可能です。
もちろん、JavaScriptを使えばより高機能なポップアップも作れます。
この記事では、まずはJavaScriptを一切使わずにCSSだけで作る方法を解説し、その後にJavaScriptを使った標準的で高機能な方法を紹介します。
用途に合わせて使い分けてみてください。
【本記事の信頼性】
 執筆者：マヒロ |
|
💻 本記事の検証環境（2026年2月確認）
- OS：Windows 11 / macOS Sequoia
- IDE：Visual Studio / VS Code / IntelliJ IDEA
- その他：Chrome DevTools / 各言語最新安定版
※本メディアでは、上記環境にてコードの動作と情報の正確性を検証済みです。
1. JavaScript不要！CSSだけでポップアップを作る方法
CSSの「チェックボックスのチェック状態」を利用するテクニック（Checkbox Hack）を使えば、クリックで開閉するポップアップを作ることができます。
JavaScriptが苦手な方や、ブログサービスなどでスクリプトの利用が制限されている場合に便利です。
CSSポップアップの実装コード
<!-- 1. 開くボタン（ラベル） -->
<label for="popup-trigger" class="sample-btn">CSSで開く</label>
<!-- 2. 状態管理用のチェックボックス（CSSで隠す） -->
<input type="checkbox" id="popup-trigger">
<!-- 3. ポップアップの中身 -->
<div class="css-popup-overlay">
<div class="css-popup-content">
<h3>CSSポップアップ</h3>
<p>JavaScriptを使わずに表示しています。</p>
<!-- 閉じるボタン（これもラベル） -->
<label for="popup-trigger" class="close-btn">閉じる</label>
</div>
</div>
<style>
/* チェックボックス自体は画面から隠す */
#popup-trigger {
display: none;
}
/* ポップアップの背景（初期状態は非表示） */
.css-popup-overlay {
display: none; /* 隠しておく */
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
justify-content: center;
align-items: center;
}
/* ポップアップの中身 */
.css-popup-content {
background: #fff;
padding: 20px;
border-radius: 8px;
width: 80%;
max-width: 400px;
text-align: center;
}
/* 【重要】チェックボックスがONの時、直後の要素を表示する */
#popup-trigger:checked + .css-popup-overlay {
display: flex;
}
</style>
コード解説
<label for="...">: これをクリックすると、紐付いたIDのチェックボックスがON/OFFされます。「開くボタン」も「閉じるボタン」も実はチェックボックスのスイッチです。input[type="checkbox"]: ポップアップが開いているかどうかの「状態」を管理します。見た目はCSSで消しておきます。:checked + .css-popup-overlay: 「チェックが入った状態の、すぐ後ろにある要素」を指定するCSSセレクタです。チェックが入った時だけdisplay: flexにして表示させています。
2. JavaScriptを使う方法①：dialogタグで本格的なモーダルを作る【推奨】
CSSだけの方法は手軽ですが、細かい制御（ESCキーで閉じる、フォーカス管理など）が難しいという欠点があります。
現在のWeb制作の標準は、HTML5の <dialog> タグ と少量のJavaScriptを使う方法です。
簡単かつ高機能なポップアップが作れます。
dialogタグを使った実装コード
<!-- モーダルの中身 -->
<dialog id="jsDialog">
<h3>お知らせ</h3>
<p>これはdialogタグで作ったポップアップです。</p>
<button onclick="closeDialog()">閉じる</button>
</dialog>
<!-- 開くボタン -->
<button onclick="openDialog()" class="sample-btn">JSでモーダルを開く</button>
<script>
const dialog = document.getElementById('jsDialog');
function openDialog() {
// showModal()メソッドで表示（背景が暗くなり操作不能になる）
dialog.showModal();
}
function closeDialog() {
// close()メソッドで閉じる
dialog.close();
}
</script>
<style>
/* 必要に応じてCSSで見た目を調整 */
dialog {
border: none;
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.5); /* 背景色の指定 */
}
</style>
コード解説
<dialog>: ポップアップ専用のタグです。ブラウザが標準で「中央配置」や「最前面表示」の機能を持っています。showModal(): JavaScriptでこの命令を出すだけで、本格的なモーダルウィンドウが表示されます。::backdrop: モーダルの後ろにある暗い背景部分のスタイルを変更できます。
3. JavaScriptを使う方法②：簡易的な通知（alert/confirm）
デザインにこだわらず、ユーザーに単純なメッセージを伝えたり、YES/NOの確認を取りたいだけなら、ブラウザ標準のアラート機能が一番簡単です。
alert（警告）とconfirm（確認）
<button onclick="showAlert()">アラートを表示</button>
<button onclick="showConfirm()">確認画面を表示</button>
<script>
function showAlert() {
// シンプルなメッセージを表示
alert("これはシンプルな通知です！");
}
function showConfirm() {
// OK・キャンセルを選ばせる
const result = confirm("本当に実行しますか？");
if (result) {
// OKの時の処理
alert("OKが押されました");
} else {
// キャンセルの時の処理
alert("キャンセルされました");
}
}
</script>
コード解説
alert(): ユーザーがOKを押すまで操作を止めるメッセージを出します。デザイン変更はできません。confirm(): 「OK」か「キャンセル」かを選ばせ、結果をtrueかfalseで返します。削除ボタンの確認などでよく使われます。
HTML/CSSのスキルを活かして年収を上げる方法
以上、HTML/CSSでのポップアップウィンドウの作り方について解説してきました。
なお、HTMLやCSSのスキルがある場合には、「副業で稼いで年収を上げる」といったことが可能です。
エージェントサービスは、登録も利用もすべて完全無料なので、どんな求人や案件があるのか気になる方は、気軽に利用してみるとよいでしょう。
HTML/CSSのスキルを持つ人は多いものの、その分案件数も多く、副業エージェントやフリーランスエージェントを利用することで予想外の高単価案件が見つかることもあります。
エンジニアのキャリア・スキルアップ相談窓口
当ブログの読者に選ばれている、実績豊富な転職エージェントを厳選しました。
【転職】年収・環境を改善したい
| 年収アップにこだわりたい方 （平均アップ額138万円の実績） | テックゴー |
| 未経験・経験者問わず幅広く探したい方 | ユニゾンキャリア |
| 業界に精通した担当者に相談したい方 | キッカケエージェント |
| ゲーム業界への転職を志望する方 | ファミキャリ |
| エンジニア未経験からキャリアを築く方 | イーチキャリア |
