基本のポップオーバーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>基本のポップオーバー</title>

  <!-- CSSファイル -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- ポップオーバー全体 -->
  <div class="basic-popover_wrap">

    <!-- タイトル -->
    <div class="basic-popover_title">
      基本のポップオーバー
    </div>

    <!-- 説明文 -->
    <p class="basic-popover_text">
      ボタンをクリックするとポップオーバーが表示されます。
    </p>

    <!-- ボタンとポップオーバー -->
    <div class="basic-popover_area">

      <!-- 表示ボタン -->
      <button
        class="basic-popover_button"
        id="basic-popover-button"
        type="button">
        ポップオーバーを表示
      </button>

      <!-- ポップオーバー -->
      <div
        class="basic-popover_popup"
        id="basic-popover-popup">
        こちらは基本的なポップオーバーです。補足情報や説明文を表示できます。
      </div>

    </div>

  </div>

  <!-- JavaScriptファイル -->
  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20pxの余白 */
  background:#ffffff; /* 背景色 */
  color:#111827; /* 文字色 */
  font-family:sans-serif; /* フォント */
}

/* ポップオーバー全体 */
.basic-popover_wrap{
  width:100%; /* 横幅いっぱい */
  max-width:700px; /* 最大横幅 */
  margin:40px auto 220px; /* 下側に表示領域を確保 */
  padding:32px; /* 内側余白 */
  border:1px solid #e5e7eb; /* 枠線 */
  border-radius:18px; /* 角丸 */
  background:#f8fafc; /* 背景色 */
  text-align:center; /* 中央揃え */
  box-sizing:border-box; /* paddingを幅へ含める */
}

/* タイトル */
.basic-popover_title{
  margin:0 0 12px; /* 下余白 */
  font-size:22px; /* 文字サイズ */
  font-weight:700; /* 太字 */
}

/* 説明文 */
.basic-popover_text{
  margin:0 0 24px; /* 下余白 */
  color:#4b5563; /* 文字色 */
  line-height:1.8; /* 行間 */
}

/* ボタン配置エリア */
.basic-popover_area{
  position:relative; /* ポップオーバーの基準位置 */
  display:inline-block; /* ボタン幅に合わせる */
}

/* 表示ボタン */
.basic-popover_button{
  padding:14px 28px; /* 内側余白 */
  border:none; /* 枠線なし */
  border-radius:10px; /* 角丸 */
  background:#2563eb; /* 背景色 */
  color:#ffffff; /* 文字色 */
  font:inherit; /* フォント継承 */
  font-size:16px; /* 文字サイズ */
  font-weight:700; /* 太字 */
  cursor:pointer; /* 指マーク */
}

/* ポップオーバー */
.basic-popover_popup{
  display:none; /* 初期状態は非表示 */
  position:absolute; /* ボタン基準で配置 */
  top:calc(100% + 18px); /* ボタンの下18px */
  left:50%; /* 中央配置 */
  transform:translateX(-50%); /* 中央補正 */
  width:300px; /* 横幅 */
  padding:18px; /* 内側余白 */
  border:1px solid #dbe4f0; /* 枠線 */
  border-radius:12px; /* 角丸 */
  background:#ffffff; /* 背景色 */
  color:#374151; /* 文字色 */
  line-height:1.8; /* 行間 */
  text-align:left; /* 左揃え */
  box-shadow:0 12px 30px rgba(15,23,42,.12); /* 影 */
  box-sizing:border-box; /* paddingを幅へ含める */
  z-index:10; /* 手前に表示 */
}

/* 吹き出しの三角 */
.basic-popover_popup::before{
  content:""; /* 疑似要素 */
  position:absolute; /* 絶対配置 */
  top:-8px; /* 上へ配置 */
  left:50%; /* 中央 */
  width:16px; /* 横幅 */
  height:16px; /* 高さ */
  background:#ffffff; /* 背景色 */
  border-top:1px solid #dbe4f0; /* 上枠線 */
  border-left:1px solid #dbe4f0; /* 左枠線 */
  transform:translateX(-50%) rotate(45deg); /* 回転 */
}

/* 表示状態 */
.basic-popover_popup.show{
  display:block; /* 表示 */
}

/* スマートフォン対応 */
@media (max-width:640px){

  /* 全体 */
  .basic-popover_wrap{
    margin-bottom:240px; /* 下余白 */
    padding:24px 18px; /* 内側余白 */
  }

  /* ポップオーバー */
  .basic-popover_popup{
    width:260px; /* 横幅 */
  }

}

// 表示ボタンを取得
const basicPopoverButton=document.getElementById(
  "basic-popover-button"
);

// ポップオーバーを取得
const basicPopoverPopup=document.getElementById(
  "basic-popover-popup"
);

// ボタンをクリックしたとき
basicPopoverButton.addEventListener("click",function(){

  // ポップオーバーの表示・非表示を切り替える
  basicPopoverPopup.classList.toggle("show");

});