VIDEO LESSON

HTMLのfigureタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:26動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:04エイチティーエムエルタグ編の七十八本目は、フィギュアタグです。
0:09フィギュアは、図や画像、コード例など、本文から参照できる内容をひとつのまとまりとして囲む要素です。
0:17たとえば、文章の中で、右の図をご覧ください、と紹介するような画像が典型例です。
0:23今回は、このフィギュアの役割と、説明文を付けるフィグキャプションとの組み合わせ、
0:29使う場面と使わない場面の見分け方を順番に確認していきましょう。
0:34画像をただ置くのではなく、本文と結び付けて伝えるための要素だとイメージしてください。
0:41基本の書き方を確認します。
0:43フィギュアは開始タグと終了タグを両方書き、その間に図や画像といった内容を置きます。
0:51画面の例では、フィギュアの中に画像をひとつ置いた、最もシンプルな形を示しています。
0:58この教材では、開始タグと終了タグを省略せず、明示する書き方で統一します。
1:05フィギュアは、本文の流れの中に置ける要素で、段落などと同じようにボディの適切な位置に配置します。
1:14まずは、内容を正しく囲むという基本形を押さえましょう。
1:19タグの対応関係を目で追う確認が、表示崩れを防ぐ一番の近道です。
1:24フィギュアと最もよく組み合わせるのが、フィグキャプションです。
1:29これは、フィギュア全体に対する説明文や題名を表す要素です。
1:34画面の例では、画像の下にフィグキャプションで、図一、来場者数の推移、という説明を付けています。
1:41フィグキャプションは、フィギュアの中にひとつだけ置くことができ、位置は最初か最後のどちらかと決まっています。
1:49説明文があることで、読み手はその図が何を示しているのかを一目で理解できますし、
1:54本文から、図一を見てください、と参照もしやすくなります。
1:59図と説明をセットで扱えることが、フィギュアの大きな利点です。
2:04フィギュアの中に入れられる内容は、画像だけではありません。
2:09イラストや写真、グラフといった図はもちろん、画面の例のように、コード例を説明文とセットで示す場合にも使えます。
2:17ほかにも、表や動画、まとまった引用などを、本文から参照するまとまりとして囲む場面があります。
2:24大切なのは、中身の種類ではなく、その内容が本文と関連しながらも、ひとつのまとまりとして取り出せるかどうかです。
2:33逆にいえば、本文そのものの段落を何でもフィギュアに入れるわけではありません。
2:39参照されるまとまり、という視点で中身を選ぶと判断しやすくなります。
2:44属性を確認します。
2:45フィギュアには、この要素専用の必須属性はありません。
2:49必要に応じて、アイディーやクラス、ラングといった、多くの要素で使える共通属性を利用します。
2:56アイディーは文書の中で一つだけの識別子で、ページ内リンクやジャバスクリプトからの参照に使います。
3:03クラスは、シーエスエスやスクリプトで複数の要素をまとめて選ぶための名前です。
3:09データ属性でアプリ独自の値を保持することもできますが、秘密情報を置く場所ではありません。
3:16なお、画像のファイルを指定するエスアールシーなどは、中の画像要素に付ける属性です。
3:22フィギュア自身の属性と混同しないように注意しましょう。
3:26記事の活用事例を読み解きます。
3:29例では、学習の順番を示す図をフィギュアで囲み、その下に、ウェブ制作の学習順、
3:34という説明文をフィグキャプションで付けています。
3:39画像のエーエルティーには、図そのものが何を表しているかが書かれ、キャプションには、
3:44図の題名が簡潔に示されています。
3:49試すときは、練習用ファイルをコピーし、ボディの適切な位置にこの形を写して、
3:53保存後に再読み込みしてください。
3:58開発者ツールのエレメンツで、画像と説明文がフィギュアの中に正しく入っているかを確認すると安心です。
4:06図と題名がセットになった、フィギュアらしい基本形です。
4:11ここで、混同しやすいエーエルティーとフィグキャプションの違いを整理します。
4:17エーエルティーは、画像が表示できないときや、読み上げを利用するときに、画像の代わりとなるテキストです。
4:26一方、フィグキャプションは、すべての読者に画面上で見せる、図の説明や題名です。
4:32役割が違うため、まったく同じ文章を両方に書いてしまうと、読み上げでは同じ内容が二度続くなど、
4:38かえって分かりにくくなります。
4:43画像の内容そのものはエーエルティーに、図全体の題名や補足はキャプションに、
4:47と書き分けることが大切です。
4:51この書き分けが、アクセシビリティを高めるポイントになります。
4:57使う場面と使わない場面を見分けましょう。
5:00フィギュアが向いているのは、説明文を付けたい図や、本文から独立したまとまりとして参照される内容です。
5:07反対に、すべての画像をフィギュアで囲む必要はありません。
5:12サイトのロゴや、文章の流れの中に直接属する画像、装飾だけの画像は、そのまま画像要素として置く方が自然です。
5:20判断の目安は、その内容に説明文を付けたいか、本文から図として参照したいかどうかです。
5:26意味のない囲みを増やすと、かえって文書構造が伝わりにくくなります。
5:31必要な場所にだけ使うことが、読みやすいコードにつながります。
5:36見た目との関係を確認します。
5:38フィギュアには、ブラウザーの標準スタイルで少し余白が付くことがありますが、
5:42それ以上の見た目は自分でシーエスエスで整えます。
5:46画面の例では、フィギュアに上下の余白と中央寄せを指定し、キャプションの文字を少し小さく、
5:50色を薄くしています。
5:54このように、キャプションらしい見た目もシーエスエスの担当です。
5:59フィギュアはあくまで、図と説明のまとまりという意味を表す要素です。
6:03意味を持つタグの選択と、見た目の指定は分けて考える。
6:07この原則は、ほかの要素でも共通する大切な考え方です。
6:11ブラウザー互換性を確認します。
6:13記事が参照するエムディーエヌのデータでは、フィギュア要素は、クロームが八以降、
6:20エッジが十二以降、ファイアフォックスが四以降、サファリが五点一以降と、主要ブラウザーで古くから対応しています。
6:27基本的な使い方であれば、対応を心配せず安心して使える要素だといえます。
6:32ただし、この表は要素本体の対応開始の目安です。
6:36新しい属性や機能を組み合わせる場合は、本体とは別に対応状況を確認し、利用対象の実機でも試しておくと安心です。
6:43モバイル環境は実装条件が異なる場合もあるため、あわせて確認しましょう。
6:49最後に、よくある間違いとまとめです。
6:51一つ目は、すべての画像をフィギュアで囲んでしまうことです。
6:55説明や参照が必要な図に絞りましょう。
6:58二つ目は、フィグキャプションをフィギュアの外に置いてしまうことです。
7:03キャプションは必ずフィギュアの中、最初か最後に置きます。
7:07三つ目は、エーエルティーとキャプションに同じ文章を重ねることです。
7:11役割に応じて書き分けましょう。
7:13公開前には、目的に合ったまとまりか、狭い画面でも図と説明が欠けていないかを確認してください。
7:20図に説明を添えたい場面で、ぜひフィギュアを活用してみてください。
7:25お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

figureタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。図、画像、コード例など、本文から参照できるまとまりです。

解説記事・サンプルコードを読む：HTMLのfigureタグとは？属性・使い方・ブラウザー互換性と活用例 →