figure要素

写真やグラフなど1まとまりのコンテンツグループを表します。figcaption要素を使ってコンテンツに対する説明を付与することもできます。

サンプルコード

<figure>
	<img src="img/sample.jpg" alt="サンプル写真">
	<figcaption>例えば、このようにimg要素で画像を配置し、画像の解説をここへ記述するような使い方をします。</figcaption>
</figure>

カテゴリー

フローコンテンツ、セクショニングルート、パルパブルコンテンツ
コンテンツモデル

下記いずれかの形を選ぶことができます。
・フローコンテンツの後にfigcaption要素を設置
・figcaption要素の後ろにフローコンテンツを設置
・フローコンテンツ
使用ケース

フローコンテンツが期待される場所

属性

グローバル属性: グローバル属性のみ使用することができます。
グローバル属性について詳しくは、「HTMLのグローバル属性」をご覧ください。

使用例

記事ページを想定したHTMLサンプルコード

見出しや記事本文テキストに対してはh1要素、p要素を使い、写真画像を配置したいところでfigure要素を使用しています。
解説部分ではfigcaption要素によって説明を加えています。

<article>
	<h1>アラスカから良い豆が入荷しました</h1>
	<p>1月のアラスカは極寒です。<br>この時期は夜空にオーロラを望むこともできます。</p>
	<p>そんなアラスカから、カカオの香りが美味しいコーヒーが届きました。</p>
	<figure>
		<img src="images/alaska_coffee.jpg" alt="アラスカ限定の豆">
		<figcaption>カカオの香りが香ばしい、日本では中々手に入れることのできない希少な豆</figcaption>
	</figure>
</article>

ブラウザでの表示例

こちらの記事は役に立ちましたか？

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます！
運営の参考にさせていただきます。