通知ドット付きアイコン

解説

通知ドット付きアイコンは、ベルなどのアイコンの右上に未読件数のバッジを重ねて見せる部品です。土台の .nd を position:relative にし、バッジを position:absolute で右上に固定する、定番の重ね方で作っています。バッジは赤い丸に白い数字で、min-width と border-radius によって、1 桁でも 2 桁でもきれいな形を保ちます。CSS のみで完結し、JavaScript は使っていません。

よく使う場面

• ヘッダーの通知ベルやメッセージアイコンの未読表示
• カートに入っている商品数のバッジ
• メニュー項目に付ける「新着あり」の小さな印

件数の数字は HTML の中身を書き換えるか、JavaScript で更新します。色は .nd__b の background を、位置は top と right の値を調整すれば好みに合わせられます。件数が 0 のときはバッジ自体を非表示にすると、無駄な赤い印が残らずすっきりします。数字だけでは読み上げソフトに用途が伝わりにくいため、aria-label で「未読 3 件」のように補うと、すべての利用者に状況が正しく届きます。