本文へ移動
CSS
この記事では「CSS」について、基本の意味と使い方を初心者向けにやさしく説明します。
A property that lets you choose whether a table’s title appears above or below the table for a clearer layout.
caption-side
caption-side とは？
caption-side は、表（<table>）に付けるタイトル（<caption>）を、表の「上」か「下」に表示するかを決めるCSSプロパティです。
ふつうはタイトルが表の上に出ますが、caption-side を使うと、「タイトルを下にしたい」といった調整ができます。
つまり、表の “見出しの位置” をコントロールするための設定です。
こう書けばOK
table {
caption-side: bottom;
}
このように書くと、タイトル（<caption>）が表の下に表示されます。
初期値は top（上）です。つまり、何も指定しないと上に出ます。
ポイントメモ
- 使える値は主に
top と bottom。
- 一部のブラウザでは
left や right も認識しますが、ほとんどの場合は上か下で使います。
caption-side は <caption> 要素にしか効果がありません。- 表の見た目を整えるときに、タイトルの位置を自然に見せたいときに使います。