<figure></figure>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 フロー・コンテンツ / セクショニング・ルート / パルパブル・コンテンツ
利用場所 フロー・コンテンツが置ける場所
内容 フロー・コンテンツfigcaption要素を使用する場合は、figure要素内の最初か最後のどちらかにのみ(1つだけ)配置することができる / HTML 5.1では若干異なります 本文参照

figure要素は、本文から参照される図版(挿絵、図表、写真、ソースコード、等)を表します。


<figure>

参照される図版を表します

</figure>

figure要素は、自己完結した単独のユニットとして参照されます。離れた場所に配置した場合でも、本文には影響が出ない内容で使用することができます。

  • 図版にキャプション(タイトルや説明)を付けたい場合は、figure要素内の最初か最後のどちらかにfigcaption要素を配置します。(HTML 5.1の場合は任意の位置に配置できます)

次の例では、figure要素を切り離しても本文には影響が出ないことになります。(yamada.jpgは山田君の顔写真だと思ってください)

<p>デザインは山田太郎が担当しています。</p>

<figure>
<p><img src="yamada.jpg" alt="山田太郎の写真"></p>
</figure>

<p>これまで多数のWebサイトをデザインしており、 ...</p>

実際に切り離すと次のようになります。(別のページへ切り離すことも可能です)

<section>

<h3>Webデザインについて</h3>

<p>デザインは<a href="#yamada">山田太郎</a>が担当しています。</p>
<p>これまで多数のWebサイトをデザインしており、 ...</p>
...

</section>

<section>

<h3>スタッフ紹介</h3>

<figure id="yamada">
<figcaption>山田太郎</figcaption>
<p><img src="yamada.jpg" alt="山田太郎の写真"></p>
<p>Webデザイン歴10年。ポップなデザインを得意としています。</p>
</figure>
...

</section>

次のように、写真と本文が密接に関係している場合は、figure要素を使うのは適切ではないと思われます。(この場合、写真を切り離してしまうと文章が成立しません)

<p>久しぶりの再会だったので、記念に写真を撮っておきました。</p>

<p><img src="yamada_kun.jpg" alt="お店の前に立つ山田君と私。"></p>

<p>右側に写っているのが山田君です。この後二人で ...</p>

要素内の見出しのランクについて

figure要素はセクショニング・ルートとなります。そのため、この要素内では独自の見出しのランク付けを行うことができます。

<section>

<h3>当社の成長戦略</h3>

<p>当社の売上高は増加を続けており、特にこの5年間は、前年を10%以上 ...</p>

<figure>

<h1>売上推移</h1>
<p><img src="sales.gif" alt="2006年:5000万円、2007年:5600万円 ..."></p>
<figcaption>2006年~2011年までの売上高</figcaption>

</figure>

<p>来年度は新製品を投入し、更なる成長を ...</p>

</section>

要素のデフォルトスタイル

対応しているブラウザでは、この要素の上下に1em、左右に40px程度のマージンが入ります。

figure要素内のテキストです

要素の内容に関して

figcaption要素を使用する場合、HTML5ではその配置位置に制限がありましたが(figure要素内の最初か最後のどちらか)、HTML 5.1ではfigure要素の子要素として任意の位置に置けるようになりました。

HTML 5.1における変更点

使用例

図版として写真を配置した例

...

<p>鹿児島の海は青く、そして街には灰が舞っていた。(目が痛い…)</p>

<figure>
<p><img src="kagoshima1.jpg" alt="写真:鹿児島の青い空と海。" width="200" height="150">
<img src="kagoshima2.jpg" alt="写真:雲がかかった桜島。" width="200" height="150"></p>
</figure>

<hr>

<p>翌朝、私たちは霧島に向けて出発した。海沿いの国道を ...</p>

表示例
...

鹿児島の海は青く、そして街には灰が舞っていた。(目が痛い…)

写真:鹿児島の青い空と海。 写真:雲がかかった桜島。


翌朝、私たちは霧島に向けて出発した。海沿いの国道を ...

図版としてソースコードを配置した例

<p>marginプロパティを使用することで、figure要素の左右のインデント幅を調整することができます。</p>

<figure>

<figcaption>marginプロパティの使用例</figcaption>

<pre>
<code>figure { margin: 1em 20px; }</code>
</pre>

<p>この例では、左右に20pxのマージンを指定しています。</p>

</figure>

<p>デフォルトではマージンが入らないブラウザもあるので、このプロパティを使ってスタイルを整えておくことをお勧めします。</p>

表示例

marginプロパティを使用することで、figure要素の左右のインデント幅を調整することができます。

marginプロパティの使用例
figure { margin: 1em 20px; }

この例では、左右に20pxのマージンを指定しています。

デフォルトではマージンが入らないブラウザもあるので、このプロパティを使ってスタイルを整えておくことをお勧めします。