# 商品カード（星評価・価格つき）のCSS実装

> EC一覧で使う商品カード。正方形サムネイル・星評価・税込価格・カートボタンの定番構成で、評価はaria-labelで数値も伝えます。

- カテゴリ: カード
- URL: https://www.css-dictionary.com/recipes/product-card/

## HTML

```html
<article class="product">
  <div class="product-photo" role="img" aria-label="商品写真"></div>
  <div class="product-body">
    <h3 class="product-name">波佐見焼マグカップ 藍</h3>
    <p class="rating" aria-label="5点満点中4点（24件のレビュー）">
      <span aria-hidden="true">★★★★<span class="star-off">★</span></span>
      <span class="count" aria-hidden="true">(24)</span>
    </p>
    <p class="price">¥2,640 <span class="tax">税込</span></p>
    <button type="button" class="add-cart">カートに入れる</button>
  </div>
</article>
```

## CSS

```css
.product {
  width: 220px;
  background: #fff;
  border: 1px solid #e2d8c2;
  border-radius: 10px;
  overflow: hidden;
}

.product-photo {
  aspect-ratio: 1;
  background: linear-gradient(150deg, #d9c79a, #274a78);
}

.product-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
}

.product-name {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.rating {
  margin: 0;
  color: #d9a441;
  font-size: 14px;
  letter-spacing: 0.1em;
}

.star-off { color: #e2d8c2; }

.count {
  color: #8a7d63;
  font-size: 12px;
  letter-spacing: 0;
}

.price {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #1a1712;
}

.tax {
  font-size: 11px;
  font-weight: 400;
  color: #8a7d63;
}

.add-cart {
  margin-top: 6px;
  padding: 9px 0;
  border: 1px solid #b0413e;
  border-radius: 6px;
  background: #b0413e;
  color: #fff;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.add-cart:hover { background: #97362f; }

.add-cart:focus-visible {
  outline: 2px solid #1a1712;
  outline-offset: 2px;
}
```

## 仕組みの解説

星評価は「★★★★★」の文字を塗り分ける最も単純な方式です。見た目の星は aria-hidden にし、評価の実体は親の aria-label（「5点満点中4点」）で伝えます。星の文字列だけだと支援技術には「星星星…」と読まれてしまうためです。サムネイルは aspect-ratio: 1 の正方形で、一覧に並べたときの高さが揃います。

## 実装のポイント

0.5点刻みの星が必要な場合は、background: linear-gradient()で塗り幅を制御する方式に切り替えます。

## AIに依頼するときの文例

EC用の商品カードを作ってください。正方形サムネイル（aspect-ratio: 1）・商品名・星評価（見た目はaria-hidden、実体はaria-labelで「5点満点中4点」）・税込価格・カートボタンの構成にしてください。

## 使っているプロパティ

- [aspect-ratio](https://www.css-dictionary.com/property/aspect-ratio.md)
- [overflow](https://www.css-dictionary.com/property/overflow.md)
- [display-flex](https://www.css-dictionary.com/property/display-flex.md)
- [gap](https://www.css-dictionary.com/property/gap.md)
- [letter-spacing](https://www.css-dictionary.com/property/letter-spacing.md)