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

保存した検索条件一覧

よく使う検索条件を「保存した検索」としてタグ付きで一覧表示。WordPressの会員向けページで再検索の手間を減らすUIとして使えます。

css

プレビュー

ソースコード

HTML

<ul class="d11-05-07-list">
          <li><span class="d11-05-07-name">木製家具 &yen;3,000以下</span><span class="d11-05-07-tags"><em>家具</em><em>価格</em></span></li>
          <li><span class="d11-05-07-name">在庫あり・新着</span><span class="d11-05-07-tags"><em>在庫</em><em>新着</em></span></li>
          <li><span class="d11-05-07-name">北欧デザイン雑貨</span><span class="d11-05-07-tags"><em>雑貨</em><em>北欧</em></span></li>
        </ul>

CSS

.prev.d11-05-07{align-items:flex-start;justify-content:flex-start}
        .d11-05-07-list{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:10px}
        .d11-05-07-list li{display:flex;justify-content:space-between;align-items:center;background:#f8f9fb;border-radius:10px;padding:10px 14px}
        .d11-05-07-name{font-size:12.5px;font-weight:700;color:#1f2937}
        .d11-05-07-tags em{font-style:normal;font-size:10.5px;color:#4f46e5;background:#eef2ff;padding:2px 8px;border-radius:99px;margin-left:5px}

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