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

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

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

上部表示のポップアップは、キャンペーン告知、メンテナンス案内、更新情報、注意メッセージなど、ページを開いたユーザーへすぐに伝えたい内容を表示する場面で便利です。ページ上部に配置することで、本文を読み始める前に自然に情報を確認できます。

このサンプルでは、タイトル、説明文、アイコンを含むシンプルなポップアップを上部に固定せず表示します。背景色、横幅、余白、角丸、文字サイズなどは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="top-popup_wrap">

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

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

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

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

        <!-- 説明文 -->
        <p class="top-popup_text">
          画面上部に表示するポップアップです。重要なお知らせや案内を自然に表示できます。
        </p>

      </div>

    </div>

  </div>

</body>
</html>

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

/* ポップアップ表示エリア */
.top-popup_wrap{
  padding:40px 20px 160px;  /* 上・左右・下の余白 */
  background:#f8fafc;  /* 背景色 */
}

/* ポップアップ本体 */
.top-popup_box{
  display:flex;  /* アイコンと本文を横並び */
  align-items:center;  /* 縦方向中央 */
  gap:16px;  /* アイコンと本文の間隔 */
  width:520px;  /* 横幅：変更するとポップアップの幅が変わる */
  max-width:100%;  /* 小さい画面でははみ出し防止 */
  margin:0 auto;  /* 中央寄せ */
  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を幅に含める */
}

/* アイコン */
.top-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;  /* 太字 */
}

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

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

/* 説明文 */
.top-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 160px; を変更すると画面上部からの表示位置や余白を調整できます。

お知らせ

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

コメント