VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:00エイチティーエムエルリファレンス解説です。
0:03エイチティーエムエルタグ編の九十七本目は、キャプションタグです。
0:07キャプションは、表の題名を表す要素です。
0:10料金表や予定表、成績表など、表だけを見ても何のデータなのかが分かるように、
0:13表のタイトルを付けます。
0:16今回は、キャプションの意味、テーブル要素の最初の子要素として置く決まり、
0:21基本の使い方、コード例、ブラウザー互換性、そしてよくある間違いまで、順番に確認します。
0:26身近な表を思い浮かべながら聞いていただくと、役割がつかみやすくなります。
0:30まず、キャプションの役割を整理します。
0:33キャプションは、この表は何についての一覧なのかを、短い題名で伝えるための要素です。
0:40表の数字だけが並んでいても、読み手には意味が伝わりません。
0:45題名が一つあることで、この数字はアクセス数なのか、料金なのか、開催日なのかが、
0:49すぐに理解できます。
0:53大切なのは、題名を本文の段落に紛れ込ませるのではなく、表そのものに属する情報として結びつける点です。
1:02読み上げソフトを使う方にも、表の目的が最初に伝わる、重要な役割を持っています。
1:08題名は検索や一覧表示でも目印になるため、省略せずに付ける習慣がおすすめです。
1:15キャプションには、置く場所に明確な決まりがあります。
1:19必ずテーブル要素の内側に書き、しかもその最初の子要素として置きます。
1:24つまり、テーブル開始タグのすぐ次がキャプションで、そのあとに行やセルが続きます。
1:30表の上や下に、普通の段落として題名を書くのとは違い、この順番自体が仕様で決められています。
1:37書き方としては、開始タグと終了タグをセットにし、その間に題名の文章を入れます。
1:44空要素ではないので、終了タグの書き忘れにも注意してください。
1:48ブラウザーはこの順番を前提に表を組み立てるため、正しい位置が表示の安定にもつながります。
1:55基本のコード例を見ていきます。
1:58画面の例は、記事の活用事例をもとにした形です。
2:01テーブル要素を開いて、最初にキャプションで、十月の開催予定、という題名を付けています。
2:08そのあとにティーボディで本体の行が続き、土曜日は十三時開始、という内容が入ります。
2:15題名があることで、表だけを切り取って別の場所に貼っても、内容が失われません。
2:21キャプションの文章は、表の中身を一言で表す、短く具体的な表現にしましょう。
2:26十月の予定、だけではなく、開催予定まで書くことで伝わりやすくなります。
2:32まずはこの最小の形を写して、ブラウザーで題名が表の上に表示されることを確認してみてください。
2:39ここで、段落や見出しとの違いを押さえます。
2:43表の直前に段落を置いて、見出しらしく太字に装飾しても、見た目は題名らしくなります。
2:49しかしプログラムから見れば、その段落と表は別々の存在です。
2:54キャプションを使えば、題名が表の一部として扱われ、並び替えや読み上げ、表だけの転載といった場面でも、
2:59関係が切れません。
3:03エイチティーエムエルでは、見た目が似ていることよりも、意味の関係が正しく結ばれていることが大切です。
3:11表の題名ならキャプション、章の見出しなら見出し要素、と使い分けてください。
3:17見た目を整える作業と、意味を伝える作業を分けて考えることが、読みやすいページへの近道です。
3:25属性について確認します。
3:26キャプションには、この要素専用の必須属性はありません。
3:30必要に応じて、アイディー、クラス、ラングなどのグローバル属性を使います。
3:35アイディーは文書内で一つだけの識別子として、クラスはシーエスエスやジャバスクリプトでまとめて選ぶときに使います。
3:43昔の書き方では、位置を決めるアライン属性などが使われた時代もありましたが、
3:47現在は見た目の指定はシーエスエスに任せるのが基本です。
3:52属性の有無よりも、題名の文章そのものが表の内容を正確に表しているかを優先してください。
3:58データスター属性に独自の情報を入れることもできますが、秘密情報を置く場所ではない点にも注意してください。
4:05見た目の整え方も見ておきます。
4:07キャプションの文字の大きさや太さ、余白や文字の揃え方は、通常のシーエスエスで指定できます。
4:13標準では表の上に表示されますが、シーエスエスのキャプションサイドというプロパティで、
4:17下側に表示させることもできます。
4:21ただし、コード上の順番はあくまでテーブルの最初であり、表示位置だけが変わる点に注意してください。
4:28デザインのためにキャプションを隠してしまうと、題名の意味まで失われます。
4:33読みやすさを保ちながら、表全体と調和する見た目に整えましょう。
4:38色だけで目立たせるのではなく、余白や行のまとまりと合わせて、落ち着いたデザインを目指しましょう。
4:44表を作る仲間の要素との関係も整理します。
4:47キャプションは表全体の題名、ティーヘッドは列の見出し行のまとまり、ティーボディはデータ行のまとまり、
4:53ティーフットは合計など表を締めくくる行のまとまりです。
4:58そして、見出しセルがティーエイチ、通常のデータセルがティーディーです。
5:03それぞれが担当する範囲が決まっているため、大きな表でも構造が読み取りやすくなります。
5:09キャプションは、その中でも表全体を代表する、唯一の題名という立場です。
5:14一つの表にキャプションは一つまで、と覚えてください。
5:18これらの要素を役割ごとに使うことで、保守するときにも、どこを直せばよいかが分かりやすくなります。
5:25アクセシビリティの視点も大切です。
5:27支援技術を使う場合、キャプションは表の内容に入る前に読み上げられるため、
5:32このあと何の表が始まるのかを、最初に把握できます。
5:37目で表全体を眺められない利用者にとって、この一言の題名は大きな助けになります。
5:43一方で、複雑な表の読み方の説明までキャプションに詰め込むのは向いていません。
5:49詳しい補足は、表の前後の本文に分けて書くのが読みやすい形です。
5:54また、小さな画面幅や文字を拡大したときにも、題名が欠けずに読めるかを確認しましょう。
6:01作ったあとは、キーボード操作や読み上げ順も含めて、実際の利用場面を想像しながら確認してください。
6:09ブラウザー互換性を確認します。
6:11記事が紹介するエムディーエヌのデータでは、キャプション要素本体は、クロームが一以降、
6:17エッジが十二以降、ファイアフォックスが一以降、サファリが四以前の版から対応しています。
6:24かなり古くから使われてきた基本要素なので、現在の主要ブラウザーでは安心して使えると考えてよいでしょう。
6:31ただし、この表は要素本体の対応を示すもので、組み合わせる追加機能までを保証するものではありません。
6:39モバイル環境を含め、実際に使う環境でも表示を試しておくと確実です。
6:44対応表は要素本体の確認時点の記録です。
6:47仕様が変わることもあるため、新しい案件では最新情報も併せて見てください。
6:52まとめとして、よくある間違いを三つ挙げます。
6:56一つ目は、キャプションをテーブルの外側や、行のあとなど途中に置いてしまうことです。
7:02必ず最初の子要素として置いてください。
7:05二つ目は、一つの表にキャプションを複数置いてしまうことです。
7:10題名は一つに絞ります。
7:12三つ目は、題名を見出しや段落で済ませてしまい、表との関係が伝わらなくなることです。
7:19キャプションは、表の題名を付ける要素です。
7:22これでキャプションタグの解説を終わります。
7:25ぜひ、自分の表に短い題名を付ける練習から始めてみてください。
7:30小さな表でも題名を付ける習慣を付けておくと、ページ全体の分かりやすさが大きく向上します。

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

この動画で学べること

captionタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。表の題名。table の先頭に置いて何の表か説明します。

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