HTML Academy · レッスン

figureとfigcaption再入門

Q: 「figureとfigcaption再入門」で何を学びますか？

画像以外にもコード、グラフ、引用にfigureを適用します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

画像以外にもコード、グラフ、引用にfigureを適用します

レッスン 2/413 ステップ

「figureとfigcaption再入門」はCoddyKit上の無料HTML Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。

画像以外にも使えるfigure

<figure>要素は画像専用ではありません。メインテキストから参照される、自己完結型のあらゆるコンテンツを表します：

コード例
数式
グラフや図
引用
キャプション付きの音声や動画

figure内のコードリスト

コード例をfigureとしてラベル付けします：

<figure id="code-1">
  <figcaption>Listing 1: A simple JavaScript greeting function.</figcaption>
  <pre><code>function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet('World'));</code></pre>
</figure>

<p>As shown in <a href="#code-1">Listing 1</a>, the function...</p>

figure内の音声

説明的なキャプション付きの音声：

<figure>
  <audio controls src="podcast-episode-42.mp3">
    Your browser does not support audio.
  </audio>
  <figcaption>Episode 42: HTML5 Deep Dive — 48 minutes.</figcaption>
</figure>

figure内の動画

内容を説明するキャプション付きの動画：

<figure>
  <video controls width="800" height="450">
    <source src="tutorial.mp4" type="video/mp4">
    <source src="tutorial.webm" type="video/webm">
  </video>
  <figcaption>Tutorial: Building a responsive navigation menu in 10 minutes.</figcaption>
</figure>

figure内のグラフ

データソースをキャプションにしたグラフ画像：

<figure>
  <img
    src="revenue-chart.png"
    alt="Line chart showing revenue growth from $2M in 2020 to $8M in 2024"
    width="800"
    height="400"
  >
  <figcaption>
    Figure 3: Annual revenue growth 2020-2024.
    Source: Finance Department Annual Report.
  </figcaption>
</figure>

figure内のSVG図

キャプション付きのSVG図：

<figure>
  <svg role="img" aria-labelledby="diagram-title" width="400" height="300">
    <title id="diagram-title">Three-tier architecture diagram</title>
    <!-- SVG content -->
  </svg>
  <figcaption>Figure 4: Client-server-database three-tier architecture.</figcaption>
</figure>

figure内の引用

長い引用をfigureとして表します：

<figure>
  <blockquote cite="https://www.w3.org/TR/html52/">
    <p>The main element represents the main content of the body of a document
       or application.</p>
  </blockquote>
  <figcaption>— W3C HTML5.2 Specification</figcaption>
</figure>

altとfigcaptionの違いを再確認

違いをもう一度確認します：

alt — 非表示で、スクリーンリーダー向けに画像の代わりになります。画像に何が写っているかを説明します
figcaption — 表示され、文脈や出典、番号を提供します。figureが何を意味するかを説明します

<figure>
  <img src="volcano.jpg" alt="Ash plume rising 2km above Mount St. Helens">
  <figcaption>Figure 7: The 1980 eruption. Source: USGS.</figcaption>
</figure>

figcaptionの配置

figcaptionはfigureの最初または最後の子要素にできます：

<!-- Caption above the content (common for code listings) -->
<figure>
  <figcaption>Listing 1: Hello World</figcaption>
  <pre>...</pre>
</figure>

<!-- Caption below the content (common for images) -->
<figure>
  <img src="photo.jpg" alt="...">
  <figcaption>Caption below the image</figcaption>
</figure>

CSSカウンターによるfigureの番号付け

CSSカウンターを使ってfigureに自動で番号を付けます：

/* In CSS: */
main {
  counter-reset: figure-counter;
}
figure {
  counter-increment: figure-counter;
}
figcaption::before {
  content: 'Figure ' counter(figure-counter) ': ';
  font-weight: bold;
}

figureを使用しない場面

すべての画像をfigureで囲む必要はありません：

装飾的な画像（空のalt） → <img alt="">だけを使用します
純粋に表示だけを目的とする画像 → CSSのbackground-image
ユーザー一覧のアバター画像 → <img>だけを使用します
ヘッダーのロゴ → <img>だけを使用します

確認問題

figureのどの子要素が、すべてのユーザーに表示されるキャプションを提供しますか？

対話的なレッスンで答える

まとめ：figureを再確認

figureの要点を再確認します：

<figure> — 参照される自己完結型のコンテンツ（画像、コード、グラフ、音声、引用など）
<figcaption> — 表示されるキャプションで、最初または最後の子要素
altテキスト＝非表示の説明、figcaption＝表示される文脈
CSSカウンターで自動的に番号を付けられます
すべての画像にfigureが必要なわけではありません

無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 40
レッスン: 159

無料で学習を始めるコース全体を表示

よくある質問

「figureとfigcaption再入門」レッスンは無料ですか？

はい。「figureとfigcaption再入門」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。

「figureとfigcaption再入門」で何を学びますか？

画像以外にもコード、グラフ、引用にfigureを適用しますブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「figureとfigcaption再入門」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML Academyレッスンでコードを書いて実行できますか？

はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← HTML Academyに戻る