From c2d1b8b56c5a9f45f5ea9f5471c87d1b904f9087 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 30 Oct 2021 00:25:17 +0900 Subject: CSS Table 関係の文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/10/28 時点の英語版に同期 --- files/ja/web/css/caption-side/index.md | 162 +++++++++++++++------------------ 1 file changed, 71 insertions(+), 91 deletions(-) (limited to 'files/ja/web/css/caption-side') diff --git a/files/ja/web/css/caption-side/index.md b/files/ja/web/css/caption-side/index.md index 5b95a7c75e..c62e778cd2 100644 --- a/files/ja/web/css/caption-side/index.md +++ b/files/ja/web/css/caption-side/index.md @@ -3,92 +3,94 @@ title: caption-side slug: Web/CSS/caption-side tags: - CSS - - CSS Property - - CSS Tables - - Reference + - CSS プロパティ + - CSS 表 + - リファレンス + - recipe:css-property +browser-compat: css.properties.caption-side translation_of: Web/CSS/caption-side --- -
{{CSSRef}}
+{{CSSRef}} -

caption-side は、表 ({{htmlelement("table")}}) の {{HTMLElement("caption")}} の配置位置を指定する CSS プロパティです。

+**`caption-side`** は [CSS](/ja/docs/Web/CSS) のプロパティで、表 ({{htmlelement("table")}}) の {{HTMLElement("caption")}} の中身を指定された側に配置します。この値は表の {{cssxref('writing-mode')}} に対する相対値です。 -
{{EmbedInteractiveExample("pages/css/caption-side.html")}}
+{{EmbedInteractiveExample("pages/css/caption-side.html")}} +## 構文 - -

{{cssinfo}}

- -

構文

- -
/* 方向を示す値 */
+```css
+/* 方向を示す値 */
 caption-side: top;
 caption-side: bottom;
 
 /* 警告: 非標準の値 */
-caption-side: left;
-caption-side: right;
-caption-side: top-outside;
-caption-side: bottom-outside;
+caption-side: block-start;
+caption-side: block-end;
+caption-side: inline-start;
+caption-side: inline-end;
 
 /* グローバル値 */
 caption-side: inherit;
 caption-side: initial;
+caption-side: revert;
 caption-side: unset;
-
- -

このプロパティの値は、表の {{cssxref('writing-mode')}} に対して相対的です。

- -

値

- -
-
top
-
キャプションボックスを表の上に配置することを示すキーワードです。
-
bottom
-
キャプションボックスを表の下に配置することを示すキーワードです。
-
left {{non-standard_inline}}
-
キャプションボックスを表の左に配置することを示すキーワードです。
-
{{Note("この値は CSS 2 で提案されましたが、最終的な CSS 2.1 仕様から削除されており、非標準です。")}}
-
right {{non-standard_inline}}
-
キャプションボックスを表の右に配置することを示すキーワードです。
-
{{Note("この値は CSS 2 で提案されましたが、最終的な CSS 2.1 仕様から削除されており、非標準です。")}}
-
top-outside {{non-standard_inline}}
-
キャプションボックスを表の上に配置することを示すキーワードです。ただし、キャプションの幅や水平方向の配置は、表の水平方向のレイアウトに束縛されません。
- {{Note("CSS 2.1 仕様では、CSS 2 仕様で値 top について異なる動作を説明していたとの注記があります。この動作は将来の仕様書で、この値を使用して再導入する予定です。")}}
-
bottom-outside {{non-standard_inline}}
-
キャプションボックスを表の下に配置することを示すキーワードです。ただし、キャプションの幅や水平方向の配置は、表の水平方向のレイアウトに束縛されません。
- {{Note("CSS 2.1 仕様では、CSS 2 仕様で値 bottom について異なる動作を説明していたとの注記があります。この動作は将来の仕様書で、この値を使用して再導入する予定です。")}}
-
- -

形式構文

+``` + +`caption-side` プロパティは、以下のキーワード値のうちの一つで指定します。 + +### 値 + +- `top` + - : キャプションボックスを表の上方に配置します。 +- `bottom` + - : キャプションボックスを表の下方に配置します。 +- `block-start` + - : キャプションボックスを表のブロック方向の先頭に配置します。 +- `block-end` + - : キャプションボックスを表のブロック方向の末尾に配置します。 +- `inline-start` + - : キャプションボックスを表のインライン方向の先頭に配置します。 +- `inline-end` + - : キャプションボックスを表のインライン方向の末尾に配置します。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 -

HTML

+

キャプションを上や下に設定

-
<table class="top">
-  <caption>Caption ABOVE the table</caption>
-  <tr>
-    <td>Some data</td>
-    <td>Some more data</td>
-  </tr>
-</table>
+#### HTML
 
-<br>
+```html
+
+  
+  
+    
+    
+  
+
Caption ABOVE the table
Some dataSome more data

 
-<table class="bottom">
-  <caption>Caption BELOW the table</caption>
-  <tr>
-    <td>Some data</td>
-    <td>Some more data</td>
-  </tr>
-</table>
-
+
-

CSS

+ + + + + + +
Caption BELOW the table
Some dataSome more data
+``` + +#### CSS -
.top caption {
+```css
+.top caption {
   caption-side: top;
 }
 
@@ -103,38 +105,16 @@ table {
 td {
   border: 1px solid blue;
 }
-
+``` -

出力

+#### 結果 -

{{EmbedLiveSample('Examples')}}

- -

仕様

- - - - - - - - - - - - - - - - - - - - - -
仕様書策定状況コメント
{{SpecName('CSS Logical Properties', '#caption-side', 'caption-side')}}{{Spec2('CSS Logical Properties')}}値 top および bottom は、writing-mode の値に対して相対的であることを定義
{{SpecName('CSS2.1', 'tables.html#caption-position', 'caption-side')}}{{Spec2('CSS2.1')}}最初の定義
+{{EmbedLiveSample('Setting_captions_above_and_below', 'auto', 160)}} -

ブラウザ実装状況

+## 仕様書 +{{Specifications}} +## ブラウザーの互換性 -

{{Compat("css.properties.caption-side")}}

+{{Compat}} -- cgit v1.2.3-54-g00ecf