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

アウトラインバッジ

背景を持たず枠線だけで構成した控えめなバッジの見本です。文章中に埋め込んでも主張しすぎず、補足情報のラベルに向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-04-03-wrap">
          <span class="d09-04-03-badge d09-04-03-blue">Free</span>
          <span class="d09-04-03-badge d09-04-03-green">在庫あり</span>
          <span class="d09-04-03-badge d09-04-03-red">残りわずか</span>
          <span class="d09-04-03-badge d09-04-03-gray">準備中</span>
        </div>

CSS

.d09-04-03-wrap{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center}
        .d09-04-03-badge{display:inline-block;font-size:13px;font-weight:600;padding:4px 12px;border-radius:20px;background:#fff;box-sizing:border-box}
        .d09-04-03-blue{color:#2563eb;border:1.5px solid #2563eb}
        .d09-04-03-green{color:#16a34a;border:1.5px solid #16a34a}
        .d09-04-03-red{color:#ef4444;border:1.5px solid #ef4444}
        .d09-04-03-gray{color:#6b7280;border:1.5px solid #9ca3af}

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