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

先頭固定「新着」通知ピルの見た目

リスト上部中央に浮かせた丸いピル型バッジで新着件数を知らせる静止見本です。無限スクロール中に届いた新着をクリックで反映させるUI設計の参考画像になります。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-11-11-frame">
          <span class="d11-11-11-pill">3件の新着<i>↑</i></span>
          <div class="d11-11-11-list">
            <div class="d11-11-11-row"><span class="d11-11-11-av"></span><div class="d11-11-11-lines"><span></span><span class="short"></span></div></div>
            <div class="d11-11-11-row"><span class="d11-11-11-av"></span><div class="d11-11-11-lines"><span></span><span class="short"></span></div></div>
          </div>
        </div>

CSS

.d11-11-11-frame{ width:270px; background:#fff; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; position:relative; padding-top:8px; }
        .d11-11-11-pill{ display:flex; align-items:center; gap:6px; margin:0 auto 10px; width:fit-content; background:#4f46e5; color:#fff; font-size:11px; font-weight:700; padding:7px 14px; border-radius:99px; box-shadow:0 8px 18px rgba(79,70,229,.3); }
        .d11-11-11-list{ padding:0 14px 14px; display:flex; flex-direction:column; gap:12px; }
        .d11-11-11-row{ display:flex; align-items:center; gap:10px; }
        .d11-11-11-av{ width:28px; height:28px; border-radius:50%; background:#dbe4f5; flex:0 0 auto; }
        .d11-11-11-lines{ flex:1; display:flex; flex-direction:column; gap:5px; }
        .d11-11-11-lines span{ height:8px; border-radius:4px; background:#e6e9ee; display:block; }
        .d11-11-11-lines span.short{ width:55%; }

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