CSS プロパティ caption-side

CSS caption-side 属性详解：テーブル見出しの位置を制御する

CSS caption-side 属性详解：テーブル見出しの位置を制御する

HTML のテーブルにおいて、見出し (<caption>) は重要な役割を果たします。見出しはテーブルの内容を簡潔に表し、ユーザーの理解を助けます。CSS の caption-side 属性を使用すると、このテーブル見出しをテーブルに対してどの位置に表示するかを柔軟に制御することができます。

この記事では、caption-side 属性の詳細な使い方、具体的なコード例、実際のWebページレイアウトでの活用例などを紹介します。これにより、テーブル見出しのスタイルを自在に操り、より見やすく、洗練されたテーブルデザインを実現することができます。

caption-side 属性の概要

caption-side 属性は、テーブル (<table> 要素) の見出し (<caption> 要素) を、テーブルの内容に対してどこに配置するかを指定するために使用します。

使用可能な値は以下の通りです。

  • top (初期値): 見出しをテーブルの上側に配置します。
  • bottom: 見出しをテーブルの下側に配置します。
  • left: 見出しをテーブルの左側に配置します。
  • right: 見出しをテーブルの右側に配置します。

caption-side 属性値の詳細と使用例

それぞれの属性値の効果を、具体的なコード例と合わせて見ていきましょう。

caption-side: top;

top は caption-side 属性の初期値であり、見出しをテーブルの上側に配置します。 


<table>
  <caption>売上一覧</caption>
  <thead>
    <tr>
      <th>商品名</th>
      <th>価格</th>
      <th>数量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>リンゴ</td>
      <td>100円</td>
      <td>5</td>
    </tr>
    <tr>
      <td>バナナ</td>
      <td>80円</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

caption-side: top の例

caption-side: bottom;

bottom は見出しをテーブルの下側に配置します。 


<table>
  <caption style="caption-side: bottom;">売上一覧</caption>
  <thead>
    <tr>
      <th>商品名</th>
      <th>価格</th>
      <th>数量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>リンゴ</td>
      <td>100円</td>
      <td>5</td>
    </tr>
    <tr>
      <td>バナナ</td>
      <td>80円</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

caption-side: bottom の例

caption-side: left;

left は見出しをテーブルの左側に配置します。 


<table>
  <caption style="caption-side: left;">売上一覧</caption>
  <thead>
    <tr>
      <th>商品名</th>
      <th>価格</th>
      <th>数量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>リンゴ</td>
      <td>100円</td>
      <td>5</td>
    </tr>
    <tr>
      <td>バナナ</td>
      <td>80円</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

caption-side: left の例

caption-side: right;

right は見出しをテーブルの右側に配置します。 


<table>
  <caption style="caption-side: right;">売上一覧</caption>
  <thead>
    <tr>
      <th>商品名</th>
      <th>価格</th>
      <th>数量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>リンゴ</td>
      <td>100円</td>
      <td>5</td>
    </tr>
    <tr>
      <td>バナナ</td>
      <td>80円</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

caption-side: right の例

caption-side 属性の活用シーン

caption-side 属性は、以下のような場面で特に役立ちます。
  • テーブルのレイアウト上の制約から、見出しをテーブルの上側に配置できない場合
  • 見出しをテーブルの側面に配置することで、スペースを有効活用したい場合
  • 見出しを目立たせたい場合

例えば、レスポンシブデザインのウェブサイトでは、画面幅が狭い場合にテーブルの見出しを側面に配置することで、テーブル全体が見やすくなることがあります。

ブラウザの対応状況

caption-side 属性は、主要なブラウザで広くサポートされています。ただし、一部の古いブラウザではサポートされていない場合もあるため、注意が必要です。

最新のブラウザ対応状況は、Can I use で確認することができます。

まとめ

この記事では、CSS の caption-side 属性について解説しました。この属性を活用することで、テーブルの見出しの位置を柔軟に制御し、より見やすく、デザイン性の高いテーブルを作成することができます。

関連する質問と回答

Q1: caption-side 属性はすべてのブラウザでサポートされていますか？
A1: 主要なブラウザでは広くサポートされていますが、一部の古いブラウザではサポートされていない場合があります。最新のブラウザ対応状況は、Can I use で確認してください。
Q2: caption-side 属性を指定しない場合、見出しはどこに配置されますか？
A2: caption-side 属性を指定しない場合、見出しはテーブルの上側に配置されます。これは caption-side: top; を指定した場合と同じです。
Q3: caption-side 属性を使って、見出しをテーブルのセル内に配置することはできますか？
A3: いいえ、caption-side 属性では、見出しをテーブルのセル内に配置することはできません。見出しは、常にテーブルの外側に配置されます。