クッキーバナーとは

画面下部に固定表示され、Cookie の利用に同意または拒否してもらうまで残るバナー。

概要

サイトを訪れたときに画面の下部（または上部）に固定で表示され、Cookie を利用してよいかどうかをユーザーに確認するバナーです。「同意する」「拒否する」のボタンを押すと消え、以降は表示されなくなるのが一般的です。EU の GDPR や各国のプライバシー関連の法律への対応として設置されます。

別名

表記ゆれ：Cookie 同意バナー、クッキー同意ポップアップ、cookie banner

「クッキー」は Cookie の日本語表記ゆれで、どちらも同じものを指します。

AI への伝え方

「クッキーバナーを付けて」「Cookie の同意バナーを画面下に固定表示して」で通じます。同意状況をどこに保存するか（localStorage や Cookie 自体）、拒否したときの挙動もあわせて伝えると実装がぶれません。

似たパーツとの違い

「通知バー」は画面の上部や下部に帯状で表示される点は同じですが、任意のお知らせを出すための汎用的な部品です。クッキーバナーは Cookie の同意取得という目的に特化した通知バーの一種といえます。「ポップアップ」は画面の隅に小さく表示されるのに対し、クッキーバナーは画面の幅いっぱいに帯状で表示される違いがあります。

デモ

コード

HTML

<div class="cookie-banner-demo">
  <main class="cookie-banner-demo__body">
    <p>これはダミーのページ本文です。画面下部にクッキーバナーが表示されます。</p>
  </main>

  <div class="cookie-banner-demo__banner" role="region" aria-label="Cookie の利用について">
    <p class="cookie-banner-demo__text">
      このサイトでは、利用状況の分析のために Cookie を使用しています。
    </p>
    <div class="cookie-banner-demo__actions">
      <button class="cookie-banner-demo__decline" type="button" data-cookie-close>拒否する</button>
      <button class="cookie-banner-demo__accept" type="button" data-cookie-close>同意する</button>
    </div>
  </div>
</div>

CSS

.cookie-banner-demo {
  font-family: sans-serif;
}

.cookie-banner-demo__body {
  color: #333;
  line-height: 1.8;
}

.cookie-banner-demo__body p {
  margin: 0;
}

.cookie-banner-demo__banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 24px;
  background: #fff;
  border-top: 1px solid #ddd;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
}

/* hidden 属性の既定スタイル(display: none)を、上の display: flex より優先させる */
.cookie-banner-demo__banner[hidden] {
  display: none;
}

.cookie-banner-demo__text {
  margin: 0;
  font-size: 14px;
  color: #333;
}

.cookie-banner-demo__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.cookie-banner-demo__decline,
.cookie-banner-demo__accept {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}

.cookie-banner-demo__decline {
  border: 1px solid #999;
  background: #fff;
}

.cookie-banner-demo__accept {
  border: 0;
  background: #0017c1;
  color: #fff;
}

document.querySelectorAll("[data-cookie-close]").forEach((button) => {
  button.addEventListener("click", () => {
    document.querySelector(".cookie-banner-demo__banner").hidden = true;
  });
});