テーブルを作るときに使われるcaption-sideプロパティ。キャプションの位置を指定するときに使うプロパティですが、
という方がいるでしょう。
そこで今回は、caption-sideプロパティの
・キャプションの配置
について説明していきます。
使い方が分かりやすいようにコードも記述するので、ぜひ目を通してみてください。
目次
caption-sideプロパティとは
caption-sideプロパティの読み方
caption-sideの読み方は、「キャプション-サイド」です。
captionは、テーブルのタイトルで使われるタグです。
caption-sideプロパティの説明
caption-sideプロパティは、
に使う設定です。
caption-sideプロパティの値で指定することでキャプションをテーブルの上や下に配置できます。
ですが、設定する上で気を付けるポイントもあります。
caption-sideプロパティで利用できる値
caption-sideプロパティでは以下の値を使うことができます。
| 値 | 説明 |
|---|---|
| top | topは、キャプションをテーブルの上に指定するために使う値です。 |
| bottom | bottomを指定すると、テーブルの下にキャプションを配置できます。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| nternet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
caption-sideプロパティの基本的な使い方
caption-sideプロパティの使い方
caption-sideプロパティの設定の仕方が分かるように、コードを以下に記述していきます。
See the Pen
caption-sideプロパティの使い方 by 吉井大輝 (@DaiW)
on CodePen.
caption-sideプロパティの設定は、captionタグもしくはcaptionタグに付けたID・Class名に対して行います。
テーブルの作成に使われるタグ
テーブルの作成に以下のタグが使われます。
tableタグ：trタグ・thタグ・tdタグなどテーブル作成に必要なタグをtableタグで囲います。
captionタグ：テーブルのタイトルを付けるときに使います。
theadタグ：テーブルのヘッダ部分を表すタグです。
tbodyタグ：テーブルのボディ部分を表すダグです。
tfootタグ：テーブルのフッタ部分を表すタグです。
trタグ：thタグ・tdタグを設定するときtrタグで囲います。
thタグ：セルの見出しに使うタグです。
tdタグ：テーブルのデータを書くために使うタグです。
テーブルの作成には、tableタグ・trタグ・tdタグの3つは必要になります。
しかし、captionタグとthタグは、タイトル・見出しを付けたいときに使うので、記述せずともテーブルの作成ができます。
上記に記載しましたtheadタグ・tbodyタグ・tfootタグは、テーブル内でヘッダやボディなど部分ごとに分けたいときに使います。
テーブルの情報量が多いとき、細かく部分ごとに分けることで、設定がしやすくなりますよ。
captionタグを記述するところ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<table class="table"> <caption class="caption">サンプル</caption> <tr> <th>商品</th> <th>読み方</th> </tr> <tr> <td>PC</td> <td>パーソナルコンピューター</td> </tr> <tr> <td>スマホ</td> <td>スマートフォン</td> </tr> </table> |
captionタグを記述するところは、tableの開始タグの下です。
一つのtableタグに対してcaptionタグは、複数記述できないので覚えておきましょう。
caption-sideプロパティでキャプションをテーブルの下に配置
キャプションをテーブルの下に配置するコード
キャプションをテーブルの下にしたコードが以下になります。
See the Pen
キャプションをテーブルの下に配置するコードを記述 by 吉井大輝 (@DaiW)
on CodePen.
キャプションの位置を下にするには、
|
1 |
caption-side:bottom; |
上記のコードを記述することです。
キャプションをテーブルの下に配置する際の注意点
キャプションをテーブルの下にするとき以下のコードのように、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<table class="table"> <tr> <th>商品</th> <th>読み方</th> </tr> <tr> <td>PC</td> <td>パーソナルコンピューター</td> </tr> <tr> <td>スマホ</td> <td>スマートフォン</td> </tr> <caption class="caption">サンプル</caption> </table> |
tableの閉じタグの上に記述しようと考える方もいます。
ですが、captionタグを上記のように記述しても、caption-sideプロパティを設定していなければ、テーブルの上に表示されます。
captionタグをtableの閉じタグの上にしても、テーブルの下に表示されないなら、意味はあまりないでしょう。
つまり、tableの開始タグの下に記述する方が良いということです。
captionタグを記述するとき、参考にしてください。
まとめ
いかがでしたでしょうか？
今回、基本的な使い方やキャプションで指定できる位置についてご紹介しました。
この記事からCSSの初心者の方もcaption-sideプロパティを設定することができるでしょう。
tableタグに関する設定を勉強中の方の助けにならば幸いです。
参考文献：MDN web docs｜caption-sideプロパティ: 表 (<table>) の <caption> の配置位置を指定する
