はじめに
HTML の<figcaption>タグは、<figure>要素内のコンテンツにキャプションを提供するために使用されます。この実験では、<figcaption>タグを使用して画像にキャプションを追加する方法を学びます。
注：
index.htmlでコーディングを練習し、Visual Studio Code で HTML を書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 で Web サービスを実行します。その後、Web 8080タブを更新して Web ページをプレビューできます。
画像とキャプションの追加
好きなエディタでindex.htmlファイルを開き、基本的な HTML 構造を書きます。<DOCTYPE>宣言、<html>、<head>、<body>タグを追加します。
<body>タグの中に、中に画像タグを持つ<figure>要素を作成します。好きな画像を使うことができます。たとえば：
<figure>
<img src="your-image-url-here" alt="Your image description" />
</figure>
- 次に、画像にキャプションを提供するために、
<img>タグの直後に<figcaption>タグを追加します。たとえば：
<figure>
<img src="your-image-url-here" alt="Your image description" />
<figcaption>Image caption goes here</figcaption>
</figure>
index.htmlファイルに変更を保存し、Web ブラウザで開きます。すると、画像の下にキャプションが表示されるはずです。
キャプションのスタイリング
デフォルトでは、
<figcaption>タグは親要素の幅いっぱいを占めるブロックレベル要素です。CSS を使ってキャプションの位置、フォント、色などを調整することができます。キャプションのフォント、フォントサイズ、色を変更するには、
index.htmlファイルの<head>セクションに次の CSS コードを追加します。
figcaption {
font-family: Arial, sans-serif;
font-size: 18px;
color: #555;
}
- CSS を使って
<figcaption>タグのマージンとパディングプロパティを調整することで、キャプションの位置も変更できます。たとえば：
figcaption {
margin-top: 10px;
padding: 5px;
}
複数の画像とキャプションの追加
前の手順を繰り返すことで、単一の Web ページに複数の画像とキャプションを追加できます。それぞれの画像に対して、
<img>タグと<figcaption>タグを持つ新しい<figure>要素を作成します。index.htmlファイルに変更を保存し、Web ページを更新します。すると、すべての画像の下にキャプションが表示されるはずです。
まとめ
HTML の<figcaption>タグは、Web ページに画像のキャプションを提供するための強力なツールです。このタグを使用することで、画像を視聴者にとってよりアクセスしやすく、ユーザーフレンドリーにすることができます。キャプションを見た目も素敵にするために、CSS を使ってスタイリングすることを忘れないでください！
