最終更新HTMLの<caption>キャプションタグは、表にキャプション(注釈やタイトル)をつけるために使います。単体で使うことはなく、<table>タグと合わせて使います。✍️このページでは以降「表」のことを「テーブル」と記載します。このページの目次captionタグの使い方tableの最初の子要素として配置するキャプションの位置を変えるCSSのcaption-sideで下に配置text-alignで左右の位置を変えるCSSでキャプションのデザインを変えるタイトルらしくする下に配置してキャプションらしい見た目に複数のスタイルを使い分けたい場合captionタグの使い方<caption>は、以下のようにテーブル(<table>)の中で使います。👆このように、テーブルにタイトルをつけるようなイメージで使うことができます。テーブル(<table>)の基本的な使い方は、下記ページをご覧ください。関連するページを読むHTMLのtableコンプリートガイドtableの最初の子要素として配置する<caption>は、<table>の最初の子要素として配置しなければいけません。<table>タグのすぐ下に<caption>を書く必要があります。...</table><table>の子要素であっても、最初に配置されていないならNGです。--></table>キャプションの位置を変えるCSSのcaption-sideで下に配置では、キャプションをテーブルの下側に表示したいときには、どうすれば良いのでしょうか。下に配置したくても<caption>は先頭に書かなければいけません。キャプションの表示位置を変えるには、CSSのcaption-sideプロパティを使います。方向にはtop、bottom、left、rightを入れます。bottomと書きます。bottomにより、キャプションの位置が下になりました。text-alignで左右の位置を変える主要ブラウザでは、キャプションの文字列はデフォルトで中央寄せになります。CSSでcaptionに対してtext-alignプロパティを指定すれば、左右の位置も簡単に変えることができます。leftを指定します。CSSでキャプションのデザインを変えるキャプションの見た目を整えるサンプルCSSをいくつか紹介します。👆captionはテーブル部分と近接しているため「キャプションの背景色」を「セルの罫線の色」と同じにすると、一体感が出ます。👆テーブルに注釈や説明を入れる目的で使うなら、テーブル下に配置して、控えめな見た目にするのが良いかと思います。上のサンプルでは、captionに対して直接スタイルを指定しています。そのため、ページ内の全てのテーブルのキャプションの見た目が変わります。「タイトルとして使うとき」と「注釈として使うとき」でスタイルを分けたい場合は、以下のようにCSSで複数のバリエーションのclass指定を作っておくと良いでしょう。0.9em;}あとは、HTMLの<caption>タグに適用したいスタイルのclassを指定します。👆「このテーブルのキャプションは、タイトル用スタイル(.cap-title)に」というように使い分けができるようになります。