指定時間後にトーストを表示にする方法【HTML/CSS/JavaScript・サンプルコード付き】

指定時間後にトーストを表示する方法

指定時間後にトーストを表示する方法を紹介します。このサンプルでは、ページを表示してから3秒が経過すると、画面右下へ「保存しました」というトーストを自動で表示します。ボタンをクリックする必要はなく、ページが表示された時点からJavaScriptで時間を計測し、指定した時間になったら通知を表示する仕組みです。

ページを開いてすぐに通知を出すのではなく、一定時間が経過してから案内やお知らせを表示したい場合に利用できます。管理画面の案内、会員サイトのお知らせ、ECサイトの補足情報など、利用者がページを確認したあとに通知を表示したい場面へ組み込みやすい実装です。

HTMLではトーストに表示するメッセージを変更でき、CSSでは表示位置、背景色、文字色、余白、角丸、影などを調整できます。JavaScriptではトーストを表示するまでの待機時間を変更できるため、3秒以外の時間にも設定できます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用できます。

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

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

デモ

3秒後に表示するトースト

ページ表示から3秒後にトーストを自動で表示します。

お知らせがあります

ページ表示から3秒後に画面右下へ「お知らせがあります」と表示されます。「もう一度確認」を押すとトーストが非表示になり、3秒後に再び表示されます。

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

<!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="delayed-toast_wrap">

    <!-- タイトル -->
    <div class="delayed-toast_title">
      3秒後に表示するトースト
    </div>

    <!-- 説明文 -->
    <p class="delayed-toast_text">
      ページ表示から3秒後にトーストを自動で表示します。
    </p>

  </div>

  <!-- トースト本体 -->
  <div class="delayed-toast_message" data-delayed-toast>
    お知らせがあります
  </div>

  <!-- JavaScriptファイル -->
  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20pxの余白 */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
}

/* トースト表示エリア */
.delayed-toast_wrap{
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:700px; /* 最大横幅 */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 内側余白 */
  border:1px solid #e5e7eb; /* 全体を囲む枠線 */
  border-radius:18px; /* 全体の角丸 */
  background:#f8fafc; /* 表示エリアの背景色 */
  text-align:center; /* 内容を中央揃えにする */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* タイトル */
.delayed-toast_title{
  margin:0 0 12px; /* 説明文との間隔 */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
  color:#111827; /* タイトルの文字色 */
}

/* 説明文 */
.delayed-toast_text{
  margin:0; /* 外側余白を削除 */
  color:#4b5563; /* 説明文の文字色 */
  line-height:1.8; /* 説明文の行間 */
}

/* トースト本体 */
.delayed-toast_message{
  position:fixed; /* 画面を基準に固定配置する */
  right:24px; /* 画面右端から24px離す */
  bottom:24px; /* 画面下端から24px離す */
  z-index:9999; /* 他の要素より前面へ表示 */
  padding:14px 18px; /* トーストの内側余白 */
  border-radius:10px; /* トーストの角丸 */
  background:#2563eb; /* トーストの背景色 */
  color:#ffffff; /* トーストの文字色 */
  font-weight:700; /* トーストの文字を太字にする */
  box-shadow:0 12px 30px rgba(0,0,0,.18); /* トーストの影 */
  opacity:0; /* 初期状態では透明にする */
  transform:translateY(12px); /* 初期状態では下へ12px移動 */
  pointer-events:none; /* 非表示中はクリックできないようにする */
  transition:.3s; /* 0.3秒で表示状態へ切り替える */
}

/* トースト表示状態 */
.delayed-toast_message.is-show{
  opacity:1; /* トーストを表示する */
  transform:translateY(0); /* 元の位置へ戻す */
}

/* 画面幅640px以下 */
@media (max-width:640px){

  /* トースト表示エリア */
  .delayed-toast_wrap{
    padding:24px 18px; /* スマートフォンでは内側余白を小さくする */
  }

}

// トースト本体を取得
const delayedToast=document.querySelector(
  "[data-delayed-toast]"
);

// ページ表示から3秒後にトーストを表示
setTimeout(function(){

  // トーストを表示状態にする
  delayedToast.classList.add("is-show");

},
3000 // 3000は3秒。値を大きくすると表示までの時間が長くなる
);

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではトーストを表示するための内容を作成し、CSSではトーストの表示位置、背景色、文字色、余白、角丸、影、表示時の動きを設定します。JavaScriptではページが表示されてから3秒を計測し、その時間が経過するとトーストを自動で表示します。

ページを開いた直後はトーストが非表示になっており、JavaScriptのsetTimeout()によって3秒後にis-showクラスが追加されます。is-showクラスが付くと、CSSで設定したopacityとtransformが切り替わり、画面右下へトーストが表示されます。

このサンプルではボタン操作を必要とせず、ページ表示を開始した時点から自動で時間を計測します。トーストには「お知らせがあります」と表示され、指定時間後に利用者へ案内を表示したい場合に利用できます。

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

各ファイルの役割
index.htmlはトースト全体を構成するファイルです。「3秒後に表示するトースト」のタイトル、説明文、トースト内の「お知らせがあります」というメッセージを変更できます。

style.cssはトーストのデザインを設定するファイルです。表示エリアの横幅や余白、背景色、トーストの表示位置、背景色、文字色、角丸、影、表示前の位置などを変更できます。通常時はopacity:0;で透明にし、is-showクラスが付くとopacity:1;へ切り替えて表示します。

script.jsはトーストを指定時間後に表示するファイルです。ページ表示後にsetTimeout()で3秒待機し、その後is-showクラスを追加してトーストを表示します。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。

ページを開いた直後はトーストが表示されません。ページ表示から3秒が経過すると、画面右下へ「お知らせがあります」というトーストが自動で表示されます。表示後はそのまま表示状態を維持します。

カスタマイズできる内容
index.htmlではタイトル、説明文、トースト内のメッセージを変更できます。「お知らせがあります」の部分を、キャンペーン情報、補足案内、注意事項など用途に合わせた文章へ変更できます。

style.cssでは表示エリアの最大横幅、余白、背景色、トーストの表示位置、背景色、文字色、内側余白、角丸、影などを変更できます。トーストの位置はrightとbottomで調整できます。

script.jsではsetTimeout()に指定している3000を変更することで、トーストを表示するまでの待機時間を変更できます。

数値調整
script.js
3000
ページを表示してからトーストを表示するまでの待機時間です。JavaScriptでは1000ミリ秒が1秒なので、3000は3秒を表します。

1000 → 1秒後
3000 → 3秒後
5000 → 5秒後
10000 → 10秒後

例えば5秒後にトーストを表示したい場合は、script.jsの3000を5000へ変更します。値を大きくすると表示までの待機時間が長くなり、小さくすると早く表示されます。

style.css
max-width:700px;
トースト表示エリアの最大横幅です。値を大きくすると横へ広がり、小さくするとコンパクトになります。

margin:40px auto;
表示エリアの上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。

padding:32px;
表示エリアの内側余白です。値を大きくすると内容と外枠の間隔が広がります。

border-radius:18px;
表示エリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

font-size:22px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。

right:24px;
トーストと画面右端との間隔です。値を大きくすると画面右端から内側へ移動します。

bottom:24px;
トーストと画面下端との間隔です。値を大きくするとトーストが上方向へ移動します。

padding:14px 18px;
トースト本体の内側余白です。上下の14pxを大きくすると高さが増え、左右の18pxを大きくすると横へ広がります。

border-radius:10px;
トースト本体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

box-shadow:0 12px 30px rgba(0,0,0,.18);
トースト本体の影です。12pxや30pxを変更すると、影の位置や広がりを調整できます。

transform:translateY(12px);
表示前のトーストを通常位置から下へ12px移動させています。値を大きくすると表示時の移動量が大きくなります。

transition:.3s;
トーストが表示されるまでのアニメーション時間です。0.3秒で変化します。値を大きくするとゆっくり表示され、小さくすると速く表示されます。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、画面幅に合わせてトースト表示エリアが縮小されます。また、画面幅640px以下ではpadding:24px 18px;へ変更して内側余白を小さくしているため、スマートフォン・タブレット・PCで利用できます。