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

ピル型丸み強調タグチップ

角を大きく丸めた柔らかい印象のピル型タグチップです。ハンドメイド作品サイトやライフスタイル系ブログの雰囲気タグ表示に合います。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-16-08-field">
          <span class="d11-16-08-chip">ナチュラル</span>
          <span class="d11-16-08-chip">シンプル</span>
          <span class="d11-16-08-chip">モダン</span>
        </div>

CSS

.d11-16-08-field{width:100%;max-width:280px;display:flex;flex-wrap:wrap;gap:8px;font-family:sans-serif}
        .d11-16-08-chip{padding:9px 18px;background:#fdf2f8;color:#be185d;font-size:12.5px;font-weight:700;border-radius:999px;box-shadow:0 1px 3px rgba(190,24,93,.12)}

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