ボタンの右に表示するポップオーバーを作る方法
ボタンの右に表示するポップオーバーを作る方法を紹介します。このサンプルでは、ボタンをクリックすると右側へポップオーバーが表示され、補足情報や説明文を分かりやすく案内できます。クリックしている間だけ内容を確認できるため、画面を大きく切り替えずに追加情報を表示したい場面で利用しやすい実装です。
管理画面の設定説明、お問い合わせフォームの入力補足、会員サイトの操作ガイド、ECサイトの商品説明や注意事項など、ボタンの近くへ関連情報を表示したい場面に適しています。ポップオーバーはボタンの右側へ表示され、もう一度ボタンをクリックするか、外側をクリックすると閉じるため、シンプルで直感的に操作できます。
タイトル、説明文、ボタンの文字、ポップオーバー内の文章は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="button-right-popover_wrap">
<!-- タイトル -->
<div class="button-right-popover_title">
右に表示するポップオーバー
</div>
<!-- 説明文 -->
<p class="button-right-popover_text">
ボタンをクリックすると、右側へポップオーバーが表示されます。
</p>
<!-- ボタンとポップオーバーの配置領域 -->
<div class="button-right-popover_area">
<!-- 表示ボタン -->
<button
class="button-right-popover_button"
id="button-right-popover-button"
type="button"
aria-controls="button-right-popover-box"
aria-expanded="false">
ポップオーバーを表示
</button>
<!-- ポップオーバー -->
<div
class="button-right-popover_box"
id="button-right-popover-box"
role="status"
aria-hidden="true">
このポップオーバーはボタンの右へ表示されます。補足情報や説明文を表示できます。
</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; /* ページ全体で使用するフォント */
}
/* ポップオーバー全体と子要素 */
.button-right-popover_wrap,
.button-right-popover_wrap *{
box-sizing:border-box; /* paddingとborderを要素の横幅や高さへ含める */
}
/* ポップオーバー全体 */
.button-right-popover_wrap{
width:100%; /* 画面幅に合わせて横幅を縮小する */
max-width:700px; /* 最大横幅。値を大きくすると全体が横に広がる */
margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置する */
padding:32px; /* 内側余白。値を大きくすると内容と枠線の間隔が広がる */
border:1px solid #e5e7eb; /* 全体を囲む枠線 */
border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
background:#f8fafc; /* 全体の背景色 */
text-align:center; /* 内容を中央揃えにする */
}
/* タイトル */
.button-right-popover_title{
margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
font-size:22px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
font-weight:700; /* タイトルを太字にする */
}
/* 説明文 */
.button-right-popover_text{
margin:0 0 28px; /* 下側28pxの余白。値を大きくするとボタンとの間隔が広がる */
color:#4b5563; /* 説明文の文字色 */
line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
}
/* ボタンとポップオーバーの配置領域 */
.button-right-popover_area{
position:relative; /* ポップオーバーの配置基準にする */
display:inline-block; /* ボタンの横幅に合わせて配置領域を作る */
margin-right:340px; /* 右側へポップオーバーを表示する空間を確保する */
}
/* 表示切り替えボタン */
.button-right-popover_button{
padding:14px 32px; /* 上下14px・左右32px。値を大きくするとボタンが大きくなる */
border:none; /* ブラウザ標準の枠線を削除する */
border-radius:10px; /* ボタンの角丸。値を大きくすると丸みが強くなる */
background:#2563eb; /* ボタンの背景色 */
color:#ffffff; /* ボタンの文字色 */
font-size:16px; /* ボタンの文字サイズ */
font-weight:700; /* ボタンの文字を太字にする */
cursor:pointer; /* マウスポインターを指の形にする */
transition:background-color .3s ease; /* 0.3秒で背景色を切り替える */
}
/* ボタンへマウスカーソルを重ねたとき */
.button-right-popover_button:hover{
background:#1d4ed8; /* ホバー時のボタン背景色 */
}
/* ポップオーバー */
.button-right-popover_box{
position:absolute; /* ボタンを基準に配置する */
top:50%; /* ボタンの縦方向中央を基準にする */
left:calc(100% + 18px); /* ボタンの右側から18px離して表示する */
width:300px; /* ポップオーバーの横幅。値を大きくすると横に広がる */
max-width:calc(100vw - 40px); /* 画面幅から左右20pxずつ余白を残す */
padding:18px; /* 内側余白。値を大きくすると文章と枠線の間隔が広がる */
border:1px solid #dbe5f1; /* ポップオーバーを囲む枠線 */
border-radius:14px; /* ポップオーバーの角丸。値を大きくすると丸みが強くなる */
background:#ffffff; /* ポップオーバーの背景色 */
color:#374151; /* ポップオーバー内の文字色 */
line-height:1.8; /* 本文の行間。値を大きくすると行間が広がる */
text-align:left; /* 本文を左揃えにする */
box-shadow:0 16px 32px rgba(15,23,42,.12); /* 下方向16px・ぼかし32pxの影を付ける */
opacity:0; /* 初期状態では透明にする */
visibility:hidden; /* 初期状態では非表示にする */
pointer-events:none; /* 非表示時はクリックやマウス操作を受け付けない */
transform:translate(-8px,-50%); /* 縦中央へ配置し、初期状態では8px左へ移動する */
transition:
opacity .3s ease,
visibility .3s ease,
transform .3s ease;
/*
0.3秒で透明度・表示状態・位置を切り替える。
値を大きくするとゆっくり、小さくすると速くなる。
*/
}
/* ポップオーバー左側の三角形 */
.button-right-popover_box::after{
content:""; /* 疑似要素を表示する */
position:absolute; /* ポップオーバーを基準に配置する */
top:50%; /* 縦方向中央を基準にする */
left:-10px; /* 左側へ10pxはみ出して配置する */
width:18px; /* 三角形の元になる四角形の横幅 */
height:18px; /* 三角形の元になる四角形の高さ */
background:#ffffff; /* 三角形の背景色 */
border-left:1px solid #dbe5f1; /* 三角形の左側の枠線 */
border-bottom:1px solid #dbe5f1; /* 三角形の下側の枠線 */
transform:translateY(-50%) rotate(45deg); /* 縦中央へ配置し、45度回転して三角形に見せる */
}
/* ポップオーバー表示時 */
.button-right-popover_box.is-open{
opacity:1; /* 不透明にして表示する */
visibility:visible; /* 表示状態へ変更する */
pointer-events:auto; /* 表示中はクリックやマウス操作を受け付ける */
transform:translate(0,-50%); /* 縦中央を保ったまま元の位置へ移動する */
}
/* 画面幅640px以下 */
@media(max-width:640px){
/* ポップオーバー全体 */
.button-right-popover_wrap{
padding:24px 18px; /* スマートフォンでは内側余白を小さくする */
}
/* ボタンとポップオーバーの配置領域 */
.button-right-popover_area{
width:100%; /* スマートフォンでは横幅いっぱいにする */
margin-right:0; /* 右側の表示用余白を解除する */
margin-bottom:200px; /* ボタンの下へポップオーバーを表示する空間を確保する */
}
/* 表示切り替えボタン */
.button-right-popover_button{
width:100%; /* スマートフォンでは横幅いっぱいに表示する */
}
/* ポップオーバー */
.button-right-popover_box{
top:calc(100% + 18px); /* ボタンの下から18px離して表示する */
left:50%; /* 配置領域の横方向中央を基準にする */
width:100%; /* 配置領域の横幅に合わせる */
transform:translate(-50%,-8px); /* 横中央へ配置し、初期状態では8px上へ移動する */
}
/* スマートフォン用の三角形 */
.button-right-popover_box::after{
top:-10px; /* 上側へ10pxはみ出して配置する */
left:50%; /* 横方向中央を基準にする */
border-left:1px solid #dbe5f1; /* 三角形の左側の枠線 */
border-bottom:none; /* 下側の枠線を削除する */
border-top:1px solid #dbe5f1; /* 三角形の上側の枠線 */
transform:translateX(-50%) rotate(45deg); /* 横中央へ配置し、45度回転する */
}
/* スマートフォンでの表示時 */
.button-right-popover_box.is-open{
transform:translate(-50%,0); /* 横中央を保ったまま元の位置へ移動する */
}
}
// 表示切り替えボタンを取得
const buttonRightPopoverButton =
document.getElementById("button-right-popover-button");
// ポップオーバーを取得
const buttonRightPopoverBox =
document.getElementById("button-right-popover-box");
// ポップオーバーの表示状態を切り替える処理
function toggleButtonRightPopover(){
// 現在ポップオーバーが表示されているか確認
const isOpen =
buttonRightPopoverBox.classList.contains("is-open");
// 現在の状態と反対になるように表示用クラスを切り替える
buttonRightPopoverBox.classList.toggle(
"is-open",
!isOpen
);
// ボタンの展開状態を表示状態に合わせて更新する
buttonRightPopoverButton.setAttribute(
"aria-expanded",
String(!isOpen)
);
// ポップオーバーの非表示状態を表示状態に合わせて更新する
buttonRightPopoverBox.setAttribute(
"aria-hidden",
String(isOpen)
);
}
// ポップオーバーを閉じる処理
function closeButtonRightPopover(){
// 表示用クラスを削除する
buttonRightPopoverBox.classList.remove("is-open");
// ボタンの展開状態を閉じた状態へ変更する
buttonRightPopoverButton.setAttribute(
"aria-expanded",
"false"
);
// ポップオーバーを非表示状態へ変更する
buttonRightPopoverBox.setAttribute(
"aria-hidden",
"true"
);
}
// 表示切り替えボタンをクリックしたとき
buttonRightPopoverButton.addEventListener("click",function(event){
// documentに設定したクリック処理へ伝わらないようにする
event.stopPropagation();
// ポップオーバーの表示状態を切り替える
toggleButtonRightPopover();
});
// ポップオーバー内をクリックしたとき
buttonRightPopoverBox.addEventListener("click",function(event){
// documentに設定したクリック処理へ伝わらないようにする
event.stopPropagation();
});
// ボタンとポップオーバー以外をクリックしたとき
document.addEventListener("click",function(){
// ポップオーバーを閉じる
closeButtonRightPopover();
});
コードをコピーする場合
使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合
HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。ボタンをクリックすると、ボタンの右側へポップオーバーを表示するシンプルなサンプルです。HTMLではボタンとポップオーバーの構造を作成し、CSSでは右側への配置やデザイン、JavaScriptでは表示・非表示の切り替えを行います。外側をクリックするとポップオーバーが閉じるため、実際のWebサイトでも扱いやすい動作になっています。
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;
全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
padding:32px;
全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
margin-right:340px;
ポップオーバーを右側へ表示するための余白です。値を大きくすると右側の表示スペースが広がります。
left:calc(100% + 18px);
ボタンとポップオーバーの間隔です。18pxを変更するとボタンとの距離が変わります。
width:300px;
ポップオーバーの横幅です。値を大きくすると広くなり、小さくするとコンパクトになります。
padding:18px;
ポップオーバーの内側余白です。値を大きくすると内容との間隔が広がります。
border-radius:14px;
ポップオーバーの角丸です。値を大きくすると丸みが強くなります。
transition:0.3s;
表示・非表示の切り替え時間です。0.3秒でアニメーションします。値を大きくするとゆっくり、小さくすると速く切り替わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより画面幅へ合わせて縮小表示されます。また、640px以下ではポップオーバーをボタンの下側へ表示するレイアウトへ切り替え、横幅も100%へ変更しているため、スマートフォン・タブレット・PCで利用できます。
コメント