サイト上部 告知バナー（閉じる X 付き）

解説

上部告知バナーは、ページ最上部に横一杯で表示してキャンペーンや障害情報をすべての訪問者に伝える UI です。このサンプルはグラデーション背景の帯に告知文を中央寄せで並べ、右端の「×」ボタンで非表示にできます。閉じる処理は JavaScript で対象要素を消す軽い実装で、アイコンは外部フォントに依存しないインライン SVG を使っています。

よく使われる場面

• EC サイトのセールや送料無料キャンペーンの告知
• SaaS の障害・メンテナンス予告
• メディアの重要なお知らせや新着情報

背景色は linear-gradient の2色を変えるだけで雰囲気を調整できます。閉じたことを記憶させたい場合は localStorage に状態を保存し、再訪時に再表示しない処理を足すと親切です。バナーが固定配置でヘッダーに重なる場合は本文側に上余白を確保し、コンテンツが隠れないようにします。閉じるボタンには aria-label を付けると操作目的が明確になります。