mozilla
Your Search Results

    figure 要素

    HTML5 で導入

    概要

    figure 要素<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>Caption for the awesome picture</figcaption>
    </figure>
    <p></p>
    
    MDN Logo
    MDN Logo
    Fig1. MDN Logo

    例 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>
    
    Get browser details using navigator
              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>
    
    Edsger Dijkstra :-

    "If debugging is the process of removing software bugs,
    then programming must be the process of putting them in"

    仕様

    仕様書 策定状況 コメント
    WHATWG HTML Living Standard Living Standard  
    HTML5 勧告候補  

    ブラウザ実装状況

    機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
    基本サポート 8 4.0 (2.0) 9.0 11.10 5.1
    機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    基本サポート 3.0 4.0 (2.0) 9.0 11.0 5.1 (iOS 5.0)

    関連情報

    ドキュメントのタグと貢献者

    Contributors to this page:
    最終更新者: yyss,