HTML <figcaption> タグ

定義と使用法

<figcaption> タグは <figure> 要素はタイトルを定義します。

<figcaption> 要素は以下の場所に配置できます <figure> 要素の最初または最後の子要素の位置。

参照してください：

HTML DOM 参考マニュアル：Figcaption オブジェクト

インスタンス

例 1

ドキュメント内の写真を <figure> 要素でマークし、写真のタイトルを <figcaption> 要素で定義します：

<figure>
  <img src="tulip.jpg" alt="郁金香" style="width:300px">
  <figcaption>図 1 - 郁金香、百合科、多年生草本植物。</figcaption>
</figure>

実際に試してみてください

例 2

使用 CSS で <figure> と <figcaption> のスタイルを設定します：

<html>
<head>
<style>
figure {
  border: 1px #cccccc solid;
  padding: 4px;
  margin: auto;
}
figcaption {
  background-color: black;
  color: white;
  font-style: italic;
  padding: 2px;
  text-align: center;
}
</style>
</head>
</body>
<figure>
  <img src="tulip.jpg" alt="郁金香" style="width:300px">
  <figcaption>図 1 - 郁金香、百合科、多年生草本植物。</figcaption>
</figure>
</body>
</html>

実際に試してみてください

グローバル属性

<figcaption> このタグは、以下のイベント属性をサポートしています HTMLでのグローバル属性。

イベント属性

<figcaption> このタグは、以下のイベント属性をサポートしています HTMLでのイベント属性。

デフォルトの CSS 設定

ほとんどのブラウザは以下のデフォルト値を使用して表示します <figcaption> 要素：

figcaption {
  display: block;
}

ブラウザのサポート

このテーブルの数字は、この要素を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
8.0 9.0 4.0 5.1 11.0