パーツ番号 10-08-05 ・ CSSのみ

カラーバリエーション表示付き商品カード

選べる色を小さな色見本ドットで併記した商品カードです。アパレル系商品のバリエーション訴求に適しています。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <div class="thumb"></div>
          <div class="info">
            <p class="name">ニットプルオーバー</p>
            <p class="price">¥6,800</p>
            <div class="colors">
              <span class="dot c1"></span>
              <span class="dot c2"></span>
              <span class="dot c3"></span>
              <span class="dot c4"></span>
            </div>
          </div>
        </div>

CSS

.d10-08-05 .card{width:180px;background:#fff;border:1px solid #eee;border-radius:8px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.06);}
        .d10-08-05 .thumb{height:110px;background:linear-gradient(135deg,#cfd9df,#e2ebf0);}
        .d10-08-05 .info{padding:12px 14px;}
        .d10-08-05 .name{font-size:13px;color:#333;margin:0 0 6px;}
        .d10-08-05 .price{margin:0 0 8px;font-size:15px;font-weight:700;color:#333;}
        .d10-08-05 .colors{display:flex;gap:6px;}
        .d10-08-05 .dot{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.1);}
        .d10-08-05 .c1{background:#333;}
        .d10-08-05 .c2{background:#e0393e;}
        .d10-08-05 .c3{background:#4a7fc1;}
        .d10-08-05 .c4{background:#e8c468;}

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