ywork2020.com

Title

画像にキャプションを付与する

目次 (INDEX)

figure & figcaption とは

ここで説明する figure & figcaption とは次の語句からなる HTML の要素です。
figure
読み: フィギュア
意味: 形、形態、形象、形状、姿、容姿
caption
読み: キャプション
意味: 新聞や雑誌などの見出し。写真や図版に添えられた説明文。映画やテレビの字幕、タイトルなど。

目次に戻る

figure と figcaption 要素の概要

figure 要素は、意味のある画像を表します。

意味のある画像とは、言い換えれば意味を持たせたい画像のことであり、 そのために figcaption 要素を figure 要素の子要素として内包することになります。

親要素となる figure は 画像 と キャプション をまとめるためのコンテナーとなり、 その中に画像を配置し、かつ figcaption 要素で画像の内容についてのキャプションを記述することで、画像とキャプションのまとまりを表すことができます。

画像に意味付けすることは、文章だけではなく簡単に視覚から情報を取り入れられることから、その必要性がある場合に使用します。

また、意味のある画像の下には少し小さな文字でその画像や図の説明を入れます。

画像の下に説明文があると、人は自然と読んでしまうもので、この効果はランディングページにはとても重要と言われています。
※ ランディングページとは、ユーザーが検索や広告リンクから最初に訪れるページのこと。

この要素には、開始タグと終了タグが必要です。
<figure> <figcaption> ~ </figcaption> </figure>

目次に戻る

サンプルコードと実行結果

ここでは 1つの画像に説明をつけている例をサンプルとしました。

サンプルコード: CSS
<style>
	figure{
		background-color: white;
		border: medium outset ##goldenrod;
		padding: 0.5em;
		text-align: center;
	}
	figcaption{
		background-color: ##lightcyan;
		font-size: 92%;
	}
</style>
サンプルコード: HTML
<body>
	<figure>
		<img src="./sample.png" alt="パソコンで作業中のイラスト">
		<figcaption> 初めてのプログラミングは YWORK で学べるよ! </figcaption>
	</figure>
</body>
実行結果:
パソコンで作業中のイラスト
初めてのプログラミングは YWORK で学べるよ!

目次に戻る

使用できる属性

目次に戻る