『figure要素』 / HTML5新要素一覧　

figure要素

図画・写真・コードリストなど、自己完結しているメイン・コンテンツから参照されるようなコンテンツを表します。

figure要素の特徴

figure要素は、単体でもコンテンツとして成り立つ自己完結型になりますので、参照用の別ページにあった場合でもメイン・コンテンツが成立する内容に使用しなければなりません。また、オプションでfigcaption要素を使いキャプションをつけることが可能です。

figure要素のマークアップ(キャプション無し)

キャプションが無い場合のサンプルソースを確認していきたいと思います。

【画像を使用した場合の例 】

<p>京都の三千院では、美しい紅葉が見られます。</p>
<figure>
   <img src="kouyou.jpg" alt="三千院の本堂から見える美しい紅葉"/>
</figure>
<p>今年の紅葉は例年より色鮮やかとのことです。</p>

【コードを記述した場合の例 】

<p>CSS3では、角丸を表現するプロパティが追加されました。</p>
<figure>
   <pre><code>
      .radius{
          border-radius: 5px; 
         -webkit-border-radius: 5px;    /* Safari,Chrome */  
         -moz-border-radius: 5px;   /* Firefox*/  
      }
   </code></pre>
</figure>
<p>また、その他にもグラデーションやボックスシャドウなど多数のプロパティが追加されています。</p>

上記2つは基本的なfigure要素のマークアップ方法です。

では、figure要素の特徴を確認していきます。figure要素は無くてもコンテンツとして成り立たなければなりませんので、純粋にfigure要素を無くして考えてみてください。どうでしょうか二つの例共に成り立つと思います。

また、別ページにあった場合でもメインコンテンツを損なわないということなので、下記のようにテキストをa要素で囲みid属性をfigure要素につけ参照させてみます。

【画像を使用した場合の例 】

<p>京都の三千院では、<a href="#kouyou">美しい紅葉</a>が見られます。</p>
<figure id="kouyou">
   <img src="kouyou.jpg" alt="三千院の本堂から見える美しい紅葉"/>
</figure>
<p>今年の紅葉は例年より色鮮やかとのことです。</p>

【コードを記述した場合の例 】

<p>CSS3では、<a href="#kadomaru">角丸を表現するプロパティ</a>が追加されました。</p>
<figure id="kadomaru">
   <pre><code>
      .radius{
          border-radius: 5px; 
         -webkit-border-radius: 5px;    /* Safari,Chrome */  
         -moz-border-radius: 5px;   /* Firefox*/  
      }
   </code></pre>
</figure>
<p>また、その他にもグラデーションやボックスシャドウなど多数のプロパティが追加されています。</p>

上記のように、a要素で参照先のfigure要素を指定することで、別ページにあった場合でも問題がないかを判断することができます。
(※a要素は必須ではありません。確認するために仮でつけました。)

figure要素のマークアップ(キャプションあり)

キャプションをつける場合は(※)figcaption要素を使用します。

※figcaption要素は、親のfigure要素のキャプションを表しfigure要素の最初もしくは最後の子要素として使用します。figure要素以外での使用はできないので注意が必要です。

【画像を使用した場合の例 】

<p>京都の三千院では、<a href="#kouyou">美しい紅葉</a>が見られます。</p>
<figure id="kouyou">
   <img src="kouyou.jpg" alt="三千院の本堂から見える美しい紅葉"/>
   <figcaption>三千院の紅葉</figcaption>
</figure>
<p>今年の紅葉は例年より色鮮やかとのことです。</p>

【コードを記述した場合の例 】

<p>CSS3では、<a href="#kadomaru">角丸を表現するプロパティ</a>が追加されました。</p>
<figure id="kadomaru">
   <figcaption>
      角丸にするborder-radiusプロパティの使用方法
   </figcaption>
   <pre><code>
      .radius{
          border-radius: 5px; 
         -webkit-border-radius: 5px;    /* Safari,Chrome */  
         -moz-border-radius: 5px;   /* Firefox*/  
      }
   </code></pre>
</figure>
<p>また、その他にもグラデーションやボックスシャドウなど多数のプロパティが追加されています。</p>

上記2つの例ではfigcaption要素の入れる位置が異なりますが、一番最初の子要素、もしくは一番最後の子要素ならばどちらでも問題はありません。

figure要素のカテゴリー

figure要素はフロー･コンテンツに属していますが、セクショニング・ルートにも属しています。以前の記事≪HTML5のカテゴリーについて / HTML5マークアップ時の基本≫で勉強したとうりセクショニング・ルートに属する要素はそのドキュメントのアウトラインには現れません。

つまり、figure要素内でh系要素などを使用してもアウトラインに表示されません。

【h2要素figure内に使用した場合 】

<p>京都の三千院では、<a href="#kouyou">美しい紅葉</a>が見られます。</p>
<figure id="kouyou">
　  <h2>京都紅葉情報</h2>
   <img src="kouyou.jpg" alt="三千院の本堂から見える美しい紅葉"/>
   <figcaption>三千院の紅葉</figcaption>
</figure>
<p>今年の紅葉は例年より色鮮やかとのことです。</p>

少し無理やりですが、figure要素内にh2要素を記述しました。figure要素はセクショニング・ルートに属しているので、このh2要素はドキュメントのアウトラインにはあらわれません。

以上で、figure要素の勉強を終わろうと思いますが、figure要素は使うタイミングがなかなか難しそうですね。

参考サイト：

• figure要素　【HTML5.JP】

今回の記事で参考にした本

徹底解説HTML5マークアップガイドブック

HTML5の新要素や基本的なマークアップ方法について丁寧に解説が書かれています。
HTML5でサイトを構築する際やこのBlogの記事を書く時の参考にしています。他にもビジュアル系API編もcanvas要素の勉強用に持っています。

徹底解説HTML5マークアップガイドブック
最終草案対応版―全要素・全属性完全収録

「最終草案対応版―全要素・全属性完全収録」としてverが変わりました。すでに同じ本を持っている場合は追加で買わなくても大丈夫だとおもいましたがなにがなくなって追加されたか興味がありましたので両方買って見ました。

ブログを作成する際に参考にした本はこちらにまとめてあります。