基本のポップアップを作る方法
基本のポップアップを作る方法を紹介します。このサンプルでは、ページを開いたときにお知らせを表示し、「閉じる」ボタンを押すとポップアップが非表示になるシンプルなUIを作成します。背景を覆うオーバーレイは使用せず、ページの内容を見せたままポップアップだけを中央に表示する構成です。
HTMLでポップアップの内容と閉じるボタンを配置し、CSSでサイズや余白、背景色、角丸、影などの見た目を整えます。ポップアップ内の見出しやメッセージは用途に合わせて変更できるため、お知らせや案内などの表示に利用できます。画面幅が狭い場合には余白や文字サイズを調整するレスポンシブ対応も行っています。
Webサイトを開いたユーザーへ最初に確認してほしい情報を表示したい場合に使いやすく、キャンペーンの案内、会員サイトからのお知らせ、ECサイトの利用案内などにも応用できます。シンプルな構成なので各項目をカスタマイズしやすく、ポップアップの基本的な作り方を確認したい場合にも利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ページ読み込み時に表示されるポップアップを再現したデモです。
これはページを開いたときに表示される
基本のポップアップです。
ページ読み込み時の表示を再現しています。「閉じる」で非表示になり、「もう一度表示する」を押すと再び表示されます。
コードをコピーして使おう！
<!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-popup_box">
<!-- 見出し -->
<div class="basic-popup_heading">
お知らせ
</div>
<!-- メッセージ -->
<p class="basic-popup_message">
これはページを開いたときに表示される<br>
基本のポップアップです。
</p>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではポップアップ内に表示する見出しとメッセージを作成し、CSSではポップアップの横幅、配置、余白、背景色、角丸、影、文字サイズなどを設定します。JavaScriptを使用しないシンプルな構成で、ページを開くとポップアップが表示された状態になります。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはポップアップの内容を構成するファイルです。「お知らせ」の見出しと、その下に表示するメッセージを変更できます。
style.cssはポップアップのデザインを設定するファイルです。ポップアップの横幅、上からの位置、内側の余白、背景色、角丸、影、文字サイズ、文字色、行間などを変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。ページを開くと、画面内に「お知らせ」とメッセージを含むポップアップが表示されます。
カスタマイズできる内容
index.htmlでは「お知らせ」の見出しと「これはページを開いたときに表示される基本のポップアップです。」のメッセージを変更できます。用途に合わせて案内や告知などの内容へ書き換えられます。
style.cssではページ全体の背景色のほか、ポップアップの最大横幅、上からの位置、内側の余白、背景色、角丸、影を変更できます。見出しとメッセージについても、それぞれ文字サイズ、文字色、余白、行間を調整できます。
数値調整
style.css
padding:40px 20px;
ページ全体の内側余白です。40pxは上下、20pxは左右の余白を表し、値を大きくすると画面端との間隔が広がります。
max-width:460px;
ポップアップの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:120px auto 0;
ポップアップの配置に使用する余白です。120pxを大きくすると表示位置が下がり、小さくすると上へ移動します。左右はautoによって中央に配置されます。
padding:40px 32px;
ポップアップの内側余白です。40pxは上下、32pxは左右の余白を表します。値を大きくすると内容とポップアップの端との間隔が広がります。
border-radius:20px;
ポップアップの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
box-shadow:0 20px 50px rgba(15,23,42,.18);
ポップアップの影です。20pxは縦方向の位置、50pxはぼかしの広がりを表します。値を変更すると影の位置や広がりを調整できます。
font-size:34px;
見出しの文字サイズです。値を大きくすると「お知らせ」の文字が大きくなり、小さくすると控えめになります。
margin:0 0 20px;
見出しの下側余白です。20pxを大きくすると見出しとメッセージの間隔が広がり、小さくすると狭くなります。
font-size:20px;
メッセージの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
line-height:2;
メッセージの行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:460pxによって、画面幅に合わせてポップアップの横幅が縮小されます。また、640px以下では上側の余白を80px、内側の余白を32px 24pxへ変更し、見出しを28px、メッセージを18pxへ調整しているため、スマートフォン・タブレット・PCで利用できます。
コメント