VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:04エイチティーエムエルタグ編の七十九本目は、フィグキャプションタグです。
0:09フィグキャプションは、前回学んだフィギュアの中に置いて、その図や画像、コード例が何を示しているのかを言葉で伝える説明文の要素です。
0:20写真の下に添えるキャプションや、図一、売上の推移、といった題名を思い浮かべると分かりやすいでしょう。
0:28今回は、置き場所のルールから、記事のコード例、エーエルティーやピーとの違いまで、
0:32順番に確認していきましょう。
0:36図に名前を付けることで、本文の中でその図へ触れるときの言葉もそろい、文章全体の流れが整理されます。
0:44基本の書き方を確認します。
0:46フィグキャプションは開始タグと終了タグを両方書き、必ずフィギュア要素の中に置きます。
0:52画面の例では、画像の下にフィグキャプションで、図一、来場者数の推移、という説明を付けています。
1:00位置のルールが大切で、置けるのはフィギュアの最初か最後のどちらか、そして一つのフィギュアに対して一つだけです。
1:08真ん中に置いたり、複数並べたりはしません。
1:12まずは、図と説明が同じフィギュアの中に収まっているかを確認する習慣を付けましょう。
1:18開始タグと終了タグの対応が取れているか、書き終わったあとにもう一度目で追って確認しましょう。
1:25記事の活用事例を読み解きます。
1:27例に使われているのは画像ではなく、コード例です。
1:31フィギュアの中に、プリーとコードで示した短いプログラムを置き、その下にフィグキャプションで、
1:36変数に値を代入する例、と説明を付けています。
1:41このように、フィグキャプションの相手は写真やグラフに限りません。
1:45試すときは練習用ファイルをコピーし、ボディの適切な位置にこの形を写して、
1:49保存後に再読み込みしてください。
1:53開発者ツールのエレメンツで、説明文がフィギュアの中に入っているかを確認すると安心です。
1:59コードとその説明がひとまとまりとして扱えることが、この書き方の大きなポイントです。
2:05置く位置について、もう少し詳しく見ます。
2:07フィグキャプションは、フィギュアの最後に置く書き方がよく使われます。
2:11図を先に見て、その直下で説明を読む流れが自然だからです。
2:15一方、画面の例のように最初に置くこともできます。
2:17題名を先に示してから図を見せたい場合に選ぶ書き方です。
2:21どちらの位置でも、フィグキャプションがそのフィギュア全体の説明であることに変わりはありません。
2:26選んだ位置で文書全体の書き方をそろえておくと、読み手にも書き手にも分かりやすいコードになります。
2:32どちらにするか迷ったら、読み手の視線が図と説明のどちらに先に触れるべきかで考えてみてください。
2:38フィグキャプションの中身を確認します。
2:41基本は、図の題名や短い補足を文章で書く場所です。
2:44画面の例のように、ストロングで一部を目立たせたり、リンクを入れたりといった、
2:48文章の中で使う要素も組み合わせられます。
2:52ただし、キャプションはあくまで図への短い説明です。
2:56何行にもなる詳しい解説まで詰め込むと、図と本文の区別が曖昧になってしまいます。
3:01長い説明は本文の段落に書き、キャプションには、その図が何であるかが一目で分かる一文を残す、
3:05という分け方がおすすめです。
3:10写真の出典や撮影した場面などを短く補足したいときにも、この場所が役立ちます。
3:15属性を確認します。
3:16フィグキャプションには、この要素専用の必須属性はありません。
3:21必要に応じて、アイディーやクラス、ラングといった、多くの要素で使える共通属性を利用します。
3:28アイディーは文書の中で一つだけの識別子で、ページ内リンクやジャバスクリプトからの参照に使います。
3:35クラスは、シーエスエスやスクリプトで複数の要素をまとめて選ぶための名前です。
3:41データ属性でアプリ独自の値を保持することもできますが、秘密情報を置く場所ではありません。
3:48画像のエスアールシーなど、親や子に付ける属性と混同しないようにしましょう。
3:54属性は何も付けなくても成り立つ要素なので、必要な場面でだけ追加すれば大丈夫です。
4:00混同しやすいエーエルティーとの違いを整理します。
4:03エーエルティーは、画像が表示できないときや読み上げを利用するときに、画像の代わりとなるテキストです。
4:11一方、フィグキャプションは、すべての読者に画面上で見せる、図の説明や題名です。
4:17役割が違うため、まったく同じ文章を両方に書くと、読み上げでは同じ内容が二度続いて、
4:21かえって分かりにくくなります。
4:25画像の中身そのものはエーエルティーに、図全体の題名や補足はキャプションに、
4:30と書き分けることが、アクセシビリティを高めるポイントです。
4:35書く前に、その一文が誰に向けたものかを思い出すと、自然と役割を使い分けられます。
4:41ピー、段落との違いも押さえましょう。
4:44ピーは本文の一般的な段落を表す要素で、特定の図と結び付いているわけではありません。
4:51対してフィグキャプションは、親であるフィギュアの説明であることが、タグ自体に意味として組み込まれています。
4:59ですから、図の説明はフィグキャプションに、図とは独立した本文の説明はピーに書くのが基本です。
5:06逆に、フィギュアを使わず画像だけを置く場面では、無理にキャプションを作らず、
5:11通常の段落で説明すれば十分な場合もあります。
5:16意味に合った使い分けを心がけましょう。
5:19なお、表の題名にはキャプションというよく似た名前の別の要素があるので、使う場面を取り違えないようにしましょう。
5:27見た目との関係を確認します。
5:29フィグキャプションは、そのままでは本文と同じような文字で表示されることが多く、
5:34キャプションらしい見た目はシーエスエスで整えます。
5:39画面の例では、文字を少し小さくし、色を薄くして、中央に寄せています。
5:44図の下に小さめの文字が添えられている、あの見覚えのある形です。
5:49ただし、文字を小さくしたいだけなら、フィグキャプション以外の要素でも指定できます。
5:55フィグキャプションを選ぶ理由は見た目ではなく、図の説明という意味のほうだということを忘れないでください。
6:03余白の付け方は、親であるフィギュア側の指定と合わせて考えると、配置全体が整えやすくなります。
6:10ブラウザー互換性を確認します。
6:12記事が参照するエムディーエヌのデータでは、フィグキャプション要素は、クロームが八以降、
6:19エッジが十二以降、ファイアフォックスが四以降、サファリが五点一以降と、主要ブラウザーで古くから対応しています。
6:26親のフィギュアと対応の歩みがそろっているため、基本的な使い方であれば、対応を心配せず安心して使える要素だといえます。
6:34ただし、この表は要素本体の対応開始の目安です。
6:37新しい機能と組み合わせる場合は別途確認し、利用対象の実機でも試しておくと安心です。
6:43スマートフォンなどモバイル環境のブラウザーでも、図と説明が一緒に表示されるかをあわせて確認しておきましょう。
6:50最後に、よくある間違いとまとめです。
6:53一つ目は、フィグキャプションをフィギュアの外に置いてしまうことです。
6:58キャプションは必ずフィギュアの中、最初か最後に置きます。
7:02二つ目は、一つのフィギュアにキャプションを複数置くことです。
7:07説明は一つにまとめましょう。
7:09三つ目は、エーエルティーとキャプションに同じ文章を重ねることです。
7:14役割に応じて書き分けましょう。
7:16公開前には、三百二十ピクセル程度の狭い画面でも、図と説明が欠けていないかを確認してください。
7:23図に説明を添えたい場面で、ぜひ活用してみてください。
7:26意味に合った使い方をひとつずつ積み重ねることが、読みやすいページ作りへの近道です。
7:33お疲れさまでした。

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

この動画で学べること

figcaptionタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。figure の説明文。figure の最初か最後に置きます。

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