画面下部に表示するポップアップを作る方法【HTML/CSS・サンプルコード付き】

画面下部に表示するポップアップを作る方法

画面下部に表示するポップアップを作る方法を紹介します。このサンプルでは、HTMLとCSSだけを使い、ページ下部にお知らせ用のポップアップを表示します。画面中央をふさがずに、ユーザーへ案内や通知を表示したい場合に使いやすい構成です。

下部表示のポップアップは、キャンペーン告知、Cookie案内、補足メッセージ、更新情報などを表示する場面でよく利用されます。本文を読みながら確認できる位置に表示できるため、ページの閲覧を邪魔しにくい点が特徴です。

このサンプルでは、タイトル、説明文、アイコンを含むシンプルなポップアップを画面下部に表示します。背景色、横幅、余白、角丸、文字サイズなどはCSSで自由に変更できます。

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

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

デモ

お知らせ

画面下部に表示するポップアップです。本文をふさぎすぎずに案内を表示できます。

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

<!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="bottom-popup_wrap">

    <!-- ポップアップ本体 -->
    <div class="bottom-popup_box">

      <!-- アイコン -->
      <div class="bottom-popup_icon">
        !
      </div>

      <!-- テキストエリア -->
      <div class="bottom-popup_content">

        <!-- タイトル -->
        <h1 class="bottom-popup_title">
          お知らせ
        </h1>

        <!-- 説明文 -->
        <p class="bottom-popup_text">
          画面下部に表示するポップアップです。本文をふさぎすぎずに案内を表示できます。
        </p>

      </div>

    </div>

  </div>

</body>
</html>

/* ページ全体 */
body{
  margin:0;  /* ページ外側の余白 */
  padding:0;  /* ページ内側の余白 */
  background:#f8fafc;  /* 背景色 */
  font-family:sans-serif;  /* フォント */
}

/* ポップアップ表示エリア */
.bottom-popup_wrap{
  display:flex;  /* 配置方法 */
  justify-content:center;  /* 横方向中央 */
  align-items:flex-end;  /* 下側へ配置 */
  min-height:100vh;  /* 画面の高さに合わせる */
  padding:40px 20px;  /* 上下・左右余白 */
  box-sizing:border-box;  /* paddingを高さに含める */
}

/* ポップアップ本体 */
.bottom-popup_box{
  display:flex;  /* アイコンと本文を横並び */
  align-items:center;  /* 縦方向中央 */
  gap:16px;  /* アイコンとの間隔 */
  width:520px;  /* 横幅：変更するとポップアップの幅が変わる */
  max-width:100%;  /* 小さい画面でははみ出し防止 */
  padding:20px 24px;  /* 内側余白 */
  border:1px solid #dbe3ef;  /* 枠線 */
  border-radius:16px;  /* 角丸 */
  background:#ffffff;  /* 背景色 */
  box-shadow:0 10px 30px rgba(0,0,0,.08);  /* 影 */
  box-sizing:border-box;  /* paddingを幅に含める */
}

/* アイコン */
.bottom-popup_icon{
  display:flex;  /* 中央配置 */
  justify-content:center;  /* 横方向中央 */
  align-items:center;  /* 縦方向中央 */
  flex:0 0 52px;  /* サイズ固定 */
  width:52px;  /* 横幅 */
  height:52px;  /* 高さ */
  border-radius:50%;  /* 円形 */
  background:#2563eb;  /* 背景色 */
  color:#ffffff;  /* 文字色 */
  font-size:24px;  /* 文字サイズ */
  font-weight:700;  /* 太字 */
}

/* テキストエリア */
.bottom-popup_content{
  flex:1;  /* 残り幅を使用 */
}

/* タイトル */
.bottom-popup_title{
  margin:0 0 6px;  /* 下余白 */
  font-size:20px;  /* 文字サイズ */
  font-weight:700;  /* 太字 */
}

/* 説明文 */
.bottom-popup_text{
  margin:0;  /* 外側余白 */
  color:#4b5563;  /* 文字色 */
  line-height:1.7;  /* 行間：変更すると文章の読みやすさが変わる */
}

ファイル構成と設置方法

このサンプルは、HTMLとCSSの2ファイルで構成されています。index.html にポップアップの構造を記述し、style.css で画面下部へ表示するレイアウトやデザインを設定しています。JavaScriptを使用せず、画面下部に表示するシンプルなポップアップを作成できます。

sample/
├── index.html
└── style.css

sample フォルダ内へ各ファイルを配置し、sample/index.html をブラウザで開くと動作を確認できます。タイトルや説明文は index.html、背景色や文字色、横幅、余白、角丸などのデザインは style.css で変更できます。style.css の width: 520px; を変更するとポップアップの横幅が変わり、padding: 40px 20px; を変更すると画面下部との余白を調整できます。

お知らせ

目的のサンプルコードを探す

コメント