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

パーツ番号 03-16-05 ・ CSSのみ

画像サムネイル付き商品検索候補パネル

候補それぞれに商品サムネイルと価格を添えたECサイト風の静止パネルです。WordPress + WooCommerce系サイトの商品検索オートコンプリートのデザイン参考に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d03-16-05-stage">
          <div class="d03-16-05-bar">
            <svg viewBox="0 0 20 20" width="14" height="14" fill="none" stroke="#94a3b8" stroke-width="1.8"><circle cx="8.5" cy="8.5" r="5.5"/><path d="M17 17l-4-4"/></svg>
            <span class="d03-16-05-text">スニーカー</span>
          </div>
          <div class="d03-16-05-drop">
            <span class="d03-16-05-row">
              <span class="d03-16-05-thumb" style="background:linear-gradient(135deg,#93c5fd,#2563eb)"></span>
              <span class="d03-16-05-info"><span class="d03-16-05-t">ランニングスニーカー</span><span class="d03-16-05-p">¥8,900</span></span>
            </span>
            <span class="d03-16-05-row">
              <span class="d03-16-05-thumb" style="background:linear-gradient(135deg,#fca5a5,#dc2626)"></span>
              <span class="d03-16-05-info"><span class="d03-16-05-t">キャンバススニーカー</span><span class="d03-16-05-p">¥5,400</span></span>
            </span>
            <span class="d03-16-05-row">
              <span class="d03-16-05-thumb" style="background:linear-gradient(135deg,#fcd34d,#d97706)"></span>
              <span class="d03-16-05-info"><span class="d03-16-05-t">キッズスニーカー</span><span class="d03-16-05-p">¥3,800</span></span>
            </span>
          </div>
        </div>

CSS

.prev.d03-16-05{padding:0;display:block}
        .d03-16-05-stage{
          width:100%;height:100%;min-height:260px;box-sizing:border-box;
          background:#f1f5f9;padding:24px;position:relative;
        }
        .d03-16-05-bar{
          display:flex;align-items:center;gap:9px;background:#fff;border-radius:10px;
          border:1px solid #cbd5e1;padding:11px 14px;box-shadow:0 1px 2px rgba(0,0,0,.04);
        }
        .d03-16-05-text{font-size:12.5px;color:#1e293b;font-weight:600}
        .d03-16-05-drop{
          position:absolute;left:24px;right:24px;top:66px;
          background:#fff;border-radius:10px;border:1px solid #e2e8f0;
          box-shadow:0 10px 24px rgba(15,23,42,.1);padding:8px;
          display:flex;flex-direction:column;gap:4px;
        }
        .d03-16-05-row{display:flex;align-items:center;gap:10px;padding:5px 4px}
        .d03-16-05-thumb{flex:none;width:36px;height:36px;border-radius:7px}
        .d03-16-05-info{display:flex;flex-direction:column;gap:2px}
        .d03-16-05-t{font-size:12px;font-weight:600;color:#1e293b}
        .d03-16-05-p{font-size:11px;color:#2563eb;font-weight:700}

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