7.1 エレメント<figure>
HTMLで<figure>と<figcaption>タグの利用は、画像や他のマルチメディア要素を
キャプション付きで追加するためのセマンティックな方法なんだ。これらのタグは、コンテンツの構造を改善し、
ユーザーや検索エンジンにとってもよりアクセスしやすく、理解しやすくしてくれる。では、これらの要素を詳しく見ていこう。
<figure>要素は、ドキュメントの残り部分を説明したり、明確にするような自立した内容を示すのに使われるよ。
それは画像やチャート、ビデオ、オーディオ、表、またはコードブロックを含むことができる。
通常、<figure>要素は、<figure>内部の内容にキャプションを追加する
<figcaption>要素と一緒に使われるんだ。
構文
<figure>
<!-- ここには任意のマルチメディア要素、例えば画像がくる -->
</figure>
使用例:
例 1: キャプション付き画像
<figure>
<img src="example.jpg" alt="画像の例">
<figcaption>画像の内容を説明するキャプション</figcaption>
</figure>
例 2: キャプション付きテーブル
<figure>
<table>
<tr>
<th>タイトル 1</th>
<th>タイトル 2</th>
</tr>
<tr>
<td>データ 1</td>
<td>データ 2</td>
</tr>
</table>
<figcaption>テーブルのキャプション</figcaption>
</figure>
7.2 エレメント<figcaption>
<figcaption>要素は、<figure>の内容にキャプションを追加するためのものだよ。
開発者の好みやデザインの要件に応じて、<figure>の内容の前でも後でも配置できるんだ。
構文
<figure>
<!-- figureエレメントの内容 -->
<figcaption>内容のキャプション</figcaption>
</figure>
使用例:
例 1: 画像の後のキャプション
<figure>
<img src="landscape.jpg" alt="風景">
<figcaption>山と湖の美しい風景</figcaption>
</figure>
例 2: 画像の前のキャプション
<figure>
<figcaption>山と湖の美しい風景</figcaption>
<img src="landscape.jpg" alt="風景">
</figure>
7.3 アクセシビリティとSEO
<figure>と<figcaption>要素を使うと、サイトのアクセシビリティとSEOが向上するよ。
障がいを持つ人々が使用するスクリーンリーダーが、セマンティックタグ<figcaption>を通じて画像のコンテキストを
よりよく理解することができるんだ。検索エンジンもHTMLドキュメントの構造を考慮するから、ページのインデックス化やランキングを
改善するのに役立つんだ。
様々なコンテキストでの使用例:
例 1: チャートの埋め込み
<figure>
<img src="chart.png" alt="売上の成長を示すチャート">
<figcaption>最近の四半期の売上の成長を示すチャート</figcaption>
</figure>
例 2: キャプション付きのビデオコンテンツ
<figure>
<video controls>
<source src="example.mp4" type="video/mp4">
お使いのブラウザはビデオをサポートしていません。
</video>
<figcaption>製品の動作を示すビデオの例</figcaption>
</figure>
例 3: 説明付きのコード
<figure>
<pre>
<code>
function helloWorld() {
console.log('Hello, world!');
}
</code>
</pre>
<figcaption>JavaScriptの例として、"Hello, world!"をコンソールに出力する関数</figcaption>
</figure>
7.4 CSSでのスタイルと装飾
CSSを使って<figure>と<figcaption>要素をスタイリングすると、ビジュアルな美しさを生み出し、
コンテンツの見栄えを良くすることができるよ。
スタイルの使用例:
figure {
border: 1px solid #ccc;
padding: 10px;
margin: 20px;
text-align: center;
}
figcaption {
font-style: italic;
color: #555;
margin-top: 10px;
}
<figure>
<img data-max-width="800" data-id="ef101655-fef4-40b9-8b6c-f0c02494a747" src="https://cdn.javarush.com/images/article/ef101655-fef4-40b9-8b6c-f0c02494a747/800.jpeg" alt="nature">
<figcaption>美しい自然の景色</figcaption>
</figure>
<figure>
<img src="nature.jpg" alt="自然">
<figcaption>美しい自然の景色</figcaption>
</figure>
<figure>と<figcaption>の要素を利用することで、キャプション付きのマルチメディアコンテンツを
ウェブページに追加するためのセマンティックかつ構造化された方法を提供するんだ。これらの要素は、アクセシビリティとSEOを向上させる
だけでなく、ユーザーにとってもコンテンツをより理解しやすく、構造化されたものにしてくれるよ。
GO TO FULL VERSION