はじめに
「ボタンをクリックしたらモーダル（ポップアップ）が開くようにしたい！」
そんなWeb制作の場面、ありませんか？
モーダルは「お問い合わせの確認」「注意事項の表示」「画像や動画のポップアップ」など、さまざまな場面で使われる便利なUIパーツです。
しかし、初心者の方にとっては少しハードルが高く感じられるかもしれません。
実は私も、ある案件で初めてモーダルを実装する機会がありました。
その際に「どう配置すればいい？」「どのタイミングで表示されるの？」と悩みながらも、試行錯誤して形にすることができました。
この記事は、その学びをアウトプットとしてまとめたものです。
今回は、HTML・CSS・JavaScriptだけで作れるシンプルなモーダルの実装方法を、初心者の方でもわかりやすいようにステップ形式でやさしく解説していきます。
完成イメージとコード（HTML / CSS / JS）
まずは、今回作るモーダルの完成イメージを見てみましょう！
以下のデモでは、「モーダルを開く」のリンクをクリックすると、画面中央にモーダルが表示され、画面外をクリックするか×ボタンを押すと閉じる仕様になっています。
👇クリックで動作を確認してみてください！
See the Pen モーダル by yuya o (@yuya-o) on CodePen.
モーダルでできること
このモーダルで実現できるのは以下の3点です：
- リンクをクリックすると、モーダルが表示される
- モーダルの外側をクリックすると閉じる
- モーダル内の「×ボタン」で閉じる
とても基本的な動作ですが、実務でもよく使われるパターンです。
次のセクションでは、このモーダルをHTML・CSS・JavaScriptを使ってどのように作るのか、手順を追って解説していきます。
手順：モーダルをクリックで表示させる方法
ここからは、実際に「モーダル」を表示させる方法を、初心者の方でもわかりやすいように 3ステップ で解説します。
順番にコードを追加していくだけで、完成します！
まずは、ページに表示される「リンク」と「モーダルの本体」をHTMLで記述します。
See the Pen モーダル step1 by yuya o (@yuya-o) on CodePen.
<a>タグをクリックするとモーダルが開きます。.modalは背景部分で、.modal-contentが中のウィンドウです。<span class="modal-close">をクリックするとモーダルが閉じられます。
次に、モーダルを非表示にしたり、画面中央に表示するためのスタイルをCSSで記述します。
cssコピーする編集する
See the Pen モーダル step2 by yuya o (@yuya-o) on CodePen.
.modalは初期状態でdisplay: none;にすることで非表示にしています。.modal-contentのmarginやpaddingで中央に配置。.modal-closeは右上に表示される「×」ボタンです。
モーダル配置のポイント【実体験より】
実際に案件で実装した際、
- モーダルを開く
<a>タグは、お問い合わせフォームとフッターの２箇所に配置 - モーダルの中身（HTML）は、
<body>タグの直下に配置
すると、意図したとおり正しくモーダルが表示されました。
モーダルの中身をフッターの中など深い場所に入れると、スタイルや重なり順（z-index）などの影響でうまく表示されないことがあるようので注意してください。
さいごに
今回は、クリックで開くモーダルの実装方法を、HTML・CSS・JavaScriptの3ステップで解説しました。
モーダルは一見むずかしそうに見えるかもしれませんが、実際に手を動かしてみると「意外とシンプル！」と感じた方も多いのではないでしょうか？
こうしたモーダルは、以下のような場面でもよく使われます。
- 「プライバシーポリシー」や「利用規約」の表示
- お問い合わせ前の注意事項の確認
- 写真・画像の拡大表示（ライトボックス風）
- お知らせやキャンペーン情報のポップアップ
少しコードに慣れてきたら、ボタンのデザインを変えたり、アニメーションで開閉させたりといったカスタマイズにもチャレンジしてみてくださいね。
最後まで読んでいただきありがとうございました！
この記事があなたの学びの一歩になればうれしいです。
もしわからないところがあれば、気軽にコメントやメッセージでご相談ください
