figureタグの基本的な紹介
figureタグとは何か
figureタグは、HTML5で導入されたタグの一つです。このタグは、画像、図表、イラストレーション、コードブロック、ビデオクリップなど、独立したコンテンツをグループ化するために使用されます。
これらのコンテンツは、本文の流れから独立しているため、figureタグを使うことで、それが一つの独立した要素であることをはっきりと示すことができます。
<figure> は HTML の要素で、図表などの自己完結型のコンテンツを表し、任意で <figcaption> 要素を使用して表されるキャプションを付けることができます。図、すなわちキャプションとその中身は一単位として参照されます。
参考：mdn web docs
figureタグの使われ方
画像のキャプション付き表示：画像に説明文（キャプション）を付けて表示させる。
グラフや図表の表示：データの視覚的な表現を行う際に、キャプションを含めて表示させるとき。
コードスニペットの表示：プログラミングのコードを表示し、それについて説明を付ける。
ビデオやメディアの表示：ビデオクリップやオーディオクリップを表示し、説明を付ける。
figureタグの基本的な使い方
基本的な書き方
<figure>
<img src="image.jpg" alt="説明文">
<figcaption>画像の説明</figcaption>
</figure>figureタグの応用的な使い方
figureタグを使った定義リストの作成方法
<figure>
<img src="chart.png" alt="データチャート">
<figcaption>
<strong>図1:</strong> 2023年の売上データ
</figcaption>
</figure>複数のfigureタグをネストする方法とその効果
複数のfigureタグをネストして使用する場合、複数の図表やメディアをグループ化して表示することができます。
<figure>
<figure>
<img src="image1.jpg" alt="画像1の説明">
<figcaption>画像1の説明文</figcaption>
</figure>
<figure>
<img src="image2.jpg" alt="画像2の説明">
<figcaption>画像2の説明文</figcaption>
</figure>
<figcaption>メインの説明文</figcaption>
</figure>CSSを使用したfigureタグのスタイリング方法
figure {
margin: 1em 0;
padding: 0;
border: 1px solid #ccc;
display: inline-block;
}
figcaption {
font-size: 14px;
color: #666;
text-align: center;
margin-top: 0.5em;
}アクセシビリティへの配慮
スクリーンリーダーへの対応
figureタグとalt属性を正しく使用することで、視覚に障害のあるユーザーにもコンテンツを理解してもらいやすくします。
<figure>
<img src="image.jpg" alt="視覚的な説明文">
<figcaption>画像の説明</figcaption>
</figure>- アクセシビリティ
障害を持つ人や高齢者、一時的な制約を持つ人など、さまざまな能力や状況を考慮したデザインや技術の提供を意味します。 - スクリーンリーダー
コンピューター上のテキストや要素を音声やブライル（点字）、または拡大表示などの形式でユーザーに読み上げることができる、コンピューターを使用する際に利用するソフトウェアです。
ARIA属性の活用
ARIA属性を追加することで、さらにアクセシビリティを向上させることができます。
<figure role="figure" aria-labelledby="fig1-caption">
<img src="image.jpg" alt="視覚的な説明文">
<figcaption id="fig1-caption">画像の説明</figcaption>
</figure>figureタグのまとめ
figureタグは、画像や図表などの独立したコンテンツをグループ化し、説明文を付けるための便利なタグです。figcaptionタグと組み合わせることで、内容の理解を助ける説明文を追加することができます。
これらの知識を活用して、figureタグを効果的に使いこなし、ウェブサイトのコンテンツをより魅力的で理解しやすいものにしていきましょう。