スキップしてメイン コンテンツに移動

html5の画像などのメインのコンテンツの一部へのfigureタグの使い方

ブログのテンプレートをBloggerの新しいテーマに変えたらhtml編集でfigureタグが上手く使えるようになった。以前は周りに余白が付いてしまうのをcssで消し切れなかった。しかしBloggerの新しいテーマのテンプレートでは大丈夫だと分かった。figureタグはhtml5から追加されたメインのコンテンツで画像などを示すためのマークアップだけれどもブログの記事で改めて使い出している。


ブラウザには特に影響しない。figureタグが使われているかどうかはサイトを閲覧しても分からない。僕がサイト作成に取り入れたいのは検索エンジンのためだ。クローラー/解析ロボットにサイト内容をしっかり伝えられるのではないか。figureタグで囲まれたコンテンツは一部でもメインに構成されると的確に示されるので、サイト評価を上げると検索エンジンからのアクセスアップに少しでも期待できるのが嬉しい。


figureタグは一つだけで使うとはかぎらないところが、結構、面白い。他のタグと組み合わせるとさらに検索エンジンにサイト内容を分かり易く仕上げられる。


咲き出した赤い躑躅
figureタグと関連するタグを使ってメインのコンテンツの図表としてマークアップされたサンプル画像。

Sony α5100 - Zeiss Touit 2.8/50M, 1600×1067, 302KB, 1/1667s, f/2.8, ISO 100

figureタグの使い方の基本


figureタグはサイトのメインのコンテンツの画像などを示すためのマークアップだからサブのコンテンツには必要ないし、たとえ同じものを載せるとしても付けなくて構わない。


figure要素は、任意でキャプションをもつ(完全な文のような)自己完結型であり、一般に文書の主フローから単独のユニットとして参照されるフローコンテンツを表す。



figureタグの対象とは何か。W3C(htmlの勧告を行う)の仕様によると「自己完結型」だからメインの纏まった部分のコンテンツに限られている。本文に組み込まれているならば「単独のユニット」だからかりに抜き取っても十分に成り立つような対象にのみfigureタグを使うとhtml構文としては正確なんだ。


figureタグのマークアップ例


<figure><img src="画像url"><figcaption>説明文</figcaption></figure>

画像に付ける場合には画像のimgタグをfigureタグで囲む


または文章や動画や音声やソースコードでも構わないし、どんな対象でもメインのコンテンツの一部ならばfigureタグには基本的に相応しい。


説明文があると内側にfigcaptionタグで入れられる。figureタグの対象に説明文だと結び付けて示すために使う。


画像が引用で出典も付ける場合


<blockquote><figure><img src="画像url"><footer><cite>作品</cite> © 著作者</footer><figcaption>説明文</figcaption></figure></blockquote>

サイトで引用として画像を載せるならば引用のblockquoteタグでfigureタグを囲んでおくと分かり易い。さらに出典も必要ならばfooterタグを入れても良いし、作品名にはciteタグも使える。


html5ではblockquoteタグにfooterタグを入れると引用と出典を結び付けて示すけれどもfigureタグも同じようにそれ自体で付帯情報にfooterタグを使えるから図表と直接的に結び付けて示すためには引用の出典でも外側に出さず、figureタグの内側にfooterタグを記載しておくと良いと思う。


画像と付帯情報だけを載せる場合


<figure><img src="画像url"><footer>付帯情報</footer></figure>

例えば写真のサイズやexif情報(カメラの機種名やシャースピードなどの撮影データ)を載せたりするならば説明文ではないからfigcaptionタグよりもfooterタグが適している。

コメント

些細な日常の人気の投稿

PlayストアでAndroidアプリのダウンロードが非常に遅い場合の打開策

Imgurで画像URLと埋め込みコードを取得する方法

ジョナサン・モフェットのドラムの8ビートの切れ味の鋭いグルーヴ