【HTML5】figcaption 要素。

Ads by Google

HTML5 ロゴ

figcaption 要素は HTML5 から新しく追加されました。

この figcaption タグは、図表のキャプションを示す際に、主に <figure> ~ </figure> の中に配置して使います。

<figure>
<figcaption>キャプション</figcaption>
<p><img src="example.png" alt=""></p>
</figure>

<figure>
<p><img src="example.gif" alt=""></p>
<figcaption>キャプション</figcaption>
</figure>

上記のように、figure 要素の最初か最後のどちらかにのみ、1つだけ figcaption 要素を配置することができます。

2つのキャプションを配置したい場合は、次のように最初のキャプションを見出しとするか、後ろのキャプションを p 要素などで配置すると良いでしょう。

<figure>
<h2>図版のタイトル</h2>
<p><img src="example.png" alt=""></p>
<figcaption>図版の説明</figcaption>
</figure>

<figure>
<figcaption>図版のタイトル</figcaption>
<p><img src="example.gif" alt=""></p>
<p>図版の説明</p>
</figure>

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google

Leave a Replyコメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です