caption-sideプロパティの基本構文と役割

caption-sideプロパティは、table要素内に配置された「caption」要素の表示位置（上部か下部か）を指定するためのCSSプロパティです。

/* 表の下部にキャプションを配置する場合 */
table {
  caption-side: bottom;
}

caption-sideプロパティは、「table要素」または「caption要素自体」のどちらに指定しても適用されますが、テーブル全体のスタイル定義としてtable要素に記述するのが一般的です。

指定可能な値と表示位置の違い

実務で使用される主要な値とそれぞれの役割は以下の通りです。

▲ caption-side: top（表上部タイトル）と caption-side: bottom（表下部注釈・出典）の視覚的比較

表タイトルに最適な「top」（初期値）

表全体の概要やタイトルを示す標準的な配置です。ユーザーが表のデータを読み始める前に「何の表であるか」を瞬時に把握できるため、一般的なデータテーブルで最も推奨されます。

.table-default {
  caption-side: top;
}
.table-default caption {
  font-weight: 600;
  text-align: left;
  margin-bottom: 12px;
  color: #0f172a;
}

注釈や出典表記に最適な「bottom」

「※価格はすべて税込みです」「出典：総務省統計局（2026年調査）」といった注記やデータソースを表の最下部に添えたい場合、「caption-side: bottom;」が威力を発揮します。

.table-noted {
  caption-side: bottom;
}
.table-noted caption {
  font-size: 0.85em;
  color: #64748b;
  text-align: right;
  margin-top: 10px;
}

Webアクセシビリティ（a11y）の観点で重要な理由

Web制作の現場では、table要素の前に通常の「h3」見出しや「p」タグを置いて表タイトルを済ませてしまうケースが少なくありません。しかし、アクセシビリティの観点からは「caption」タグの正しい利用が強く推奨されます。

▲ 音声読み上げソフト（スクリーンリーダー）がcaptionを最優先で処理するアクセシビリティ構造

「注釈なので見た目は表の下に置きたい」という場合でも、HTML構造上はtable直下にcaptionを置き、CSSで「caption-side: bottom;」を指定することで、アクセシビリティを保ったまま自由なビジュアル配置を実現できます。

テーブルスタイリングの実践テクニック

実務でキャプション付きテーブルを美しく仕上げるためのCSSテクニックです。

左右の文字寄せ（text-align）と余白の確保

caption要素はテーブルの横幅いっぱいに広がるブロック要素として振る舞います。文字を左寄せ、中央揃え、右寄せにする場合は「text-align」を使用します。

/* 左寄せタイトル */
caption.caption-title {
  text-align: left;
  font-size: 1.1em;
  font-weight: 600;
  padding: 8px 4px;
}

/* 右寄せの注釈・クレジット */
caption.caption-source {
  caption-side: bottom;
  text-align: right;
  font-size: 0.85em;
  color: #64748b;
  padding-top: 8px;
}

スマホ表示（レスポンシブ横スクロール）時の注意点

スマートフォン向けにテーブルを「overflow-x: auto;」などで横スクロールさせるラッパー（div等）で囲む場合、caption要素も一緒にスクロールされてしまうことがあります。

表のタイトルを常に画面内に固定表示させたい場合は、表外の見出しとtable内のアクセシビリティ用caption（またはaria-describedby）を併用するか、caption自体には余白を持たせて視認性を確保するなどの配慮が役立ちます。

コピペで使える実用テーブルデザイン集

実務ですぐにコピー＆ペーストして活用できるテーブルとキャプションの組み合わせスタイルです。

シンプル＆モダンな標準データテーブル（上部タイトル）

.modern-table {
  width: 100%;
  border-collapse: collapse;
  caption-side: top;
  margin: 20px 0;
}
.modern-table caption {
  text-align: left;
  font-size: 1.1em;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 12px;
}
.modern-table th {
  background-color: #f1f5f9;
  color: #1e293b;
  font-weight: 600;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 2px solid #cbd5e1;
}
.modern-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #e2e8f0;
  color: #334155;
}

出典・注釈を下部に添えたデータテーブル（下部キャプション）

.source-table {
  width: 100%;
  border-collapse: collapse;
  caption-side: bottom;
  margin: 20px 0;
}
.source-table caption {
  text-align: right;
  font-size: 0.85em;
  color: #64748b;
  padding: 10px 0 0 0;
}
.source-table th, .source-table td {
  padding: 12px 16px;
  border: 1px solid #e2e8f0;
}

まとめ

表のスタイリングは見た目の美しさだけでなく、適切なHTML要素の選定とアクセシビリティ対応を両立させることが大切です。ぜひ「caption」と「caption-side」を活用して、誰にとっても分かりやすいWebサイト設計を実践してみてください。