文中の図表と、そのキャプションを表すには?
figureタグ、figcaptionタグの書式
- <figure>
~
<figcaption> ~ </figcaption>
</figure>
figureタグ、figcaptionタグに対応しているブラウザ
※Windows 7上で動作確認を行っています。
※ブラウザの設定より、異なる挙動をする場合があります。
figureタグ、figcaptionタグの属性一覧
figureタグ、figcaptionタグの解説
<figure>は、文中の図表を表すための要素です。
本文から参照されるイラスト、図、写真、ソースコードなどのような図表を<figure>タグで指定します。
これらは、本文から移動しても文章の流れに影響しないものである必要があります。
例えば、ページのサイドに表示、あるいは専用ページや付録として表示しても問題のない図表になります。
<figcaption>は、<figure>で表す図表にキャプションや説明を付けるための要素です。
<figure>の最初、または最後の子要素として、<figure>で表す図表に並べて指定します。
figureタグ、figcaptionタグのサンプルソース1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル1</title>
</head>
<body>
<header>
<h1>写真</h1>
</header>
<section>
<h1>昨日撮った写真</h1>
<p>写真を見てください。</p>
<figure>
<img src="sample1.png" width="400" alt="イメージ">
<figcaption>写真</figcaption>
</figure>
</section>
<footer>
<p><small>無断転載を禁止します。</small></p>
</footer>
</body>
</html>
figureタグ、figcaptionタグのサンプル画面1
figureタグ、figcaptionタグのサンプルソース2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル2</title>
</head>
<body>
<header>
<h1>ソースの表示</h1>
</header>
<section>
<h1>Cプログラム</h1>
<p>C言語で記述するプログラムを見てみましょう。</p>
<figure>
<figcaption>ソースコード</figcaption>
<pre><code>
#include <stdio.h>
main()
{
printf("Hello World!\n")
}
</code></pre>
</figure>
<p>このプログラムを実行すると、「Hello World」の文字列が画面に表示します。</p>
</section>
<footer>
<p><small>無断転載を禁止します。</small></p>
</footer>
</body>
</html>
figureタグ、figcaptionタグのサンプル画面2
figureタグ、figcaptionタグの関連項目