一定時間後にお知らせバーを表示する方法【HTML/CSS/JavaScript】

一定時間後にお知らせバーを表示する方法

一定時間後にお知らせバーを表示する方法を紹介します。このサンプルでは、ページを開いた直後はお知らせバーを非表示にしておき、3秒経過すると画面上部へ自動で表示します。HTMLでお知らせバーを作成し、CSSで画面上部への固定表示と表示・非表示の動きを設定し、JavaScriptのsetTimeoutを使用して指定した時間が経過したあとに表示を切り替えます。

ECサイトのキャンペーン案内、会員サイトからのお知らせ、サービスの重要な案内など、ページを開いてすぐではなく少し時間を空けて情報を見せたい場面で利用できます。利用者によるクリックやスクロール操作を必要とせず、指定した時間になると自動で表示されるため、ページの内容を見始めたあとにお知らせへ注意を向けてもらいたい場合にも利用しやすい方法です。

お知らせバーの文章はHTMLから変更でき、CSSでは背景色、文字色、文字サイズ、余白、表示時の動きなどを調整できます。JavaScriptでは待機時間を変更できるため、3秒後だけでなく用途に合わせた時間へ設定できます。レスポンシブにも対応しており、スマートフォン・タブレット・PCで利用できるお知らせバーのサンプルです。

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

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

デモ

一定時間後に表示するお知らせバー

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="delay-notice-bar_notice" data-delay-notice="">
    重要なお知らせを表示しています
  </div>

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

</body>
</html>

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

/* お知らせバー */
.delay-notice-bar_notice{
  position:fixed; /* 画面上部へ固定 */
  top:0; /* 画面上端へ配置 */
  left:0; /* 画面左端へ配置 */
  z-index:9999; /* ページコンテンツより前面へ表示 */
  width:100%; /* 画面の横幅いっぱいに表示 */
  padding:14px 20px; /* 上下14px・左右20px。値を大きくすると内側余白が広がる */
  background:#2563eb; /* お知らせバーの背景色 */
  color:#ffffff; /* お知らせバーの文字色 */
  text-align:center; /* 文章を中央揃えにする */
  font-size:16px; /* 文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* 文字を太字にする */
  box-sizing:border-box; /* paddingを横幅へ含める */
  transform:translateY(-100%); /* 初期状態では画面上へ移動して隠す */
  transition:transform .3s ease; /* 0.3秒で表示状態を切り替える。値を大きくするとゆっくり変化する */
}

/* お知らせバー表示時 */
.delay-notice-bar_notice.is-show{
  transform:translateY(0); /* お知らせバーを画面上部へ表示 */
}

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

  /* お知らせバー */
  .delay-notice-bar_notice{
    padding:12px 18px; /* スマートフォンでは内側余白を小さくする */
    font-size:14px; /* スマートフォンでは文字サイズを小さくする */
  }

}

// お知らせバーを取得
const delayNoticeBar=
  document.querySelector('[data-delay-notice]');

// ページを開いてから3秒後に実行
setTimeout(function(){

  // お知らせバーを表示
  delayNoticeBar.classList.add('is-show');

},3000);

// 3000は3秒。
// 値を大きくすると表示までの待機時間が長くなり、
// 小さくすると早く表示される。

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

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは画面上部へ表示するお知らせバーを作成し、CSSではお知らせバーの固定位置、背景色、文字色、文字サイズ、余白、表示・非表示時の動きを設定します。JavaScriptではページを開いてから3秒待機し、指定した時間が経過するとお知らせバーを自動で表示します。

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

各ファイルの役割
index.htmlはお知らせバーを構成するファイルです。「重要なお知らせを表示しています」の文章を変更すると、画面上部へ表示する内容を変更できます。index.htmlからstyle.cssとscript.jsを読み込む構成になっています。

style.cssはお知らせバーのデザインと表示位置を設定するファイルです。position:fixed;とtop:0;、left:0;によって画面上部へ固定し、初期状態ではtransform:translateY(-100%);で画面の外側へ隠しています。JavaScriptによってis-showクラスが追加されると、transform:translateY(0);へ切り替わって画面上部へ表示されます。

script.jsはお知らせバーを表示するタイミングを設定するファイルです。setTimeoutを使用してページを開いてから3秒待機し、時間が経過するとis-showクラスを追加してお知らせバーを表示します。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。ページを開いた直後はお知らせバーが画面の外側に隠れており、そのまま3秒待つと画面上部へ自動で表示されます。利用者によるクリックやスクロールなどの操作は必要ありません。

カスタマイズできる内容
index.htmlでは、お知らせバーへ表示する「重要なお知らせを表示しています」の文章を変更できます。style.cssでは、お知らせバーの背景色、文字色、文字サイズ、太さ、内側余白、表示位置、重なり順、表示時の移動速度を変更できます。script.jsでは、お知らせバーを表示するまでの待機時間を変更できます。

数値調整
style.css
top:0;
お知らせバーを画面上端へ配置する位置です。0は画面上端を表します。値を大きくすると、お知らせバーの表示位置が上端から下へ移動します。

left:0;
お知らせバーを画面左端へ配置する位置です。0は画面左端を表します。値を大きくすると、お知らせバーの表示位置が右へ移動します。

z-index:9999;
お知らせバーの重なり順です。値を大きくすると、ほかの要素より前面へ表示されやすくなります。サイト内のほかの固定要素と重なる場合に調整できます。

width:100%;
お知らせバーの横幅です。100%では画面の横幅いっぱいに表示されます。値を小さくすると表示幅も狭くなります。

padding:14px 20px;
お知らせバーの内側余白です。14pxは上下、20pxは左右の余白です。値を大きくすると内容とバーの端との間隔が広がり、小さくするとコンパクトになります。

font-size:16px;
お知らせバーの文字サイズです。値を大きくすると文字が大きくなり、小さくすると文字が小さくなります。

font-weight:700;
お知らせバーの文字の太さです。700は太字として表示されます。対応する範囲内で値を小さくすると細く、大きくすると太く表示されます。

transform:translateY(-100%);
初期状態のお知らせバーを自身の高さ100%分だけ上方向へ移動し、画面の外側へ隠します。移動量を変更すると、非表示時の位置が変わります。

transition:transform .3s ease;
お知らせバーが表示位置へ移動する時間です。0.3秒で変化します。値を大きくするとゆっくり移動し、小さくすると速く移動します。

transform:translateY(0);
表示時のお知らせバーの位置です。0は本来の位置を表し、画面上部へ完全に表示された状態になります。値を変更すると表示時の縦方向の位置が変わります。

@media (max-width:640px)
スマートフォン向けの表示へ切り替える基準となる画面幅です。640px以下になると、メディアクエリ内のお知らせバーの余白と文字サイズが適用されます。値を変更すると、スマートフォン向け設定へ切り替わる画面幅が変わります。

padding:12px 18px;
画面幅640px以下で使用するお知らせバーの内側余白です。12pxは上下、18pxは左右の余白です。値を大きくすると余白が広がり、小さくするとコンパクトになります。

font-size:14px;
画面幅640px以下で使用する文字サイズです。値を大きくするとスマートフォンでの文字が大きくなり、小さくすると文字が小さくなります。

script.js
3000
ページを開いてからお知らせバーを表示するまでの待機時間です。3000は3秒を表します。5000へ変更すると5秒後、1000へ変更すると1秒後に表示されます。値を大きくすると表示までの時間が長くなり、小さくすると早く表示されます。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%;によって、お知らせバーは画面幅に合わせて横幅いっぱいに表示されます。また、@media (max-width:640px)を使用し、画面幅640px以下ではpadding:12px 18px;とfont-size:14px;へ変更しています。これにより、小さい画面では余白と文字サイズを抑え、スマートフォン・タブレット・PCで利用できるようにしています。