立体的なポップオーバーを作る方法
立体的なポップオーバーを作る方法を紹介します。このサンプルでは、ボタンをクリックするとその下に補足情報を表示するポップオーバーを作成します。ポップオーバー本体には丸みのある角と右下方向へ広がる厚みを付け、さらに外側へ影を重ねることで、背景から手前へ浮き出したような立体感を表現します。
ポップオーバーは、ボタンや項目に関連する補足説明をその場で表示したい場合に利用できます。会員サイトの機能説明、管理画面の操作案内、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="three-dimensional-popover_wrap">
<!-- タイトル -->
<div class="three-dimensional-popover_title">
立体的なポップオーバー
</div>
<!-- 説明文 -->
<p class="three-dimensional-popover_text">
ボタンをクリックすると、丸みと厚みを付けた立体的なポップオーバーが表示されます。
</p>
<!-- ボタンとポップオーバーをまとめる領域 -->
<div class="three-dimensional-popover_area">
<!-- 表示ボタン -->
<button
class="three-dimensional-popover_button"
id="three-dimensional-popover-button"
type="button">
ポップオーバーを表示
</button>
<!-- 立体的なポップオーバー -->
<div
class="three-dimensional-popover_popup"
id="three-dimensional-popover-popup">
こちらは立体的なポップオーバーです。補足情報や説明文を表示できます。
</div>
</div>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは表示ボタンとポップオーバーの内容を作成し、CSSではポップオーバーの横幅、余白、角丸、グラデーション、厚み、影などのデザインを設定します。JavaScriptではボタンをクリックしたときに表示状態を切り替え、同じボタンをもう一度クリックするとポップオーバーを閉じる仕組みになっています。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはポップオーバー全体を構成するファイルです。タイトル、説明文、表示ボタン、ポップオーバー内の文章を変更できます。表示ボタンとポップオーバーは同じ領域内へ配置され、ボタンの下にポップオーバーが表示される構成です。
style.cssはポップオーバー全体のデザインを設定するファイルです。ポップオーバーの横幅、余白、枠線、角丸、背景、文字色のほか、右下方向へ伸びる厚みと外側の影を調整できます。また、上部の吹き出し部分もCSSの疑似要素で作成しています。
script.jsはポップオーバーの表示・非表示を切り替えるファイルです。表示ボタンをクリックするとshowクラスが切り替わり、ポップオーバーを開いた状態と閉じた状態を変更します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、3つのファイルを同じ階層へ保存してください。そのあとsample/index.htmlをブラウザで開きます。「ポップオーバーを表示」ボタンをクリックするとボタンの下に立体的なポップオーバーが表示され、もう一度クリックすると非表示になります。
カスタマイズできる内容
index.htmlでは「立体的なポップオーバー」のタイトル、説明文、ボタンの文字、ポップオーバー内の文章を変更できます。補足説明や案内文など、表示したい内容に合わせて編集できます。
style.cssでは全体の横幅や余白、ポップオーバーの横幅、背景色、枠線、角丸、文字色、内側余白などを変更できます。立体感はbox-shadowで作っているため、影の位置や大きさを変更することで厚みの強さを調整できます。また、linear-gradientの色を変更するとポップオーバー表面の明暗も調整できます。
数値調整
style.css
max-width:700px;
ポップオーバーを配置する全体領域の最大横幅です。値を大きくすると全体が横に広がり、小さくするとコンパクトになります。
padding:32px;
全体領域の内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると狭くなります。
border-radius:18px;
全体領域の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
top:calc(100% + 24px);
ボタンとポップオーバーの縦方向の間隔です。24pxを大きくするとボタンから離れ、小さくすると近づきます。
width:340px;
ポップオーバーの横幅です。値を大きくすると横に広がり、小さくすると細くなります。
padding:26px 28px;
ポップオーバー内部の余白です。26pxは上下、28pxは左右の余白を表します。値を大きくすると文章と枠線の間隔が広がります。
border-radius:22px;
ポップオーバー本体の角丸です。値を大きくするとさらに丸みのある形になり、小さくすると角が直線的になります。
box-shadow:10px 10px 0 #94a3b8;
ポップオーバー右下の厚みを作る影です。最初の10pxで横方向、次の10pxで縦方向への位置を指定しています。値を大きくすると厚みが強く見え、小さくすると薄く見えます。
box-shadow:17px 20px 28px rgba(15,23,42,.20);
ポップオーバー外側の柔らかい影です。17pxと20pxで影の位置、28pxでぼかしの大きさを指定しています。ぼかしの値を大きくすると影が広がり、小さくすると輪郭がはっきりします。
width:22px;・height:22px;
ポップオーバー上部にある吹き出し部分の大きさです。値を大きくすると吹き出し部分が大きくなり、小さくすると控えめになります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、画面幅に合わせて全体領域が縮小します。また、640px以下では全体の内側余白を24px 18px、ポップオーバーの横幅を280px、内側余白を24px 22pxへ変更しています。立体感を作る影もスマートフォン向けに小さく調整しているため、スマートフォン・タブレット・PCで利用できます。
コメント