上部告知バー（×で閉じる）

このパーツの使いどころと実装ポイント

このパーツは、画面上部に告知やキャンペーンを表示し、× ボタンで閉じられる「告知バー」です。バーは linear-gradient の帯にラベル（LIMITED）、本文、閉じるボタンを display:flex で横並びにしています。閉じる動作は .is-hidden クラスを付けると transform:translateY(-100%) でバーが上にスライドして消える設計で、CSS のトランジションがアニメーションを担います。クラスの付け外しには小さな JavaScript が必要です。

向いている場面

期間限定の案内を全ページ共通で目立たせたい場面に向きます。EC のセール告知、SaaS のキャンペーンや料金改定のお知らせ、イベントサイトの申込締切リマインドなどです。本文内にリンク（詳細を見る）を置けるので、そのまま誘導につなげられます。

カスタマイズの勘所

• ラベル・本文・期限・リンク先を書き換えるだけで内容を更新できます。先頭の SVG はキラキラ装飾のアイコンです。
• 一度閉じたら再表示しないようにしたい場合は、閉じた状態を localStorage に保存する処理を加えます。

実装上の注意として、閉じるボタンには aria-label="閉じる" が付いており、読み上げ環境でも役割が伝わります。× の文字だけに頼らずボタン要素を使っている点が良い実装です。バーの高さぶん本文が隠れないよう、本文側の余白も調整してください。スマートフォンでは本文が長いと折り返すので、文言は簡潔に保つと崩れません。

このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。