カウンターバッジ付きカートナビ

解説

カートアイコンの右上に件数のカウンターバッジが重なるナビ要素です。「今いくつ商品が入っているか」を小さな赤い丸で常時可視化でき、EC サイトや予約システムでの定番パーツです。

これは CSS のみで作るパーツで、JavaScript は必須ではありません。ボタンを position:relative にし、バッジを position:absolute で右上 top:-6px; right:-6px に浮かせています。バッジは min-width と padding を併用しているので、1桁なら円形、2桁以上なら横に伸びる楕円になり、数字がはみ出しません。border-radius:999px で角を完全に丸め、外側に背景色と同じ縁取りを付けて本体から少し浮いて見せています。

使う場面とカスタマイズ

• ECのカート・お気に入り・通知の件数表示
• 予約システムの「選択中の項目数」や、メッセージの未読数
• バッジ色 #f5576c やサイズ、配置位置を用途に合わせて調整

件数を動的に増減させるには、バッジの中身を JavaScript で書き換えます。0件のときはバッジ自体を非表示にすると自然です。色だけに頼らず数字を必ず添え、aria-label に「カート（3件）」のように件数を含めると読み上げ環境でも内容が伝わります。

使用例・適したシーン

• コーポレートサイトのグローバルナビ
• EC サイトのヘッダー
• SaaS の管理画面
• モバイル向け Web アプリ