catnose
catnose
HTMLの<caption>タグは、表にキャプション（注釈やタイトル）をつけるために使います。単体で使うことはなく、<table>タグと合わせて使います。
✍️このページでは以降「表」のことを「テーブル」と記載します。
captionタグの使い方
<caption>は、以下のようにテーブル（<table>）の中で使います。
<table>
<!-- 👇キャプション -->
<caption>人気の果物</caption>
<tr>
<th>果物</th> <th>味</th>
</tr>
<tr>
<td>いちご</td> <td>甘い</td>
</tr>
<tr>
<td>もも</td> <td>超甘い</td>
</tr>
</table>
👆このように、テーブルにタイトルをつけるようなイメージで使うことができます。テーブル（<table>）の基本的な使い方は、下記ページをご覧ください。
tableの最初の子要素として配置する
<caption>は、<table>の最初の子要素として配置しなければいけません。つまり<table>タグのすぐ下に<caption>を書く必要があります。
<table>
<caption>○○</caption> <!-- 😺最初に配置する -->
...
</table>
<table>の子要素であっても、最初に配置されていないならNGです。
🙅間違った例
<table>
<tr>...</tr>
<caption>○○</caption> <!-- 😿最初に配置されていない -->
</table>
キャプションの位置を変える
CSSのcaption-sideで下に配置
では、キャプションをテーブルの下側に表示したいときには、どうすれば良いのでしょうか。下に配置したくても<caption>は先頭に書かなければいけません。
キャプションの表示位置を変えるには、CSSのcaption-sideプロパティを使います。
CSS caption-side
caption {
caption-side: 方向;
}
/* 下に表示するなら… */
caption {
caption-side: bottom;
}
このようにcaptionに対して{ caption-side: 方向 }を指定します。方向にはtop、bottom、left、rightを入れます。下に表示するならcaption-side: bottomと書きます。
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 5px 15px;
border: solid 1px #959b9e;
}
caption {
font-weight: bold;
caption-side: bottom; /* 下 */
}
👆caption-side: bottomにより、キャプションの位置が下になりました。
text-alignで左右の位置を変える
主要ブラウザでは、キャプションの文字列はデフォルトで中央寄せになります。CSSでcaptionに対してtext-alignプロパティを指定すれば、左右の位置も簡単に変えることができます。
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 5px 15px;
border: solid 1px #959b9e;
}
caption {
font-weight: bold;
caption-side: bottom; /* 下 */
text-align: left; /* 左 */
}
👆キャプションを左寄せしたいときには、text-align: leftを指定します。
CSSでキャプションのデザインを変える
キャプションの見た目を整えるサンプルCSSをいくつか紹介します。
タイトルらしくする
table {
border-collapse: collapse;
width: 100%;
text-align: center;
}
th, td {
padding: 5px 15px;
border: solid 1px #305aa7;/* 線の色 */
}
caption {
padding: 0.5em; /* 文字周りの余白 */
color: #FFF; /* 文字色 */
font-weight: bold; /* 太字に */
background: #305aa7; /* 背景色 */
}
👆captionはテーブル部分と近接しているため「キャプションの背景色」を「セルの罫線の色」と同じにすると、一体感が出ます。
下に配置してキャプションらしい見た目に
table {
border-collapse: collapse;
width: 100%;
text-align: center;
}
th, td {
padding: 5px 15px;
border: solid 1px #333;
}
caption {
caption-side: bottom; /* 下に */
margin-top: 0.5em; /* 上の隙間 */
color: gray; /* 文字色 */
font-size: 0.9em;
}
👆テーブルに注釈や説明を入れる目的で使うなら、テーブル下に配置して、控えめな見た目にするのが良いかと思います。
複数のスタイルを使い分けたい場合
上のサンプルでは、captionに対して直接スタイルを指定しています。そのため、ページ内の全てのテーブルのキャプションの見た目が変わります。
もし「タイトルとして使うとき」と「注釈として使うとき」でスタイルを分けたい場合は、以下のようにCSSで複数のバリエーションのclass指定を作っておくと良いでしょう。
CSS スタイルのバリエーションを作る
/* タイトル用スタイル */
.cap-title {
padding: 0.5em;
color: #FFF;
font-weight: bold;
background: #305aa7;
}
/* 注釈用スタイル */
.cap-description {
caption-side: bottom;
margin-top: 0.5em;
color: gray;
font-size: 0.9em;
}
あとは、HTMLの<caption>タグに適用したいスタイルのclassを指定します。
table {
border-collapse: collapse;
width: 100%;
text-align: center;
}
th, td {
padding: 5px 15px;
border: solid 1px #305aa7;
}
/* タイトル用スタイル */
.cap-title {
padding: 0.5em;
color: #FFF;
font-weight: bold;
background: #305aa7;
}
/* 注釈用スタイル */
.cap-description {
caption-side: bottom;
margin-top: 0.5em;
color: gray;
font-size: 0.9em;
}
👆「このテーブルのキャプションは、タイトル用スタイル（.cap-title）に」というように使い分けができるようになります。