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

カテゴリカラーバッジ一覧

複数のカテゴリ名をそれぞれ異なる色のバッジで一覧表示する見本です。ブログ記事一覧のカテゴリ表示などに活用できます。

staticcss

プレビュー

ソースコード

HTML

<ul class="d09-04-07-list">
          <li><span class="d09-04-07-badge d09-04-07-c1">デザイン</span></li>
          <li><span class="d09-04-07-badge d09-04-07-c2">コーディング</span></li>
          <li><span class="d09-04-07-badge d09-04-07-c3">マーケティング</span></li>
          <li><span class="d09-04-07-badge d09-04-07-c4">お知らせ</span></li>
          <li><span class="d09-04-07-badge d09-04-07-c5">イベント</span></li>
        </ul>

CSS

.d09-04-07-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
        .d09-04-07-badge{display:inline-block;font-size:12px;font-weight:700;padding:4px 11px;border-radius:4px;color:#fff}
        .d09-04-07-c1{background:#e11d48}
        .d09-04-07-c2{background:#2563eb}
        .d09-04-07-c3{background:#16a34a}
        .d09-04-07-c4{background:#d97706}
        .d09-04-07-c5{background:#7c3aed}

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