figure 要素

概要

figure 要素（<figure>）は図表などの自己完結型のコンテンツを表す要素です。多くの場合、キャプション（<figcaption>）を伴って使用され、単独のユニットとして参照されます。メインのフローに関連しつつも、メインのフローとは無関係な位置に配置する事が可能です。この要素は通常、「主なテキストの中から参考文献として参照されるが、メインのフローに影響を与える事無く別ページまたは付録に移動することが可能な画像、実例、図表、コード断片あるいは図表など」に対し用います。

• コンテンツカテゴリ フローコンテンツ、セクショニングルート、パルパブルコンテンツ
• 許可された内容 <figcaption> 要素、もしくは <figcaption> とそれに続く フローコンテンツ、或いはフローコンテンツ。
• タグの省略 不可。開始と終了タグの両方が必要。
• 許可された親要素 フローコンテンツを受け入れる全ての要素
• DOM インターフェース HTMLElement

属性

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

例

例 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>Caption for the awesome picture</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"<br /></p>
</figure>

仕様

ブラウザ実装状況

関連情報

• <figcaption> 要素