HTML5: figure要素の中身

HTMLの新しい仕様で、figure要素というのが、追加される予定なんだそうだ。さて、どうしましょう。

figure要素ってなに?

で、こいつは、何なのかというと、4.5 Grouping content — HTML5:W3C Working Draft……は英語なので、HTML5.JPのリファレンスによると、こんな要素だ。

figure要素は、いくらかのフロー・コンテンツを表します。オプションで、キャプションを伴います。これは、自己完結したものとなり、通常は、ドキュメントのメインのフローから単独のユニットとして参照されるものとなります。

そのため、この要素は、挿絵、図表、写真、コードなどに注釈を付けるために使われます。これらは、ドキュメントのメインのコンテンツから参照されます。しかし、ドキュメントのフローに影響を与えることなく、主要なコンテンツから、ページのサイドや専用のページや付属ページなどへ切り離すことが可能です。

figure 要素 - コンテンツのグループ化 - HTML要素 - HTML5 タグリファレンス - HTML5.JPより引用。

んで、まあ、こういうことなんだけど、内容モデルがフロー・コンテンツとfigcaption要素。HTML5のフロー・コンテンツっつったら、範囲広いなあ。だって、ほとんどフローコンテンツでないのさ。なんか、掴みどころのない要素だな。困ったな……。

というわけで、完全手書きサイトとしては、そこそこ早いうちから(?)HTML5対応を謳っている我がサイトが、このfigure要素をどのように使っているかを、恥を忍んで、晒してしまおう。

読んでみて、なんか違うんでねえの?と思われた方は、メールにてご一報を。僕も手探りで新仕様に向かっているもので、その手のアドバイスは嬉しかったりします。

使用例A:引用と出典を示す

引用と出典をまとめて示す。

(例文は、うちのサイトの同じHTMLコーナーにある、考えた(About:CMS運用)というテキストのソースから。引用文の出典が、自分で書き、尚かつ、wordpressのアンインストールに伴い消してしまったテキストなので、blockquote要素のcite属性などは指定していない。)

<figure class="quote">
<blockquote>
	<p>ここ数日、世間を賑わせているのは、例の脅迫カキコの冤罪事件だ。</p>
	<p>もちろん、乗っ取られたPCの主らにも、無用心に信頼性の不明なアプリケーションを入れるという、絶対にやってはいけないことをやってしまった(しかし、特にWindowsユーザというのは、それを平気でやる。僕もそうだった)という落ち度はあるものの、何らかの手段を用いてネットに接続している一人として、他人ごとでは、決してない。</p>
	——中略——
</blockquote>
<figcaption><cite>『考えた(About:ブログ廃止)』:足の踏み場もない雑文倉庫</cite>より引用。(現存せず)</figcaption>
</figure>

引用と出典のセットに使う、という、疑問の残る一例。

4.5 Grouping content — HTML5:W3C Working Draftの中でも、詩の引用をfigure要素で囲んで、figcaptionの中に出典を示していたりする例文があるから、これはこれでありなんだと思う。

使用例B:Linuxコマンド解説

linuxコマンドに限らず、その他にも、HTMLのソースの解説とかね。このページにも、いっぱい割り込んでるでしょ。例えば、こんなふう。

<figure>
<pre><code>sudo zypper in opera</code></pre>
<figcaption>尚、<b>in</b> は、<b>install</b> の短縮コマンド。</figcaption>
</figure>

使ってる本人的には、あまり、違和感の沸かない一例。

コマンド例を参照させつつ、キャプションに補足説明的なものを入れてみたり。

使用例C:普通に解説用の画像が入る

W3Cの中の人達にとっては、一番想定内な用法か?

<figure class="image">
<img src="./img/kde_select_files/select.png">
<figcaption>(参照画像1)</figcaption>
</figure>

これを駄目だと言われると、もう、何を信じて生きていけばいいのか分からない、という一例。

これはさほど問題ないね。

まとめ

結局、中身はフローコンテンツだって言ってるんで、本当は、僕らが思う以上に、自由度の高いものなのかも知れないけど、あんまり無茶苦茶やっちゃって、後で修正に手間がかかっても嫌なんで、どのへんまではみ出していいかという事にも、神経質になってしまう。

使用例のBとCについては、さほど問題ないはずなんだわ。でも、Aがなあ……。イマイチ安心できないんだよなあ……。

いやいや、でも待てよ? 世間的には、この要素を使って、箇条書リストにタイトルを付けたいとか言う人もいるらしいから、このくらいはいいのかもなあ。

他にも、HTML5使ってるサイトさん、いっぱいあるけど、皆、どうしてるのかなあ、この辺のさじ加減……。

いやあ、マイッタ。どこまでも手探りなんだよなあ……。