HTMLポップアップの完全マスター！5つのステップで実装・カスタマイズ

HTMLポップアップの実装方法を示すイメージHTML
2023.04.05
この記事は約9分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、HTMLポップアップを作成し、カスタマイズすることができるようになります。

初心者でも簡単に理解できるように、サンプルコードと応用例を交えて徹底解説します。

HTMLポップアップとは

HTMLポップアップは、ウェブページ上に表示される小さなウィンドウのことです。

通常、ユーザーが特定のアクションを起こしたときに表示され、情報を提供したり、追加の操作を促したりします。

基本構造

HTMLポップアップは、主に下記の2つの要素から構成されています。

  1. コンテンツ: ポップアップ内に表示されるテキストや画像などの情報。
  2. バックグラウンド: ポップアップの背後にある半透明のオーバーレイ。
    ユーザーがポップアップ以外の部分をクリックすると、ポップアップが閉じられます。

利点と欠点

HTMLポップアップの利点は、ユーザーの注意を引くことができる点です。

一方で、使いすぎるとユーザー体験が悪化することもあります。適切なバランスを見つけることが重要です。

ステップ1：ポップアップの作成

まず、HTMLとCSSを使ってポップアップを作成します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Popup Example</title>
  <style>
    .popup {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: white;
      padding: 20px;
      border: 1px solid black;
      z-index: 100;
    }
    .overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 50;
    }
  </style>
</head>
<body>
  <button id="openPopup">Open Popup</button>
  <div class="overlay" id="overlay"></div>
  <div class="popup" id="popup">
    <h2>Popup Content</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <button id="closePopup">Close Popup</button>
  </div>
  <script>
    const openPopupButton = document.getElementById("openPopup");
    const closePopupButton = document.getElementById("closePopup");
    const overlay = document.getElementById("overlay");
    const popup = document.getElementById("popup");

    openPopupButton.addEventListener("click", () => {
      overlay.style.display = "block";
      popup.style.display = "block";
    });

    closePopupButton.addEventListener("click", () => {
      overlay.style.display = "none";
      popup.style.display = "none";
    });

    overlay.addEventListener("click", () => {
      overlay.style.display = "none";
      popup.style.display = "none";
    });
  </script>
</body>
</html>

応用例

  • ニュースレター登録フォーム
  • クーポンやプロモーション情報の表示
  • 画像や動画の拡大表示

ステップ2：ポップアップの表示・非表示

次に、ポップアップの表示と非表示の制御を行います。

下記のサンプルコードでは、ボタンをクリックすることでポップアップを開いたり閉じたりできます。

const openPopupButton = document.getElementById("openPopup");
const closePopupButton = document.getElementById("closePopup");
const overlay = document.getElementById("overlay");
const popup = document.getElementById("popup");

openPopupButton.addEventListener("click", () => {
  overlay.style.display = "block";
  popup.style.display = "block";
});

closePopupButton.addEventListener("click", () => {
  overlay.style.display = "none";
  popup.style.display = "none";
});

overlay.addEventListener("click", () => {
  overlay.style.display = "none";
  popup.style.display = "none";
});

応用例

  • ページ読み込み時にポップアップを表示する
  • ユーザーがページの一定位置までスクロールしたときにポップアップを表示する
  • 一定時間経過後にポップアップを表示する

ステップ3：ポップアップのデザイン

ポップアップの見た目をデザインしましょう。

CSSを使ってスタイルを適用します。

.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border: 1px solid black;
  z-index: 100;
}
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 50;
}

ステップ4：ポップアップのカスタマイズ

下記の例では、ポップアップにフォームを追加し、ユーザーが入力した情報を取得する方法を示します。

<div class="popup" id="popup">
  <h2>Subscribe to Our Newsletter</h2>
  <form id="subscribeForm">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <button type="submit">Subscribe</button>
  </form>
  <button id="closePopup">Close Popup</button>
</div>
<script>
  const subscribeForm = document.getElementById("subscribeForm");

  subscribeForm.addEventListener("submit", (event) => {
    event.preventDefault();
    const email = document.getElementById("email").value;
    console.log(`Subscribed: ${email}`);
    // ここでサーバーにメールアドレスを送信する処理を追加
    overlay.style.display = "none";
    popup.style.display = "none";
  });
</script>

応用例

  • ユーザーが入力した情報を検証する
  • サーバーに情報を送信し、成功・失敗のフィードバックを表示する
  • ユーザーが入力した情報をローカルストレージに保存する

ステップ5：レスポンシブデザインの適用

ポップアップをさらにユーザーフレンドリーにするために、レスポンシブデザインを適用しましょう。

これにより、デバイスや画面サイズに関係なく、ポップアップが適切に表示されます。

@media (max-width: 768px) {
  .popup {
    width: 90%;
    padding: 15px;
  }
}

上記のCSSコードは、画面幅が768px以下の場合に適用されるように設定されています。

この例では、ポップアップの幅を90%に設定し、パディングを15pxに変更しています。

デバイスや画面サイズに合わせて、さらに細かい調整を行うことができます。

応用例

  • フォントサイズや行間を変更して、スマートフォンやタブレットでの読みやすさを向上させる
  • ポップアップの位置をデバイスや画面サイズに応じて変更する
  • 画像やアイコンのサイズをレスポンシブに調整する

まとめ

ステップ5を経て、HTMLポップアップの実装とカスタマイズが完了しました。

これで、あらゆるデバイスや画面サイズに対応したポップアップを作成することができます。

この記事を参考に、ウェブサイトにポップアップを追加し、ユーザーエンゲージメントを高めてください。