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

パーツ番号 11-05-05 ・ CSSのみ

フィルタ+結果2カラムレイアウト

左に絞り込みチェックボックス群、右に検索結果一覧を配置した定番の2カラム構成。WordPressの商品一覧ページの基本レイアウトに使えます。

css

プレビュー

ソースコード

HTML

<div class="d11-05-05-wrap">
          <aside class="d11-05-05-side">
            <h4>カテゴリ</h4>
            <label><input type="checkbox" checked>家具</label>
            <label><input type="checkbox">雑貨</label>
            <h4>価格帯</h4>
            <label><input type="checkbox">&yen;〜3,000</label>
            <label><input type="checkbox" checked>&yen;3,000〜</label>
          </aside>
          <div class="d11-05-05-main">
            <div class="d11-05-05-card">木製デスク<span>&yen;4,200</span></div>
            <div class="d11-05-05-card">折りたたみ椅子<span>&yen;3,600</span></div>
            <div class="d11-05-05-card">収納ラック<span>&yen;5,400</span></div>
          </div>
        </div>

CSS

.prev.d11-05-05{align-items:flex-start;justify-content:flex-start}
        .d11-05-05-wrap{width:100%;display:flex;gap:16px}
        .d11-05-05-side{flex:0 0 110px;font-size:11.5px;color:#374151}
        .d11-05-05-side h4{font-size:11px;color:#9ca3af;margin:10px 0 6px;text-transform:uppercase}
        .d11-05-05-side h4:first-child{margin-top:0}
        .d11-05-05-side label{display:flex;align-items:center;gap:6px;margin-bottom:6px}
        .d11-05-05-main{flex:1;display:flex;flex-direction:column;gap:8px}
        .d11-05-05-card{display:flex;justify-content:space-between;background:#f8f9fb;border-radius:8px;padding:10px 12px;font-size:12.5px;color:#1f2937}
        .d11-05-05-card span{font-weight:700;color:#4f46e5}

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