figure 要素

HTML <figure> 要素は図表などの自己完結型のコンテンツを表す要素です。多くの場合、キャプション (<figcaption>) を伴って使用され、単独のユニットとして参照されます。

属性

この要素には、すべての要素で使用可能な グローバル属性 以外に指定可能な属性はありません。

使用上の注意

• この要素は通常、「ドキュメントの主なフローの中から参考文献として参照されるが、メインのフローに影響を与えることなく別ページまたは付録に移動することが可能な画像、実例、図表、コード断片あるいは図表など」に対し用います。
• セクショニングルート となります。<figure> 要素のコンテンツのアウトラインは、ドキュメントの主要なアウトラインから除外されます。
• キャプションは <figure> 要素の内部に (最初または最後の子要素として)配置した <figcaption> 要素によって表すことができます。

例

例 1

<!-- 使用例 -->
<figure>
  <img
  src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
  alt="An awesome picture">
</figure>
<p></p>
<!-- figcaption 要素と併用する場合の例 -->
<figure>
  <img
  src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
  alt="An awesome picture">	
  <figcaption>Fig1. MDN Logo</figcaption>
</figure>
<p></p>

例 2

<figure>
  <figcaption>Get browser details
using navigator</figcaption>
  <pre>
function NavigatorExample() {
  var txt;
  txt = "Browser CodeName: " + navigator.appCodeName;
  txt+= "Browser Name: " + navigator.appName;
  txt+= "Browser Version: " + navigator.appVersion ;
  txt+= "Cookies Enabled: " + navigator.cookieEnabled;
  txt+= "Platform: " + navigator.platform;
  txt+= "User-agent header: " + navigator.userAgent;
}            
  </pre>
</figure>

function NavigatorExample() {
  var txt;
  txt = "Browser CodeName: " + navigator.appCodeName;
  txt+= "Browser Name: " + navigator.appName;
  txt+= "Browser Version: " + navigator.appVersion ;
  txt+= "Cookies Enabled: " + navigator.cookieEnabled;
  txt+= "Platform: " + navigator.platform;
  txt+= "User-agent header: " + navigator.userAgent;
}

例 3

<figure>
  <figcaption><cite>Edsger Dijkstra :-</cite></figcaption>
  <p>"If debugging is the process of removing software bugs,
  <br />
  then programming must be the process of putting them in"</p>
</figure>

<figure>
 <p>
  Depression is running through my head,<br>
  These thoughts make me think of death,<br>
  A darkness which blanks my mind,<br>
  A walk through the graveyard, what can I find?....
 </p>
 <figcaption><cite>Depression</cite>.
  By: Darren Harris</figcaption>
</figure>