画像付きポップオーバーを表示する方法【HTML/CSS/JavaScript・サンプルコード付き】

画像付きポップオーバーを表示する方法

画像付きポップオーバーを表示する方法を紹介します。このサンプルでは、ボタンをクリックするとボタンの下にポップオーバーが開き、画像と説明文をまとめて表示します。通常のテキストだけのポップオーバーよりも視覚的に内容を伝えやすく、画像を見せながら補足情報を表示したい場面に利用できます。

商品画像と簡単な説明を表示するECサイト、施設や場所の写真を紹介する案内ページ、記事内で画像付きの補足情報を表示するWebサイトなどに活用できます。ポップオーバーはボタンのすぐ下に表示され、上部の三角形によってどのボタンに対応した情報なのかも分かりやすくしています。もう一度ボタンをクリックするとポップオーバーを閉じられます。

HTMLでは表示する画像や説明文を変更でき、CSSではポップオーバーの横幅、余白、背景色、枠線、角丸、影などを調整できます。JavaScriptではボタンのクリックに合わせて表示・非表示を切り替えるシンプルな構成です。画面幅が狭い場合はポップオーバーの横幅を小さくするため、スマートフォン・タブレット・PCで利用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

ボタンをクリックすると、ボタンの下に画像付きポップオーバーが表示されます。もう一度クリックすると閉じます。

コードをコピーして使おう！

<!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="image-popover_wrap">

    <!-- タイトル -->
    <div class="image-popover_title">
      画像付きポップオーバー
    </div>

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

    <!-- ポップオーバー表示エリア -->
    <div class="image-popover_area">

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

      <!-- 画像付きポップオーバー -->
      <div
        class="image-popover_popup"
        id="image-popover-popup">

        <!-- ポップオーバー画像 -->
        <img
          class="image-popover_image"
          src="images/image1.png"
          alt="ポップオーバーに表示する画像">

        <!-- ポップオーバー説明文 -->
        <p class="image-popover_message">
          画像と説明文を組み合わせて補足情報を表示できます。
        </p>

      </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; /* ページ全体で使用するフォント */
}

/* 画像付きポップオーバー全体 */
.image-popover_wrap{
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:700px; /* 最大横幅。値を大きくすると全体が横に広がる */
  margin:40px auto 260px; /* 上40px・左右中央・下260px。下側の余白を大きくするとポップオーバー表示領域が広がる */
  padding:32px; /* 内側余白。値を大きくすると内容と外枠の間隔が広がる */
  border:1px solid #e5e7eb; /* 全体を囲む枠線 */
  border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* 全体の背景色 */
  text-align:center; /* 内容を中央揃えにする */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* タイトル */
.image-popover_title{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
  font-size:22px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルを太字にする */
}

/* 説明文 */
.image-popover_text{
  margin:0 0 24px; /* 下側24pxの余白。値を大きくするとボタンとの間隔が広がる */
  color:#4b5563; /* 説明文の文字色 */
  line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
}

/* ポップオーバー表示エリア */
.image-popover_area{
  position:relative; /* ポップオーバーの配置基準にする */
  display:inline-block; /* 内容に合わせた横幅で表示する */
}

/* 表示ボタン */
.image-popover_button{
  padding:14px 28px; /* 上下14px・左右28px。値を大きくするとボタンが大きくなる */
  border:none; /* ボタン標準の枠線を削除 */
  border-radius:10px; /* ボタンの角丸。値を大きくすると丸みが強くなる */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font:inherit; /* ページ全体と同じフォントを使用 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタンの文字を太字にする */
  cursor:pointer; /* マウスポインターを指型にする */
}

/* 画像付きポップオーバー */
.image-popover_popup{
  display:none; /* 通常時は非表示にする */
  position:absolute; /* ボタンを基準に配置する */
  top:calc(100% + 18px); /* ボタンの下18pxの位置。値を大きくするとボタンから離れる */
  left:50%; /* ボタンの中央を基準に配置する */
  z-index:10; /* 他の要素より前面に表示する */
  width:320px; /* ポップオーバーの横幅。値を大きくすると横に広がる */
  padding:18px; /* 内側余白。値を大きくすると画像や文章と外枠の間隔が広がる */
  border:1px solid #dbe4f0; /* ポップオーバーの枠線 */
  border-radius:12px; /* ポップオーバーの角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* ポップオーバーの背景色 */
  box-shadow:0 12px 30px rgba(15,23,42,.12); /* ポップオーバーの影 */
  color:#374151; /* 基本文字色 */
  line-height:1.8; /* 基本の行間 */
  text-align:left; /* 内容を左揃えにする */
  transform:translateX(-50%); /* 自身の横幅の半分だけ左へ移動して中央揃えにする */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* ポップオーバー上部の三角形 */
.image-popover_popup::before{
  content:""; /* 疑似要素を表示 */
  position:absolute; /* ポップオーバーを基準に配置する */
  top:-8px; /* 上へ8px移動。値を変更すると三角形の位置が変わる */
  left:50%; /* 横方向中央へ配置する */
  width:16px; /* 三角形の元になる四角形の横幅 */
  height:16px; /* 三角形の元になる四角形の高さ */
  border-top:1px solid #dbe4f0; /* 上側の枠線 */
  border-left:1px solid #dbe4f0; /* 左側の枠線 */
  background:#ffffff; /* ポップオーバーと同じ背景色 */
  transform:translateX(-50%) rotate(45deg); /* 45度回転して三角形のように見せる */
}

/* ポップオーバー画像 */
.image-popover_image{
  display:block; /* 画像下の不要な隙間を防ぐ */
  width:100%; /* ポップオーバーの横幅いっぱいに表示 */
  aspect-ratio:16 / 9; /* 横16・縦9の比率で表示 */
  margin:0 0 14px; /* 下側14pxの余白。値を大きくすると説明文との間隔が広がる */
  border-radius:8px; /* 画像の角丸。値を大きくすると丸みが強くなる */
  object-fit:cover; /* 表示領域を埋めるように画像を切り抜く */
}

/* ポップオーバー説明文 */
.image-popover_message{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  color:#374151; /* 説明文の文字色 */
  line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
}

/* ポップオーバー表示中 */
.image-popover_popup.show{
  display:block; /* ポップオーバーを表示する */
}

/* 画面幅640px以下 */
@media(max-width:640px){

  /* ページ全体 */
  body{
    padding:24px 12px; /* スマートフォンでは画面端の余白を小さくする */
  }

  /* 画像付きポップオーバー全体 */
  .image-popover_wrap{
    margin:24px auto 260px; /* スマートフォンでは上側余白を24pxへ縮小 */
    padding:24px 18px; /* 内側余白を小さくする */
  }

  /* 画像付きポップオーバー */
  .image-popover_popup{
    width:280px; /* スマートフォンでは横幅を280pxへ縮小 */
  }

}

// ポップオーバーを表示するボタンを取得
const imagePopoverButton=
  document.getElementById("image-popover-button");

// 画像付きポップオーバーを取得
const imagePopoverPopup=
  document.getElementById("image-popover-popup");

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

  // showクラスを追加・削除して表示状態を切り替える
  imagePopoverPopup.classList.toggle("show");

});

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルと、ポップオーバー内に表示する1枚の画像で構成されています。HTMLでは表示ボタン、画像付きポップオーバー、説明文を配置します。CSSではポップオーバーの位置、横幅、画像サイズ、余白、角丸、影、上部の三角形などを設定し、JavaScriptではボタンをクリックするたびにポップオーバーの表示・非表示を切り替えます。

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

各ファイルの役割
index.htmlは画像付きポップオーバー全体を構成するファイルです。「画像付きポップオーバー」のタイトル、説明文、「ポップオーバーを表示」のボタン文字、ポップオーバー内の画像、説明文を変更できます。画像はimages/image1.pngを読み込む構成です。

style.cssは画像付きポップオーバーのデザインを設定するファイルです。全体の横幅や余白、ボタンの大きさ、ポップオーバーの横幅、表示位置、背景色、枠線、角丸、影、画像サイズ、画像と説明文の間隔などを変更できます。

script.jsはポップオーバーの表示・非表示を切り替えるファイルです。「ポップオーバーを表示」ボタンをクリックするとshowクラスを追加し、もう一度クリックすると削除します。

imagesフォルダにはポップオーバーへ表示する画像を配置します。このサンプルではimage1.pngを使用します。画像ファイルは利用者側で用意してください。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、その中にimagesフォルダを作成します。ポップオーバーへ表示する画像をimage1.pngのファイル名でimagesフォルダへ配置してください。別のファイル名を使用する場合は、index.htmlのsrc="images/image1.png"も実際のファイル名へ変更します。

配置が完了したらsample/index.htmlをブラウザで開きます。「ポップオーバーを表示」ボタンをクリックすると、ボタンの下へ画像と説明文を含むポップオーバーが表示されます。もう一度同じボタンをクリックすると非表示になります。

カスタマイズできる内容
index.htmlでは「画像付きポップオーバー」のタイトル、「ボタンをクリックすると画像付きのポップオーバーが表示されます。」の説明文、「ポップオーバーを表示」のボタン文字、画像のsrcとalt、ポップオーバー内の説明文を変更できます。

画像を変更する場合はimagesフォルダへ使用する画像を配置し、src="images/image1.png"を書き換えます。用途に合わせて商品画像、施設画像、作品画像などへ変更できます。

style.cssでは全体の最大横幅、下側余白、ボタンのサイズ、ポップオーバーの横幅、ボタンからの距離、内側余白、角丸、影、画像の縦横比、画像と説明文の間隔などを変更できます。

数値調整
style.css
max-width:700px;
画像付きポップオーバー全体の最大横幅です。値を大きくすると全体が横へ広がり、小さくするとコンパクトになります。

margin:40px auto 260px;
全体の外側余白です。下側の260pxは、下へ表示されるポップオーバーのための表示スペースです。値を大きくすると下側の余白が広がります。

padding:32px;
全体の内側余白です。値を大きくすると内容と外枠の間隔が広がります。

border-radius:18px;
全体の角丸です。値を大きくすると丸みが強くなります。

font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。

padding:14px 28px;
表示ボタンの内側余白です。上下14pxを大きくするとボタンが高くなり、左右28pxを大きくすると横へ広がります。

border-radius:10px;
表示ボタンの角丸です。値を大きくすると丸みが強くなります。

top:calc(100% + 18px);
ボタンとポップオーバーの縦方向の間隔です。18pxを大きくするとボタンから下へ離れ、小さくすると近づきます。

width:320px;
ポップオーバーの横幅です。値を大きくすると横へ広がり、小さくするとコンパクトになります。

padding:18px;
ポップオーバーの内側余白です。値を大きくすると画像や説明文と外枠の間隔が広がります。

border-radius:12px;
ポップオーバーの角丸です。値を大きくすると丸みが強くなります。

box-shadow:0 12px 30px rgba(15,23,42,.12);
ポップオーバーの影です。12pxや30pxを変更すると影の位置や広がりを調整できます。

top:-8px;
ポップオーバー上部に表示する三角形の位置です。値を変更すると三角形の上下位置が変わります。

width:16px;・height:16px;
三角形の元になる四角形の大きさです。値を大きくすると三角形も大きくなります。

aspect-ratio:16 / 9;
ポップオーバー内の画像を横16・縦9の比率で表示します。

margin:0 0 14px;
画像の下側余白です。14pxを大きくすると画像と説明文の間隔が広がります。

border-radius:8px;
画像の角丸です。値を大きくすると画像の丸みが強くなります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでは全体へwidth:100%とmax-width:700pxを指定しているため、画面幅に合わせて縮小できます。

画面幅640px以下では全体の余白を24px 18pxへ縮小し、ポップオーバーの横幅を280pxへ変更します。そのため、スマートフォン・タブレット・PCで利用できます。