通知バーとは

画面の上部に帯状で表示され、閉じるボタンを押すまで残り続けるお知らせ。

概要

画面の一番上に帯状で表示される、サイト全体に関わるお知らせです。「メンテナンスのお知らせ」「セール開催中」のような、すべての読者に見てほしい情報を伝えるのに使われます。トーストのように自動では消えず、読者が閉じるボタンを押すまで表示され続けるのが特徴です。

別名

表記ゆれ：通知バー、お知らせバー、告知バー、トップバー、notification bar

画面の一番上に出ることから「トップバー」と呼ばれることもあります。

AI への伝え方

「通知バーを付けて」で通じます。閉じた後に同じセッション中は再表示しないようにするか（localStorage などで記憶するか）を伝えると仕様がぶれません。

似たパーツとの違い

「トースト」は操作の結果を伝えて数秒で自動的に消えるのに対し、通知バーは自分で閉じるまで表示され続ける違いがあります。「クッキーバナー」は同意を得る専用の通知バーで、閉じるだけでなく選択肢のボタンを持つ点が異なります。

デモ

コード

HTML

<div class="notification-bar-demo">
  <div class="notification-bar-demo__bar" id="notification-bar-demo-bar" role="status">
    <p class="notification-bar-demo__text">9 月 30 日はメンテナンスのため、一部機能を停止します。</p>
    <button type="button" class="notification-bar-demo__close" aria-label="閉じる">×</button>
  </div>
  <main class="notification-bar-demo__body">
    <p>これはダミーの本文です。通知バーは画面の上部に帯状で表示され、閉じるまで残り続けます。</p>
    <p>閉じるボタンを押すと、通知バーが消えます。</p>
  </main>
</div>

CSS

.notification-bar-demo {
  font-family: sans-serif;
}

.notification-bar-demo__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: #0017c1;
  color: #fff;
}

/* hidden 属性を使う要素に display を指定するので、必ず打ち消しを併記する */
.notification-bar-demo__bar[hidden] {
  display: none;
}

.notification-bar-demo__text {
  margin: 0;
  font-size: 13px;
}

.notification-bar-demo__close {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}

.notification-bar-demo__body {
  padding: 24px;
  color: #333333;
  line-height: 1.8;
}

.notification-bar-demo__body p {
  margin: 0 0 16px;
}

const bar = document.getElementById("notification-bar-demo-bar");

document.querySelector(".notification-bar-demo__close").addEventListener("click", () => {
  bar.hidden = true;
});