株式会社プライムネットワークスタッフが、html5やCSS3、phpなどのWEB技術に関することやワードプレスなどのCMSについて学んだことなどを紹介して行きたいと思います。
HTML5には、イマイチわかりにくいエレメントとして、figure要素があります。
今回は、この要素について調べてみます。
そもそも、このfigure要素は「図表などの自己完結型のコンテンツを表す」要素で、単体で独立したものでなければなりません。
ですので、イメージ画像だからfigure要素で囲えばいいやなんていう単純なものではありません。
というのも、figure自体、その文章から取り除いても文脈に問題がないものでなければならないうえ、さらにその文章からも参照される性質のものであることが前提となっています。
ですので、長い文章の中で、キャッチとして、ちょっとしたイラストや写真を差し込む場合、このfigureは使うことができません。
また、このfigureには、キャプションや注釈をつけることができるオプションとして、figcaptionというものがあり、必要に応じて使用することができます。
例を示すと、
<p>リンゴを食べると、歯茎から血がでませんか？。</p>
<figure id="apple">
<img src="http://blog.cnobi.jp/v1/blog/user/5633e8cdc4ca595ef263a094dab8ce28/1455850543" alt="リンゴのイラスト">
<figcaption>リンゴ</figcaption>
</figure>
リンゴを食べると、歯茎から血がでませんか？。
まぁ、例文の程度の低さは否めませんが、この文章において、リンゴの画像がなくても成立はしていますよね。
画像については、pタグで囲むだの、imgタグそのままだのと使い方に議論は耐えませんが、ことfigureにおいては、明確な使い方が見えてきていますね。
