HTML & CSS

最終更新日:
公開日:

リファレンス

HTML

フィギュア

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>

ブラウザでの表示例