フェードインするポップアップを作る方法【HTML/CSS・サンプルコード付き】

フェードインするポップアップを作る方法

フェードインするポップアップを作る方法を紹介します。このサンプルでは、HTMLとCSSだけを使い、ページを開いたときに画面中央へふわっと表示されるポップアップを作成します。

フェードイン表示にすると、ポップアップが突然表示されるよりも自然な印象になります。お知らせ、キャンペーン案内、重要メッセージなどを目立たせたい場合に使いやすい表現です。

このサンプルでは、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="fade-in-popup_wrap">

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

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

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

      <!-- 説明文 -->
      <p class="fade-in-popup_text">
        ページを開くとフェードインしながら表示されるポップアップです。<br>
        お知らせやキャンペーン情報などを自然に目立たせられます。
      </p>

    </div>

  </div>

</body>
</html>

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

/* ポップアップ表示エリア */
.fade-in-popup_wrap{
  display:flex;  /* 中央配置 */
  justify-content:center;  /* 横方向中央 */
  align-items:center;  /* 縦方向中央 */
  min-height:100vh;  /* 画面の高さ */
}

/* ポップアップ本体 */
.fade-in-popup_box{
  width:360px;  /* 横幅：変更するとポップアップの幅が変わる */
  max-width:100%;  /* 小さい画面では横幅を調整 */
  padding:28px;  /* 内側余白 */
  border:1px solid #dbe3ef;  /* 枠線 */
  border-radius:16px;  /* 角丸 */
  background:#ffffff;  /* 背景色 */
  box-shadow:0 10px 30px rgba(0,0,0,.08);  /* 影 */
  text-align:center;  /* 中央寄せ */
  box-sizing:border-box;  /* paddingを幅に含める */
  opacity:0;  /* 初期状態は透明 */

  /* フェードインアニメーション：0.8s = 0.8秒、数値を大きくするとゆっくり表示される */
  animation:fade-in-popup_show .8s ease forwards;
}

/* フェードイン */
@keyframes fade-in-popup_show{

  from{
    opacity:0;  /* 完全に透明 */
  }

  to{
    opacity:1;  /* 完全に表示 */
  }

}

/* アイコン */
.fade-in-popup_icon{
  display:flex;  /* 中央配置 */
  justify-content:center;  /* 横方向中央 */
  align-items:center;  /* 縦方向中央 */
  width:64px;  /* 横幅 */
  height:64px;  /* 高さ */
  margin:0 auto 20px;  /* 下余白 */
  border-radius:50%;  /* 円形 */
  background:#2563eb;  /* 背景色 */
  color:#ffffff;  /* 文字色 */
  font-size:28px;  /* 文字サイズ */
  font-weight:700;  /* 太字 */
}

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

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

ファイル構成と設置方法

このサンプルは、HTMLとCSSの2ファイルで構成されています。index.html にポップアップの構造を記述し、style.css でフェードインアニメーションやレイアウト、デザインを設定しています。JavaScriptを使用せず、ページを開くとポップアップがフェードインしながら表示されます。

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

sample フォルダ内へ各ファイルを配置し、sample/index.html をブラウザで開くと動作を確認できます。タイトルや説明文は index.html、背景色や文字色、横幅、余白、角丸などのデザインは style.css で変更できます。フェードインの速度は animation: fade-in-popup_show .8s ease forwards; の .8s を変更することで調整でき、数値を大きくするとゆっくり表示され、小さくすると素早く表示されます。