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

<figure>はコンテンツ(図、表、写真、ソースコード、リスト、詩歌など)をグループ化します。
「本文から参照にする別表」みたいな扱いのモノをまとめておく役割です。
<figcaption>は、そのキャプション。<figure>の子要素です。
これらはHTML5からの新要素です。

使用する要素 <figure>〜</figure>
<figcaption>〜</figcaption>

「figure」はそのまま、フィギュア= 姿、形、図形、図像といった意味の英単語です。
名前から考えると「図形(<img>要素)」をマークアップする要素みたいですが、
写真や図だけでなく、表、ソースコード、リスト、テキストなど何でもアリで、「本文から参照する」ように、ひとかたまりにまとめる…という要素です。
<figure>の中身は、自己完結(独立)した内容である必要があります。そのページのどこに置いても、他のページにあってもOKな内容のモノで、メインコンテンツから参照されるモノでじゃなきゃ<figure>でまとめられません。
メインコンテンツの一部になってて、他の場所に移したらイミ不明になるものは<figure>の中に入れたらNGです。

そうこう言っててもわかりにくいので、サンプルを作ってみました。

サンプルファイルを用意しました

このブログは XHTML 1.0 Transitional で、このページ内に<figure>は使えませんのでサンプルを用意しました。
→本日のサンプル(honttoni36.html)を別ウィンドウで開く
★開いたHTMLのソースを見てもらえばOKですが、下記から一式をzipでダウンロードできます。
→本日のサンプル(sample22set.zip (37k))をダウンロード

★ブラウザでHTMLやCSSのソースを見るには…「ほんっとにはじめてのHTML-[14-1] ブラウザでソースを見る」をご覧ください

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

<figure>で<img>をまとめたサンプルです。

クリックするとサンプルHTMLが開きます。

ソースはこちら。

<figure class="samp">
<figcaption>著作権フリーの写真素材集CDからの食材の写真です。</figcaption>
<img src="img/samp36_photo1.jpg" width="213" height="150">
<img src="img/samp36_photo2.jpg" width="213" height="150">
<img src="img/samp36_photo3.jpg" width="213" height="150">
</figure>

このサンプルでは、写真を3つ並べてグループ化していますが、別に1つでもOKです。
また、キャプションの<figcaption>を写真の上部に配置していますが、写真の下に入れるのもOK。
ただし、<figcaption>は<figure>の中に1つだけしか置けません。

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

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

クリックするとサンプルHTMLが開きます。

ソースはこちら。

<p>この部分のCSSのソースコードは<a href="#02">CSSソースコード02</a>のとおりです。</p>
<figure id="02">
<figcaption>CSSソースコード02</figcaption>
<pre><code>figure {border: 1px solid #CCC; padding: 20px; margin:0.5em 0 0.5em;}
figcaption {display:block; font-weight: bold;}
article section p {margin: 2em 0px 0px; padding: 0px;}</code></pre>
</figure>

このサンプルでは<pre>と<code>によるコンテンツが、<figure>要素によってまとめられています。
<figure>の前の段落<p>で、この<figure>にリンクを設定しておきました(a href="#02")。これで、この<figure>が、他のどの場所にあっても参照できます。
(ってかんじで<figure>は、どこからでも参照できる使い方がベストらしいです。)

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

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

クリックするとサンプルHTMLが開きます。

ソースはこちら。

<figure>
<p>春はあけぼの。<br> やうやう白くなりゆく山際、少しあかりて、紫だちたる雲の細くたなびきたる。 </p> <figcaption style="margin-top:1em;">「枕草子(冒頭)」作:清少納言</figcaption> </figure>

このサンプルでは<p>によってまとめられた詩歌を<figure>でまとめています。このサンプルは<p>〜</p>による段落がひとつですが、<p>〜</p>が複数あっても、それが詩などのひと固まりの作品であればOK。<figcaption>でその詩歌のタイトルを付けられます。

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

<figure>でリスト(<ol>)をまとめたサンプルです。

クリックするとサンプルHTMLが開きます。

ソースはこちら。

<figure>
<figcaption>茶碗蒸しの作り方</figcaption>
<ol>
<li>卵をよくときほぐす</li>
<li>卵にだし汁、薄口醤油、みりんを混ぜる</li>
<li>干し椎茸はもどして石づきを取り半分に切る</li>
</ol>
</figure>

リスト(<ul><ol><dl>)は、タイトル(キャプション)を付ける機能がありません。で、この<figure>でまとめれば<figcaption>によってタイトルをつける事が可能で、便利です。

リストについては
「ほんっとにはじめてのHTML:[15-1] リストを作ってみよう ( ul (番号無しリスト))
「ほんっとにはじめてのHTML:[15-2] 番号付きリストを作ろう( ol )
「ほんっとにはじめてのHTML:[15-3] 記述リストを作ろう( dl dt dd )をご覧ください。

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

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

クリックするとサンプルHTMLが開きます。

<table>には、そのタイトルを表示する<caption>という要素がありましたね。

<table>の<caption>は「ほんっとにはじめてのHTML:[16-2] table にタイトルをつけよう(caption)」をご覧ください。

<table>のタイトル以外に、注釈などの説明文を書いておきたい時に、<figure>でまとめて<figcaption>で説明文を添えられるので便利かも。

ソースはこちら。

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

次回予告

いかがでしたか?

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

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2017/08 | 09
- - 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 29 30 31 - -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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