お客さまの声

LPの節 ／ パターン集トップ

お客さまの声2件。blockquoteとfigcaptionの正しい組み方

プレビュー#

コピーする#

上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。

<section class="voices page" id="voices" aria-labelledby="voices-title">
  <h2 id="voices-title">お客さまの声</h2>
  <div class="voices__list">
    <figure class="voice">
      <blockquote class="voice__quote">
        <p>豆を選ぶ時間が楽しみになりました。焙煎した日を教えてもらえるのもうれしい。</p>
      </blockquote>
      <figcaption class="voice__by">水瀬さん（30代・週末に来店）</figcaption>
    </figure>
    <figure class="voice">
      <blockquote class="voice__quote">
        <p>定期便で毎月違う産地が届きます。淹れ方のメモが同封されているので迷いません。</p>
      </blockquote>
      <figcaption class="voice__by">榛名さん（自営業・豆の定期購入）</figcaption>
    </figure>
  </div>
</section>

.voices__list {
  margin-block-start: var(--space-5);
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.voice {
  margin: 0;
  padding: var(--space-5);
  background: var(--color-surface);
  border-inline-start: 3px solid var(--color-accent);
  display: grid;
  gap: var(--space-3);
}
.voice__quote {
  margin: 0;
}
.voice__quote p {
  margin: 0;
  line-height: var(--leading-body);
}
.voice__by {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

確認する#

• 名前と属性は figcaption に置き、blockquote の中に入れていない
• 声は一文をそのまま使い、要約で作文していない
• 名前は架空か、掲載の許可を得たものにしている

関連#

• 構図のパターン
• 視覚階層
• 出発点のCSS