【HTML/CSS】コピペ！おしゃれなカード型デザインレイアウト38選

HTMLコード表示

<div class="cs-ec-st1-grid">

    <a href="#" class="cs-ec-st1-item">
        <div class="cs-ec-st1-thumb">
            <img src="https://placehold.jp/ffffff/111111/400x400.png?text=Product+A" alt="商品画像">
        </div>
        <div class="cs-ec-st1-body">
            <div class="cs-ec-st1-name">高品質クラフトトートバッグ（キャンバス地・A4対応）</div>
            <div class="cs-ec-st1-price">
                <span class="cs-ec-st1-price-current">¥5,800</span>
                <span class="cs-ec-st1-price-tax">(税込)</span>
            </div>
        </div>
    </a>
    <a href="#" class="cs-ec-st1-item">
        <div class="cs-ec-st1-thumb">
            <img src="https://placehold.jp/ffffff/111111/400x400.png?text=Product+B" alt="商品画像">
        </div>
        <div class="cs-ec-st1-body">
            <div class="cs-ec-st1-name">オーガニックコットンの無地Tシャツ / ユニセックス</div>
            <div class="cs-ec-st1-price">
                <span class="cs-ec-st1-price-current">¥3,200</span>
                <span class="cs-ec-st1-price-tax">(税込)</span>
            </div>
        </div>
    </a>
    <a href="#" class="cs-ec-st1-item">
        <div class="cs-ec-st1-thumb">
            <img src="https://placehold.jp/ffffff/111111/400x400.png?text=Product+C" alt="商品画像">
        </div>
        <div class="cs-ec-st1-body">
            <div class="cs-ec-st1-name">ステンレス製 真空断熱タンブラー 450ml</div>
            <div class="cs-ec-st1-price">
                <span class="cs-ec-st1-price-current">¥2,400</span>
                <span class="cs-ec-st1-price-tax">(税込)</span>
            </div>
        </div>
    </a>
</div>

CSSコード表示

/* =========================================
   1. カードを並べるグリッドレイアウト
========================================= */
.cs-ec-st1-grid {
    display: grid;
    /* ECサイトのように、少し小さめでたくさん並べられるように最小幅を200pxに設定 */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px; /* 横も縦も少し詰めた余白で一覧性を高める */
    width: 100%;
    margin-bottom: 2em;
    box-sizing: border-box;
}

/* =========================================
   2. カード本体のデザイン
========================================= */
.cs-ec-st1-item {
    display: block;
    text-decoration: none !important;
    background-color: #ffffff;
    border: 1px solid #f1f5f9; /* 非常に薄いグレーの枠線で清潔感を出す */
    border-radius: 8px;
    overflow: hidden;
    color: #333333;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* ホバー時は枠線の色を少し濃くし、うっすら影を落とす */
.cs-ec-st1-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    border-color: #cbd5e1;
}

/* =========================================
   3. 商品画像エリア
========================================= */
.cs-ec-st1-thumb {
    width: 100%;
    /* どんな画像が来ても正方形（1:1）の枠を維持する */
    aspect-ratio: 1 / 1;
    background-color: #f8fafc;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.cs-ec-st1-thumb img {
    width: 100%;
    height: 100%;
    /* 画像が見切れないように枠内に収める（ECサイトで主流の指定） */
    object-fit: contain; 
    padding: 12px; /* 画像が枠のギリギリまで来ないよう余白を持たせる */
    box-sizing: border-box;
    transition: transform 0.4s ease;
}

/* ホバー時に画像を少しだけ手前に寄せる（ズーム） */
.cs-ec-st1-item:hover .cs-ec-st1-thumb img {
    transform: scale(1.05);
}

/* =========================================
   4. 商品情報エリア
========================================= */
.cs-ec-st1-body {
    padding: 12px 16px 16px;
    text-align: center; /* 商品情報は中央揃えが王道 */
}

/* 商品名（hタグ不使用） */
.cs-ec-st1-name {
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.4;
    color: #1a202c;
    margin: 0 0 10px 0;
    /* 商品名が長い場合は2行で「...」と省略させる */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 2.8em; /* 2行分の高さを固定し、カードの高さを揃える */
    transition: color 0.3s ease;
}
.cs-ec-st1-item:hover .cs-ec-st1-name {
    color: #2589d0;
}

/* 価格表示ブロック */
.cs-ec-st1-price {
    font-size: 1rem;
    font-weight: 700;
    color: #111111;
    display: flex;
    justify-content: center;
    align-items: baseline; /* 数字と(税込)のベースラインを揃える */
    gap: 4px;
}

/* 現在の価格（メインの数字） */
.cs-ec-st1-price-current {
    font-size: 1.15rem;
    letter-spacing: 0.02em;
}

/* 税込表記（小さく表示） */
.cs-ec-st1-price-tax {
    font-size: 0.7rem;
    font-weight: 400;
    color: #94a3b8;
}

/* =========================================
   5. レスポンシブ対応（スマホ表示時）
========================================= */
@media screen and (max-width: 480px) {
    /* 非常に狭い画面では2列になると潰れるため、カードデザインを微調整 */
    .cs-ec-st1-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 12px;
    }
    .cs-ec-st1-body {
        padding: 10px 8px 12px;
    }
    .cs-ec-st1-name {
        font-size: 0.8rem;
    }
    .cs-ec-st1-price-current {
        font-size: 1rem;
    }
}

セール・リボン付き

ECサイトでコンバージョン（購入・クリック）を強く後押しするために必須となるデザインです。

高品質クラフトトートバッグ（キャンバス地・A4対応）

¥2,400 ¥1,200 (税込)

HTMLコード表示

<div class="cs-ec-st2-grid">

    <a href="#" class="cs-ec-st2-item">
        <div class="cs-ec-st2-thumb">
            <span class="cs-ec-st2-ribbon">20% OFF</span>
            <img src="https://placehold.jp/ffffff/111111/400x400.png?text=Sale+Item" alt="商品画像">
        </div>
        <div class="cs-ec-st2-body">
            <div class="cs-ec-st2-name">高品質クラフトトートバッグ（限定カラー）</div>
            <div class="cs-ec-st2-price">
                <span class="cs-ec-st2-price-old">¥5,800</span>
                <span class="cs-ec-st2-price-new">¥4,640</span>
                <span class="cs-ec-st2-price-tax">(税込)</span>
            </div>
        </div>
    </a>
    <a href="#" class="cs-ec-st2-item">
        <div class="cs-ec-st2-thumb">
            <span class="cs-ec-st2-ribbon">SALE</span>
            <img src="https://placehold.jp/ffffff/111111/400x400.png?text=Sale+Item" alt="商品画像">
        </div>
        <div class="cs-ec-st2-body">
            <div class="cs-ec-st2-name">オーガニックコットンの無地Tシャツ</div>
            <div class="cs-ec-st2-price">
                <span class="cs-ec-st2-price-old">¥3,200</span>
                <span class="cs-ec-st2-price-new">¥2,500</span>
                <span class="cs-ec-st2-price-tax">(税込)</span>
            </div>
        </div>
    </a>
    <a href="#" class="cs-ec-st2-item">
        <div class="cs-ec-st2-thumb">
            <span class="cs-ec-st2-ribbon">半額</span>
            <img src="https://placehold.jp/ffffff/111111/400x400.png?text=Sale+Item" alt="商品画像">
        </div>
        <div class="cs-ec-st2-body">
            <div class="cs-ec-st2-name">ステンレス製 真空断熱タンブラー 450ml</div>
            <div class="cs-ec-st2-price">
                <span class="cs-ec-st2-price-old">¥2,400</span>
                <span class="cs-ec-st2-price-new">¥1,200</span>
                <span class="cs-ec-st2-price-tax">(税込)</span>
            </div>
        </div>
    </a>
</div>

CSSコード表示

/* =========================================
   1. カードを並べるグリッドレイアウト
========================================= */
.cs-ec-st2-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    width: 100%;
    margin-bottom: 2em;
    box-sizing: border-box;
}

/* =========================================
   2. カード本体のデザイン
========================================= */
.cs-ec-st2-item {
    display: block;
    text-decoration: none !important;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden; /* はみ出したリボンの端をカットするために必須 */
    color: #333333;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* ホバー時に少し浮き上がらせる */
.cs-ec-st2-item:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
}

/* =========================================
   3. 商品画像エリア ＆ 斜めリボン
========================================= */
.cs-ec-st2-thumb {
    position: relative; /* リボンの絶対配置の基準とする */
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #f8fafc;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cs-ec-st2-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
    box-sizing: border-box;
    transition: transform 0.4s ease;
}

.cs-ec-st2-item:hover .cs-ec-st2-thumb img {
    transform: scale(1.05);
}

/* ━━ 斜めリボン（CSSのみで実装） ━━ */
.cs-ec-st2-ribbon {
    position: absolute;
    top: 18px;     /* 上からの位置 */
    left: -32px;   /* 左からの位置（マイナスにして外にはみ出させる） */
    width: 130px;  /* リボンの長さ */
    background-color: #e53e3e; /* コンバージョンを促すセール用の赤 */
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    padding: 6px 0;
    transform: rotate(-45deg); /* 左に45度傾ける */
    z-index: 2; /* 画像より手前に表示 */
    letter-spacing: 0.05em;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2); /* リボン自体に影をつけて立体感を出す */
}

/* =========================================
   4. 商品情報 ＆ 価格エリア
========================================= */
.cs-ec-st2-body {
    padding: 16px;
    text-align: center;
}

/* 商品名 */
.cs-ec-st2-name {
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.5;
    color: #1a202c;
    margin: 0 0 12px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 3em; /* 2行分の高さを固定 */
    transition: color 0.3s ease;
}
.cs-ec-st2-item:hover .cs-ec-st2-name {
    color: #e53e3e; /* ホバーで赤くしてセールのワクワク感を演出 */
}

/* 価格表示ブロック全体 */
.cs-ec-st2-price {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 6px;
}

/* 旧価格（打ち消し線） */
.cs-ec-st2-price-old {
    font-size: 0.8rem;
    color: #a0aec0;
    text-decoration: line-through; /* 中央に打ち消し線を引く */
}

/* セール価格（赤字で大きく） */
.cs-ec-st2-price-new {
    font-size: 1.25rem;
    font-weight: 700;
    color: #e53e3e;
    letter-spacing: 0.02em;
}

/* 税込表記 */
.cs-ec-st2-price-tax {
    font-size: 0.7rem;
    color: #718096;
}

/* =========================================
   5. レスポンシブ対応（スマホ表示時）
========================================= */
@media screen and (max-width: 480px) {
    .cs-ec-st2-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 12px;
    }
    .cs-ec-st2-body {
        padding: 12px 10px;
    }
    .cs-ec-st2-name {
        font-size: 0.8rem;
    }
    /* スマホ画面で窮屈にならないように改行を許可 */
    .cs-ec-st2-price {
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }
    .cs-ec-st2-price-new {
        font-size: 1.15rem;
    }
}

お気に入り・カートボタン内包

ECサイトにおいて、「一覧画面から直接カートに入れる」「気になったものをとりあえずお気に入り（ウィッシュリスト）に登録する」という機能は、ユーザーの離脱を防ぎ売上を上げる重要なUIです。

高品質クラフトトートバッグ（キャンバス地）

¥5,800

オーガニックコットンの無地Tシャツ / ユニセックス

¥3,200

HTMLコード表示

<div class="cs-ec-st3-grid">

    <div class="cs-ec-st3-item">
        <div class="cs-ec-st3-thumb">
            <a href="#" class="cs-ec-st3-link">
                <img src="https://placehold.jp/ffffff/111111/400x400.png?text=Product+A" alt="商品画像">
            </a>
            <a href="#" class="cs-ec-st3-fav" aria-label="お気に入りに追加">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
            </a>
        </div>
        
        <div class="cs-ec-st3-body">
            <a href="#" class="cs-ec-st3-name">高品質クラフトトートバッグ（キャンバス地）</a>
            
            <div class="cs-ec-st3-bottom">
                <div class="cs-ec-st3-price">
                    <span class="cs-ec-st3-price-current">¥5,800</span>
                </div>
                <a href="#" class="cs-ec-st3-cart" aria-label="カートに入れる">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
                </a>
            </div>
        </div>
    </div>
    <div class="cs-ec-st3-item">
        <div class="cs-ec-st3-thumb">
            <a href="#" class="cs-ec-st3-link">
                <img src="https://placehold.jp/ffffff/111111/400x400.png?text=Product+B" alt="商品画像">
            </a>
            <a href="#" class="cs-ec-st3-fav" aria-label="お気に入りに追加">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
            </a>
        </div>
        
        <div class="cs-ec-st3-body">
            <a href="#" class="cs-ec-st3-name">オーガニックコットンの無地Tシャツ / ユニセックス</a>
            
            <div class="cs-ec-st3-bottom">
                <div class="cs-ec-st3-price">
                    <span class="cs-ec-st3-price-current">¥3,200</span>
                </div>
                <a href="#" class="cs-ec-st3-cart" aria-label="カートに入れる">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
                </a>
            </div>
        </div>
    </div>
</div>

CSSコード表示

/* =========================================
   1. カードを並べるグリッドレイアウト
========================================= */
.cs-ec-st3-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* アイコンがある分少し幅広めに */
    gap: 24px;
    width: 100%;
    margin-bottom: 2em;
    box-sizing: border-box;
}

/* =========================================
   2. カード本体のデザイン
========================================= */
.cs-ec-st3-item {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px; /* 少し大きめの角丸で親しみやすく */
    overflow: hidden;
    color: #333333;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.cs-ec-st3-item:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-color: #cbd5e1;
}

/* =========================================
   3. 商品画像エリア ＆ お気に入りボタン
========================================= */
.cs-ec-st3-thumb {
    position: relative; /* ハートボタンの配置基準 */
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #f8fafc;
}
.cs-ec-st3-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.cs-ec-st3-link img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 16px;
    box-sizing: border-box;
    transition: transform 0.4s ease;
}

/* ホバー時の画像ズーム */
.cs-ec-st3-item:hover .cs-ec-st3-link img {
    transform: scale(1.05);
}

/* ━━ お気に入り（ハート）ボタン ━━ */
.cs-ec-st3-fav {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    background-color: #ffffff;
    color: #a0aec0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    z-index: 2;
}
/* ホバー時：アイコンを赤色にして背景を薄いピンクに */
.cs-ec-st3-fav:hover {
    color: #e53e3e;
    background-color: #fff5f5;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(229, 62, 62, 0.2);
}
/* クリック時などに中を塗りつぶす場合のスタイル指定（js連動用） */
.cs-ec-st3-fav.active {
    color: #e53e3e;
    fill: #e53e3e;
}

/* =========================================
   4. 商品情報 ＆ カートボタンエリア
========================================= */
.cs-ec-st3-body {
    padding: 16px;
}

/* 商品名 */
.cs-ec-st3-name {
    display: block; /* リンク要素をブロック化 */
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.5;
    color: #1a202c;
    text-decoration: none !important;
    margin: 0 0 16px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 3em;
    transition: color 0.3s ease;
}
.cs-ec-st3-name:hover {
    color: #2589d0;
}

/* ━━ 価格とカートボタンの横並び ━━ */
.cs-ec-st3-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px dashed #e2e8f0; /* 薄い破線で区切る */
    padding-top: 12px;
}

/* 価格 */
.cs-ec-st3-price-current {
    font-size: 1.15rem;
    font-weight: 700;
    color: #111111;
}

/* カートボタン */
.cs-ec-st3-cart {
    width: 40px;
    height: 40px;
    background-color: #111111;
    color: #ffffff;
    border-radius: 8px; /* 四角い角丸にして押しやすさを強調 */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.cs-ec-st3-cart:hover {
    background-color: #2589d0; /* アクセントカラーへ変化 */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 137, 208, 0.3);
}

/* =========================================
   5. レスポンシブ対応（スマホ表示時）
========================================= */
@media screen and (max-width: 480px) {
    .cs-ec-st3-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 16px;
    }
    .cs-ec-st3-body {
        padding: 12px;
    }
    .cs-ec-st3-name {
        font-size: 0.85rem;
        margin-bottom: 12px;
    }
    /* 狭いスマホ画面ではカートボタンと価格の余白を調整 */
    .cs-ec-st3-cart {
        width: 36px;
        height: 36px;
    }
    .cs-ec-st3-price-current {
        font-size: 1rem;
    }
}

レビュー星評価付き

Amazonや楽天市場などの大手ECモールでも必ず採用されている、ユーザーの「安心感」と「購買意欲」を直接的に高める鉄板のレイアウトです。

★★★★★ 4.2 (128件)

★★★★★ 4.8 (342件)

★★★★★ 3.4 (15件)

HTMLコード表示

<div class="cs-ec-st4-grid">

    <a href="#" class="cs-ec-st4-item">
        <div class="cs-ec-st4-thumb">
            <img src="https://placehold.jp/ffffff/111111/400x400.png?text=Product+A" alt="商品画像">
        </div>
        <div class="cs-ec-st4-body">
            <div class="cs-ec-st4-name">高品質クラフトトートバッグ（キャンバス地・A4対応）</div>
            
            <div class="cs-ec-st4-review">
                <span class="cs-ec-st4-stars">★★★★<span class="cs-ec-st4-star-empty">★</span></span>
                <span class="cs-ec-st4-score">4.2</span>
                <span class="cs-ec-st4-count">(128件)</span>
            </div>

            <div class="cs-ec-st4-price">
                <span class="cs-ec-st4-price-current">¥5,800</span>
                <span class="cs-ec-st4-price-tax">(税込)</span>
            </div>
        </div>
    </a>
    <a href="#" class="cs-ec-st4-item">
        <div class="cs-ec-st4-thumb">
            <img src="https://placehold.jp/ffffff/111111/400x400.png?text=Product+B" alt="商品画像">
        </div>
        <div class="cs-ec-st4-body">
            <div class="cs-ec-st4-name">オーガニックコットンの無地Tシャツ / ユニセックス</div>
            
            <div class="cs-ec-st4-review">
                <span class="cs-ec-st4-stars">★★★★★</span>
                <span class="cs-ec-st4-score">4.8</span>
                <span class="cs-ec-st4-count">(342件)</span>
            </div>

            <div class="cs-ec-st4-price">
                <span class="cs-ec-st4-price-current">¥3,200</span>
                <span class="cs-ec-st4-price-tax">(税込)</span>
            </div>
        </div>
    </a>
    <a href="#" class="cs-ec-st4-item">
        <div class="cs-ec-st4-thumb">
            <img src="https://placehold.jp/ffffff/111111/400x400.png?text=Product+C" alt="商品画像">
        </div>
        <div class="cs-ec-st4-body">
            <div class="cs-ec-st4-name">ステンレス製 真空断熱タンブラー 450ml</div>
            
            <div class="cs-ec-st4-review">
                <span class="cs-ec-st4-stars">★★★<span class="cs-ec-st4-star-empty">★★</span></span>
                <span class="cs-ec-st4-score">3.4</span>
                <span class="cs-ec-st4-count">(15件)</span>
            </div>

            <div class="cs-ec-st4-price">
                <span class="cs-ec-st4-price-current">¥2,400</span>
                <span class="cs-ec-st4-price-tax">(税込)</span>
            </div>
        </div>
    </a>
</div>

CSSコード表示

/* =========================================
   1. カードを並べるグリッドレイアウト
========================================= */
.cs-ec-st4-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    width: 100%;
    margin-bottom: 2em;
    box-sizing: border-box;
}

/* =========================================
   2. カード本体のデザイン
========================================= */
.cs-ec-st4-item {
    display: block;
    text-decoration: none !important;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    color: #333333;
    transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.cs-ec-st4-item:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
    border-color: #cbd5e1;
    transform: translateY(-2px);
}

/* =========================================
   3. 商品画像エリア
========================================= */
.cs-ec-st4-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #f8fafc;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cs-ec-st4-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 16px;
    box-sizing: border-box;
    transition: transform 0.4s ease;
}

.cs-ec-st4-item:hover .cs-ec-st4-thumb img {
    transform: scale(1.05);
}

/* =========================================
   4. 商品情報 ＆ レビュー ＆ 価格エリア
========================================= */
.cs-ec-st4-body {
    padding: 16px;
}

/* 商品名（左揃えで読みやすく） */
.cs-ec-st4-name {
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.5;
    color: #1a202c;
    margin: 0 0 8px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 3em;
    transition: color 0.3s ease;
}
.cs-ec-st4-item:hover .cs-ec-st4-name {
    color: #2589d0;
}

/* ━━ レビュー評価エリア ━━ */
.cs-ec-st4-review {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
}

/* 星アイコン（色付き） */
.cs-ec-st4-stars {
    font-size: 1rem;
    color: #fbbf24; /* レビューによく使われる温かみのあるイエローオレンジ */
    letter-spacing: 0.05em;
    line-height: 1;
}

/* 星アイコン（空・グレー） */
.cs-ec-st4-star-empty {
    color: #e2e8f0; /* 薄いグレーで未評価分を表現 */
}

/* スコア（数字） */
.cs-ec-st4-score {
    font-size: 0.8rem;
    font-weight: 700;
    color: #fbbf24;
    margin-left: 2px;
}

/* レビュー件数 */
.cs-ec-st4-count {
    font-size: 0.75rem;
    color: #718096;
    margin-left: 2px;
}

/* ━━ 価格表示エリア ━━ */
.cs-ec-st4-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.cs-ec-st4-price-current {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111111;
}

.cs-ec-st4-price-tax {
    font-size: 0.7rem;
    color: #94a3b8;
}

/* =========================================
   5. レスポンシブ対応（スマホ表示時）
========================================= */
@media screen and (max-width: 480px) {
    .cs-ec-st4-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 12px;
    }
    .cs-ec-st4-body {
        padding: 12px;
    }
    .cs-ec-st4-name {
        font-size: 0.8rem;
    }
    /* スマホでは星と数字が窮屈にならないように調整 */
    .cs-ec-st4-stars {
        font-size: 0.9rem;
    }
    .cs-ec-st4-score, .cs-ec-st4-count {
        font-size: 0.7rem;
    }
    .cs-ec-st4-price-current {
        font-size: 1.15rem;
    }
}

ホッパー・画像切り替え

アパレルや雑貨のECサイトで大定番のUIです。

1枚目には商品の「全体像」、マウスを乗せた際の2枚目には「着用イメージ」や「別アングル」「カラーバリエーション」を見せることで、ユーザーが商品ページに遷移する前に多くの情報を伝え、クリック率を高めることができます。

高品質クラフトトートバッグ（キャンバス地）

高品質クラフトトートバッグ（キャンバス地・A4対応）

HTMLコード表示

<div class="cs-ec-st5-grid">

    <a href="#" class="cs-ec-st5-item">
        <div class="cs-ec-st5-thumb">
            <img src="https://placehold.jp/ffffff/111111/400x400.png?text=Main+Image+1" alt="商品画像（表）" class="cs-ec-st5-img-main">
            <img src="https://placehold.jp/f7fafc/2589d0/400x400.png?text=Hover+Image+1" alt="着用イメージ" class="cs-ec-st5-img-hover">
        </div>
        <div class="cs-ec-st5-body">
            <div class="cs-ec-st5-name">高品質クラフトトートバッグ（キャンバス地）</div>
            <div class="cs-ec-st5-price">
                <span class="cs-ec-st5-price-current">¥5,800</span>
                <span class="cs-ec-st5-price-tax">(税込)</span>
            </div>
        </div>
    </a>
    <a href="#" class="cs-ec-st5-item">
        <div class="cs-ec-st5-thumb">
            <img src="https://placehold.jp/ffffff/111111/400x400.png?text=Main+Image+2" alt="商品画像（表）" class="cs-ec-st5-img-main">
            <img src="https://placehold.jp/f7fafc/2589d0/400x400.png?text=Hover+Image+2" alt="着用イメージ" class="cs-ec-st5-img-hover">
        </div>
        <div class="cs-ec-st5-body">
            <div class="cs-ec-st5-name">オーガニックコットンの無地Tシャツ / ユニセックス</div>
            <div class="cs-ec-st5-price">
                <span class="cs-ec-st5-price-current">¥3,200</span>
                <span class="cs-ec-st5-price-tax">(税込)</span>
            </div>
        </div>
    </a>
    <a href="#" class="cs-ec-st5-item">
        <div class="cs-ec-st5-thumb">
            <img src="https://placehold.jp/ffffff/111111/400x400.png?text=Main+Image+3" alt="商品画像（表）" class="cs-ec-st5-img-main">
            <img src="https://placehold.jp/f7fafc/2589d0/400x400.png?text=Hover+Image+3" alt="着用イメージ" class="cs-ec-st5-img-hover">
        </div>
        <div class="cs-ec-st5-body">
            <div class="cs-ec-st5-name">ステンレス製 真空断熱タンブラー 450ml</div>
            <div class="cs-ec-st5-price">
                <span class="cs-ec-st5-price-current">¥2,400</span>
                <span class="cs-ec-st5-price-tax">(税込)</span>
            </div>
        </div>
    </a>
</div>

CSSコード表示

/* =========================================
   1. カードを並べるグリッドレイアウト
========================================= */
.cs-ec-st5-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    width: 100%;
    margin-bottom: 2em;
    box-sizing: border-box;
}

/* =========================================
   2. カード本体のデザイン
========================================= */
.cs-ec-st5-item {
    display: block;
    text-decoration: none !important;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    color: #333333;
    transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.cs-ec-st5-item:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
    border-color: #cbd5e1;
    transform: translateY(-2px);
}

/* =========================================
   3. 商品画像エリア（2枚重ねの設定）
========================================= */
.cs-ec-st5-thumb {
    position: relative; /* 2枚の画像を重ねるための基準点 */
    width: 100%;
    aspect-ratio: 1 / 1; /* 正方形を維持 */
    background-color: #f8fafc;
    overflow: hidden;
}

/* 画像の共通設定（同じ位置に絶対配置で重ねる） */
.cs-ec-st5-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 16px;
    box-sizing: border-box;
    /* 透明度と拡大を滑らかにアニメーションさせる */
    transition: opacity 0.4s ease, transform 0.6s ease; 
}

/* ━━ 1枚目（通常時）の画像 ━━ */
.cs-ec-st5-img-main {
    opacity: 1; /* 最初は見えている */
    z-index: 1;
}

/* ━━ 2枚目（ホバー時）の画像 ━━ */
.cs-ec-st5-img-hover {
    opacity: 0; /* 最初は透明で隠しておく */
    z-index: 2; /* 1枚目より手前に配置 */
    transform: scale(0.95); /* 最初は少し小さくしておくことで、ホバー時の動きをリッチに */
}

/* ━━ ホバー時の切り替えアクション ━━ */
.cs-ec-st5-item:hover .cs-ec-st5-img-main {
    opacity: 0; /* 1枚目を透明にする */
}
.cs-ec-st5-item:hover .cs-ec-st5-img-hover {
    opacity: 1; /* 2枚目を表示する */
    transform: scale(1); /* 元のサイズに戻しながらフワッと表示 */
}

/* =========================================
   4. 商品情報エリア
========================================= */
.cs-ec-st5-body {
    padding: 16px;
    text-align: center;
}

/* 商品名 */
.cs-ec-st5-name {
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.5;
    color: #1a202c;
    margin: 0 0 10px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 3em;
    transition: color 0.3s ease;
}
.cs-ec-st5-item:hover .cs-ec-st5-name {
    color: #2589d0;
}

/* 価格表示ブロック */
.cs-ec-st5-price {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 4px;
}

.cs-ec-st5-price-current {
    font-size: 1.15rem;
    font-weight: 700;
    color: #111111;
}

.cs-ec-st5-price-tax {
    font-size: 0.7rem;
    color: #94a3b8;
}

/* =========================================
   5. レスポンシブ対応（スマホ表示時）
========================================= */
@media screen and (max-width: 480px) {
    .cs-ec-st5-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 12px;
    }
    .cs-ec-st5-body {
        padding: 12px 10px;
    }
    .cs-ec-st5-name {
        font-size: 0.8rem;
    }
    .cs-ec-st5-price-current {
        font-size: 1.1rem;
    }
}

売り切れ（品切れ）オーバーレイ

在庫がない商品を一覧に表示させたままにする場合、ユーザーが誤ってクリックして落胆するのを防ぐため、「パッと見で売り切れだと分かる視覚的な変化」が重要です。

SOLD OUT

SOLD OUT

SOLD OUT