<figure></figure>

更新日
仕様 HTML Living Standard
分類 フロー・コンテンツ / パルパブル・コンテンツ
利用場所 フロー・コンテンツが置ける場所
内容 フロー・コンテンツ / 1つのfigcaption要素とそれに続くフロー・コンテンツ / フロー・コンテンツとそれに続く1つのfigcaption要素

figure要素は、本文から参照される図版（挿絵、図表、写真、ソースコード、等）を表します。


<figure>

参照される図版を表します

</figure>

figure要素は、自己完結した単独のユニットとして参照されます。離れた場所に配置した場合でも、本文には影響が出ない内容で使用することができます。

図版にキャプション（タイトルや説明）を付けたい場合は、figure要素内の最初か最後のどちらかにfigcaption要素を配置します。

次の例では、figure要素を切り離しても本文には影響が出ないことになります。（yamada.jpg は山田君の顔写真だと思ってください）

<p>デザインは山田太郎が担当しています。</p>

<figure>
<p><img src="yamada.jpg" alt="山田太郎の写真"></p>
</figure>

<p>これまで多数のWebサイトをデザインしており、 ...</p>

実際に切り離すと次のようになります。（別のページへ切り離すことも可能です）

<section>

<h3>Webデザインについて</h3>

<p>デザインは<a href="#yamada">山田太郎</a>が担当しています。</p>
<p>これまで多数のWebサイトをデザインしており、 ...</p>
...

</section>

<section>

<h3>スタッフ紹介</h3>

<figure id="yamada">
<figcaption>山田太郎</figcaption>
<p><img src="yamada.jpg" alt="山田太郎の写真"></p>
<p>Webデザイン歴10年。ポップなデザインを得意としています。</p>
</figure>
...

</section>

次のように、写真と本文が密接に関係している場合は、figure要素を使うのは適切ではありません。（この場合、写真を切り離してしまうと文章が成立しません）

<p>久しぶりの再会だったので、記念に写真を撮っておきました。</p>

<p><img src="yamada_kun.jpg" alt="お店の前に立つ山田君と私。"></p>

<p>右側に写っているのが山田君です。この後二人で ...</p>

要素のデフォルトスタイル

対応しているブラウザでは、この要素の上下に1em、左右に40px程度のマージンが入ります。

figure要素内のテキストです
旧HTMLからの変更点
  • HTML5：figure要素が定義されました。
  • HTML5.1：figcaption要素の配置位置に関する制限が解除されました。（figure要素内の任意の位置に配置が可能）
  • HTML LS：figcaption要素の配置位置が再び制限されました。（figure要素内の最初か最後のどちらかに配置が可能）
  • HTML LS：要素カテゴリーがセクショニング・ルートではなくなりました。［2022/07/05］

使用例

図版として写真を配置した例

...

<p>鹿児島の海は青く、そして街には灰が舞っていた。（目が痛い…）</p>

<figure>
<p><img src="kagoshima1.jpg" alt="写真：鹿児島の青い空と海。" width="200" height="150">
<img src="kagoshima2.jpg" alt="写真：雲がかかった桜島。" width="200" height="150"></p>
</figure>

<hr>

<p>翌朝、私たちは霧島に向けて出発した。海沿いの国道を ...</p>
表示例
...

鹿児島の海は青く、そして街には灰が舞っていた。（目が痛い…）

写真：鹿児島の青い空と海。 写真：雲がかかった桜島。

翌朝、私たちは霧島に向けて出発した。海沿いの国道を ...

図版としてソースコードを配置した例

<p>marginプロパティを使用することで、figure要素の左右のインデント幅を調整することができます。</p>

<figure>

<figcaption>marginプロパティの使用例</figcaption>

<pre>
<code>figure { margin: 1em 20px; }</code>
</pre>

<p>この例では、左右に20pxのマージンを指定しています。</p>

</figure>

<p>デフォルトではマージンが入らないブラウザもあるので、このプロパティを使ってスタイルを整えておくことをお勧めします。</p>
表示例

marginプロパティを使用することで、figure要素の左右のインデント幅を調整することができます。

marginプロパティの使用例
figure { margin: 1em 20px; }

この例では、左右に20pxのマージンを指定しています。

デフォルトではマージンが入らないブラウザもあるので、このプロパティを使ってスタイルを整えておくことをお勧めします。