figure 要素

概要

HTML <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>

例 4

<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>

仕様

ブラウザ実装状況

関連情報

• <figcaption> 要素