figure要素
- カテゴリー：フローコンテンツ、セクショニングルート
- この要素が使える文脈：フローコンテンツが予想される場所
- コンテンツモデル：次のいずれか。フローコンテンツ、1つのfigcaption要素に続けてフローコンテンツ、フローコンテンツに続けて一つのfigcaption要素
- コンテンツ属性：グローバル属性
figure要素は、イラスト・図表・写真・ソースコードなどのフローコンテンツのうち、自己完結しており、かつメインコンテンツから参照されるものを表します。メインコンテンツから参照される必要があるので、単なる雰囲気のための画像などに使ってはいけません。典型的な例としては、以下のように本文と関連した写真や図版、 ソースコードなどを掲載するときに使います。
サンプル1
<h3>古くて雰囲気の良い建築を実際に見る方法</h3>
<figure id="edo-tokyo">
<img src="/img/edo-tokyo.jpg" alt="全国各地から移築された建造物が並びます" />
</figure>
<p>江戸東京たてもの園は、移築された歴史的建造物を見て触ることのできる野外博物館です。</p>
サンプル2
<p>古いIEでHTML5のsection要素などを使うと、display: inline;の見た目になってしまいます。</p>
<figure id="html5-display-block">
<pre><code>
article, aside, figure, figcaption, footer, header, hgroup, nav, section {
display: block;
}
</code></pre>
</figure>
<p>この問題は、HTML5の新要素に、display: block;を指定するだけで解決できます。</p>
サンプル3
<p>また、これまでも何度か登場しているように、PVの向上は今期の目標の一つでした。</p>
<figure class="graph-pv-2012-02_03">
<img src="/img/graph-01.png" alt="2月はデイリーで50,000PVでしたが、3月は70,000PVとなりました" />
</figure>
<p>3月のPVは、先月までよりも増加しています。その主な理由は、キャンペーンの施策が成功しているためと考えられます。</p>
「自己完結」とは、figure要素だけを抜き出して別のページに移しても不自然にならず、元のメインコンテンツに影響を与えない状態を指します。
たとえば、サンプル1で、figure要素を別のページへ移動したとしましょう。
<h3>古くて雰囲気の良い建築を実際に見る方法</h3>
<p><a href="/architecture/#edo-tokyo">江戸東京たてもの園</a>は、移築された歴史的建造物を見て触ることのできる野外博物館です。</p>
この場合、メインコンテンツから別のページにある画像を参照しており、文脈的に問題がありません。ここでは別のページに移動しましたが、ページ内の他の場所（サイドバーやフッターなど）に移動するケースも考えられます。
なお、実務上は、ページの一部のみを別ページなどに移動するという運用はあまり起きないかもしれません。しかし、この考え方は、「あるコンテンツにfigure要素が適しているかどうか」で迷ったときの判断基準のひとつとして使えるでしょう。
figure要素は、次に解説するfigcaption要素を使うことで、キャプションを付けられます。
ポイント
figure要素は、セクショニングルートカテゴリに属しているので、記述されている文書のアウトラインには登場しません。
figcaption要素
- カテゴリー：なし
- この要素が使える文脈：figure要素の最初または最後の子要素
- コンテンツモデル：フローコンテンツ
- コンテンツ属性：グローバル属性
figcaption要素は、figure要素内の最初か最後に、1つだけ記述できるキャプションです。「最初か最後」がポイントで、途中には記述できません。以下は正しい例です。
正しい例
<h3>古くて雰囲気の良い建築を実際に見る方法</h3>
<figure>
<figcaption>江戸東京たてもの園の景色</figcaption>
<img src="/img/edo-tokyo.jpg" alt="全国各地から移築された建造物が並びます" />
</figure>
<p>江戸東京たてもの園は、移築された歴史的建造物を見て触ることのできる野外博物館です。</p>
以下は、figure要素の途中にfigcaption要素があるので誤りです。
誤った例
<h3>古くて雰囲気の良い建築を実際に見る方法</h3>
<figure>
<h4>江戸東京たてもの園</h4>
<figcaption>江戸東京たてもの園の景色</figcaption> <!-- 誤った例 -->
<img src="/img/edo-tokyo.jpg" alt="全国各地から移築された建造物が並びます" />
</figure>
<p>江戸東京たてもの園は、移築された歴史的建造物を見て触ることのできる野外博物館です。</p>
キャプションを伴わないfigure要素
figure要素は、しばしば「キャプション付きの図」と解説されます。これだけだとキャプションが必須のように思えますが、仕様的にはキャプションは任意（なくてもよい）です。
キャプションを伴うコンテンツでは、figure要素とfigcaption要素を使う理由が分かりやすいですが、キャプションを伴わない場合は、ただのimg要素などと、figure要素でマークアップするimg要素などとはどう区別すればよいでしょうか？
figure要素の項で解説したように、figure要素でマークアップする要素は「自己完結していてメインコンテンツから参照されるもの」であるかを基準に考えます。つまり、文書の文脈として必要な図表や写真、ソースコードであれば、キャプションを伴わなくてもfigure要素としてよいでしょう。
mark要素
- カテゴリー：フローコンテンツ、フレージングコンテンツ
- この要素が使える文脈：フレージングコンテンツが予想される場所
- コンテンツモデル：フレージングコンテンツ
- コンテンツ属性：グローバル属性
mark要素は、ハイライトを表します。テキストの特定の部分に対して参照や言及をするときに、読者の意識を引きつけるために使います。
たとえば、文章を引用して、それについて言及する場合を見てみましょう。
<blockquote cite="http://example.com">
<p>カツサンドの<mark>具材</mark>に、キャベツは必須である。トンカツを注文してキャベツが付いてこない店があるだろうか？</p>
</blockquote>
<p>※強調は引用者によるものです</p>
<p>そうでしょうか？カツサンドの「具材」として考えるならば、「トンカツとキャベツを同時に口に運ぶか」と考えた方が理に適っています。キャベツはトンカツの箸休めとしての役割が大きいので、もし必要ならば、つけ合わせとして用意すれば良いのです。</p>
この例では、引用者が引用するときに「この部分について特に言及したい」という意図でmark要素を付けています。これにより、特に「具材」の部分に対して反論していることが明確になっています。
引用に限らず、特定の部分に対して参照するときに使えます。以下はソースコードを解説するときの使用例です。特に注目してほしい「300px」という部分にmark要素を使っています。
<pre><code>
div {
width: <mark>300px</mark>;
margin: 15px auto;
padding: 5px;
}
</code></pre>
<p>このdivの横幅を300pxとすることがポイントです。</p>
また、検索エンジンの検索結果画面などでは、検索キーワードをハイライトして表示することがよくあります。ページ内で言及されているわけではありませんが、ユーザーが入力した検索ワードに対する結果が表示されているので、このようなハイライトにもmark要素を使用できます。
「カツサンド」という単語で検索した結果のページの例を見てみましょう。
<h3>億世屋の<mark>カツサンド</mark></h3>
<p>マンガや映画などにもよく登場する、<mark>カツサンド</mark>のおいしい店です。分厚いカツにしっとりとソースが染み込み、ふんわりとしたパンで挟まれています。もう最近は週に一度はここの<mark>カツサンド</mark>を食べています！</p>
対応しているブラウザーでは、次のように表示されます。
このような表示方法はすでにさまざまなサービスで採用されているので、見覚えのある方も多いと思います。
一方、いわゆる“フォントいじり”に代表されるような、文章を目立たせる目的でmark要素を使ってはいけません。
誤った例
<p>まあ僕はどちらかというと、カツサンドよりもコロッケサンドの方が好きなんですが。ジャガイモを使っているので<mark>身体にも良さそう</mark>ですし。</p>
