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

角丸バッジセット

角丸4px程度の小さなバッジを色違いで並べた見本です。WordPressの記事一覧やお知らせのステータス表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-04-01-wrap">
          <span class="d09-04-01-badge d09-04-01-blue">New</span>
          <span class="d09-04-01-badge d09-04-01-green">完了</span>
          <span class="d09-04-01-badge d09-04-01-orange">注目</span>
          <span class="d09-04-01-badge d09-04-01-red">重要</span>
          <span class="d09-04-01-badge d09-04-01-purple">限定</span>
        </div>

CSS

.d09-04-01-wrap{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center}
        .d09-04-01-badge{display:inline-block;font-size:13px;font-weight:700;padding:5px 12px;border-radius:4px;color:#fff;line-height:1.4}
        .d09-04-01-blue{background:#2563eb}
        .d09-04-01-green{background:#16a34a}
        .d09-04-01-orange{background:#f59e0b}
        .d09-04-01-red{background:#ef4444}
        .d09-04-01-purple{background:#7c3aed}

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