＜figcaption要素＞ - キャプション

公開日: 2017/02/09

figcaption要素は、figure要素のコンテンツのキャプション(説明)を表す要素です。この要素は省略可能です。

概要

名前

figcaption

カテゴリー

なし。

配置できる場所

figure要素の最初の子要素、または最後の子要素。

コンテンツモデル

Flow content。

タグの省略

開始タグも終了タグも省略できません。

DOM Interface

HTMLElement

デフォルトのスタイル

figcaption {
	display: block;
}

仕様書

https://html.spec.whatwg.org/multipage/semantics.html#the-figcaption-element

属性

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜figcaption要素＞ - キャプション</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/figcaption/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>figcaption要素は、figure要素のコンテンツのキャプションを表します。</p>

<h1>SYNCERの紹介</h1>
<p>SYNCERは2014年6月にスタートした個人ブログです。</p>

<figure>
	<img src="/image/mascot/200.png">
	<figcaption>
		SYNCERのマスコット
	</figcaption>
</figure>

<p>2016年にはマスコットキャラクターが誕生しました。</p>

<p>主にウェブとラーメンに関係するコンテンツを取り扱っています。</p>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/596/"> <meta charset="utf-8"> <title>【デモ】＜figcaption要素＞ - キャプション</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/figcaption/"> </head> <body>

<p>figcaption要素は、figure要素のコンテンツのキャプションを表します。</p> <h1>SYNCERの紹介</h1> <p>SYNCERは2014年6月にスタートした個人ブログです。</p> <figure> <img src="/image/mascot/200.png"> <figcaption> SYNCERのマスコット </figcaption> </figure> <p>2016年にはマスコットキャラクターが誕生しました。</p> <p>主にウェブとラーメンに関係するコンテンツを取り扱っています。</p>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>