HTML <figure> タグ

定義と使用方法

<figure> タグは、図、グラフ、写真、コードリストなど、自包含の内容を規定しています。

ただし <figure> 要素の内容は主内容に関連していますが、位置は主内容の流れから独立しています。それを削除しても、文書の流れに影響を与えません。

ヒント：使用してください <figcaption>要素 ための <figure> 要素にタイトルを追加します。

参照もしくは

HTML DOMリファレンスマニュアル：Figureオブジェクト

インスタンス

例1

<figure>要素を使用して文書内の写真をマークアップし、<figcaption>要素を使用して写真のタイトルを定義します：

<figure>
  <img src="trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>図1 - イタリアのプリア地方のTrulli。</figcaption>
</figure>

実際に試してみる

例2

CSSを使用して<figure>と<figcaption>のスタイルを設定します：

<html>
<head>
<style>
figure {
  border: 1px #cccccc solid;
  padding: 4px;
  margin: auto;
}
figcaption {
  background-color: black;
  color: white;
  font-style: italic;
  padding: 2px;
  text-align: center;
}
</style>
</head>
<body>
<figure>
  <img src="trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>図1 - イタリアのプリア地方のTrulli。</figcaption>
</figure>
</body>
</html>

実際に試してみる

グローバル属性

<figure> タグは、以下のイベント属性をサポートしています HTMLでのグローバル属性。

イベント属性

<figure> タグは、以下のイベント属性をサポートしています HTMLでのイベント属性。

デフォルトの CSS 設定

ほとんどのブラウザは以下のデフォルト値を使用して表示します <figure> 要素：

figure {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}

実際に試してみる

ブラウザのサポート

表の数字は、その要素を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
8.0 9.0 4.0 5.1 11.0

コメント：<figure> タグはHTML 5の新しいタグです。