figcaptionタグ 👉 figureの注釈を表す

HTMLの<figcaption>フィギュア・キャプションタグは、親要素の<figure>の内容にキャプション(注釈)をつける役割をします。具体的には<figure>内に含まれるの図表や写真、イラスト、引用文についての説明などを記入します。

<figure>
  <img src="/images/ogp.png" alt="コードキッチンの画像">
  <figcaption>コードキッチンのカバー画像</figcaption>
</figure>

✍️<figure><figcaption>は合わせて使います。<figure>については、こちらのページで解説しています。

figcaptionタグの使い方

figureの中で使う

<figure>
  <img src="/images/ogp.png" alt="コードキッチンの画像">
  <figcaption>コードキッチンのカバー画像</figcaption>
</figure>

👆<figcaption>は親要素が<figure>でなければなりません。単体で使用するものではありません。

キャプションをコンテンツの前に配置してもOK

<figure>
  <figcaption>キャプションを前に</figcaption>
  <img ~>
</figure>

👆キャプション(<figcaption>)の配置場所は、コンテンツ(図表や画像など)の前でも後でもOKです。

キャプションの中にリンクや出典を入れてもOK

リンクを含める例
<figure>
  <img ~>
  <figcaption>
    日本の人口推移(<a href="https://www.stat.go.jp/">統計局のウェブサイト</a>より)
  </figcaption>
</figure>

👆必要であればキャプションの中にリンクなどの記述コンテンツを含めることができます。

citeを含める例
<figure class="figure-quote">
  <blockquote>
    <p>成功する人は「思い通りに行かない事が起きるのはあたりまえ」という前提で挑戦している。</p>
  </blockquote>
  <figcaption>
    <cite>トーマス・エジソン名言集</cite>
  </figcaption>
</figure>

👆引用文であれば、引用元の名前(<cite>タグ)を含めると良いでしょう。

複数の画像が含まれる場合、それら全体への注釈を表す

<figure>
  <img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1556089793/posts/paaf7thkxsvl4hvoizzc.png" alt="ハッカーの画像">
  <img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1556097503/posts/mfskerv6nmoag9sjoudm.png" alt="ハッカーの画像">
  
  <figcaption>想像上のハッカー</figcaption>
</figure>

👆<figure>内に複数のコンテンツ(画像等)が含まれる場合、<figcaption>はそれら全体に対するキャプションとなります。
1つのキャプションで表現できないのであれば、そもそも別の<figure>に分けて載せるべきです(<figure>は1つのまとまりを表すものです)。

ブラウザ対応状況

🖥デスクトップ

  • Chromeのアイコン
    Chrome
    26〜
  • Safariのアイコン
    Safari
    6.1〜
  • Firefoxのアイコン
    Firefox
    21〜
  • Edgeのアイコン
    Edge
    12〜
  • IEのアイコン
    IE
    11で部分的に対応

📱モバイル

  • Android Chromeのアイコン
    Android Chrome
    79〜
  • iOS Safariのアイコン
    iOS Safari
    7〜

IE対応のためにはCSSにfigure,figcaption { display: block; }を追加します。

caniuse.comで詳しく見る