[36] コンテンツをまとめる figure と、そのキャプションの figcaption

最終更新日:2017年11月07日  (初回投稿日:2012年02月14日)

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

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

使用する要素 <figure>〜</figure>
<figcaption>〜</figcaption>
本日のINDEX
  1. <figure>は「自己完結するもの」だけに
  2. <figcaption>は <figure>内に1個だけ
  3. <figure> と <figcaption> のサンプル
    1. <figure> で <img>をまとめよう
    2. <figure> でソースコードをまとめよう
    3. <figure> でテキストをまとめよう
    4. <figure> でリストをまとめよう
    5. <figure> で <table>をまとめよう

参考:
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>内に1個だけ

<figcaption>要素<figure>要素の子要素。
<figure>要素の中に1個しか使えません。無くてもOK(0個でも構わない)

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}
CSS B-1

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> でタイトルも付けられるし。

本日のINDEX
  1. <figure>は「自己完結するもの」だけに
  2. <figcaption>は <figure>内に1個だけ
  3. <figure> と <figcaption> のサンプル
    1. <figure> で <img>をまとめよう
    2. <figure> でソースコードをまとめよう
    3. <figure> でテキストをまとめよう
    4. <figure> でリストをまとめよう
    5. <figure> で <table>をまとめよう

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;内に1個だけ</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>をまとめたサンプルです。

公園の駐車料金
春期:3月・4月 夏期:5月〜8月 秋期:9月・10月 冬期:11月〜2月
400円/1時間
*17時以降無料
550円/1時間 400円/1時間
*17時以降無料
終日無料

・季節によって駐車料金が異なります。
・19時〜05時は閉門いたします。ご注意ください。

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では「役割」によって詳しく分類されています。

関連記事
この記事をはてなブックマークに追加

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

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
01 | 2018/02 | 03
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.