MENU
  1. ホーム
  2. HTML
  3. 【HTML】figureタグの使い方：imgとの違いやキャプションの付け方

【HTML】figureタグの使い方：imgとの違いやキャプションの付け方

HTML
html-figure-tag

Webサイト上で画像や図表を正しく意味付けし、SEO効果とアクセシビリティを高めるHTMLの<figure>タグがあります。

本記事では、画像（img）やレイアウト（div）との使い分け、CSSを用いた配置・レスポンシブ対応を解説します。

また、HTMLに関するカテゴリーページから学びたい内容を決めたい人は、以下のHTMLページをご確認ください。

HTML | Code Stock
目次

figureタグとは：意味と使い方

HTML5のセマンティックタグの中でも、画像や図解をマークアップする際に欠かせないのがfigureタグです。

ここでは、figureタグが持つ意味、実務でのfigureタグの使い方を解説します。

figureタグとは：意味と使い方
  • figureタグの役割と自己完結したコンテンツの意味
  • 基本的な書き方とサンプルコード

figureタグの役割と自己完結したコンテンツの意味

<figure>タグを一言で表すと「本文から参照される自己完結した図表や写真などのコンテンツ」を囲むタグです。

論文や専門書を読んでいる際、「※図1を参照」という文章と共に、少し離れた場所に図解とキャプション（説明文）が置かれているのを見たことがあるはずです。

この「図1」のブロック全体を作るのが<figure>タグの本来の役割です。

装飾目的の画像や、単にテキストの横に添えるだけのイメージ画像には<img>タグ単体（または<div>で囲む）を使用します。

一方、データを示すグラフ、コードブロック、本文で「以下の図のように～」と参照される重要な図解・写真には<figure>タグを使用します。

⚖️ figureタグの正しい使い分け基準

❌ 使ってはいけない例（ただの装飾・イメージ画像）

春の訪れを感じる季節になりましたね。

🌸

※これは単なるイメージなので、imgタグ単体で置くべきです。

⭕️ 正しい使い方（本文と連動する意味のある図表）

当社の売上推移は右肩上がりです。（※図1を参照）

📈 売上グラフの画像
【図1】2026年度の四半期ごとの売上推移

※このように、キャプション（説明）を伴う「意味のあるひと塊」に最適です。

<!– ❌ 装飾画像にfigureは不要 –>
<p>春ですね。</p>
<figure>
  <img src=”sakura.jpg” alt=”桜のイメージ”>
</figure>

<!– ⭕️ 意味のある図表に使うのが正解 –>
<p>売上の推移です（図1）。</p>
<figure>
  <img src=”graph.jpg” alt=”売上グラフ”>
  <figcaption>図1: 売上推移</figcaption>
</figure>
HTMLコード表示
<div class="hfig-sec1-wrapper">
  
  <div class="hfig-sec1-demo-area">
    <div class="hfig-sec1-box">
      <div class="hfig-sec1-label">⚖️ figureタグの正しい使い分け基準</div>
      
      <div class="hfig-sec1-visual">
        <p style="font-size:12px; color:#dc3545; font-weight:bold; margin:0 0 5px 0;">❌ 使ってはいけない例（ただの装飾・イメージ画像）</p>
        <div class="hfig-sec1-bad-block">
          <p style="font-size: 13px; margin:0 0 10px 0;">春の訪れを感じる季節になりましたね。</p>
          <div class="hfig-sec1-fake-figure-bad">
            <span style="font-size: 30px;">🌸</span>
          </div>
          <p style="font-size: 11px; color: #666; margin: 10px 0 0 0;">※これは単なるイメージなので、imgタグ単体で置くべきです。</p>
        </div>

        <p style="font-size:12px; color:#198754; font-weight:bold; margin:20px 0 5px 0;">⭕️ 正しい使い方（本文と連動する意味のある図表）</p>
        <div class="hfig-sec1-good-block">
          <p style="font-size: 13px; margin:0 0 10px 0;">当社の売上推移は右肩上がりです。<span style="color:#0d6efd; font-weight:bold;">（※図1を参照）</span></p>
          
          <figure class="hfig-sec1-real-figure">
            <div class="hfig-sec1-chart-mock">📈 売上グラフの画像</div>
            <figcaption class="hfig-sec1-caption">【図1】2026年度の四半期ごとの売上推移</figcaption>
          </figure>
          <p style="font-size: 11px; color: #666; margin: 10px 0 0 0;">※このように、キャプション（説明）を伴う「意味のあるひと塊」に最適です。</p>
        </div>
      </div>

      <div class="hfig-sec1-code">
        <!-- ❌ 装飾画像にfigureは不要 --><br>
        <p>春ですね。</p><br>
        <span class="hfig-sec1-hl-red"><figure></span><br>
          <img src="sakura.jpg" alt="桜のイメージ"><br>
        <span class="hfig-sec1-hl-red"></figure></span><br><br>
        <!-- ⭕️ 意味のある図表に使うのが正解 --><br>
        <p>売上の推移です（図1）。</p><br>
        <span class="hfig-sec1-hl-green"><figure></span><br>
          <img src="graph.jpg" alt="売上グラフ"><br>
          <figcaption>図1: 売上推移</figcaption><br>
        <span class="hfig-sec1-hl-green"></figure></span>
      </div>
    </div>
  </div>
</div>
CSSコード表示
.hfig-sec1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hfig-sec1-demo-area {
  display: flex;
  justify-content: center;
}

.hfig-sec1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}

.hfig-sec1-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.hfig-sec1-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

/* 悪い例のスタイル */
.hfig-sec1-bad-block {
  background-color: #fff;
  padding: 15px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}

.hfig-sec1-fake-figure-bad {
  background-color: #f8d7da;
  border: 1px dashed #dc3545;
  padding: 10px;
  text-align: center;
  border-radius: 4px;
}

/* 良い例のスタイル */
.hfig-sec1-good-block {
  background-color: #fff;
  padding: 15px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}

.hfig-sec1-real-figure {
  margin: 0;
  padding: 10px;
  background-color: #e7f1ff;
  border: 2px solid #0d6efd;
  border-radius: 4px;
  text-align: center;
}

.hfig-sec1-chart-mock {
  background-color: #fff;
  border: 1px solid #b6d4fe;
  padding: 20px;
  font-weight: bold;
  color: #084298;
  border-radius: 4px;
  margin-bottom: 10px;
}

.hfig-sec1-caption {
  font-size: 12px;
  font-weight: bold;
  color: #084298;
}

.hfig-sec1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #198754;
}

.hfig-sec1-hl-green {
  color: #98c379;
  font-weight: bold;
}

.hfig-sec1-hl-red {
  color: #e06c75;
  font-weight: bold;
}

imgタグとの使い方の違いを詳しく知りたい人は「【HTML】imgタグの使い方：src・altの使い分けや画像リサイズ・中央寄せ」を一読ください。

【HTML】imgタグの使い方：src・altの使い分けや画像リサイズ・中央寄せ

基本的な書き方とサンプルコード

<figure>タグの真価は、キャプション（説明文）を表す<figcaption>タグと組み合わせて使用した時に発揮されます。

<figcaption>は、1つの<figure>タグの中に1つだけしか配置できません。

配置する場所は<figure>の中の「一番最初（画像の上）」か「一番最後（画像の下）」のどちらかが一般的です。

デフォルトではブラウザによって<figure>に不要な余白（margin）が自動で付与されるため、margin: 0;にリセットしてからデザインを組むのがセオリーです。

🖼️ 画像＋キャプションの美しい基本実装

👇 figureとfigcaptionで作る写真カード

🏢
本社ビル外観
2026年竣工。最新の免震構造を備えています。
<!– 💡 完璧な構造の html figure example –>
<figure class=”photo-card”>
  <img src=”building.jpg” alt=”本社ビル”>

  <!– 💡 figcaptionは必ず1つだけ！ –>
  <figcaption>
    <strong>本社ビル外観</strong><br>
    2026年竣工。最新の免震構造を備えています。
  </figcaption>
</figure>

/* CSSのポイント */
figure {
  margin: 0; /* ブラウザ特有の不要な余白を消す */
}
HTMLコード表示
<div class="hfig-sec2-wrapper">
  
  <div class="hfig-sec2-demo-area">
    <div class="hfig-sec2-box">
      <div class="hfig-sec2-label">🖼️ 画像＋キャプションの美しい基本実装</div>
      
      <div class="hfig-sec2-visual">
        <p style="font-size:12px; color:#666; font-weight:bold; margin:0 0 10px 0;">👇 figureとfigcaptionで作る写真カード</p>
        
        <figure class="hfig-sec2-figure-card">
          <div class="hfig-sec2-image-mock">
            <span style="font-size: 40px;">🏢</span>
          </div>
          <figcaption class="hfig-sec2-caption-text">
            <strong>本社ビル外観</strong><br>
            <span style="font-size: 11px; color: #666;">2026年竣工。最新の免震構造を備えています。</span>
          </figcaption>
        </figure>
      </div>

      <div class="hfig-sec2-code">
        <!-- 💡 完璧な構造の html figure example --><br>
        <span class="hfig-sec2-hl-blue"><figure class="photo-card"></span><br>
          <img src="building.jpg" alt="本社ビル"><br><br>
          <!-- 💡 figcaptionは必ず1つだけ！ --><br>
          <span class="hfig-sec2-hl-green"><figcaption></span><br>
            <strong>本社ビル外観</strong><br><br>
            2026年竣工。最新の免震構造を備えています。<br>
          <span class="hfig-sec2-hl-green"></figcaption></span><br>
        <span class="hfig-sec2-hl-blue"></figure></span><br><br>
        /* CSSのポイント */<br>
        <span class="hfig-sec2-hl-blue">figure</span> {<br>
          margin: 0; /* ブラウザ特有の不要な余白を消す */<br>
        }
      </div>
    </div>
  </div>
</div>
CSSコード表示
.hfig-sec2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hfig-sec2-demo-area {
  display: flex;
  justify-content: center;
}

.hfig-sec2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}

.hfig-sec2-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.hfig-sec2-visual {
  background-color: #e9ecef;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ポラロイド風figureの実装 */
.hfig-sec2-figure-card {
  margin: 0; /* ★ブラウザのデフォルト余白をリセット */
  background-color: #fff;
  padding: 10px 10px 15px 10px;
  border-radius: 4px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  border: 1px solid #ced4da;
  max-width: 250px;
  width: 100%;
}

/* 画像モック */
.hfig-sec2-image-mock {
  background-color: #e7f1ff;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
  margin-bottom: 15px;
}

/* キャプション */
.hfig-sec2-caption-text {
  text-align: center;
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}

.hfig-sec2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}

.hfig-sec2-hl-green {
  color: #98c379;
  font-weight: bold;
}

.hfig-sec2-hl-blue {
  color: #61afef;
  font-weight: bold;
}

要素に対するリセットCSSの考え方を知りたい人は「【CSS】リセットの使い方：スタイル初期化・不要論・ress」を一読ください。

【CSS】リセットの使い方：スタイル初期化・不要論・ress

画像や図表に説明を付ける：figcaptionタグの活用

Webサイトにおいて、図表や写真にタイトルや説明文を添えることは、ユーザーの理解を助けるだけでなく、検索エンジンに画像の意味を正確に伝えるSEO対策としても重要です。

この説明文をマークアップする専用タグが<figcaption>です。

このタグは<figure>タグとセットで使われます。

ここでは、キャプションの付け方と画像以外へのテクニックを解説します。

画像や図表に説明を付ける：figcaptionタグの活用
  • figcaptionタグでキャプションを付ける
  • 画像だけでなく動画やコードブロックにも使える

figcaptionタグでキャプションを付ける

図表に対して「図1：〇〇の推移」といったキャプションを付ける際、<figcaption>タグを使用することで、ブラウザや検索エンジンに対して「この図表の説明文である」と明確に関連性を伝えられます。

図表の説明やタイトルには、<figcaption>を使用します。

これにより、機械に対しても「このテキストは直前の画像に紐づくキャプションである」と結びつけることができます。

また、キャプションを目立たせたい場合は、<figcaption>に対して直接CSSで背景色や文字色を指定してデザインを整えます。

📝 figcaptionによる正しい説明文の付与

❌ 悪い例（pタグだと画像との紐付きが弱い）

📊

※pタグで書いた説明文

⭕️ 良い例（figcaptionで意味付けと装飾を行う）

📊
図2：ユーザーのアクセス推移
右肩上がりで推移しています。
<!– ❌ 紐付きが弱い悪い例 –>
<figure>
  <img src=”graph.png” alt=””>
  <p>図2：アクセス推移</p>
</figure>

<!– ⭕️ 検索エンジンが好む正しい例 –>
<figure>
  <img src=”graph.png” alt=””>
  <figcaption>図2：アクセス推移</figcaption>
</figure>
HTMLコード表示
<div class="hfig-caption1-wrapper">
  
  <div class="hfig-caption1-demo-area">
    <div class="hfig-caption1-box">
      <div class="hfig-caption1-label">📝 figcaptionによる正しい説明文の付与</div>
      
      <div class="hfig-caption1-visual">
        <p style="font-size:12px; color:#dc3545; font-weight:bold; margin:0 0 5px 0;">❌ 悪い例（pタグだと画像との紐付きが弱い）</p>
        <figure class="hfig-caption1-bad-figure">
          <div class="hfig-caption1-img-mock">📊</div>
          <p class="hfig-caption1-bad-text">※pタグで書いた説明文</p>
        </figure>

        <p style="font-size:12px; color:#198754; font-weight:bold; margin:20px 0 5px 0;">⭕️ 良い例（figcaptionで意味付けと装飾を行う）</p>
        <figure class="hfig-caption1-good-figure">
          <div class="hfig-caption1-img-mock">📊</div>
          <figcaption class="hfig-caption1-good-caption">
            <strong>図2：ユーザーのアクセス推移</strong><br>
            <span style="font-size:11px;">右肩上がりで推移しています。</span>
          </figcaption>
        </figure>
      </div>

      <div class="hfig-caption1-code">
        <!-- ❌ 紐付きが弱い悪い例 --><br>
        <figure><br>
          <img src="graph.png" alt=""><br>
          <span class="hfig-caption1-hl-red"><p></span>図2：アクセス推移<span class="hfig-caption1-hl-red"></p></span><br>
        </figure><br><br>
        <!-- ⭕️ 検索エンジンが好む正しい例 --><br>
        <figure><br>
          <img src="graph.png" alt=""><br>
          <span class="hfig-caption1-hl-green"><figcaption></span>図2：アクセス推移<span class="hfig-caption1-hl-green"></figcaption></span><br>
        </figure>
      </div>
    </div>
  </div>
</div>
CSSコード表示
.hfig-caption1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hfig-caption1-demo-area {
  display: flex;
  justify-content: center;
}

.hfig-caption1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}

.hfig-caption1-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.hfig-caption1-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 共通の画像モック */
.hfig-caption1-img-mock {
  background-color: #fff;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}

/* 悪い例 */
.hfig-caption1-bad-figure {
  margin: 0;
  width: 100%;
  max-width: 250px;
}

.hfig-caption1-bad-text {
  margin: 10px 0 0 0;
  font-size: 13px;
  color: #666;
  text-align: center;
}

/* 良い例 */
.hfig-caption1-good-figure {
  margin: 0;
  width: 100%;
  max-width: 250px;
  border: 1px solid #adb5bd;
  border-radius: 4px;
  overflow: hidden; /* キャプションの背景色を角丸に沿わせるため */
  background-color: #fff;
}

.hfig-caption1-good-figure .hfig-caption1-img-mock {
  border: none;
  border-bottom: 1px solid #adb5bd;
  border-radius: 0;
}

.hfig-caption1-good-caption {
  background-color: #e9ecef;
  padding: 10px;
  text-align: center;
  font-size: 13px;
  color: #333;
  line-height: 1.4;
}

.hfig-caption1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #198754;
}

.hfig-caption1-hl-green {
  color: #98c379;
  font-weight: bold;
}

.hfig-caption1-hl-red {
  color: #e06c75;
  font-weight: bold;
}

画像だけでなく動画やコードブロックにも使える

<figure>タグと聞くと「画像（<img>）専用のタグ」と思い込んでいる人が多いですが、誤解です。

<figure>タグの定義は「自己完結したコンテンツ」です。

そのため、画像だけでなく、動画（<video>）、音声（<audio>）、ソースコード（<pre>）、表（<table>）など、本文から参照される独立したコンテンツであれば何を入れても問題ありません。

実務の技術ブログなどでは、ソースコードのブロックを<figure>で囲み、<figcaption>で「〇〇の記述例」といったファイル名や説明を添えるマークアップが好まれます。

🎥 動画やコードへのfigureタグ活用例

1. 動画（video）にキャプションを付ける

▶️ 動画プレイヤー
プロモーションビデオ（2026年版）

2. ソースコードにファイル名を付ける

📄 index.html 
<figure>
  <video src="promo.mp4"></video>
</figure>
<!– 💡 動画(video)への適用 –>
<figure>
  <video src=”movie.mp4″ controls></video>
  <figcaption>PV映像</figcaption>
</figure>

<!– 💡 コードブロック(pre/code)への適用 –>
<figure>
  <!– 上にファイル名をつけることも多い –>
  <figcaption>style.css</figcaption>
  <pre><code>…</code></pre>
</figure>
HTMLコード表示
<div class="hfig-caption2-wrapper">
  
  <div class="hfig-caption2-demo-area">
    <div class="hfig-caption2-box">
      <div class="hfig-caption2-label">🎥 動画やコードへのfigureタグ活用例</div>
      
      <div class="hfig-caption2-visual">
        <p style="font-size:12px; color:#0d6efd; font-weight:bold; margin:0 0 5px 0;">1. 動画（video）にキャプションを付ける</p>
        <figure class="hfig-caption2-figure-media">
          <div class="hfig-caption2-video-mock">
            ▶️ 動画プレイヤー
          </div>
          <figcaption class="hfig-caption2-media-caption">
            プロモーションビデオ（2026年版）
          </figcaption>
        </figure>

        <p style="font-size:12px; color:#198754; font-weight:bold; margin:20px 0 5px 0;">2. ソースコードにファイル名を付ける</p>
        <figure class="hfig-caption2-figure-code">
          <figcaption class="hfig-caption2-code-caption">
            📄 index.html
          </figcaption>
          <pre class="hfig-caption2-pre"><code><figure>
  <video src="promo.mp4"></video>
</figure></code></pre>
        </figure>
      </div>

      <div class="hfig-caption2-code">
        <!-- 💡 動画(video)への適用 --><br>
        <span class="hfig-caption2-hl-blue"><figure></span><br>
          <video src="movie.mp4" controls></video><br>
          <span class="hfig-caption2-hl-green"><figcaption></span>PV映像<span class="hfig-caption2-hl-green"></figcaption></span><br>
        <span class="hfig-caption2-hl-blue"></figure></span><br><br>
        <!-- 💡 コードブロック(pre/code)への適用 --><br>
        <span class="hfig-caption2-hl-blue"><figure></span><br>
          <!-- 上にファイル名をつけることも多い --><br>
          <span class="hfig-caption2-hl-green"><figcaption></span>style.css<span class="hfig-caption2-hl-green"></figcaption></span><br>
          <pre><code>...</code></pre><br>
        <span class="hfig-caption2-hl-blue"></figure></span>
      </div>
    </div>
  </div>
</div>
CSSコード表示
.hfig-caption2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hfig-caption2-demo-area {
  display: flex;
  justify-content: center;
}

.hfig-caption2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}

.hfig-caption2-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.hfig-caption2-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

/* 動画用figure */
.hfig-caption2-figure-media {
  margin: 0;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 4px;
  overflow: hidden;
}

.hfig-caption2-video-mock {
  background-color: #212529;
  color: #fff;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}

.hfig-caption2-media-caption {
  padding: 10px;
  text-align: center;
  font-size: 13px;
  color: #495057;
  background-color: #f8f9fa;
}

/* コードブロック用figure */
.hfig-caption2-figure-code {
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.hfig-caption2-code-caption {
  background-color: #343a40;
  color: #adb5bd;
  font-size: 12px;
  padding: 5px 10px;
  font-family: monospace;
  border-bottom: 1px solid #495057;
}

.hfig-caption2-pre {
  margin: 0;
  padding: 15px;
  background-color: #282c34;
  color: #98c379;
  font-family: monospace;
  font-size: 13px;
  overflow-x: auto;
}

.hfig-caption2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}

.hfig-caption2-hl-green {
  color: #98c379;
  font-weight: bold;
}

.hfig-caption2-hl-blue {
  color: #61afef;
  font-weight: bold;
}

<video>タグの使い方を詳しく知りたい人は「【HTML】videoタグの使い方：自動再生・レスポンシブ・背景動画」を一読ください。

【HTML】videoタグの使い方：自動再生・レスポンシブ・背景動画

figureタグと他のタグ（img・div・picture）の違い

HTML5のコーディングを行う際、画像を配置する場面で「img」や「div」、レスポンシブ対応で「picture」といったタグの使い分けに迷うエンジニアは少なくありません。

これらのタグは、ブラウザでの見た目は似たような結果になることもありますが、検索エンジンに伝える意味（セマンティクス）が明確に異なります。

ここでは、他タグとの違い、実務で間違えてはいけないタグの境界線と使い分けについて解説します。

figureタグと他のタグ（img・div・picture）の違い
  • figureタグとimgタグの使い分け
  • figureタグ・divタグ・pictureタグの使い分け

figureタグとimgタグの使い分け

figureとimgの使い分けは、「その画像が本文の理解に不可欠か、ただの装飾か」で決まります。

  • <img>単体で使う場合
    装飾目的の画像、アイキャッチ画像、サイトのロゴなど、本文から直接「図1を参照」と指さされないもの。
  • <figure>で囲む場合
    グラフ、図解、コードブロックなど、本文の解説を補完する「意味を持つコンテンツ」であり、キャプション（<figcaption>）を伴うのが自然なもの。
🖼️ img単体とfigureの正しい使い分け

1. <img>単体（装飾・イメージ画像）

🌊 サイトのトップ画像（ただの風景）

※本文から「この風景を参照」とは言われないため、figureは不要です。

2. <figure>（本文から参照される図表）

📊 アンケート結果グラフ
図1：利用者の年代別割合
<!– 💡 1. 装飾やイメージは img 単体でOK –>
<div class=”hero-image”>
  <img src=”ocean.jpg” alt=”美しい海”>
</div>

<!– 💡 2. データや図解には figure を使う –>
<figure>
  <img src=”chart.png” alt=”年代別グラフ”>
  <figcaption>図1：年代別割合</figcaption>
</figure>
HTMLコード表示
<div class="hfig-diff1-wrapper">
  <div class="hfig-diff1-demo-area">
    <div class="hfig-diff1-box">
      <div class="hfig-diff1-label">🖼️ img単体とfigureの正しい使い分け</div>
      
      <div class="hfig-diff1-visual">
        <p style="font-size:12px; color:#0d6efd; font-weight:bold; margin:0 0 5px 0;">1. <img>単体（装飾・イメージ画像）</p>
        <div class="hfig-diff1-img-only">
          <div class="hfig-diff1-hero-mock">🌊 サイトのトップ画像（ただの風景）</div>
          <p style="font-size:11px; color:#666; margin-top:5px;">※本文から「この風景を参照」とは言われないため、figureは不要です。</p>
        </div>

        <p style="font-size:12px; color:#198754; font-weight:bold; margin:20px 0 5px 0;">2. <figure>（本文から参照される図表）</p>
        <div class="hfig-diff1-figure-block">
          <figure class="hfig-diff1-correct-figure">
            <div class="hfig-diff1-chart-mock">📊 アンケート結果グラフ</div>
            <figcaption class="hfig-diff1-caption">図1：利用者の年代別割合</figcaption>
          </figure>
        </div>
      </div>

      <div class="hfig-diff1-code">
        <!-- 💡 1. 装飾やイメージは img 単体でOK --><br>
        <div class="hero-image"><br>
          <img src="ocean.jpg" alt="美しい海"><br>
        </div><br><br>
        <!-- 💡 2. データや図解には figure を使う --><br>
        <span class="hfig-diff1-hl-green"><figure></span><br>
          <img src="chart.png" alt="年代別グラフ"><br>
          <figcaption>図1：年代別割合</figcaption><br>
        <span class="hfig-diff1-hl-green"></figure></span>
      </div>
    </div>
  </div>
</div>
CSSコード表示
.hfig-diff1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hfig-diff1-demo-area {
  display: flex;
  justify-content: center;
}

.hfig-diff1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}

.hfig-diff1-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.hfig-diff1-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

/* img単体のモック */
.hfig-diff1-img-only {
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}

.hfig-diff1-hero-mock {
  background-color: #cfe2ff;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #084298;
  border-radius: 2px;
}

/* figureのモック */
.hfig-diff1-figure-block {
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}

.hfig-diff1-correct-figure {
  margin: 0;
  border: 2px solid #198754;
  padding: 10px;
  border-radius: 4px;
  background-color: #f8fff9;
}

.hfig-diff1-chart-mock {
  background-color: #e9ecef;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #495057;
  margin-bottom: 8px;
}

.hfig-diff1-caption {
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  color: #198754;
}

.hfig-diff1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}

.hfig-diff1-hl-green {
  color: #98c379;
  font-weight: bold;
}

改めて、imgタグとの使い方の違いを詳しく知りたい人は「【HTML】imgタグの使い方：src・altの使い分けや画像リサイズ・中央寄せ」を一読ください。

【HTML】imgタグの使い方：src・altの使い分けや画像リサイズ・中央寄せ

figureタグ・divタグ・pictureタグの使い分け

画像をセンタリングしたり、枠線をつけたりする際に「divとfigureどちらで囲むべきか」、スマホとPCで画像を切り替える際に「pictureとfigureはどう違うのか」という疑問も発生します。

  • レイアウト目的の箱なら<div>
    画像を中央に寄せたい、横に並べたいといった「見た目の調整」のためだけに要素を囲むなら、意味を持たない<div>を使います。
  • 画像の切り替えは<picture>
    <picture>は「どの画像ファイルを読み込むか」をブラウザに指示するタグであり、コンテンツの意味を定義するタグではありません。


もし「スマホとPCで画像が切り替わる自己完結した図表」を作りたい場合は、<figure>の中に<picture>を入れるのがよいです。

📐 divやpictureとの正しい共存方法

1. 単なる中央寄せならdivを使う

🐱

※レイアウト用の箱としてdivを使用

2. 図表の画像切り替えはfigureの中にpicture

<picture>でPC/スマホ画像を出し分け
📊 画面サイズで切り替わるグラフ
図2：デバイスごとのアクセス比率
<!– 💡 1. 見た目のためだけの「箱」は div –>
<div class=”center-wrap”>
  <img src=”cat.jpg” alt=”猫”>
</div>

<!– 💡 2. 画像の出し分け(picture)と図表(figure)の共存 –>
<figure>
  <picture>
    <source media=”(max-width: 600px)” srcset=”graph-sp.png”>
    <img src=”graph-pc.png” alt=”アクセス比率グラフ”>
  </picture>
  <figcaption>図2：アクセス比率</figcaption>
</figure>
HTMLコード表示
<div class="hfig-diff2-wrapper">
  <div class="hfig-diff2-demo-area">
    <div class="hfig-diff2-box">
      <div class="hfig-diff2-label">📐 divやpictureとの正しい共存方法</div>
      
      <div class="hfig-diff2-visual">
        <p style="font-size:12px; color:#dc3545; font-weight:bold; margin:0 0 5px 0;">1. 単なる中央寄せならdivを使う</p>
        <div class="hfig-diff2-div-layout">
          <div style="text-align: center; border: 1px dashed #ccc; padding: 5px;">
            <span style="font-size:30px;">🐱</span>
            <p style="font-size:10px; color:#666; margin:0;">※レイアウト用の箱としてdivを使用</p>
          </div>
        </div>

        <p style="font-size:12px; color:#198754; font-weight:bold; margin:20px 0 5px 0;">2. 図表の画像切り替えはfigureの中にpicture</p>
        <div class="hfig-diff2-picture-block">
          <figure class="hfig-diff2-figure-wrap">
            <div class="hfig-diff2-picture-mock">
              <div style="font-size:10px; background:#333; color:#fff; padding:2px 5px;"><picture>でPC/スマホ画像を出し分け</div>
              📊 画面サイズで切り替わるグラフ
            </div>
            <figcaption class="hfig-diff2-caption-text">図2：デバイスごとのアクセス比率</figcaption>
          </figure>
        </div>
      </div>

      <div class="hfig-diff2-code">
        <!-- 💡 1. 見た目のためだけの「箱」は div --><br>
        <span class="hfig-diff2-hl-red"><div class="center-wrap"></span><br>
          <img src="cat.jpg" alt="猫"><br>
        <span class="hfig-diff2-hl-red"></div></span><br><br>
        <!-- 💡 2. 画像の出し分け(picture)と図表(figure)の共存 --><br>
        <span class="hfig-diff2-hl-green"><figure></span><br>
          <span class="hfig-diff2-hl-blue"><picture></span><br>
            <source media="(max-width: 600px)" srcset="graph-sp.png"><br>
            <img src="graph-pc.png" alt="アクセス比率グラフ"><br>
          <span class="hfig-diff2-hl-blue"></picture></span><br>
          <figcaption>図2：アクセス比率</figcaption><br>
        <span class="hfig-diff2-hl-green"></figure></span>
      </div>
    </div>
  </div>
</div>
CSSコード表示
.hfig-diff2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hfig-diff2-demo-area {
  display: flex;
  justify-content: center;
}

.hfig-diff2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}

.hfig-diff2-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.hfig-diff2-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

/* divレイアウトのモック */
.hfig-diff2-div-layout {
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}

/* picture+figureのモック */
.hfig-diff2-picture-block {
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}

.hfig-diff2-figure-wrap {
  margin: 0;
  border: 2px solid #198754;
  padding: 10px;
  border-radius: 4px;
  background-color: #f8fff9;
}

.hfig-diff2-picture-mock {
  background-color: #e9ecef;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #084298;
  border: 1px dashed #0d6efd;
  margin-bottom: 8px;
}

.hfig-diff2-caption-text {
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  color: #198754;
}

.hfig-diff2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #198754;
}

.hfig-diff2-hl-green {
  color: #98c379;
  font-weight: bold;
}

.hfig-diff2-hl-blue {
  color: #61afef;
  font-weight: bold;
}

.hfig-diff2-hl-red {
  color: #e06c75;
  font-weight: bold;
}

divタグの使い方を詳しく知りたい人は「【HTML】divタグの使い方：横並びや中央寄せ・CSS装飾」を一読ください。

また、pictureタグの使い方を詳しく知りたい人は「【HTML】pictureタグの使い方：imgとの違い・レスポンシブ対応」を一読ください。

【HTML】divタグの使い方：横並びや中央寄せ・CSS装飾
【HTML】pictureタグの使い方：imgとの違い・レスポンシブ対応

figureタグをデザイン・レイアウト調整する方法

<figure>タグをHTMLに記述しただけでは、ブラウザ特有のデフォルトの余白がついてしまい、デザインとしては未完成の状態です。

実務では、CSSを用いて図表のサイズや配置を整えます。

<figure>タグを装飾する際は、<figure class="chart-figure">のように独自のクラスを付与し、クラス名に対してCSSを記述してデザインを管理します。

figureタグをデザイン・レイアウト調整する方法
  • 図表を中央寄せや右・左寄せにする
  • 複数のfigureタグを横並びにする
  • 幅やサイズ調整とレスポンシブ対応

図表を中央寄せや右・左寄せにする

記事の本文中で図表を中央に配置したい、あるいは右側に寄せてテキストを回り込ませたいなどの要望は頻繁に発生します。

図表を中央に寄せるには、<figure>に幅（max-width）を指定した上で、margin: 0 auto;（左右の余白を均等にする）を指定するのがよいです。

↔️ 図表の中央寄せ（center）と右寄せ

1. 中央寄せ（margin: 0 auto; を使用）

📊
図1：中央寄せのグラフ

2. 右寄せ（コンテナをFlexboxにして配置）

📸
図2：右寄せの写真
/* 💡 1. 中央寄せにする絶対的ルール */
.center-figure {
  margin: 0 auto; /* ★左右の余白を自動(auto)にして中央に置く */
  max-width: 200px; /* 幅の指定が必要 */
}

/* 💡 2. 右寄せにする場合（親要素をFlexにするのがモダン） */
.right-container {
  display: flex;
  justify-content: flex-end; /* ★中身を右側に寄せる */
}
HTMLコード表示
<div class="hfig-layout1-wrapper">
  
  <div class="hfig-layout1-demo-area">
    <div class="hfig-layout1-box">
      <div class="hfig-layout1-label">↔️ 図表の中央寄せ（center）と右寄せ</div>
      
      <div class="hfig-layout1-visual">
        <p style="font-size:12px; color:#198754; font-weight:bold; margin:0 0 5px 0;">1. 中央寄せ（margin: 0 auto; を使用）</p>
        <div style="background:#e9ecef; padding:15px; border-radius:4px; margin-bottom:20px;">
          <figure class="hfig-layout1-center-figure">
            <div class="hfig-layout1-img-mock">📊</div>
            <figcaption class="hfig-layout1-caption">図1：中央寄せのグラフ</figcaption>
          </figure>
        </div>

        <p style="font-size:12px; color:#0d6efd; font-weight:bold; margin:0 0 5px 0;">2. 右寄せ（コンテナをFlexboxにして配置）</p>
        <div class="hfig-layout1-right-container">
          <figure class="hfig-layout1-right-figure">
            <div class="hfig-layout1-img-mock">📸</div>
            <figcaption class="hfig-layout1-caption">図2：右寄せの写真</figcaption>
          </figure>
        </div>
      </div>

      <div class="hfig-layout1-code">
        /* 💡 1. 中央寄せにするルール */<br>
        <span class="hfig-layout1-hl-green">.center-figure</span> {<br>
          margin: 0 auto; /* ★左右の余白を自動(auto)にして中央に置く */<br>
          max-width: 200px; /* 幅の指定が必要 */<br>
        }<br><br>
        /* 💡 2. 右寄せにする場合（親要素をFlexにするのがモダン） */<br>
        <span class="hfig-layout1-hl-blue">.right-container</span> {<br>
          display: flex;<br>
          justify-content: flex-end; /* ★中身を右側に寄せる */<br>
        }
      </div>
    </div>
  </div>
</div>
CSSコード表示
.hfig-layout1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hfig-layout1-demo-area {
  display: flex;
  justify-content: center;
}

.hfig-layout1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}

.hfig-layout1-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.hfig-layout1-visual {
  background-color: #fff;
  padding: 0;
  margin-bottom: 20px;
}

/* 共通の画像モック */
.hfig-layout1-img-mock {
  background-color: #cfe2ff;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  border-radius: 2px;
  margin-bottom: 5px;
}

.hfig-layout1-caption {
  font-size: 11px;
  font-weight: bold;
  color: #333;
  text-align: center;
}

/* 1. 中央寄せのスタイル */
.hfig-layout1-center-figure {
  margin: 0 auto; /* ★これで中央に寄る */
  width: 100%;
  max-width: 150px;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}

/* 2. 右寄せのコンテナとスタイル */
.hfig-layout1-right-container {
  background: #e9ecef;
  padding: 15px;
  border-radius: 4px;
  display: flex;
  justify-content: flex-end; /* ★中身を右端に配置 */
}

.hfig-layout1-right-figure {
  margin: 0;
  width: 100%;
  max-width: 150px;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}

.hfig-layout1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #198754;
}

.hfig-layout1-hl-green {
  color: #98c379;
  font-weight: bold;
}

.hfig-layout1-hl-blue {
  color: #61afef;
  font-weight: bold;
}

配置に関するmarginプロパティの使い方を詳しく知りたい人は「【html&css】paddingとmarginの違いは？上下左右の余白と順番」を一読ください。

また、要素に対する中央寄せについて詳しく知りたい人は「【CSS】中央寄せする手法：上下左右・画像・効かない時の解決策」を一読ください。

【html&css】paddingとmarginの違いは？上下左右の余白と順番
【CSS】中央寄せする手法：上下左右・画像・効かない時の解決策

複数のfigureタグを横並びにする

「ギャラリーのように写真を3枚横に並べたい」「ビフォー・アフターの画像を2枚並べて比較したい」といった場面で、複数の<figure>を横並びにするレイアウトも頻出します。

複数の<figure>を横並びにする際は、親要素（箱である<div>）で包み、親要素に対してdisplay: flex;（Flexbox）を指定します。

Flexboxを使えば、図表間の隙間もgapプロパティを使って揃えられます。

🖼️ 複数のfigureを横並び（Flexbox）にする
🍎
図1: りんご
🍏
図2: 青りんご
🍋
図3: レモン

※親のdivに display: flex; と gap を指定するだけで綺麗に並びます。

<!– HTMLの構造（divで包む） –>
<div class=”gallery-wrap”>
  <figure>…</figure>
  <figure>…</figure>
</div>

/* 💡 CSSで横並びを指定 */
.gallery-wrap {
  display: flex; /* ★これで横並びになる */
  gap: 15px; /* ★図表と図表の隙間 */
}
/* 中のfigureの幅を均等にする */
.gallery-wrap figure {
  flex: 1; /* 均等な割合で幅を取る */
  margin: 0;
}
HTMLコード表示
<div class="hfig-layout2-wrapper">
  
  <div class="hfig-layout2-demo-area">
    <div class="hfig-layout2-box">
      <div class="hfig-layout2-label">🖼️ 複数のfigureを横並び（Flexbox）にする</div>
      
      <div class="hfig-layout2-visual">
        
        <div class="hfig-layout2-flex-container">
          
          <figure class="hfig-layout2-flex-item">
            <div class="hfig-layout2-img-mock" style="background:#f8d7da;">🍎</div>
            <figcaption class="hfig-layout2-caption">図1: りんご</figcaption>
          </figure>

          <figure class="hfig-layout2-flex-item">
            <div class="hfig-layout2-img-mock" style="background:#d1e7dd;">🍏</div>
            <figcaption class="hfig-layout2-caption">図2: 青りんご</figcaption>
          </figure>

          <figure class="hfig-layout2-flex-item">
            <div class="hfig-layout2-img-mock" style="background:#fff3cd;">🍋</div>
            <figcaption class="hfig-layout2-caption">図3: レモン</figcaption>
          </figure>

        </div>
        <p style="font-size:11px; color:#666; margin:10px 0 0 0; text-align:center;">※親のdivに <code>display: flex;</code> と <code>gap</code> を指定するだけで綺麗に並びます。</p>
      </div>

      <div class="hfig-layout2-code">
        <!-- HTMLの構造（divで包む） --><br>
        <span class="hfig-layout2-hl-blue"><div class="gallery-wrap"></span><br>
          <figure>...</figure><br>
          <figure>...</figure><br>
        <span class="hfig-layout2-hl-blue"></div></span><br><br>
        /* 💡 CSSで横並びを指定 */<br>
        <span class="hfig-layout2-hl-green">.gallery-wrap</span> {<br>
          <span class="hfig-layout2-hl-blue">display: flex;</span> /* ★これで横並びになる */<br>
          <span class="hfig-layout2-hl-blue">gap: 15px;</span>     /* ★図表と図表の隙間 */<br>
        }<br>
        /* 中のfigureの幅を均等にする */<br>
        <span class="hfig-layout2-hl-green">.gallery-wrap figure</span> {<br>
          flex: 1; /* 均等な割合で幅を取る */<br>
          margin: 0;<br>
        }
      </div>
    </div>
  </div>
</div>
CSSコード表示
.hfig-layout2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hfig-layout2-demo-area {
  display: flex;
  justify-content: center;
}

.hfig-layout2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 550px;
  border-radius: 4px;
}

.hfig-layout2-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.hfig-layout2-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

/* ★親コンテナをFlexboxにする */
.hfig-layout2-flex-container {
  display: flex;
  gap: 15px; /* 図表同士の隙間 */
}

/* 中のfigureの設定 */
.hfig-layout2-flex-item {
  flex: 1; /* 親の幅を均等に割る */
  margin: 0;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.hfig-layout2-img-mock {
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.hfig-layout2-caption {
  font-size: 12px;
  font-weight: bold;
  color: #495057;
  text-align: center;
}

.hfig-layout2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}

.hfig-layout2-hl-green {
  color: #98c379;
  font-weight: bold;
}

.hfig-layout2-hl-blue {
  color: #61afef;
  font-weight: bold;
}

displayプロパティの使い方を詳しく知りたい人は「【html&css】displayの種類は？flexやinline-blockの違い」を一読ください。

【html&css】displayの種類は？flexやinline-blockの違い

幅やサイズ調整とレスポンシブ対応

<figure>の幅やサイズを調整する際、Web制作において「スマートフォンで見た時に画像が画面からはみ出さないか」はクリアすべき必須要件です。

図表のレスポンシブ対応を実現するCSSセットは以下になります。

  1. <figure>には固定のwidthではなく、max-width: 100%;（画面幅を越えない設定）を指定します。
  2. その中の<img>に対しては、width: 100%;とheight: auto;を指定します。
    これにより、親の<figure>の枠組みに合わせて、中の画像がアスペクト比（縦横比）を保ったまま自動で縮小されます。
📱 レスポンシブ対応の完璧なサイズ調整

⭕️ 枠からはみ出さないCSS

← 幅に合わせて縮小 →
図1：画面幅に追従する図表
/* 💡 figure（外枠）の設定 */
figure {
  margin: 0 auto;
  max-width: 600px; /* 最大幅を指定（固定widthはNG） */
}

/* 💡 中の画像（img）を枠からはみ出させない */
figure img {
  width: 100%; /* 親要素の幅にいっぱいに広がる(縮む) */
  height: auto; /* 縦横比を崩さない */
  display: block; /* 画像の下にできる謎の隙間を消す */
}
HTMLコード表示
<div class="hfig-layout3-wrapper">
  
  <div class="hfig-layout3-demo-area">
    <div class="hfig-layout3-box">
      <div class="hfig-layout3-label">📱 レスポンシブ対応の完璧なサイズ調整</div>
      
      <div class="hfig-layout3-visual">
        <p style="font-size:12px; color:#198754; font-weight:bold; margin:0 0 10px 0;">⭕️ 枠からはみ出さないCSS</p>
        
        <div class="hfig-layout3-sp-mock">
          <figure class="hfig-layout3-responsive-figure">
            <div class="hfig-layout3-responsive-img">
              <span style="font-size:14px;">← 幅に合わせて縮小 →</span>
            </div>
            <figcaption class="hfig-layout3-caption">図1：画面幅に追従する図表</figcaption>
          </figure>
        </div>
      </div>

      <div class="hfig-layout3-code">
        /* 💡 figure（外枠）の設定 */<br>
        <span class="hfig-layout3-hl-green">figure</span> {<br>
          margin: 0 auto;<br>
          <span class="hfig-layout3-hl-blue">max-width: 600px;</span> /* 最大幅を指定（固定widthはNG） */<br>
        }<br><br>
        /* 💡 中の画像（img）を枠からはみ出させない */<br>
        <span class="hfig-layout3-hl-green">figure img</span> {<br>
          <span class="hfig-layout3-hl-blue">width: 100%;</span>    /* 親要素の幅にいっぱいに広がる(縮む) */<br>
          <span class="hfig-layout3-hl-blue">height: auto;</span>   /* 縦横比を崩さない */<br>
          <span class="hfig-layout3-hl-blue">display: block;</span> /* 画像の下にできる謎の隙間を消す */<br>
        }
      </div>
    </div>
  </div>
</div>
CSSコード表示
.hfig-layout3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hfig-layout3-demo-area {
  display: flex;
  justify-content: center;
}

.hfig-layout3-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}

.hfig-layout3-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.hfig-layout3-visual {
  background-color: #e9ecef;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* スマホ画面を模した狭いコンテナ */
.hfig-layout3-sp-mock {
  width: 100%;
  max-width: 250px;
  background-color: #fff;
  border: 2px solid #adb5bd;
  padding: 10px;
  border-radius: 10px;
}

/* レスポンシブなfigure */
.hfig-layout3-responsive-figure {
  margin: 0;
  width: 100%; /* コンテナいっぱいに広がる */
  border: 1px dashed #198754;
  padding: 5px;
  box-sizing: border-box;
}

/* 画像（img）の代わりのモック（width: 100%を再現） */
.hfig-layout3-responsive-img {
  width: 100%; /* ★親の幅に合わせる */
  height: 100px;
  background-color: #d1e7dd;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #0f5132;
  font-weight: bold;
}

.hfig-layout3-caption {
  text-align: center;
  font-size: 11px;
  color: #333;
  margin-top: 5px;
}

.hfig-layout3-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #198754;
}

.hfig-layout3-hl-green {
  color: #98c379;
  font-weight: bold;
}

.hfig-layout3-hl-blue {
  color: #61afef;
  font-weight: bold;
}

幅と高さの指定方法を詳しく知りたい人は「【html&css】width（横幅）とheight（高さ）の指定とボックスモデル」を一読ください。

また、様々な要素に対するレスポンシブ対応の設定について詳しく知りたい人は「【CSS】レスポンシブデザイン対応の基本：メディアクエリの書き方とパーツ別サンプル集」を一読ください。

【html&css】width（横幅）とheight（高さ）の指定とボックスモデル
【CSS】レスポンシブデザイン対応の基本：メディアクエリの書き方とパーツ別サンプル集

まとめ

分かりやすいようにまとめを記載します。

本記事のまとめ
  • 基本定義
    本文から参照される自己完結したコンテンツ（図表、写真、コードブロックなど）をマークアップする。
  • キャプションの付与
    <figure>内に<figcaption>を配置することで、検索エンジンや読み上げソフトに図表の説明を正確に伝達できる。
  • imgタグとの違い
    装飾やイメージ画像には<img>を使用し、意味を持つ図解やデータは<figure>を使用する。
  • divタグとの違い
    レイアウト（中央寄せ・横並び等）やデザインの調整目的で要素を囲む場合は、意味を持たない<div>を使用する。
  • 対象コンテンツ
    画像だけでなく、動画（video）、表（table）、ソースコード（pre/code）にも適用可能。
  • CSSレイアウト
    デフォルトで横幅を100%取るブロック要素のため、中央寄せにはmargin: 0 auto;、横並びには親要素にdisplay: flex;を使用する。
  • レスポンシブ対応
    親の<figure>にmax-widthを設定し、中の<img>にwidth: 100%; height: auto;を指定してはみ出しを防ぐ。

よくある質問（FAQ）

HTMLのfigureタグとは何ですか？

本文から参照される、独立した（自己完結した）図表や画像、コードブロックなどをひとまとめにするタグです。

これを使うことで、ブラウザや検索エンジンに対して「ここは単なる段落ではなく、意味のある図表のブロックである」と正確に伝えることができ、SEOやアクセシビリティの向上に繋がります。

imgタグとfigureタグの違いは何ですか？

「装飾」か「意味を持つコンテンツ」かの違いです。

<img>は画像を表示するタグですが、背景の装飾やアイキャッチなど、本文の理解に直接関係ないものには <img>を使います。

一方、本文中で「以下の図を参照」と解説されるようなグラフや図解・写真などには、<figure>タグの中に<img>を入れて使用します。

figureタグを使う時、figcaption（キャプション）は必須ですか？

構文上は必須ではありませんが、実務ではセットで使うことが推奨されます。

図表にタイトルや説明文を添える際、<figcaption>を使うことで「このテキストは直前の図表に対する説明である」という紐付けになります。

なお、<figcaption> は1つの <figure> の中に1つしか配置できません。

figureタグは画像（img）以外にも使っていいのですか？

はい、全く問題ありません。

むしろ画像以外にも積極的に使うべきです。

<figure>は「自己完結したコンテンツ」を定義するタグなので、動画（<video>）、表（<table>）、プログラミングのソースコード（<pre><code>）、引用文（<blockquote>）など、本文を補足するものであれば何を入れても機能します。

CSSでfigureタグを中央寄せにするにはどうすればいいですか？

CSSでmargin: 0 auto;を指定するのが基本です。

<figure>はブロック要素であり、テキスト用のtext-align: center;では箱自体を中央に寄せることはできません。

また、ブラウザによってはデフォルトで左右に余白が付いているため、margin: 0 auto;で余白をリセットしつつ中央に配置し、max-width等で幅を指定してください。

HTML

この記事を書いた人

sugiのアバター sugi Site operator

【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中

関連記事

目次