# お客様の声カードのCSS実装

> LPで使う推薦文（テスティモニアル）カード。blockquoteの正しいマークアップに、大きな引用符の装飾とアバター付き署名を組み合わせます。

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

## HTML

```html
<figure class="voice">
  <blockquote>
    プロパティを調べるたびに開いています。コード例がその場で動くので、AIに依頼する前の確認が早くなりました。
  </blockquote>
  <figcaption>
    <span class="voice-avatar" aria-hidden="true"></span>
    <span class="voice-who">
      <strong>田中 美咲</strong>
      <small>フロントエンドエンジニア</small>
    </span>
  </figcaption>
</figure>
```

## CSS

```css
.voice {
  position: relative;
  max-width: 320px;
  margin: 0;
  padding: 26px 22px 18px;
  background: #fff;
  border: 1px solid #e2d8c2;
  border-radius: 12px;
}

/* 大きな飾り引用符 */
.voice::before {
  content: "“";
  position: absolute;
  top: 2px;
  left: 14px;
  font-size: 52px;
  line-height: 1;
  color: #e2d8c2;
  font-family: serif;
}

.voice blockquote {
  position: relative; /* 引用符より手前に */
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.9;
  color: #1a1712;
}

.voice figcaption {
  display: flex;
  align-items: center;
  gap: 10px;
}

.voice-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #d9c79a, #8a6d3b);
}

.voice-who strong {
  display: block;
  font-size: 13px;
}

.voice-who small {
  font-size: 11px;
  color: #8a7d63;
}
```

## 仕組みの解説

引用は figure > blockquote + figcaption が意味的に正しい組み合わせで、「誰の発言か」が構造として伝わります。飾りの引用符は ::before の content で置き、色を枠線と同じ淡色にして本文の邪魔をしない「背景装飾」に留めます。blockquote に position: relative を与えて引用符より手前に重ねています。

## 実装のポイント

複数並べる場合はレスポンシブカードグリッドのレシピと組み合わせると、枚数が変わっても崩れません。

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

お客様の声カードを作ってください。figure > blockquote + figcaptionでマークアップし、::beforeの大きな引用符装飾、円形アバターと名前・肩書きの署名行を付けてください。

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

- [position](https://www.css-dictionary.com/property/position.md)
- [border-radius](https://www.css-dictionary.com/property/border-radius.md)
- [line-height](https://www.css-dictionary.com/property/line-height.md)
- [display-flex](https://www.css-dictionary.com/property/display-flex.md)
- [gap](https://www.css-dictionary.com/property/gap.md)