ちいつる

エラー・システム状態

クッキーバナー

画面下部に現れる Cookie 同意バー。「同意する」で受け入れ、「設定」で詳細へ。いずれの操作でも下へスライドして消える。

ENGLISH

Cookie Banner

  • JS
154エラー・システム状態 の一覧 →

プレビュー

クリック

操作クリック/タップで動きます。

実装メモ

プレビューは枠内に収めるため、バナーを position:absolute(ステージ基準)で下端に固定しています。実際のページでは position:fixed; left:0; right:0; bottom:0 に変え、body 直下など高い階層へ置いてください。

コード(コピーして使えます)

<div class="stage" id="stage">
  <div class="ck-bg" aria-hidden="true">
    <span class="ck-line" style="width:70%"></span>
    <span class="ck-line" style="width:90%"></span>
    <span class="ck-line" style="width:55%"></span>
    <span class="ck-line" style="width:80%"></span>
  </div>

  <div class="ck-banner" id="ckBanner" role="region" aria-label="Cookie の使用について">
    <div class="ck-text">
      <span class="ck-ic" aria-hidden="true">🍪</span>
      <p class="ck-msg">当サイトでは利便性向上のため Cookie を使用します。詳しくは Cookie ポリシーをご確認ください。</p>
    </div>
    <div class="ck-actions">
      <button class="ck-btn ck-btn--ghost" id="ckSettings">設定</button>
      <button class="ck-btn ck-btn--primary" id="ckAgree">同意する</button>
    </div>
  </div>

  <p class="ck-done" id="ckDone" role="status" aria-live="polite"></p>
</div>

タグ

関連パーツ