エラー・システム状態
クッキーバナー
画面下部に現れる Cookie 同意バー。「同意する」で受け入れ、「設定」で詳細へ。いずれの操作でも下へスライドして消える。
プレビュー
クリック
操作クリック/タップで動きます。
実装メモ
プレビューは枠内に収めるため、バナーを 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>