figureとfigcaption
キャプション付きの意味的なfigureコンテナで画像を囲みます。
「figureとfigcaption」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
figureとは
<figure>要素は、本文から参照される自己完結型のコンテンツをマークアップします：
- キャプション付きの画像
- コードリスト
- 図、グラフ、イラスト
- 引用
重要な特徴は、本文の流れから取り除いても、周囲の文章が意味を成すことです。
figcaptionを伴うfigure
<figcaption>はfigureのキャプションを提供します：
<figure>
<img src="chart.png" alt="Bar chart showing Q1-Q4 revenue">
<figcaption>Figure 1: Quarterly revenue growth, 2024.</figcaption>
</figure>
<!-- figcaption can be first or last child of figure -->
<!-- It is visible text that supplements the alt text -->figcaptionの位置
<figcaption>は、メインコンテンツの前後どちらにも配置できます：
<figure>
<figcaption>Listing 1: Hello World in HTML</figcaption>
<pre><code><!DOCTYPE html>
<html>
<body>Hello, World!</body>
</html></code></pre>
</figure>アクセシビリティ：altとfigcaptionの違い
違いを理解しましょう：
alt— スクリーンリーダーや画像が壊れている場合のために、画像の内容を説明しますfigcaption— 背景、出典、説明を示す、目に見えるキャプションです
両者は異なる目的を持つため、同じ内容を重複させないでください。
<figure>
<img src="chart.png" alt="Line chart showing 45% growth from January to December">
<figcaption>Source: 2024 Annual Report, Finance Department.</figcaption>
</figure>figure内のコードリスト
ラベル付きのコード例には<figure>を使用します：
<figure>
<pre><code>function greet(name) {
return `Hello, ${name}!`;
}</code></pre>
<figcaption>Example 1: A simple greeting function in JavaScript.</figcaption>
</figure>figure内の引用
<figure>は<blockquote>と組み合わせると効果的です：
<figure>
<blockquote>
<p>The web is for everyone.</p>
</blockquote>
<figcaption>— Tim Berners-Lee, inventor of the World Wide Web</figcaption>
</figure>figure内の複数の画像
figureには、関連する複数の画像を含めることができます：
<figure>
<img src="before.jpg" alt="Garden before renovation">
<img src="after.jpg" alt="Garden after renovation">
<figcaption>Before and after the 2024 renovation project.</figcaption>
</figure>figureとdivの比較
<figure>と<div>を使い分ける場面：
- コンテンツを付録に移せる場合は
<figure>を使用します - 目に見えるキャプションが必要な場合は
<figure>を使用します - レイアウト用のコンテナーや、自己完結していない画像グループには
<div>を使用します
本文からfigureを参照する
本文からfigureを参照します：
<p>The growth trend is illustrated in <a href="#fig1">Figure 1</a>.</p>
<figure id="fig1">
<img src="growth.png" alt="Revenue growth chart 2020-2024">
<figcaption>Figure 1: Annual revenue growth 2020-2024.</figcaption>
</figure>画像にfigureは必須ではない
すべての画像を<figure>で囲む必要はありません：
<!-- Decorative or simple content image: just img -->
<img src="avatar.jpg" alt="Profile photo of Jane Doe" class="avatar">
<!-- Image with a caption OR self-contained reference: use figure -->
<figure>
<img src="diagram.svg" alt="System architecture diagram">
<figcaption>Figure 3: The three-tier architecture.</figcaption>
</figure>figureとfigcaptionのスタイル設定
figureでよく使うCSS：
figure {
margin: 2rem auto;
max-width: 100%;
text-align: center;
}
figcaption {
font-size: 0.875rem;
color: #666;
margin-top: 0.5rem;
font-style: italic;
}クイックチェック
altテキストとfigcaptionの主な違いは何ですか？
まとめ：figureとfigcaption
figureの基本：
<figure>— 本文から参照される自己完結型のコンテンツ<figcaption>— figureの最初または最後の子要素になる、目に見えるキャプションalt— スクリーンリーダー向けの目に見えない説明figcaption— すべてのユーザーに見える背景情報- 画像、コード、引用、グラフに使用できます
よくある質問
「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は初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「figureとfigcaption」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。