Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTMLタグ辞典

トップページ
HTMLタグ辞典
<figure> / <figcaption>

<figure> / <figcaption>

『figure』は画像・図版・コードなどの独立したコンテンツをまとめる要素で、『figcaption』はそのキャプション（説明文）を記述するために使います。

構文

<figure>
  <img src="photo.jpg" alt="富士山の写真">
  <figcaption>富士山（標高3,776m）</figcaption>
</figure>

タグ一覧

タグ	概要
figure	画像・図・コード・引用などを本文から独立したコンテンツとしてグループ化します。
figcaption	『figure』内のコンテンツに対するキャプションを記述します。『figure』の最初か最後の子要素として配置します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>figureサンプル</title>
  <style>
    figure {
      display: inline-block;
      border: 1px solid #ccc;
      padding: 8px;
      margin: 16px;
      text-align: center;
    }
    figcaption {
      font-size: 0.85em;
      color: #555;
      margin-top: 4px;
    }
  </style>
</head>
<body>

  <!-- 画像にキャプションを付ける -->
  <figure>
    <img src="mountain.jpg" alt="山の写真" width="300">
    <figcaption>図1: 山の風景（撮影: 2024年）</figcaption>
  </figure>

  <!-- コードブロックにキャプションを付ける -->
  <figure>
    <pre><code>console.log("Hello, World!");</code>

リスト1: JavaScriptのHello World

実行結果

枠線付きのボックスの中に画像とキャプションが並んで表示されます。コードブロックにも同様にキャプションが付きます。

┌──────────────────────────┐
│  [mountain.jpg の画像]   │
│  図1: 山の風景（2024年） │
└──────────────────────────┘

┌──────────────────────────────────────┐
│  console.log("Hello, World!");       │
│  リスト1: JavaScriptのHello World    │
└──────────────────────────────────────┘