パーツ番号 09-14-12 ・ CSSのみ

件数バブル付きグループ通知スナックバー

まとまった通知件数を大きな丸バッジで示すグループ化スナックバーの静止見本。複数の通知を1つにまとめて表示したい管理画面のフッター通知に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="toast09-14-12">
          <span class="cnt09-14-12">5</span>
          <span class="msg09-14-12">5件の新着通知があります</span>
        </div>

CSS

.d09-14-12{
          background:#f8fafc;
        }
        .d09-14-12 .toast09-14-12{
          position:absolute;
          left:50%;
          bottom:20px;
          transform:translateX(-50%);
          display:flex;
          align-items:center;
          gap:12px;
          padding:9px 18px 9px 9px;
          background:#1e1b2e;
          border-radius:999px;
          font-family:sans-serif;
          white-space:nowrap;
          box-shadow:0 10px 24px rgba(30,27,46,.4);
        }
        .d09-14-12 .cnt09-14-12{
          flex-shrink:0;
          width:30px;
          height:30px;
          border-radius:50%;
          background:#8b5cf6;
          color:#fff;
          font-size:13px;
          font-weight:800;
          display:flex;
          align-items:center;
          justify-content:center;
        }
        .d09-14-12 .msg09-14-12{
          font-size:12px;
          color:#e2e8f0;
        }

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