• Home
  • Web制作
  • Webページを彩る縁の下の力持ち！HTMLの<figure>タグを使いこなそう

Webページを彩る縁の下の力持ち！HTMLの<figure>タグを使いこなそう

schedule
Tags: HTML

Webページを彩る縁の下の力持ち！HTMLの<figure>タグを使いこなそう

Webサイトを制作する上で、欠かせない要素であるHTML。

様々なタグが存在しますが、その中でも今回は、画像や図表などをより効果的に見せる<figure>タグについて、詳しく解説していきます。

<figure>タグは、それ単体では効果を発揮するわけではありません。

しかし、適切に使うことによって、Webページの見栄えを向上させ、さらにアクセシビリティにも貢献する、まさに「縁の下の力持ち」と言えるでしょう。

<figure>タグとは？

<figure>タグは、HTML5から導入されたタグで、画像や図表、コードリスト、イラストなど、本文とは独立したコンテンツをマークアップする際に使用します。

例えば、以下のような場合に<figure>タグを使うことが考えられます。

  • 製品画像と説明文をまとめて表示する場合
  • 記事の内容を補足するグラフを表示する場合
  • コードのサンプルを表示する場合

<figure>タグを使うことで、検索エンジンやブラウザに対して、その部分が独立したコンテンツであることを明示することができます。

<figure>タグの使い方

<figure>タグの基本的な使い方は、非常にシンプルです。

マークアップしたいコンテンツを<figure>タグで囲み、開始タグと終了タグの間にコンテンツを記述します。

<figure>
    <img src="sample.jpg" alt="サンプル画像">
    <figcaption>これはサンプル画像です。</figcaption>
</figure>

上記の例では、画像を表示する<img>タグを<figure>タグで囲んでいます。

このように、<figure>タグの中に画像や図表などのコンテンツを配置することで、独立したコンテンツとして認識させることができます。

<figcaption>タグで説明文を追加

<figure>タグを使う際には、<figcaption>タグを使って、コンテンツの説明文を追加することができます。

<figcaption>タグは、<figure>タグ内の開始タグ直後または終了タグ直前に配置する必要があります。

<figure>
    <figcaption>これはサンプル画像です。</figcaption>
    <img src="sample.jpg" alt="サンプル画像">
</figure>

<figcaption>タグを使うことで、画像や図表の内容をより明確に伝えることができます。

<figure>タグを使うメリット

<figure>タグを使うことで、様々なメリットを得ることができます。

ここでは、主なメリットを3つご紹介します。

メリット1：アクセシビリティの向上

<figure>タグを使うことで、視覚に障がいのあるユーザーに対しても、コンテンツの内容を正しく伝えることができます。

スクリーンリーダーを使用しているユーザーは、<figure>タグでマークアップされたコンテンツを、本文とは別に認識することができるためです。

メリット2：SEOへの効果

<figure>タグを使うことで、検索エンジンに対して、コンテンツの構造をより明確に伝えることができます。

これは、検索エンジンがWebページの内容を理解する上で、非常に重要な要素となります。

メリット3：デザインの自由度向上

<figure>タグで囲ったコンテンツは、CSSを使って自由にデザインすることができます。

例えば、画像の周りに枠線を追加したり、影をつけたりすることができます。

まとめ

今回は、HTMLの<figure>タグについて詳しく解説しました。

<figure>タグは、画像や図表などをより効果的に見せるだけでなく、アクセシビリティの向上やSEOにも貢献する、非常に便利なタグです。

ぜひ、<figure>タグを活用して、より魅力的なWebページを作成してください。

関連記事