2020.01.25 2022.12.28

<figure>要素の使い方・サンプルコード

Sara

<figure>

<figure>要素は写真・図・表などのまとまりで、自己完結型のコンテンツを意味します。
<figcaption>要素でキャプション（表題）を付けることができます。

<figure> 要素を省いたときに他の文書の流れに影響を与えないようにする必要があります。

HTML

<h3>XXX株式会社</h3>
<figure>
  <img src="office.jpg" alt="オフィスの様子">
  <figcaption>オフィスの様子</figcaption>
</figure>

実行結果

以下のコードでは <figure> 要素を省くと文書の流れに影響が出るので間違った使い方になります。

HTML

<h3>XXX株式会社</h3>
<p>こちらがオフィスの様子です。</p>
<figure>
  <img src="office.jpg" alt="オフィスの様子">
  <figcaption>オフィスの様子</figcaption>
</figure>

実行結果