CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのcaption-sideプロパティでテーブルキャプションの位置を自在に制御する方法

CSSのcaption-sideプロパティは、テーブルのキャプション（表題）ボックスを垂直方向のどの位置に配置するかを指定するためのプロパティです。指定できる値は「top」と「bottom」で、デフォルトではキャプションはテーブルの上部に表示されます。

基本の構文

CSSのcaption-sideプロパティの基本的な書き方は以下のとおりです。

セレクタ {
    caption-side: /*値*/
}

使用例1：キャプションを下部に配置する

次の例では、caption-sideプロパティを使ってキャプションをテーブルの下側に配置しています。

<!DOCTYPE html>
<html>
<head>
<style>
table * {
    border: ridge skyblue;
    padding: 0.5rem;
}
table {
    margin: 20px;
    box-shadow: 0 0 6px 3px indianred;
    empty-cells: show;
}
caption {
    border-top-style: none;
    caption-side: bottom;
    border-color: darkkhaki;
    border-radius: 50%;
}
</style>
</head>
<body>
<table id="demo">
<caption>Demo</caption>
<tr>
<th colspan="3">Table</th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

出力結果

上記のコードを実行すると、次のような出力が得られます。

CSSのcaption-sideプロパティでテーブルキャプションの位置を自在に制御する方法

使用例2：デザイン性のあるキャプション配置

続いて、背景色や角丸を組み合わせて、キャプションを目立たせるスタイリングの例を紹介します。こちらもキャプションはテーブルの下部に配置されます。

<!DOCTYPE html>
<html>
<head>
<style>
table {
    margin: auto;
    border: double black 13px;
    border-radius: 6px;
}
td, th {
    border-left: 1px solid black;
    border-top: 1px solid black;
}
th {
    background-color: lightblue;
    border-top: none;
}
td:first-child, th:first-child {
    border-left: none;
}
caption {
    margin-top: 3px;
    background-color: purple;
    caption-side: bottom;
    color: white;
    border-radius: 20%;
}
</style>
</head>
<body>
<h2>Demo Table</h2>
<table>
<caption>Demo</caption>
<tr>
<th colspan="4">Table</th>
</tr>
<tr>
<td>One...</td>
<td>Two...</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
<td>Seven</td>
<td>Eight</td>
</tr>
</table>
</body>
</html>

出力結果

上記のコードを実行すると、次のような出力が得られます。

CSSのcaption-sideプロパティでテーブルキャプションの位置を自在に制御する方法

まとめ

caption-sideプロパティを使えば、テーブルキャプションの表示位置を簡単に上（top）・下（bottom）で切り替えることができます。デフォルトは上部配置ですが、値を「bottom」に変更するだけでキャプションを表の下に移動できるため、デザインの幅が大きく広がります。背景色やborder-radiusなどの装飾と組み合わせれば、より見やすく魅力的なテーブルを作成できます。

  1. CSSで比較表を作成する方法｜レスポンシブ対応のサンプルコード付きで解説

    CSSを使えば、画面幅に合わせて自動的に調整されるレスポンシブ対応の比較表を簡単に作成できます。料金プランやサービス機能の比較など、さまざまな場面で活用できるので、実装方法をマスターしておくと便利です。ここでは、実際のコード例をもとに、見やすく整った比較表の作り方を詳しく解説します。 比較表のサンプルコード 以下が、CSSでレスポンシブな比較表を作成するための完全なコード例です。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=devic

  2. CSSでレスポンシブテーブルを作成する方法をわかりやすく解説

    CSSでレスポンシブ対応のテーブルを作成するには、テーブル全体を<div>要素で囲み、その親要素に overflow-x: auto; を指定するのが最もシンプルで確実な方法です。これにより、画面幅が狭い環境（スマートフォンやタブレットなど）でも、テーブルが横にはみ出すことなく、水平スクロールバーが自動的に表示されるようになります。レスポンシブテーブルのポイントレスポンシブテーブルを実現するうえで重要なCSSプロパティは以下のとおりです。overflow-x: auto; … コンテナからはみ出した内容に対して、必要な場合のみ横スクロールバーを表示します。width: 100%;