ITコラム

laptop computer with blog web page on screen

ITコラム

2017.01.10

HTML5 【 figure 】 ~ 本文から参照されるコンテンツ

HTML5の新要素の1つにfigure要素があります。figure要素は、同じくHTML5の新要素であるfigcaption要素でキャプションを伴って、画像などをグループ化することができます。
今回は、このfigure要素の機能や書き方などを紹介します。

目次

1.figure要素とは
2.figure要素で画像をグループ化
3.figure要素でソースコードをグループ化
4.figure要素でテキストをグループ化
5.figure要素でテーブルをグループ化
 

1.figure要素とは

 
figure要素は、コンテンツをグループ化する要素です。

figure(フィギュア)という名前から考えると、画像や図形などimg要素をマークアップする要素のようなイメージを持つかもしれませんが、img要素だけでなく、ソースコード、リスト、テキストなど何に対してもグループ化する際に使用できる要素です。

それでは、他のグループ化要素であるp要素やdiv要素とfigure要素とは、何が違うのでしょうか。

figure要素の一番の特徴は、「figure要素でグループ化されたコンテンツは、本文から参照されるコンテンツとなる」ことです。

そのために、グループ化される内容は、独立した内容である必要があります。そのページのどこに置いても、他のページにあってもOKな内容のモノで、メインコンテンツから参照されるのに妥当な内容でなければfigure要素でグループ化するのに適しません。

メインコンテンツの一部で、他の場所に移したら無意味になるものなどをfigure要素の中に入れるのもNGです。

そして、figure要素の中に、figcaption要素を使って、画像やソースコード、リスト、テキストなどにキャプションや注釈を付けることができます。

figcaption要素でキャプションや注釈を付けることによって、本文から参照される内容をより明確に表すことができます。

▲目次へ戻る

 

2.figure要素で画像をグループ化

 
figure要素で画像をグループ化してみます。

日本三景

HTMLは下の通りです。

<figure>
<figcaption>日本三景</figcaption>
<img src="img/fig_1.jpg" width="250" height="150">
<img src="img/fig_2.jpg" width="250" height="150">
<img src="img/fig_3.jpg" width="250" height="150">
</figure>

写真を3つ並べてグループ化していますが、複数必要なわけではなく1つでもOKです。
また、キャプション<figcaption>は、写真の上部でなくても、写真の下に入れてもOKです。
ただし、<figcaption>は<figure>の中に1つだけしか入れられません。

▲目次へ戻る

 

3.figure要素でソースコードをグループ化

 
<figure>でソースコードをまとめてみます。

この部分のCSSのソースコードは次CSSソースコード3のとおりです。

CSSソースコード3
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;}

 
HTMLは下の通りです。

<p>この部分のCSSのソースコードは<a href="#03">CSSソースコード3</a>のとおりです。</p>
<figure id="03">
<figcaption>CSSソースコード3</figcaption>
<blockquote><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></blockquote>
</figure>

ここでは<pre>と<code>によるコンテンツが、<figure>要素によってまとめられています。
<figure>の前の段落<p>で、この<figure>にリンクを設定しておきました(a href=”#03″)。これで、この<figure>が、他のどの場所にあっても参照できます。

▲目次へ戻る

 

4.figure要素でテキストをグループ化

 
<figure>でテキストをまとめてみます。

山のあなたの 空遠く
幸住むと 人のいふ
噫われひとと 尋めゆきて
涙さしぐみ かへりきぬ
山のあなたに なほ遠く
幸住むと 人のいふ

山のあなた(カール・ブッセ)

HTMLは下の通りです。

<figure>
<p>
山のあなたの 空遠く
幸住むと 人のいふ
噫われひとと 尋めゆきて
涙さしぐみ かへりきぬ
山のあなたに なほ遠く
幸住むと 人のいふ
<figcaption>山のあなた(カール・ブッセ)</figcaption>
</p>
</figure>

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

▲目次へ戻る

5.figure要素でテーブルをグループ化

<figure>でテーブルをまとめてみます。

figure要素のまとめ
figure要素は画像以外にも、コードや表など色んな挿しコンテンツに使える キャプションが付かないものはfigure要素を無理に使わなくて良い figure要素を使う時は、それが文書に取ってどんな意味を持つのかを考えることが大事

HTMLは下の通りです。

<figure>
<figcaption>
figure要素のまとめ
</figcaption>
<table>
<tr>
<td>figure要素は画像以外にも、コードや表など色んな挿しコンテンツに使える</td>
<td>キャプションが付かないものはfigure要素を無理に使わなくて良い</td>
<td>figure要素を使う時は、それが文書に取ってどんな意味を持つのかを考えることが大事</td>
</tr>
</table>
</figure>

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.