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

基本のポップオーバーを作る方法

基本のポップオーバーを作る方法を紹介します。このサンプルでは、ボタンをクリックすると補足情報を表示し、もう一度クリックすると閉じるシンプルなポップオーバーをHTML・CSS・JavaScriptで実装します。画面遷移を行わずに必要な情報だけを表示できるため、説明文や注意事項、補足情報などをコンパクトに表示したい場面で便利です。

管理画面のヘルプ表示、お問い合わせフォームの入力補足、ECサイトの商品説明、会員サイトの設定画面など、必要な情報だけを一時的に表示したい場面で活用できます。ポップオーバーはボタンの近くへ表示されるため、利用者は現在の画面を離れることなく内容を確認できます。クリック操作だけで開閉できるため、初心者にも分かりやすいUIとして利用できます。

タイトル、説明文、ボタンの文字、ポップオーバー内の文章は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");

});

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではポップオーバー本体と表示ボタンを配置し、CSSではレイアウトや吹き出しのデザインを設定しています。JavaScriptではボタンをクリックしたときにポップオーバーの表示・非表示を切り替える処理を実装しています。

「ポップオーバーを表示」ボタンをクリックすると、ボタンの下へポップオーバーが表示されます。もう一度ボタンをクリックすると閉じるシンプルな構成なので、ポップオーバーの基本的な作り方を学ぶサンプルとして利用できます。

表示する文章やボタンの文字はHTMLから変更でき、見た目はCSS、表示・非表示の動作はJavaScriptで管理しています。役割ごとにファイルを分けているため、初心者でも編集場所が分かりやすく、そのまま別のページへ組み込みやすい構成になっています。

sample/
├── index.html
├── style.css
└── script.js

各ファイルの役割
index.htmlはポップオーバー全体を構成するファイルです。タイトル、説明文、表示ボタンの文字、ポップオーバー内の文章を変更できます。

style.cssはポップオーバーのデザインを設定するファイルです。背景色、文字色、横幅、余白、角丸、影、吹き出しの三角形などの見た目を変更できます。

script.jsはポップオーバーの表示・非表示を管理するファイルです。表示ボタンをクリックするとポップオーバーを表示し、もう一度クリックすると閉じます。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。「ポップオーバーを表示」をクリックすると、ボタンの下へポップオーバーが表示されます。

カスタマイズできる内容
index.htmlではタイトル、説明文、表示ボタンの文字、ポップオーバー内の文章を変更できます。

style.cssではポップオーバーの横幅、背景色、文字色、余白、角丸、影、吹き出しの位置やサイズを変更できます。

script.jsでは表示・非表示の処理を変更したり、独自の動作を追加したりできます。

数値調整
style.css
max-width:700px;
コンテンツ全体の最大横幅です。値を大きくすると横幅が広くなり、小さくするとコンパクトになります。

margin:40px auto 220px;
下側の余白を確保する設定です。最後の220pxを変更すると、ポップオーバー表示時の下方向の余白が変わります。

top:calc(100% + 18px);
ボタンからポップオーバーまでの表示位置です。18pxを変更すると、ボタンとの間隔が広くなったり狭くなったりします。

width:300px;
ポップオーバーの横幅です。値を変更すると表示サイズが変わります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssではwidth:100%とmax-width:700pxによって画面幅に応じてレイアウトが調整されます。また、@media (max-width:640px)では余白を調整し、ポップオーバーの横幅を260pxへ変更してスマートフォンでも見やすく表示できるようになっています。スマートフォン・タブレット・PCでそのまま利用できます。