このページの本文へ

もうこれで迷わないHTML5新要素の使い方 (2/3)

2012年03月23日 11時00分更新

文●浜 俊太朗/NHN Japan

  • この記事をはてなブックマークに追加
本文印刷

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>

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く