caption-side
: <caption>
要素の上下位置 CSSプロパティ
このページで解説するコードの実行結果。(タイトルの文字列をクリックすると、コードに移動)
りんご 🍎 | 100円 |
みかん 🍊 | 80円 |
りんご 🍎 | 100円 |
みかん 🍊 | 80円 |
りんご 🍎 | 100円 |
みかん 🍊 | 80円 |
デフォルト
HTML
& CSS
このページでは、以下のコードをデフォルトとして使用している。
CSS : デフォルトCSS
HTML : 適用するHTML
<table> <caption class="sample">【表】くだもの</caption> <tr> <td>りんご 🍎</td> <td>100円</td> </tr> <tr> <td>みかん 🍊</td> <td>80円</td> </tr> </table>
実行結果
りんご 🍎 | 100円 |
みかん 🍊 | 80円 |
caption-side
の概要
<caption>
要素をテーブル(表)の「上部」に表示するか、「下部」に表示するかを指定する。
※ <table>
要素ではなく、<caption>
要素に指定することに注意。
top
表の上部に表示する。
CSS : top に設定
.sample { caption-side: top; }
実行結果
りんご 🍎 | 100円 |
みかん 🍊 | 80円 |
bottom
表の下部に表示する。
CSS : bottom に設定
.sample { caption-side: bottom; }
実行結果
りんご 🍎 | 100円 |
みかん 🍊 | 80円 |
デフォルト値はbottom
である。(無指定の場合は、下部に表示されている)
CSS : 無指定
.sample { }
実行結果
りんご 🍎 | 100円 |
みかん 🍊 | 80円 |
併用するCSSプロパティ
text-align
プロパティ
文字列の左揃え/中央揃え/右揃えを指定したい場合、 text-align
を使う。
CSS : 下部で中央揃え(center)
.sample { text-align: center; }
実行結果
りんご 🍎 | 100円 |
みかん 🍊 | 80円 |
CSS : 上部で中央揃え(center)
.sample { caption-side: top; text-align: center; }
実行結果
りんご 🍎 | 100円 |
みかん 🍊 | 80円 |
CSS : 上部で右揃え(right)
.sample { caption-side: top; text-align: right; }
実行結果
りんご 🍎 | 100円 |
みかん 🍊 | 80円 |
Emmet : cps
記述 | Visual Studio Code |
---|---|
cps | caption-side: top; |