パーツ番号 09-04-11 ・ CSSのみ

通知カウントバッジ(アイコン重ね)

ベル・カートなどのアイコンの右上に丸い数字バッジを重ねた静止見本です。WordPressのヘッダーで未読通知数やカート内商品数を表示する際に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-04-11-wrap">
          <span class="d09-04-11-icon">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="#334155" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 01-3.4 0"/></svg>
            <span class="d09-04-11-badge">3</span>
          </span>
          <span class="d09-04-11-icon">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="#334155" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="18" cy="21" r="1"/><path d="M2 3h2l2.6 12.4a2 2 0 002 1.6h8.8a2 2 0 002-1.6L21 7H5.2"/></svg>
            <span class="d09-04-11-badge d09-04-11-badge2">12</span>
          </span>
        </div>

CSS

.d09-04-11-wrap{display:flex;gap:34px;justify-content:center;align-items:center}
        .d09-04-11-icon{position:relative;display:inline-flex;width:46px;height:46px;border-radius:12px;background:#f1f5f9;align-items:center;justify-content:center}
        .d09-04-11-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:#ef4444;color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #fff}
        .d09-04-11-badge2{background:#2563eb}

クラス名 .d09-04-11 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。