パーツ番号 02-14-04 ・ CSSのみ

丸背景の小さなタグラベル

円形に近い角丸の背景を持つ極小ラベル。商品カードやブログ記事に付与するステータス・カテゴリ表示に便利。

staticcss

プレビュー

ソースコード

HTML

<div class="row">
          <span class="tagpill">NEW</span>
          <span class="tagpill alt">人気</span>
          <span class="tagpill mono">4.5&#9733;</span>
        </div>
        <p class="desc">丸背景の小さなタグラベルを並べたサンプル</p>

CSS

.d02-14-04{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
        .d02-14-04 .row{ display:flex; gap:8px; }
        .d02-14-04 .tagpill{ display:inline-block; padding:4px 12px; border-radius:999px; background:#fee2e2; color:#b91c1c; font-size:10px; font-weight:700; letter-spacing:0.04em; }
        .d02-14-04 .tagpill.alt{ background:#dbeafe; color:#1d4ed8; }
        .d02-14-04 .tagpill.mono{ background:#f3f4f6; color:#374151; }
        .d02-14-04 .desc{ all:unset; display:block; font-size:12px; color:#9ca3af; text-align:center; }

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