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

選択済み/未選択色分けタグパネル

候補タグの中から選択済みのものだけ色を変えて示すパネルです。飲食店検索サイトのジャンル絞り込みUIの見本になります。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-16-03-panel">
          <span class="d11-16-03-tag d11-16-03-on">和食</span>
          <span class="d11-16-03-tag">中華</span>
          <span class="d11-16-03-tag d11-16-03-on">イタリアン</span>
          <span class="d11-16-03-tag">フレンチ</span>
          <span class="d11-16-03-tag">カフェ</span>
          <span class="d11-16-03-tag d11-16-03-on">ラーメン</span>
        </div>

CSS

.d11-16-03-panel{width:100%;max-width:280px;display:flex;flex-wrap:wrap;gap:8px;font-family:sans-serif}
        .d11-16-03-tag{padding:6px 13px;border:1.5px solid #d1d5db;border-radius:16px;font-size:12.5px;font-weight:600;color:#4b5563;background:#fff}
        .d11-16-03-on{border-color:#2563eb;background:#2563eb;color:#fff}

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