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

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

星評価で絞り込むレビューフィルターサイドバー

星アイコンの数で評価段階を示し、該当件数を添えた静止したレビュー絞り込みサイドバーです。WordPressの商品レビュー一覧ページで評価別に商品を探すUIのデザイン参考になります。

staticcss

プレビュー

ソースコード

HTML

<aside class="d03-10-11-panel">
          <h4 class="d03-10-11-heading">評価で絞り込む</h4>
          <div class="d03-10-11-row is-active">
            <span class="d03-10-11-stars">
              <svg viewBox="0 0 20 20" width="12" height="12"><path d="M10 1.5l2.47 5.06 5.53.8-4 3.9.94 5.5L10 14.3l-4.94 2.46.94-5.5-4-3.9 5.53-.8z" fill="#f59e0b"/></svg>
              <svg viewBox="0 0 20 20" width="12" height="12"><path d="M10 1.5l2.47 5.06 5.53.8-4 3.9.94 5.5L10 14.3l-4.94 2.46.94-5.5-4-3.9 5.53-.8z" fill="#f59e0b"/></svg>
              <svg viewBox="0 0 20 20" width="12" height="12"><path d="M10 1.5l2.47 5.06 5.53.8-4 3.9.94 5.5L10 14.3l-4.94 2.46.94-5.5-4-3.9 5.53-.8z" fill="#f59e0b"/></svg>
              <svg viewBox="0 0 20 20" width="12" height="12"><path d="M10 1.5l2.47 5.06 5.53.8-4 3.9.94 5.5L10 14.3l-4.94 2.46.94-5.5-4-3.9 5.53-.8z" fill="#f59e0b"/></svg>
              <svg viewBox="0 0 20 20" width="12" height="12"><path d="M10 1.5l2.47 5.06 5.53.8-4 3.9.94 5.5L10 14.3l-4.94 2.46.94-5.5-4-3.9 5.53-.8z" fill="#f59e0b"/></svg>
            </span>
            <span class="d03-10-11-count">128件</span>
          </div>
          <div class="d03-10-11-row">
            <span class="d03-10-11-stars">
              <svg viewBox="0 0 20 20" width="12" height="12"><path d="M10 1.5l2.47 5.06 5.53.8-4 3.9.94 5.5L10 14.3l-4.94 2.46.94-5.5-4-3.9 5.53-.8z" fill="#f59e0b"/></svg>
              <svg viewBox="0 0 20 20" width="12" height="12"><path d="M10 1.5l2.47 5.06 5.53.8-4 3.9.94 5.5L10 14.3l-4.94 2.46.94-5.5-4-3.9 5.53-.8z" fill="#f59e0b"/></svg>
              <svg viewBox="0 0 20 20" width="12" height="12"><path d="M10 1.5l2.47 5.06 5.53.8-4 3.9.94 5.5L10 14.3l-4.94 2.46.94-5.5-4-3.9 5.53-.8z" fill="#f59e0b"/></svg>
              <svg viewBox="0 0 20 20" width="12" height="12"><path d="M10 1.5l2.47 5.06 5.53.8-4 3.9.94 5.5L10 14.3l-4.94 2.46.94-5.5-4-3.9 5.53-.8z" fill="#f59e0b"/></svg>
              <svg viewBox="0 0 20 20" width="12" height="12"><path d="M10 1.5l2.47 5.06 5.53.8-4 3.9.94 5.5L10 14.3l-4.94 2.46.94-5.5-4-3.9 5.53-.8z" fill="none" stroke="#cbd5e1" stroke-width="1.3"/></svg>
            </span>
            <span class="d03-10-11-count">56件</span>
          </div>
          <div class="d03-10-11-row">
            <span class="d03-10-11-stars">
              <svg viewBox="0 0 20 20" width="12" height="12"><path d="M10 1.5l2.47 5.06 5.53.8-4 3.9.94 5.5L10 14.3l-4.94 2.46.94-5.5-4-3.9 5.53-.8z" fill="#f59e0b"/></svg>
              <svg viewBox="0 0 20 20" width="12" height="12"><path d="M10 1.5l2.47 5.06 5.53.8-4 3.9.94 5.5L10 14.3l-4.94 2.46.94-5.5-4-3.9 5.53-.8z" fill="#f59e0b"/></svg>
              <svg viewBox="0 0 20 20" width="12" height="12"><path d="M10 1.5l2.47 5.06 5.53.8-4 3.9.94 5.5L10 14.3l-4.94 2.46.94-5.5-4-3.9 5.53-.8z" fill="#f59e0b"/></svg>
              <svg viewBox="0 0 20 20" width="12" height="12"><path d="M10 1.5l2.47 5.06 5.53.8-4 3.9.94 5.5L10 14.3l-4.94 2.46.94-5.5-4-3.9 5.53-.8z" fill="none" stroke="#cbd5e1" stroke-width="1.3"/></svg>
              <svg viewBox="0 0 20 20" width="12" height="12"><path d="M10 1.5l2.47 5.06 5.53.8-4 3.9.94 5.5L10 14.3l-4.94 2.46.94-5.5-4-3.9 5.53-.8z" fill="none" stroke="#cbd5e1" stroke-width="1.3"/></svg>
            </span>
            <span class="d03-10-11-count">19件</span>
          </div>
          <div class="d03-10-11-row">
            <span class="d03-10-11-stars">
              <svg viewBox="0 0 20 20" width="12" height="12"><path d="M10 1.5l2.47 5.06 5.53.8-4 3.9.94 5.5L10 14.3l-4.94 2.46.94-5.5-4-3.9 5.53-.8z" fill="#f59e0b"/></svg>
              <svg viewBox="0 0 20 20" width="12" height="12"><path d="M10 1.5l2.47 5.06 5.53.8-4 3.9.94 5.5L10 14.3l-4.94 2.46.94-5.5-4-3.9 5.53-.8z" fill="none" stroke="#cbd5e1" stroke-width="1.3"/></svg>
              <svg viewBox="0 0 20 20" width="12" height="12"><path d="M10 1.5l2.47 5.06 5.53.8-4 3.9.94 5.5L10 14.3l-4.94 2.46.94-5.5-4-3.9 5.53-.8z" fill="none" stroke="#cbd5e1" stroke-width="1.3"/></svg>
              <svg viewBox="0 0 20 20" width="12" height="12"><path d="M10 1.5l2.47 5.06 5.53.8-4 3.9.94 5.5L10 14.3l-4.94 2.46.94-5.5-4-3.9 5.53-.8z" fill="none" stroke="#cbd5e1" stroke-width="1.3"/></svg>
              <svg viewBox="0 0 20 20" width="12" height="12"><path d="M10 1.5l2.47 5.06 5.53.8-4 3.9.94 5.5L10 14.3l-4.94 2.46.94-5.5-4-3.9 5.53-.8z" fill="none" stroke="#cbd5e1" stroke-width="1.3"/></svg>
            </span>
            <span class="d03-10-11-count">4件</span>
          </div>
        </aside>

CSS

.prev.d03-10-11{padding:0;display:block}
        .d03-10-11-panel{
          width:100%;height:100%;min-height:260px;box-sizing:border-box;
          background:#fff;padding:22px 20px;
        }
        .d03-10-11-heading{
          font-size:13px;font-weight:800;color:#0f172a;margin:0 0 14px;
          padding-bottom:8px;border-bottom:2px solid #f1f5f9;
        }
        .d03-10-11-row{display:flex;align-items:center;justify-content:space-between;padding:8px 6px;border-radius:8px}
        .d03-10-11-row.is-active{background:#eff6ff}
        .d03-10-11-stars{display:flex;align-items:center;gap:2px}
        .d03-10-11-count{font-size:11.5px;color:#64748b;font-weight:600}
        .d03-10-11-row.is-active .d03-10-11-count{color:#2563eb}

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