Tech

figureの中身って画像とキャプション以外も入れていいんだ

公開
Tech HTML/CSS

HTMLで <figure> 要素を扱う場面のサンプルコードとして、よく以下の形が挙げられます。

<figure>
  <img src="..." alt="">
  <figcaption>画像キャプション</figcaption>
</figure>

（ <figcaption> 使う時の alt に何を入れりゃいいんでしょうね……などの疑問はありますが）使い方としてはオーソドックスで、「figure」＝「図」の意味にも合致していて分かりやすい例になります。

しかしこの用法ばかりが取り沙汰されるため、 <figure> ＝ 図表・またはキャプション付き画像を実装するためのタグのように捉えられていないでしょうか。

個人的には画像を囲むことで単体で成立する図であることを明示的に示したり、画像 <img> や動画 <video> などのメディアとキャプション <figcaption> の関係を紐づけるためのタグとして捉えており（これも別に間違いではないはずなのですが……）、その意味ではHTMLのルール上でも実質的には内包するタグの制限があるように無意識的に考えて使ってしまっていました。

──ある時、 <figure style="border-radius: 10px; overflow: clip;"><img></figure> のように外側から角丸にした図の要素に、あとから注釈として <figcaption> を足すことになったのですが、そうなると <figcaption> が挟まることで <figure> ＝ <img> がぴったり揃うサイズではなくなってしまうため、キャプションのあり／なしにより画像の下端が丸くならない 現象が発生しました。

この問題（？）の対策としては <figcaption> ではなく <figure> の外に出して <p><small>〜 で注釈を実装したり、角丸CSSを画像自体 figure > img { border-radius: 10px; } に付ける方法などがあるにはあるのですが……実際のところはもっと単純で <figure> 内の <img> を <div> や <span> など角丸用のラッパー要素で囲むだけです。

<!-- 画像を角丸にしたりキャプションの行を増やしたりした例 -->
<figure>
  <div style="border-radius: 10px; overflow: clip;">
    <img src="..." alt="">
  </div>
  <figcaption>
    <p>画像キャプション1</p>
    <p>画像キャプション2</p>
  </figcaption>
</figure>

えっ、これ入るんだ……って感覚にもなってしまうのですが、実際にこのサンプルコード上でHTML上の制限が設けられているのは「画像キャプションである <figcaption> は必ず <figure> の最初または最後の子要素にする」ということだけで、 <figure> の中身に置くタグの種類に特に制限はありません。つまり <figure> の中身の画像については（もちろん <figcaption> の中も）好きなタグで装飾してよいということになります。

https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/figure

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

• ふつう <figure> は画像、イラスト、グラフ、コードの断片など、文書の本文の流れから参照されるものの、本文の流れに影響を与えることなく、文書のほかの部分や付録に移動することが可能なものに用います。

つまり <figure> 内で「自己完結」する形の内容であればメディアに限らず本来は何でもよく、特に内包するタグの制限もほぼ設けられていません。実際にMdNでは「詩」のような文章のコンテンツも <figure> 要素で囲むことができる例が紹介されており、HTMLタグ構造としては <figure><p>詩の内容</p><figcaption>出典・作者名</figcaption></figure> が使われています。

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

「文字」に「キャプション（注釈）」が付いていると考えるとなんだか変な感じかもですが、そういった意味では <section> <article> などと近い用法で使えるタグになっています。article（記事）とfigure（図）の用法については判断が難しい場面もありますが、上記のように単体の「詩」であればそれぞれが <figure> で、「詩集」のようにいくつかを蒐集したものであれば <article> の中に複数の <figure> が並ぶ、といった区分けがある程度正しいように思います。

そうすると <p> が使えるなら先ほどの角丸の例のように画像を角丸にするためだけの装飾である <div> や <span> などの利用にも特に制限がないことは自明の理ではありました。

<figure> 自体、実装者が意図的に付ける（≒最悪存在せずとも表示に支障はない）タイプのタグではあるため、いざ使おう！となると冒頭のサンプルコードを思い浮かべることが多いため勘違いしてしまいがちでしたが、もっと気軽にマークアップできる要素なんだという学びになりました。