通知バッジ付きアイコン

解説

アイコンボタンの右上に小さな数字バッジを重ねた、通知件数を知らせる UI です。未読の通知やカートの個数、メッセージ数などを、ベルやカートのアイコンに添えて一目で伝えられます。

仕組みはシンプルで、ボタンを position:relative にし、バッジを position:absolute で右上へ少しはみ出すように置いています。バッジは border-radius を大きくした丸みのある形で、数字が1桁でも2桁でも min-width と左右の余白で自然に膨らみます。背景の色とのあいだに細い縁取りを入れ、アイコンから浮いて見えるようにしています。CSS だけで成立し、JavaScript は不要です。

使う場面とカスタマイズ

• ヘッダーの通知ベルアイコン
• EC サイトのカート個数表示
• メッセージやお知らせの未読数

バッジの色は .ng__bd の background、位置は top と right で微調整できます。件数が多いときは「99＋」のように上限表示にすると枠が崩れません。数字だけだと読み上げ環境に意味が伝わりにくいため、「未読3件」のような説明テキストを見えない形で添えるとアクセシビリティが向上します。