HTMLで図表にキャプションを追加する方法：figcaption要素の解説とサンプルコード

figcaption要素の役割

figcaption要素の書き方

<figure>
  <img src="image.jpg" alt="説明文">
  <figcaption>キャプション</figcaption>
</figure>

上記のように、figcaption要素はfigure要素の子要素として記述します。figure要素には、画像や図表などのコンテンツを記述します。

figcaption要素の注意点

figcaption要素の例

以下の例は、猫の画像とキャプションを記述するものです。

<figure>
  <img src="cat.jpg" alt="猫">
  <figcaption>かわいい猫の写真</figcaption>
</figure>

この例では、figcaption要素内にp要素を使ってキャプションを記述しています。

figcaption要素のスタイル

figcaption要素のスタイルは、CSSを使って変更することができます。例えば、以下のCSSコードでキャプションのフォントサイズを16pxに変更することができます。

figure figcaption {
  font-size: 16px;
}

この例は、先ほどと同じく猫の画像とキャプションを記述するものです。

<figure>
  <img src="cat.jpg" alt="猫">
  <figcaption>かわいい猫の写真</figcaption>
</figure>

図表とキャプション

この例は、棒グラフとキャプションを記述するものです。

<figure>
  <img src="chart.png" alt="売上推移グラフ">
  <figcaption>2023年の売上推移</figcaption>
</figure>

コードとキャプション

この例は、HTMLコードとキャプションを記述するものです。

<figure>
  <pre>
    &lt;h1&gt;Hello, world!&lt;/h1&gt;
  </pre>
  <figcaption>シンプルなHTMLコード</figcaption>
</figure>

figcaption要素のスタイル

この例は、figcaption要素のスタイルを変更するCSSコードです。

figure figcaption {
  font-size: 16px;
  text-align: center;
  color: #333;
}

このCSSコードを適用すると、figcaption要素内のテキストは16pxのフォントサイズで中央揃えになり、文字色はグレーになります。

複数の子要素

figure要素には、img要素以外にもp要素やa要素などのフローコンテンツを記述することができます。

<figure>
  <img src="image.jpg" alt="説明文">
  <p>これは画像の説明文です。</p>
  <a href="#">詳細はこちら</a>
  <figcaption>キャプション</figcaption>
</figure>

figcaption要素の代替方法として、以下の方法が考えられます。

alt属性

img要素には、alt属性という属性があります。alt属性には、画像の内容を代替するテキストを記述することができます。このテキストは、画像が表示されない場合や、スクリーンリーダーが使用される場合に表示されます。

<img src="image.jpg" alt="説明文">

alt属性は、figcaption要素よりも簡潔に記述することができます。しかし、figcaption要素ほど詳細な説明を記述することはできません。

画像のファイル名

画像のファイル名に、キャプション情報を含めることもできます。例えば、cat.jpgという画像ファイルをcat_photo.jpgに変更します。

この方法であれば、figcaption要素やalt属性を記述する必要はありません。しかし、ファイル名が長くなり、分かりにくくなるというデメリットがあります。

画像周辺のテキスト

画像周辺のテキストで、キャプション情報を記述することもできます。例えば、画像の上にタイトルを記述したり、画像の下に説明文を記述したりします。

この方法であれば、figcaption要素やalt属性を使用する必要はありません。しかし、画像とキャプション情報が離れてしまうため、分かりにくくなるというデメリットがあります。

JavaScript

JavaScriptを使って、画像にキャプション情報を表示することもできます。この方法であれば、figcaption要素やalt属性を使用する必要はありません。また、画像の位置やデザインに合わせて、自由にキャプション情報を表示することができます。

しかし、JavaScriptを使用する必要があるため、難易度が高くなります。

最適な代替方法

figcaption要素の代替方法は、状況によって異なります。