トップ > スキル : Web > HTML5

Web

各要素のリファレンス7

グループ化要素(3/3)

figure要素(キャプション付き図画)

カテゴリ フロー・コンテンツ、セクショニング・コンテンツ
コンテンツモデル 1つのfigcaption要素の次にフロー・コンテンツを入れる、またはフロー・コンテンツの次に1つのfigcaption要素を入れる、またはフロー・コンテンツのみを入れる。
利用可能な場所 フロー・コンテンツが期待される場所
開始タグ 必須
終了タグ 必須
要素固有のコンテンツ属性 なし
デフォルトスタイル figure{
    display:block;
    margin-top:1em;
    margin-bottome:1em;
    padding-left:40px;
    margin-right:40px;
}

figure要素は、キャプション付き図画を表し、自己完結型で、メイン・コンテンツから参照されるようなコンテンツを表します。なお、キャプションは必須ではありません。

figure要素で表したいコンテンツは、figure要素の中にそのまま入れます。キャプションはfigcaption要素でマークアップしますが、必須ではないです。しかし、キャプションをマークアップするのであれば、そのfigcaption要素はfigure要素の中にすべて記述する必要があります。

■利用例
  <p>富士山は日本一の山です。</p>
  <figure id="fuzi">
  	<img src="fuziyama.png" alt="日本一高い山、富士山" />
  	<figcaption>高くそびえる富士山</figcaption>
  </figure>
  <p>富士山は海外でも有名で、日本を象徴する山としても知られています。</p>
    

figure要素でマークアップされたコンテンツは、ドキュメントのメイン・コンテンツから参照されるコンテンツであり、メイン・コンテンツとは独立したコンテンツという意味を持つことになるので、figure要素は、ページのサイドや、専用の別ページや、別表といった形で、メイン・コンテンツから別の場所に移動しても構わないコンテンツに使います。

figcaption要素(図画のキャプション)

カテゴリ なし
コンテンツモデル フレージング・コンテンツ
利用可能な場所 figure要素の最初または最後の子として
開始タグ 必須
終了タグ 必須
要素固有のコンテンツ属性 なし
デフォルトスタイル figcaption{
    display:block;
}

figcaption要素は、親要素となるfigure要素のコンテンツのキャプションや説明を表します。figure要素以外の中で使うことはできません。

div要素(一般的なコンテナ)

カテゴリ フロー・コンテンツ
コンテンツモデル フロー・コンテンツ
利用可能な場所 フロー・コンテンツが期待される場所
開始タグ 必須
終了タグ 必須
要素固有のコンテンツ属性 なし
デフォルトスタイル div{
    display:block;
}

div要素は、セマンティックス上、特定の意味を持ちませんが、何かしらのセマンティックス上、区別したい領域やグルーピングのために使います。

また、classコンテンツ属性を使って、スタイルシートのフックとして利用することもできます。section要素、article要素、nav要素、fieldset要素などのように、ある特定の内容をグルーピングする時以外に、div要素を使うようにします。

■利用例
  <section>
  	<hgroup>
		<h1>見出しタイトル</h1>
		<h2>サブタイトル</h2>
  	</hgroup>
  	<div class="story">
		タイトルに応じた内容
  	</div>
  </section>
    

利用例を見てみましょう。

HTML5では、セクションとなる見出しと本文の全体は、section要素やarticle要素でマークアップできます。そして、見出しに相当する部分はhgroup要素やheader要素を使います。でも、セクションから見出し部分を除いた本文の領域という意味付けを持った要素は規定されていないので、ここではdiv要素を使ってマークアップしています。

また、このdiv要素に対してデザインを適用するためにclass属性を使って、スタイリングを適用することができます。

【各要素のリファレンス7】