← 静的パーツギャラリーへ戻る

パーツ番号 03-10-12 ・ CSSのみ

カラースウォッチ選択パレット付きフィルターサイドバー

色見本の丸とサイズチップで選択中の条件を示す、ECサイトによくある絞り込みパネルの静止見本です。WordPress製品一覧ページのカラー・サイズフィルターUIのデザイン参考になります。

staticcss

プレビュー

ソースコード

HTML

<div class="d03-10-12-panel">
          <div class="d03-10-12-group">
            <p class="d03-10-12-label">カラー</p>
            <div class="d03-10-12-swatches">
              <span class="d03-10-12-sw" style="background:#111827"></span>
              <span class="d03-10-12-sw" style="background:#ef4444"></span>
              <span class="d03-10-12-sw is-selected" style="background:#2563eb"></span>
              <span class="d03-10-12-sw" style="background:#22c55e"></span>
              <span class="d03-10-12-sw" style="background:#f59e0b"></span>
              <span class="d03-10-12-sw" style="background:#a855f7"></span>
              <span class="d03-10-12-sw" style="background:#ec4899"></span>
              <span class="d03-10-12-sw d03-10-12-sw-outline" style="background:#f8fafc"></span>
            </div>
          </div>
          <div class="d03-10-12-group">
            <p class="d03-10-12-label">サイズ</p>
            <div class="d03-10-12-sizes">
              <span class="d03-10-12-size">S</span>
              <span class="d03-10-12-size is-selected">M</span>
              <span class="d03-10-12-size">L</span>
              <span class="d03-10-12-size">XL</span>
            </div>
          </div>
        </div>

CSS

.d03-10-12-panel{width:100%;max-width:260px}
        .d03-10-12-group{margin-bottom:20px}
        .d03-10-12-group:last-child{margin-bottom:0}
        .d03-10-12-label{
          font-size:11px;font-weight:700;color:#64748b;margin:0 0 10px;
          text-transform:uppercase;letter-spacing:.04em;
        }
        .d03-10-12-swatches{display:flex;flex-wrap:wrap;gap:10px}
        .d03-10-12-sw{width:22px;height:22px;border-radius:50%;box-sizing:border-box}
        .d03-10-12-sw-outline{border:1px solid #cbd5e1}
        .d03-10-12-sw.is-selected{box-shadow:0 0 0 2px #fff,0 0 0 4px #2563eb}
        .d03-10-12-sizes{display:flex;gap:8px}
        .d03-10-12-size{
          width:34px;height:30px;border-radius:8px;border:1px solid #e2e8f0;
          display:flex;align-items:center;justify-content:center;
          font-size:12px;font-weight:700;color:#334155;box-sizing:border-box;
        }
        .d03-10-12-size.is-selected{background:#2563eb;border-color:#2563eb;color:#fff}

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