ほんっとにはじめての HTML5 と CSS3

<figure>要素 と <figcaption>要素 は、HTML5からの新要素です。

<figure>要素は「本文から参照にする別表」的なモノを、まとめておく役割。
<figcaption>要素は <figure>の子要素です。そのキャプションテキストに使います。

参考：
The figure element - HTML 5.1 2nd Edition | W3C Recommendation
The figcaption element - HTML 5.1 2nd Edition | W3C Recommendation

● 2017年11月：サンプルを本文中に表示し、別ページのサンプルを削除しました。

<figure>は「自己完結するもの」だけに

<figure>要素は、例えば画像（<img>要素）を複数ひとまとめにし、「参照」するカタチで表示できます。
そしてその「キャプション」テキストを付けたければ <figcaption>要素を使います。

<figure>要素でマークアップできるのは「自己完結」するものだけ。
そのページのどこに置いても、他のページにあってもOKな内容のグループです。
本文の一部になっている（無いと本文が成り立たない）モノには使えません。

「figure」はそのまま、フィギュア= 姿、図形、図像といった意味の英単語ですが、写真や図（<img>要素）だけでなく、表（<table>）、ソースコード（<pre>）、リスト（<ul> <ol> <dl>）、テキストなど、「本文から参照するグループ」にしたいものなら何でも入れられます。

<figcaption>は <figure>内に１個だけ

<figcaption>要素は <figure>要素の子要素。
<figure>要素の中に１個しか使えません。無くてもOK（０個でも構わない）

HTML5 の仕様では「最初か最後の子要素」とされていましたが、HTML5.1 では、どこに置いても良くなりました。

<figure> と <figcaption> のサンプル

どんなシーンで使うか、サンプルを作ってみました。

<figure> で <img>をまとめよう

<figure>で<img>をまとめたサンプルです。<p>要素もグルーピングしています。

＊この画像は「Pexels」で「Forest（森）」で検索したものの一部です

HTMLはこちら。

<figure class="sample">
<figcaption>無料写真素材ストックサイトからチョイスした画像</figcaption>
<img src="image/pexels-photo1.jpg">
<img src="image/pexels-photo2.jpg">
<p>
＊この画像は<a href="https://www.pexels.com/" target="_blank">「Pexels」</a>で「Forest（森）」で検索したものの一部です</p>
</figure>

サンプルでは、複数の要素をグループ化していますが、<img>要素1つでもOK。
また、キャプションの<figcaption>を写真の上部に配置していますが、写真の下でも、2つの写真の真ん中でもOK。

このサンプルは、例えば、本文で「無料写真素材ストックサイト」を紹介しているページに置いた「参照部分」です。
その文章に接した位置に無くても（例えばページの一番下にあっても）問題なく、削除しても本文の内容に変化がない、単なる「参照部分」なので <figure>を使えます。

これが、例えば本文中で「僕は下の2つの写真をチョイスしました」と言っているなら、<figure>は使えません。無いと（はぁ？ どの写真？って）本文が成り立たず、自己完結していない、本文の一部だから。
その場合は <p>要素や <div>要素などでグルーピングします。またはグルーピングしないで <img>要素を2つ置いとく。

ちなみに、サンプルの CSSはこちら。
<figure>要素・<figcaption>要素は 特にデフォルトスタイルはありません。
サンプルでは <figure>要素に囲み罫をつけたり、 <figcaption>要素を「font-weight:bold」で太字にしたりしています。

figure.sample {
	border:1px solid #ccc;
	padding:.5em 1em;
	margin:1em 0}
figure.sample figcaption {font-weight:bold; margin:.5em 0}
figure.sample p {margin:.5em 0 0}
figure.sample img {
	line-height:0;
	width:35%;
    vertical-align:top;
	margin:0 1em 0 0}

<figure> でソースコードをまとめよう

<figure>でソースコードをまとめたサンプルです。

figure.sample {
	border:1px solid #ccc;
	padding:1em 1em;
	margin:.5em 0}

HTMLはこちら。

<figure class="sample" id="css-b-1">
<pre><code>figure.sample {
	border:1px solid #ccc;
	padding:.5em 1em;
	margin:1em 0}</code></pre>
<figcaption>CSS B-1</figcaption>
</figure>

このサンプルでは <pre>要素と <code>要素による CSSのコードを <figure>要素でまとめています。
<figure>要素に idを設定して、ここへリンクを貼れるようにしています。これで、この <figure>が、他のどの場所にあっても（違うページにあっても）参照できます。
このように、<figure>要素は、どこからでも参照できる使い方がベストらしいです。

<pre>要素と <code>要素については
[31] code要素 と pre要素 でソースコードを表示しよう をご覧ください。

<figure> でテキストをまとめよう

<figure>で詩歌などのテキストをまとめたサンプルです。

HTMLはこちら。

<figure class="sample">
    <p>
      春はあけぼの。<br>
      やうやう白くなりゆく山際、少しあかりて、紫だちたる雲の細くたなびきたる。</p>
    <figcaption>清少納言　枕草子（冒頭）</figcaption>
</figure>

このサンプルでは <p>要素によってまとめられた詩歌を、キャプションを付けて <figure>要素ででまとめています。
このサンプルは<p>要素による段落がひとつですが、複数でもOK。

<figure> でリストをまとめよう

<figure>でリスト（<ol>）をまとめたサンプルです。
これは本サイトで使っている「本日のINDEX」。
削除しても本文に影響ない、あったら便利な程度のリストなので <figure> を使っています。<figcaption> でタイトルも付けられるし。

HTMLはこちら。

<figure id="tIndex">
  <figcaption>本日のINDEX</figcaption>
  <ol>
    <li><a href="#">&lt;figure&gt;は「自己完結するもの」だけに</a></li>
    <li><a href="#">&lt;figcaption&gt;は &lt;figure&gt;内に１個だけ</a></li>
    <li><a href="#">&lt;figure&gt; と &lt;figcaption&gt; のサンプル</a>
      <ol>
        <li><a href="#">&lt;figure&gt; で &lt;img&gt;をまとめよう</a></li>
        <li><a href="#">&lt;figure&gt; でソースコードをまとめよう</a></li>
        <li><a href="#">&lt;figure&gt; でテキストをまとめよう</a></li>
        <li><a href="#">&lt;figure&gt; でリストをまとめよう</a></li>
        <li><a href="#">&lt;figure&gt; で &lt;table&gt;をまとめよう</a></li>
      </ol>
    </li>
  </ol>
</figure>

リストは、タイトル（キャプション）を付ける機能がありませんので、 <figcaption>要素でタイトルが付けられると便利です。

リストについては
[15-1] リストを作ろう（ ul要素・li要素 ）
[15-2] 番号付きリストを作ろう（ ol要素・li要素）
[15-3] 説明リストを作ろう（ dl要素・dt要素・dd要素）をご覧ください。

<figure> で <table>をまとめよう

<figure>要素で <table>をまとめたサンプルです。

HTMLはこちら。

<figure class="sample">
<table class="sample1">
<caption>公園の駐車料金</caption>
  <tr>
    <th>春期：3月・4月</th>
    <th>夏期：5月〜8月</th>
    <th>秋期：9月・10月</th>
    <th>冬期：11月〜2月</th>
  </tr>
  <tr>
    <td>400円/1時間<br>＊17時以降無料</td>
    <td>550円/1時間</td>
    <td>400円/1時間<br>＊17時以降無料</td>
    <td>終日無料</td>
  </tr>
</table>
<p>
・季節によって駐車料金が異なります。<br>
・19時〜05時は閉門いたします。ご注意ください。</p>
</figure>

<table>には、そのタイトルを表示する <caption>要素がありますので、ここでは タイトルは<figcaption>要素は使わず <caption>要素を使っています。下部の注釈は <p>要素で付けています。

<caption>要素は、
[16-2] table にタイトルをつけよう（ caption要素 ）をご覧ください。

次回予告

いかがでしたか？　今回でグルーピングのための要素は終わりです。

さて、次回から数回に渡って、HTML5での「要素の分類とルール（カテゴリーとコンテンツ・モデル）」を見ていきましょう。

次回は、HTML5での要素のカテゴリーを見てみましょう。
HTML4 や XHTML1 の時は、要素は「ブロックレベル要素」「インライン要素」なんて分け方だけでしたが、HTML5では「役割」によって詳しく分類されています。

関連記事

• [41] base でベースの URL を示そう
• [40] メタデータ・コンテンツって何？
• （ちょっとメモ）HTML5の文法チェックサイト
• [39] 全要素に使える「HTML5グローバル属性」を見てみよう
• [38-2] 「コンテンツ・モデル」一覧
• [38-1] 「コンテンツ・モデル」で要素のルールを見てみよう
• [37] HTML5要素の「カテゴリー」を見てみよう
• [36] コンテンツをまとめる figure と、そのキャプションの figcaption
• [35] 内容の区切りを示す hr 要素
• [34] 書字方向を指定する bdo要素と 書字方向を隔離する bdi要素
• [33-2] 単語の途中でも改行させるCSS「word-wrap: break-word」
• [33-1] 改行可能位置を示す wbr要素 を使ってみよう
• [32] その他のプログラム関連を示す samp、kbd、var、data要素
• [31-2] pre 要素と同じ表示をするCSS「white-space : pre」
• [31] code要素 と pre要素 でソースコードを表示しよう

Tweet

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します！ (笑)