Skip to content

Latest commit

 

History

History
177 lines (144 loc) · 5.24 KB

index.md

File metadata and controls

177 lines (144 loc) · 5.24 KB
Raw
title slug l10n
<figure>: キャプションが付けられる図要素
Web/HTML/Element/figure
sourceCommit
e04d8d2766c468f149445c0bf438d09f9b2d188c

{{HTMLSidebar}}

<figure> は HTML の要素で、図表などの自己完結型のコンテンツを表し、任意で {{HTMLElement("figcaption")}} 要素を使用して表されるキャプションを付けることができます。図、すなわちキャプションとその中身は一単位として参照されます。

{{EmbedInteractiveExample("pages/tabbed/figure.html","tabbed-shorter")}}

属性

この要素にはグローバル属性のみがあります。

使用上のメモ

  • ふつう <figure> は画像、イラスト、グラフ、コードの断片など、文書の本文の流れから参照されるものの、本文の流れに影響を与えることなく、文書のほかの部分や付録に移動することが可能なものに用います。
  • キャプションは <figure> 要素の中に（最初または最後の子要素として）{{HTMLElement("figcaption")}} 要素を挿入することで表すことができます。図の中で最初に見つかった最初の <figcaption> 要素が図のキャプションとして表示されます。

例

画像

<!-- 単なる画像 -->
<figure>
  <img src="favicon-192x192.png" alt="美しい MDN のロゴ" />
</figure>

<!-- キャプションが付いた画像 -->
<figure>
  <img src="favicon-192x192.png" alt="美しい MDN のロゴ" />
  <figcaption>MDN ロゴ</figcaption>
</figure>

結果

{{EmbedLiveSample("Images", "100%", 375)}}

コードスニペット

<figure>
  <figcaption><code>navigator</code> を用いてブラウザーの詳細を取得</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  + "; ";
  console.log("NavigatorExample", txt);
}
  </pre>
</figure>

結果

{{EmbedLiveSample("Code_snippets", "100%", 250)}}

引用

<figure>
  <figcaption><b>Edsger Dijkstra:</b></figcaption>
  <blockquote>
    デバッグがソフトウェアのバグを取るプロセスであるならば、プログラミングはそれを入れるプロセスだ。
  </blockquote>
</figure>

結果

{{EmbedLiveSample('Quotations')}}

詩

<figure>
  <p style="white-space:pre">
    Bid me discourse, I will enchant thine ear, Or like a fairy trip upon the
    green, Or, like a nymph, with long dishevelled hair, Dance on the sands, and
    yet no footing seen: Love is a spirit all compact of fire, Not gross to
    sink, but light, and will aspire.
  </p>
  <figcaption><cite>Venus and Adonis</cite>, by William Shakespeare</figcaption>
</figure>

結果

{{EmbedLiveSample("Poems", "100%", 250)}}

技術的概要

コンテンツカテゴリー フローコンテンツ, 知覚可能コンテンツ.
許可されている内容 {{HTMLElement("figcaption")}} 要素とそれに続くフローコンテンツ、またはフローコンテンツとそれに続く {{HTMLElement("figcaption")}} 要素、またはフローコンテンツ
タグの省略 なし。開始タグと終了タグの両方が必須です。
許可されている親要素 フローコンテンツを受け入れるすべての要素
暗黙の ARIA ロール figure
許可されている ARIA ロール 子孫に figcaption がない場合: any、それ以外の場合は許可されているロールなし
DOM インターフェイス {{domxref("HTMLElement")}}

仕様書

{{Specifications}}

ブラウザーの互換性

{{Compat}}

関連情報

  • {{HTMLElement("figcaption")}} 要素