画像したい（figure）

<figure>
    <img src="画像のパス" alt="画像の説明">
    <figcaption>画像のキャプション</figcaption>
</figure>

figureタグは、画像や図表など、本文から独立して参照できるコンテンツをまとめて表示するタグです。 imgだけでなくtableやpre、blockquoteなども子要素に持てる汎用的なタグです。

注釈

img専用のタグと思われがちですが、画像以外のコンテンツもまとめて表示できます。

figcaptionタグでキャプションを追加できます。 figureの最初か最後の子要素として置く必要があり、途中に挟むことはできません。 figcaptionは省略可能で、画像だけをfigureで囲むこともできます。

CSSしたい（figure / figcaption）

figure {
    margin: 0;
}

figure img {
    max-width: 100%;
    height: auto;
    display: block;
}

figcaption {
    font-size: 0.875rem;
    color: #666;
    text-align: center;
    margin-top: 0.5rem;
}

ブラウザのデフォルトスタイルではfigureに左右のmarginが付いています。 意図しないインデントにならないよう、margin: 0でリセットしておきます。

figureの中のimgには画像したい（img）で紹介した設定を適用しておくとよいです。

figcaptionは本文よりやや小さめの文字サイズ、薄めの色にしておくと、補足情報であることが視覚的にも伝わりやすくなります。

リファレンス

• figure

• figcaption