バッジカウンター
ベルアイコンの右上に未読件数を重ねる、通知バッジのコンポーネントです。バッジは position:absolute でボタンの角に配置し、数字が変わるたびに transform:scale(1.4) で一瞬ふくらんで元に戻る、目を引くマイクロアニメーションが入っています。
解説
ベルアイコンの右上に未読件数を重ねる、通知バッジのコンポーネントです。バッジは position:absolute でボタンの角に配置し、数字が変わるたびに transform:scale(1.4) で一瞬ふくらんで元に戻る、目を引くマイクロアニメーションが入っています。地味ですが実用的なのが data-zero 属性の扱いで、件数が0になると属性を付けて display:none で非表示にし、0件のときに「0」を見せないようにしています。また100を超える数は 99+ と省略表示する配慮もあります。
使う場面
- 通知ベルやメッセージアイコンの未読件数表示
- カートに入っている商品点数のバッジ
- タブやメニュー項目に付ける「新着あり」の印
件数の更新は update(n) を呼ぶだけで、増減ボタンやサーバーからの値をそのまま渡せます。色はバッジ背景の #e53e3e（赤）を変えればブランドに合わせられます。スクリーンリーダー向けには、件数が変わったことが伝わるよう aria-live 領域に同じ数を反映させるとアクセシブルになります。
よくある質問
件数が99を超えたときの表示はどうなりますか？
このサンプルでは100以上を99+とまとめて表示します。上限を変えたい場合は、JavaScriptのupdate関数内で99と比較している箇所の数値を、たとえば999に書き換えれば表示の閾値を調整できます。
0件のときにバッジを消すには？
件数が0になるとdata-zero属性が付き、CSSのdisplay:noneで非表示になる仕組みです。逆に0でも丸を見せたい場合は、そのCSSルールを外して常時表示にすれば対応できます。