一定時間後にお知らせバーを自動で閉じる方法【HTML/CSS/JavaScript】

一定時間後にお知らせバーを自動で閉じる方法

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

ECサイトのキャンペーン案内、会員サイトからのお知らせ、サービスの更新情報など、ページを開いた直後に利用者へ知らせたい内容を一時的に表示する場面で利用できます。閉じるボタンを操作する必要がなく、一定時間が経過すると自動で非表示になるため、お知らせを確認したあともページの操作を続けやすい構成です。

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

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

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

デモ

自動で閉じるお知らせバー

画面上部のお知らせバーが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="auto-close-notice-bar_notice" data-auto-close-notice="">
    重要なお知らせを表示しています
  </div>

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

</body>
</html>

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

/* お知らせバー */
.auto-close-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(0); /* 初期状態では通常の位置へ表示 */
  transition:transform .3s ease; /* 0.3秒で移動する。値を大きくするとゆっくり、小さくすると速くなる */
}

/* お知らせバーを閉じた状態 */
.auto-close-notice-bar_notice.is-hidden{
  transform:translateY(-100%); /* 自身の高さ100%分だけ上へ移動して画面外へ隠す */
}

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

  /* お知らせバー */
  .auto-close-notice-bar_notice{
    padding:12px 18px; /* 上下12px・左右18px。値を大きくすると内側余白が広がる */
    font-size:14px; /* 文字サイズ。値を大きくすると文字が大きくなる */
  }

}

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

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

  // お知らせバーを画面の外側へ移動して閉じる
  autoCloseNoticeBar.classList.add('is-hidden');

},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(0);によって表示し、is-hiddenクラスが追加されるとtransform:translateY(-100%);へ切り替えて画面の外側へ隠します。

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

設置方法・使い方
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(0);
初期状態のお知らせバーの縦方向の位置です。0では本来の位置に表示されます。値を変更すると初期表示の位置が変わります。

transition:transform .3s ease;
お知らせバーが画面の外側へ移動する時間です。0.3秒で変化します。値を大きくするとゆっくり閉じ、小さくすると速く閉じます。

transform:translateY(-100%);
非表示時のお知らせバーの位置です。自身の高さ100%分だけ上方向へ移動します。移動量を変更すると、閉じたときの位置が変わります。

@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で利用できるようにしています。