HTML/CSSだけでポップオーバーを作る方法
HTML/CSSだけでポップオーバーを作る方法を紹介します。このサンプルでは、HTMLのチェックボックスとlabel要素、CSSの:checked擬似クラスを利用し、JavaScriptを使わずにポップオーバーの表示・非表示を切り替えます。「ポップオーバーを表示」をクリックするとボタンの下へ補足情報が表示され、もう一度クリックすると閉じます。
ポップオーバーは、入力項目の説明、注意事項、商品の補足情報など、画面遷移せずに追加情報を表示したい場面で役立ちます。お問い合わせ画面、会員サイト、ECサイト、管理画面などで利用しやすく、必要な情報だけをコンパクトに表示できるため、画面をすっきり保ったまま操作できます。ただし、このサンプルはHTML/CSSのみで実装しているため、ポップオーバーは自動では閉じません。
ボタンの文字やポップオーバー内の文章はHTMLから変更できます。CSSでは表示位置、横幅、余白、背景色、枠線、角丸、影、吹き出し部分のデザインなどを自由に調整できます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用しやすく、HTML/CSSだけでシンプルなポップオーバーを作りたい場合に活用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ボタンをクリックすると補足情報を表示できます。
「ポップオーバーを表示」をクリックするとボタンの下へ表示されます。もう一度クリックすると閉じます。HTML/CSSのみで実装しているため、ポップオーバーは自動では閉じません。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン表示対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>HTML/CSSだけでポップオーバー</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ポップオーバー全体 -->
<div class="html-css-popover_wrap">
<!-- タイトル -->
<div class="html-css-popover_title">
HTML/CSSだけで動くポップオーバー
</div>
<!-- 説明文 -->
<p class="html-css-popover_text">
ボタンをクリックすると補足情報を表示できます。
</p>
<!-- ポップオーバー配置エリア -->
<div class="html-css-popover_area">
<!-- 表示状態を管理するチェックボックス -->
<input
class="html-css-popover_input"
id="html-css-popover-toggle"
type="checkbox">
<!-- ポップオーバー表示ボタン -->
<label
class="html-css-popover_button"
for="html-css-popover-toggle">
ポップオーバーを表示
</label>
<!-- ポップオーバー本体 -->
<div class="html-css-popover_popup">
こちらはHTML/CSSだけで表示できるポップオーバーです。補足情報や説明文を表示できます。
</div>
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではチェックボックスとlabel要素を利用してポップオーバーの表示状態を切り替え、CSSでは:checkedを使って表示・非表示を制御します。JavaScriptを使用せず、ボタンをクリックすると補足情報が表示され、同じボタンをもう一度クリックすると閉じる仕組みです。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはポップオーバー全体を構成するファイルです。タイトル、説明文、表示ボタンの文字、ポップオーバー内の文章を変更できます。チェックボックスとlabel要素を利用して、クリック時の表示状態を管理します。
style.cssはポップオーバーのデザインと表示動作を設定するファイルです。全体の横幅、余白、背景色、ボタン、ポップオーバーの位置、横幅、枠線、角丸、影、吹き出し、表示アニメーションなどを変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。「ポップオーバーを表示」をクリックすると、ボタンの下へ補足情報が表示されます。同じボタンをもう一度クリックすると閉じます。ポップオーバーは自動では閉じず、外側をクリックして閉じる機能も実装していません。
カスタマイズできる内容
index.htmlではページタイトル、見出し、説明文、表示ボタンの文字、ポップオーバー内の文章を変更できます。入力項目の補足、商品情報、料金説明、注意事項など、用途に合わせた内容へ編集できます。
style.cssでは全体の最大横幅、背景色、余白、角丸、ボタンのサイズや色、ポップオーバーの表示位置、横幅、文字色、枠線、影、吹き出しのサイズ、アニメーション時間を変更できます。
数値調整
style.css
max-width:700px;
ポップオーバーを配置する全体エリアの最大横幅です。値を大きくすると横へ広がり、小さくするとコンパクトになります。
margin:40px auto 150px;
全体エリアの外側余白です。40pxは上側、150pxは下側の余白を表します。下側の値を大きくすると、表示されたポップオーバーが下の要素へ重なりにくくなります。
padding:32px;
全体エリアの内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると詰まった表示になります。
border-radius:18px;
全体エリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
min-height:52px;
表示ボタンの最小高さです。値を大きくするとボタンが高くなり、小さくすると低くなります。
padding:14px 28px;
表示ボタンの内側余白です。14pxは上下、28pxは左右の余白です。値を大きくするとボタンが大きくなります。
top:calc(100% + 18px);
ボタンとポップオーバーの間隔です。18pxを大きくするとボタンから離れ、小さくすると近づきます。
width:300px;
ポップオーバーの横幅です。値を大きくすると文章を横へ広く表示でき、小さくすると細い表示になります。
padding:18px;
ポップオーバー内部の余白です。値を大きくすると文章と枠線の間隔が広がります。
border-radius:12px;
ポップオーバーの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
box-shadow:0 12px 30px rgba(15,23,42,.12);
ポップオーバーの影です。12pxを変更すると縦方向の位置が変わり、30pxを変更すると影の広がりが変わります。
translateY(8px)
非表示時の縦方向の移動量です。値を大きくすると下から大きく移動して表示され、小さくすると移動量が少なくなります。
transition:opacity .3s ease, transform .3s ease, visibility .3s ease;
ポップオーバーの表示・非表示にかかる時間です。0.3秒で切り替わります。値を大きくするとゆっくり、小さくすると速く切り替わります。
width:16px;
height:16px;
ポップオーバー上部に表示する吹き出し部分のサイズです。値を大きくすると吹き出しが大きくなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより、画面幅に合わせて全体エリアが縮小されます。また、640px以下では全体の余白を24px 18pxへ変更し、ポップオーバーの横幅を260pxへ縮小しているため、スマートフォン・タブレット・PCで利用できます。
コメント