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

カテゴリ別グループ化タグ選択パネル

見出しごとにタグをグループ分けして表示するパネルです。ECサイトの商品絞り込みで複数の分類軸を同時に扱いたい場合に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-16-04-panel">
          <div class="d11-16-04-group">
            <p class="d11-16-04-cat">ジャンル</p>
            <div class="d11-16-04-row">
              <span class="d11-16-04-tag d11-16-04-on">小説</span>
              <span class="d11-16-04-tag">漫画</span>
              <span class="d11-16-04-tag">雑誌</span>
            </div>
          </div>
          <div class="d11-16-04-group">
            <p class="d11-16-04-cat">対象年齢</p>
            <div class="d11-16-04-row">
              <span class="d11-16-04-tag">キッズ</span>
              <span class="d11-16-04-tag d11-16-04-on">大人</span>
            </div>
          </div>
        </div>

CSS

.d11-16-04-panel{width:100%;max-width:280px;display:flex;flex-direction:column;gap:12px;font-family:sans-serif}
        .d11-16-04-cat{margin:0 0 6px;font-size:11.5px;font-weight:700;color:#9ca3af;letter-spacing:.02em}
        .d11-16-04-row{display:flex;flex-wrap:wrap;gap:6px}
        .d11-16-04-tag{padding:5px 11px;border:1.5px solid #e2e8f0;border-radius:6px;font-size:12px;font-weight:600;color:#475569;background:#f8fafc}
        .d11-16-04-on{border-color:#0d9488;background:#0d9488;color:#fff}

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