図版とキャプション

タイポ ／ パターン集トップ

画像＋説明を1単位に。width/height でCLSを防ぐ

プレビュー#

コピーする#

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

<figure class="figure">
  <img src="photo.jpg" alt="余白を16pxでそろえた組と、8・32・96pxで差をつけた組"
    width="800" height="500" loading="lazy">
  <figcaption>余白の差が、グループの境界になります。</figcaption>
</figure>

.figure {
  margin: var(--space-6) 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--space-3);
}
.figure img {
  inline-size: 100%;
  block-size: auto;
  display: block;
  background: var(--color-border);
  aspect-ratio: 8 / 5;
  object-fit: cover;
}
.figure figcaption {
  margin-block-start: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-body);
}

確認する#

• img に width/height がある
• 装飾画像以外は alt が具体的
• figcaption が画像と1つの figure に入っている

関連#

• 字間と行間
• 速度の指標
• 構図のパターン