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

チェックボックス絞り込みフィルターパネル

価格帯やカテゴリをチェックボックスで選ぶECサイト風の絞り込みパネルの静止見本です。WordPress製品一覧ページのサイドフィルターUIのデザイン参考になります。

staticcss

プレビュー

ソースコード

HTML

<div class="d03-10-02-panel">
          <h4 class="d03-10-02-heading">絞り込み</h4>
          <div class="d03-10-02-group">
            <p class="d03-10-02-label">価格帯</p>
            <div class="d03-10-02-row">
              <span class="d03-10-02-box is-checked"><svg viewBox="0 0 16 16" width="10" height="10"><path d="M3 8l3 3 7-7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
              <span>〜¥3,000</span>
            </div>
            <div class="d03-10-02-row"><span class="d03-10-02-box"></span><span>¥3,000〜¥6,000</span></div>
            <div class="d03-10-02-row"><span class="d03-10-02-box"></span><span>¥6,000〜</span></div>
          </div>
          <div class="d03-10-02-group">
            <p class="d03-10-02-label">カテゴリ</p>
            <div class="d03-10-02-row">
              <span class="d03-10-02-box is-checked"><svg viewBox="0 0 16 16" width="10" height="10"><path d="M3 8l3 3 7-7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
              <span>アウター</span>
            </div>
            <div class="d03-10-02-row"><span class="d03-10-02-box"></span><span>トップス</span></div>
          </div>
        </div>

CSS

.d03-10-02-panel{width:100%;max-width:260px}
        .d03-10-02-heading{font-size:13px;font-weight:800;color:#0f172a;margin:0 0 14px}
        .d03-10-02-group{margin-bottom:16px}
        .d03-10-02-group:last-child{margin-bottom:0}
        .d03-10-02-label{
          font-size:11px;font-weight:700;color:#64748b;margin:0 0 8px;
          text-transform:uppercase;letter-spacing:.04em;
        }
        .d03-10-02-row{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:12.5px;color:#334155}
        .d03-10-02-box{
          width:16px;height:16px;flex:none;border-radius:4px;border:1px solid #cbd5e1;
          background:#fff;display:flex;align-items:center;justify-content:center;
        }
        .d03-10-02-box.is-checked{background:#2563eb;border-color:#2563eb}

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