【HTML】図表であることを示すfigure要素とfigcaption要素

figure要素は、HTML5から新たに追加された要素で、文書の本文（メインフロー）から参照されるようなイラスト・図・写真・コードリストなどを表す際に使います。

本文の流れに影響を与えることなく、独立したポジションを持って、ページの端・専用ページ・別表にして切り離すことができます。

figure要素で画像の中央寄せ

CSS

<style>
　figure {
  　  display: block;
  　  text-align:center;
  	}
</style>

HTML

<body>
 <figure>
  <img src="windows10.jpg" alt="windows10">
 </figure> 
</body>

figure要素を使って画像を中央寄せにしました。

またfigure要素のコンテンツ内容にキャプション・注釈を付けることができます。 <figcaption>タグを使用します。

figcaption要素付き

<body>
 <figure>
  <img src="windows10.jpg" alt="windows10">
  <figcaption>windows10メイン画面</figcaption>
 </figure> 
</body>

ソースコードの配置

下記のように、ソースコード配置などに<code>要素と一緒に使えます。

<body>
<figure>
<figcaption>figure要素の画像使用例</figcaption>
<pre>
<code>
<figure>
<img src="../../images/sample_arrow.gif">
<figure>
</code>
</pre>
</figure>

figure要素の画像使用例


<figure>
<img src="../../images/sample_arrow.gif">
<figure>