フェードイン・フェードアウトで表示するポップアップの作り方【HTML/CSS/JavaScript・サンプルコード付き】

ポップアップ
2026.07.05

フェードイン・フェードアウトで表示するポップアップの作り方

フェードイン・フェードアウトで表示するポップアップの作り方を紹介します。このサンプルでは、ページを読み込んだタイミングで画面中央へポップアップが表示され、「閉じる」ボタンをクリックすると背景とポップアップ本体がゆっくりフェードアウトしながら非表示になります。HTML・CSS・JavaScriptだけで実装しており、外部ライブラリを使用せず導入できます。

新着情報やキャンペーン案内、重要なお知らせなどをページの表示と同時にユーザーへ伝えたい場面で活用できます。ECサイトのセール告知、企業サイトのお知らせ、会員サイトのメンテナンス通知、管理画面の案内など、ページ読み込み時に目立たせたい情報を表示する用途に適しています。フェードアニメーションによって自然に表示・非表示が切り替わるため、急に表示されるポップアップよりも落ち着いた印象になります。

HTMLではタイトルや説明文、ポップアップ内の見出し、メッセージ、ボタンの文字を自由に変更できます。CSSでは背景の暗さ、ポップアップのサイズ、余白、角丸、影、フェード時間、移動量などを調整でき、デザインに合わせたカスタマイズも簡単です。JavaScriptではページ読み込み時の表示状態と閉じるボタンによる非表示処理を行っており、デモには動作確認用の「もう一度表示する」ボタンを用意していますが、このボタンは配布コードには含まれません。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

フェードで表示するポップアップ

ページ読み込み時にフェードイン表示されるポップアップを再現したデモです。

お知らせ

これはページを開いたときに表示される
フェードアニメーション付きポップアップです。

「閉じる」をクリックするとフェードアウトし、「もう一度表示する」をクリックすると再びフェードインします。

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

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

    <!-- タイトル -->
    <div class="fade-popup_title">
      フェードで表示するポップアップ
    </div>

    <!-- 説明文 -->
    <p class="fade-popup_text">
      ページ読み込み時にフェードイン表示されるポップアップです。
    </p>

    <!-- ポップアップ背景 -->
    <div class="fade-popup_overlay" id="fade-popup">

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

        <!-- ポップアップの見出し -->
        <div class="fade-popup_heading">
          お知らせ
        </div>

        <!-- ポップアップのメッセージ -->
        <p class="fade-popup_message">
          これはページを開いたときに表示される<br>
          フェードアニメーション付きポップアップです。
        </p>

        <!-- ポップアップを閉じるボタン -->
        <button class="fade-popup_close" type="button">
          閉じる
        </button>

      </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はポップアップのデザインを設定するファイルです。背景の暗さ、ポップアップの横幅、余白、角丸、影、フェードアニメーション、表示位置などを変更できます。

script.jsは「閉じる」ボタンをクリックしたときにフェードアウトしながらポップアップを非表示にする処理を記述しています。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。ページ読み込み時にポップアップが表示され、「閉じる」ボタンをクリックするとフェードアウトしながら非表示になります。

カスタマイズできる内容
index.htmlではタイトル、説明文、ポップアップ内の見出し、メッセージ、閉じるボタンの文字を変更できます。用途に合わせて、お知らせ、キャンペーン案内、メンテナンス通知、重要なお知らせなどへ変更できます。

style.cssでは背景色、背景の暗さ、ポップアップの横幅、余白、角丸、影、文字サイズ、表示位置、フェード時間、移動量などを変更できます。デザインやアニメーション速度を用途に合わせて調整できます。

数値調整
style.css
max-width:760px;
全体エリアの最大横幅です。値を大きくすると横幅が広くなり、小さくするとコンパクトになります。

min-height:620px;
デモエリアの高さです。値を変更すると表示領域の高さが変わります。

padding:40px;
全体エリアの内側余白です。値を大きくすると余白が広くなり、小さくすると狭くなります。

max-width:460px;
ポップアップ本体の最大横幅です。値を大きくすると横幅が広がり、小さくすると細く表示されます。

padding:40px 32px;
ポップアップ本体の内側余白です。値を変更すると内容との間隔が変わります。

border-radius:20px;
ポップアップの角丸です。値を大きくすると丸みが強くなります。

transition:0.5s;
フェードイン・フェードアウトの時間です。値を大きくするとゆっくり、小さくすると速くアニメーションします。

transform:translateY(20px);
表示開始位置です。値を大きくすると少し下から表示され、小さくすると移動量が少なくなります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-widthにより画面幅に応じて自動調整されます。また、640px以下ではpaddingを小さくしているため、スマートフォン・タブレット・PCで利用できます。

こちらもおすすめ

ポップアップ
ポップアップのサンプルコード一覧

この記事の他にも、コピペですぐ使える実用的なサンプルコードを掲載しています。デモを確認しながら、用途に合うコードを探せます。

その他のコードを探す
トップページ
コピペですぐ使えるサンプルコードを探す

実用的なサンプルコードをカテゴリ・新着記事・人気記事から探せます。用途に合ったコードを見つけて、そのままコピペで利用できます。

トップページで探す！

コメント