CSS辞書
UIレシピ集に戻る

お客様の声カード

カードBaseline 広く利用可能

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

プレビュー

Live

プレビュー枠は右下をドラッグすると高さを変えられます

コードを編集して試す

書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。

HTML
CSS

仕組みの解説

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

実装のポイント

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

AIに依頼するときの文例

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

使っているプロパティ