From 647f2074063d41b629dfab8a38496793512fe635 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 29 Oct 2021 00:43:43 +0900 Subject: CSS Table 関係の文書の変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/border-collapse/index.html | 142 ---------------- files/ja/web/css/border-collapse/index.md | 142 ++++++++++++++++ files/ja/web/css/border-spacing/index.html | 129 -------------- files/ja/web/css/border-spacing/index.md | 129 ++++++++++++++ files/ja/web/css/caption-side/index.html | 140 ---------------- files/ja/web/css/caption-side/index.md | 140 ++++++++++++++++ files/ja/web/css/css_table/index.html | 47 ------ files/ja/web/css/css_table/index.md | 47 ++++++ files/ja/web/css/empty-cells/index.html | 118 ------------- files/ja/web/css/empty-cells/index.md | 118 +++++++++++++ files/ja/web/css/vertical-align/index.html | 252 ---------------------------- files/ja/web/css/vertical-align/index.md | 252 ++++++++++++++++++++++++++++ 12 files changed, 828 insertions(+), 828 deletions(-) delete mode 100644 files/ja/web/css/border-collapse/index.html create mode 100644 files/ja/web/css/border-collapse/index.md delete mode 100644 files/ja/web/css/border-spacing/index.html create mode 100644 files/ja/web/css/border-spacing/index.md delete mode 100644 files/ja/web/css/caption-side/index.html create mode 100644 files/ja/web/css/caption-side/index.md delete mode 100644 files/ja/web/css/css_table/index.html create mode 100644 files/ja/web/css/css_table/index.md delete mode 100644 files/ja/web/css/empty-cells/index.html create mode 100644 files/ja/web/css/empty-cells/index.md delete mode 100644 files/ja/web/css/vertical-align/index.html create mode 100644 files/ja/web/css/vertical-align/index.md (limited to 'files/ja/web') diff --git a/files/ja/web/css/border-collapse/index.html b/files/ja/web/css/border-collapse/index.html deleted file mode 100644 index 7de69d0f6f..0000000000 --- a/files/ja/web/css/border-collapse/index.html +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: border-collapse -slug: Web/CSS/border-collapse -tags: - - CSS - - CSS Reference -translation_of: Web/CSS/border-collapse ---- -
{{CSSRef}}
- -

CSS の border-collapse プロパティは、 {{htmlElement("table")}} の中のセルが境界線を共有するか分離するかを設定します。

- -
{{EmbedInteractiveExample("pages/css/border-collapse.html")}}
- - - -

セルが collapsed の場合、 {{cssxref("border-style")}} の値で inset が groove のように動作し、 outset が ridge のように動作します。

- -

セルが separated の場合、セルの間隔は {{cssxref("border-spacing")}} プロパティで定義されます。

- -

構文

- -
/* キーワード値 */
-border-collapse: collapse;
-border-collapse: separate;
-
-/* グローバル値 */
-border-collapse: inherit;
-border-collapse: initial;
-border-collapse: unset;
-
- -

border-collapse プロパティは、以下のリストから選択された単一のキーワードで指定します。

- -

値

- -
-
collapse
-
隣接するセルで境界線を共有します (collapsed-border 表レンダリングモデル)。
-
separate
-
隣接するセルが個別に境界線を持ちます (separated-border 表レンダリングモデル)。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

ブラウザーエンジンのカラフルな表

- -

HTML

- -
<table class="separate">
-  <caption><code>border-collapse: separate</code></caption>
-  <tbody>
-    <tr><th>Browser</th> <th>Layout Engine</th></tr>
-    <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td></tr>
-    <tr><td class="ed">Edge</td> <td class="tr">EdgeHTML</td></tr>
-    <tr><td class="sa">Safari</td> <td class="wk">Webkit</td></tr>
-    <tr><td class="ch">Chrome</td> <td class="bk">Blink</td></tr>
-    <tr><td class="op">Opera</td> <td class="bk">Blink</td></tr>
-  </tbody>
-</table>
-<table class="collapse">
-  <caption><code>border-collapse: collapse</code></caption>
-  <tbody>
-    <tr><th>Browser</th> <th>Layout Engine</th></tr>
-    <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td></tr>
-    <tr><td class="ed">Edge</td> <td class="tr">EdgeHTML</td></tr>
-    <tr><td class="sa">Safari</td> <td class="wk">Webkit</td></tr>
-    <tr><td class="ch">Chrome</td> <td class="bk">Blink</td></tr>
-    <tr><td class="op">Opera</td> <td class="bk">Blink</td></tr>
-  </tbody>
-</table>
- -

CSS

- -
.collapse {
-  border-collapse: collapse;
-}
-
-.separate {
-  border-collapse: separate;
-}
-
-table {
-  display: inline-table;
-  margin: 1em;
-  border: dashed 5px;
-}
-
-table th,
-table td {
-  border: solid 3px;
-}
-
-.fx { border-color: orange blue; }
-.gk { border-color: black red; }
-.ed { border-color: blue gold; }
-.tr { border-color: aqua; }
-.sa { border-color: silver blue; }
-.wk { border-color: gold blue; }
-.ch { border-color: red yellow green blue; }
-.bk { border-color: navy blue teal aqua; }
-.op { border-color: red; }
- -

結果

- -

{{ EmbedLiveSample('A_colorful_table_of_browser_engines', 400, 300) }}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('CSS2.1', 'tables.html#borders', 'border-collapse') }}{{ Spec2('CSS2.1') }}初回定義
- -

{{cssinfo}}

- -

ブラウザーの対応

- -

{{Compat("css.properties.border-collapse")}}

- -

関連情報

- - diff --git a/files/ja/web/css/border-collapse/index.md b/files/ja/web/css/border-collapse/index.md new file mode 100644 index 0000000000..7de69d0f6f --- /dev/null +++ b/files/ja/web/css/border-collapse/index.md @@ -0,0 +1,142 @@ +--- +title: border-collapse +slug: Web/CSS/border-collapse +tags: + - CSS + - CSS Reference +translation_of: Web/CSS/border-collapse +--- +
{{CSSRef}}
+ +

CSS の border-collapse プロパティは、 {{htmlElement("table")}} の中のセルが境界線を共有するか分離するかを設定します。

+ +
{{EmbedInteractiveExample("pages/css/border-collapse.html")}}
+ + + +

セルが collapsed の場合、 {{cssxref("border-style")}} の値で inset が groove のように動作し、 outset が ridge のように動作します。

+ +

セルが separated の場合、セルの間隔は {{cssxref("border-spacing")}} プロパティで定義されます。

+ +

構文

+ +
/* キーワード値 */
+border-collapse: collapse;
+border-collapse: separate;
+
+/* グローバル値 */
+border-collapse: inherit;
+border-collapse: initial;
+border-collapse: unset;
+
+ +

border-collapse プロパティは、以下のリストから選択された単一のキーワードで指定します。

+ +

値

+ +
+
collapse
+
隣接するセルで境界線を共有します (collapsed-border 表レンダリングモデル)。
+
separate
+
隣接するセルが個別に境界線を持ちます (separated-border 表レンダリングモデル)。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

ブラウザーエンジンのカラフルな表

+ +

HTML

+ +
<table class="separate">
+  <caption><code>border-collapse: separate</code></caption>
+  <tbody>
+    <tr><th>Browser</th> <th>Layout Engine</th></tr>
+    <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td></tr>
+    <tr><td class="ed">Edge</td> <td class="tr">EdgeHTML</td></tr>
+    <tr><td class="sa">Safari</td> <td class="wk">Webkit</td></tr>
+    <tr><td class="ch">Chrome</td> <td class="bk">Blink</td></tr>
+    <tr><td class="op">Opera</td> <td class="bk">Blink</td></tr>
+  </tbody>
+</table>
+<table class="collapse">
+  <caption><code>border-collapse: collapse</code></caption>
+  <tbody>
+    <tr><th>Browser</th> <th>Layout Engine</th></tr>
+    <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td></tr>
+    <tr><td class="ed">Edge</td> <td class="tr">EdgeHTML</td></tr>
+    <tr><td class="sa">Safari</td> <td class="wk">Webkit</td></tr>
+    <tr><td class="ch">Chrome</td> <td class="bk">Blink</td></tr>
+    <tr><td class="op">Opera</td> <td class="bk">Blink</td></tr>
+  </tbody>
+</table>
+ +

CSS

+ +
.collapse {
+  border-collapse: collapse;
+}
+
+.separate {
+  border-collapse: separate;
+}
+
+table {
+  display: inline-table;
+  margin: 1em;
+  border: dashed 5px;
+}
+
+table th,
+table td {
+  border: solid 3px;
+}
+
+.fx { border-color: orange blue; }
+.gk { border-color: black red; }
+.ed { border-color: blue gold; }
+.tr { border-color: aqua; }
+.sa { border-color: silver blue; }
+.wk { border-color: gold blue; }
+.ch { border-color: red yellow green blue; }
+.bk { border-color: navy blue teal aqua; }
+.op { border-color: red; }
+ +

結果

+ +

{{ EmbedLiveSample('A_colorful_table_of_browser_engines', 400, 300) }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS2.1', 'tables.html#borders', 'border-collapse') }}{{ Spec2('CSS2.1') }}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ +

{{Compat("css.properties.border-collapse")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/border-spacing/index.html b/files/ja/web/css/border-spacing/index.html deleted file mode 100644 index a7eb1e8afe..0000000000 --- a/files/ja/web/css/border-spacing/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: border-spacing -slug: Web/CSS/border-spacing -tags: - - CSS - - CSS テーブル - - CSS プロパティ - - CSS 表 - - Reference - - リファレンス -translation_of: Web/CSS/border-spacing ---- -
{{CSSRef}}
- -

CSS の border-spacing プロパティは、 {{htmlelement("table")}} における隣り合うセルの枠線同士の間隔を定めます。このプロパティは {{cssxref("border-collapse")}} が separate のときのみ適用されます。

- -
{{EmbedInteractiveExample("pages/css/border-spacing.html")}}
- - - -

border-spacing の値は、表の外周部分にも使用され、表の境界線と最初/最後の列または行との間の距離は、 (縦または横の) 対応する border-spacing と、表の対応する側 (上下左右のいずれか) の {{cssxref("padding")}} の合計になります。

- -
-

メモ: border-spacing プロパティは、 <table> 要素の非推奨になった cellspacing 属性と同等ですが、任意で2つ目の値を指定して、左右方向と上下方向に異なる間隔を設定することができる点が異なります。

-
- -

構文

- -
/* <length> */
-border-spacing: 2px;
-
-/* 左右の <length> | 上下の <length> */
-border-spacing: 1cm 2em;
-
-/* グローバル値 */
-border-spacing: inherit;
-border-spacing: initial;
-border-spacing: unset;
-
- -

border-spacing プロパティは1つまたは2つの値で指定することができます。

- - - -

値

- -
-
{{cssxref("<length>")}}
-
固定値による間隔の大きさです。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

この例では表のセル間において、垂直方向に .5em、水平方向に 1em の間隔を適用します。なお、外の辺においては、表の padding の値が border-spacing の値に追加されます。

- -

HTML

- -
<table>
-  <tr>
-    <td>1</td><td>2</td><td>3</td>
-  </tr>
-  <tr>
-    <td>4</td><td>5</td><td>6</td>
-  </tr>
-  <tr>
-    <td>7</td><td>8</td><td>9</td>
-  </tr>
-</table>
-
- -

CSS

- -
table {
-  border-spacing: 1em .5em;
-  padding: 0 2em 1em 0;
-  border: 1px solid orange;
-}
-
-td {
-  width: 1.5em;
-  height: 1.5em;
-  background: #d2d2d2;
-  text-align: center;
-  vertical-align: middle;
-}
-
- -

結果

- -

{{ EmbedLiveSample('Example', 400, 200) }}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('CSS2.1', 'tables.html#separated-borders', 'border-spacing') }}{{ Spec2('CSS2.1') }}初回定義
- -

{{cssinfo}}

- -

ブラウザーの対応

- -

{{Compat("css.properties.border-spacing")}}

- -

関連情報

- - diff --git a/files/ja/web/css/border-spacing/index.md b/files/ja/web/css/border-spacing/index.md new file mode 100644 index 0000000000..a7eb1e8afe --- /dev/null +++ b/files/ja/web/css/border-spacing/index.md @@ -0,0 +1,129 @@ +--- +title: border-spacing +slug: Web/CSS/border-spacing +tags: + - CSS + - CSS テーブル + - CSS プロパティ + - CSS 表 + - Reference + - リファレンス +translation_of: Web/CSS/border-spacing +--- +
{{CSSRef}}
+ +

CSS の border-spacing プロパティは、 {{htmlelement("table")}} における隣り合うセルの枠線同士の間隔を定めます。このプロパティは {{cssxref("border-collapse")}} が separate のときのみ適用されます。

+ +
{{EmbedInteractiveExample("pages/css/border-spacing.html")}}
+ + + +

border-spacing の値は、表の外周部分にも使用され、表の境界線と最初/最後の列または行との間の距離は、 (縦または横の) 対応する border-spacing と、表の対応する側 (上下左右のいずれか) の {{cssxref("padding")}} の合計になります。

+ +
+

メモ: border-spacing プロパティは、 <table> 要素の非推奨になった cellspacing 属性と同等ですが、任意で2つ目の値を指定して、左右方向と上下方向に異なる間隔を設定することができる点が異なります。

+
+ +

構文

+ +
/* <length> */
+border-spacing: 2px;
+
+/* 左右の <length> | 上下の <length> */
+border-spacing: 1cm 2em;
+
+/* グローバル値 */
+border-spacing: inherit;
+border-spacing: initial;
+border-spacing: unset;
+
+ +

border-spacing プロパティは1つまたは2つの値で指定することができます。

+ + + +

値

+ +
+
{{cssxref("<length>")}}
+
固定値による間隔の大きさです。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

この例では表のセル間において、垂直方向に .5em、水平方向に 1em の間隔を適用します。なお、外の辺においては、表の padding の値が border-spacing の値に追加されます。

+ +

HTML

+ +
<table>
+  <tr>
+    <td>1</td><td>2</td><td>3</td>
+  </tr>
+  <tr>
+    <td>4</td><td>5</td><td>6</td>
+  </tr>
+  <tr>
+    <td>7</td><td>8</td><td>9</td>
+  </tr>
+</table>
+
+ +

CSS

+ +
table {
+  border-spacing: 1em .5em;
+  padding: 0 2em 1em 0;
+  border: 1px solid orange;
+}
+
+td {
+  width: 1.5em;
+  height: 1.5em;
+  background: #d2d2d2;
+  text-align: center;
+  vertical-align: middle;
+}
+
+ +

結果

+ +

{{ EmbedLiveSample('Example', 400, 200) }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS2.1', 'tables.html#separated-borders', 'border-spacing') }}{{ Spec2('CSS2.1') }}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ +

{{Compat("css.properties.border-spacing")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/caption-side/index.html b/files/ja/web/css/caption-side/index.html deleted file mode 100644 index 5b95a7c75e..0000000000 --- a/files/ja/web/css/caption-side/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: caption-side -slug: Web/CSS/caption-side -tags: - - CSS - - CSS Property - - CSS Tables - - Reference -translation_of: Web/CSS/caption-side ---- -
{{CSSRef}}
- -

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

- -
{{EmbedInteractiveExample("pages/css/caption-side.html")}}
- - - -

{{cssinfo}}

- -

構文

- -
/* 方向を示す値 */
-caption-side: top;
-caption-side: bottom;
-
-/* 警告: 非標準の値 */
-caption-side: left;
-caption-side: right;
-caption-side: top-outside;
-caption-side: bottom-outside;
-
-/* グローバル値 */
-caption-side: inherit;
-caption-side: initial;
-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 について異なる動作を説明していたとの注記があります。この動作は将来の仕様書で、この値を使用して再導入する予定です。")}}
-
- -

形式構文

- -{{csssyntax}} - -

例

- -

HTML

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

CSS

- -
.top caption {
-  caption-side: top;
-}
-
-.bottom caption {
-  caption-side: bottom;
-}
-
-table {
-  border: 1px solid red;
-}
-
-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')}}最初の定義
- -

ブラウザ実装状況

- - - -

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

diff --git a/files/ja/web/css/caption-side/index.md b/files/ja/web/css/caption-side/index.md new file mode 100644 index 0000000000..5b95a7c75e --- /dev/null +++ b/files/ja/web/css/caption-side/index.md @@ -0,0 +1,140 @@ +--- +title: caption-side +slug: Web/CSS/caption-side +tags: + - CSS + - CSS Property + - CSS Tables + - Reference +translation_of: Web/CSS/caption-side +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/caption-side.html")}}
+ + + +

{{cssinfo}}

+ +

構文

+ +
/* 方向を示す値 */
+caption-side: top;
+caption-side: bottom;
+
+/* 警告: 非標準の値 */
+caption-side: left;
+caption-side: right;
+caption-side: top-outside;
+caption-side: bottom-outside;
+
+/* グローバル値 */
+caption-side: inherit;
+caption-side: initial;
+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 について異なる動作を説明していたとの注記があります。この動作は将来の仕様書で、この値を使用して再導入する予定です。")}}
+
+ +

形式構文

+ +{{csssyntax}} + +

例

+ +

HTML

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

CSS

+ +
.top caption {
+  caption-side: top;
+}
+
+.bottom caption {
+  caption-side: bottom;
+}
+
+table {
+  border: 1px solid red;
+}
+
+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')}}最初の定義
+ +

ブラウザ実装状況

+ + + +

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

diff --git a/files/ja/web/css/css_table/index.html b/files/ja/web/css/css_table/index.html deleted file mode 100644 index 8c1b45c427..0000000000 --- a/files/ja/web/css/css_table/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: CSS 表 -slug: Web/CSS/CSS_Table -tags: - - CSS - - CSS 表 - - リファレンス - - 概要 -translation_of: Web/CSS/CSS_Table ---- -
{{CSSRef}}
- -

CSS 表 (CSS Table) は CSS のモジュールの一つで、表データをレイアウトする方法を定義します。

- -

リファレンス

- -

プロパティ

- -
- -
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS2.1", "tables.html")}}{{Spec2("CSS2.1")}}初回定義
diff --git a/files/ja/web/css/css_table/index.md b/files/ja/web/css/css_table/index.md new file mode 100644 index 0000000000..8c1b45c427 --- /dev/null +++ b/files/ja/web/css/css_table/index.md @@ -0,0 +1,47 @@ +--- +title: CSS 表 +slug: Web/CSS/CSS_Table +tags: + - CSS + - CSS 表 + - リファレンス + - 概要 +translation_of: Web/CSS/CSS_Table +--- +
{{CSSRef}}
+ +

CSS 表 (CSS Table) は CSS のモジュールの一つで、表データをレイアウトする方法を定義します。

+ +

リファレンス

+ +

プロパティ

+ +
+ +
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS2.1", "tables.html")}}{{Spec2("CSS2.1")}}初回定義
diff --git a/files/ja/web/css/empty-cells/index.html b/files/ja/web/css/empty-cells/index.html deleted file mode 100644 index 8e4030d657..0000000000 --- a/files/ja/web/css/empty-cells/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: empty-cells -slug: Web/CSS/empty-cells -tags: - - CSS - - CSS プロパティ - - CSS 表 - - リファレンス -translation_of: Web/CSS/empty-cells ---- -
{{CSSRef}}
- -

CSS の empty-cells プロパティは、目に見える内容を持たない{{htmlelement("table", "表")}}のセルの、周囲の境界と背景を{{glossary("user agent", "ユーザーエージェント")}}がどのように描画するかを指定します。

- -
{{EmbedInteractiveExample("pages/css/empty-cells.html")}}
- - - -

このプロパティは、 {{cssxref("border-collapse")}} プロパティが separate の場合のみ効果があります。

- -

構文

- -
/* キーワード値 */
-empty-cells: show;
-empty-cells: hide;
-
-/* グローバル値 */
-empty-cells: inherit;
-empty-cells: initial;
-empty-cells: unset;
-
- -

empty-cells プロパティは、以下のキーワード値のうちの一つで指定します。

- -

値

- -
-
show
-
通常のセルのように、境界や背景を描くことを示すキーワードです。
-
hide
-
境界や背景を描かないことを示すキーワードです。
-
- -

例

- -{{csssyntax}} - -

例

- -

HTML

- -
<table class="table_1">
-  <tr>
-    <td>Moe</td>
-    <td>Larry</td>
-  </tr>
-  <tr>
-    <td>Curly</td>
-    <td></td>
-  </tr>
-</table>
-<br>
-<table class="table_2">
-  <tr>
-    <td>Moe</td>
-    <td>Larry</td>
-  </tr>
-  <tr>
-    <td>Curly</td>
-    <td></td>
-  </tr>
-</table>
-
- -

CSS

- -
.table_1 {
-  empty-cells: show;
-}
-
-.table_2 {
-  empty-cells: hide;
-}
-
-td,
-th {
-  border: 1px solid gray;
-  padding: 0.5rem;
-}
- -

結果

- -

{{ EmbedLiveSample('Examples', '100%', '200') }}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS2.1', 'tables.html#empty-cells', 'empty-cells')}}{{Spec2('CSS2.1')}} 
- -

{{cssinfo}}

- -

ブラウザーの対応

- -

{{Compat("css.properties.empty-cells")}}

diff --git a/files/ja/web/css/empty-cells/index.md b/files/ja/web/css/empty-cells/index.md new file mode 100644 index 0000000000..8e4030d657 --- /dev/null +++ b/files/ja/web/css/empty-cells/index.md @@ -0,0 +1,118 @@ +--- +title: empty-cells +slug: Web/CSS/empty-cells +tags: + - CSS + - CSS プロパティ + - CSS 表 + - リファレンス +translation_of: Web/CSS/empty-cells +--- +
{{CSSRef}}
+ +

CSS の empty-cells プロパティは、目に見える内容を持たない{{htmlelement("table", "表")}}のセルの、周囲の境界と背景を{{glossary("user agent", "ユーザーエージェント")}}がどのように描画するかを指定します。

+ +
{{EmbedInteractiveExample("pages/css/empty-cells.html")}}
+ + + +

このプロパティは、 {{cssxref("border-collapse")}} プロパティが separate の場合のみ効果があります。

+ +

構文

+ +
/* キーワード値 */
+empty-cells: show;
+empty-cells: hide;
+
+/* グローバル値 */
+empty-cells: inherit;
+empty-cells: initial;
+empty-cells: unset;
+
+ +

empty-cells プロパティは、以下のキーワード値のうちの一つで指定します。

+ +

値

+ +
+
show
+
通常のセルのように、境界や背景を描くことを示すキーワードです。
+
hide
+
境界や背景を描かないことを示すキーワードです。
+
+ +

例

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<table class="table_1">
+  <tr>
+    <td>Moe</td>
+    <td>Larry</td>
+  </tr>
+  <tr>
+    <td>Curly</td>
+    <td></td>
+  </tr>
+</table>
+<br>
+<table class="table_2">
+  <tr>
+    <td>Moe</td>
+    <td>Larry</td>
+  </tr>
+  <tr>
+    <td>Curly</td>
+    <td></td>
+  </tr>
+</table>
+
+ +

CSS

+ +
.table_1 {
+  empty-cells: show;
+}
+
+.table_2 {
+  empty-cells: hide;
+}
+
+td,
+th {
+  border: 1px solid gray;
+  padding: 0.5rem;
+}
+ +

結果

+ +

{{ EmbedLiveSample('Examples', '100%', '200') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS2.1', 'tables.html#empty-cells', 'empty-cells')}}{{Spec2('CSS2.1')}} 
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ +

{{Compat("css.properties.empty-cells")}}

diff --git a/files/ja/web/css/vertical-align/index.html b/files/ja/web/css/vertical-align/index.html deleted file mode 100644 index 7302c8c57b..0000000000 --- a/files/ja/web/css/vertical-align/index.html +++ /dev/null @@ -1,252 +0,0 @@ ---- -title: vertical-align -slug: Web/CSS/vertical-align -tags: - - CSS - - CSS プロパティ - - Reference -translation_of: Web/CSS/vertical-align ---- -
{{CSSRef}}
- -

vertical-align は CSS のプロパティで、インラインボックス、インラインブロック、表セルボックスの垂直方向の配置を設定します。

- -
{{EmbedInteractiveExample("pages/css/vertical-align.html")}}
- - - -

vertical-align は、2 つの場面で使用することができます。

- - - -
- - - -
- -

{{EmbedLiveSample("vertical-align-inline", 1200, 120, "", "", "example-outcome-frame")}}

- - - -
- - - -
- -

{{EmbedLiveSample("vertical-align-table", 1200, 210, "", "", "example-outcome-frame")}}

- -

vertical-align はインライン要素、インラインブロック要素、表セル要素だけに適用できることに注意してください。つまり、ブロックレベル要素の縦方向の整列には使えないのです。

- -

構文

- -
/* キーワード値 */
-vertical-align: baseline;
-vertical-align: sub;
-vertical-align: super;
-vertical-align: text-top;
-vertical-align: text-bottom;
-vertical-align: middle;
-vertical-align: top;
-vertical-align: bottom;
-
-/* <length> 値 */
-vertical-align: 10em;
-vertical-align: 4px;
-
-/* <percentage> 値 */
-vertical-align: 20%;
-
-/* グローバル値 */
-vertical-align: inherit;
-vertical-align: initial;
-vertical-align: unset;
-
- -

vertical-align プロパティは、以下の値のうち一つで指定します。

- -

インライン要素用の値

- -

親要素との相対値

- -

以下の値は、親要素に対しての縦方向の整列方法を表します。

- -
-
baseline
-
要素のベースラインを親要素のベースラインに揃えます。 {{HTMLElement("textarea")}} のような、一部の 置換要素 のベースラインは HTML 仕様で未定義であり、このため、このキーワードの挙動はブラウザにより異なるかもしれません。
-
sub
-
要素のベースラインを親要素の subscript-baseline に揃えます。
-
super
-
要素のベースラインを親要素の superscript-baseline に揃えます。
-
text-top
-
要素の上端を親要素のフォントの上端に揃えます。
-
text-bottom
-
要素の下端を親要素のフォントの下端に揃えます。
-
middle
-
要素の中央を親要素の baseline + x-height の半分 に揃えます。
-
{{cssxref("<length>")}}
-
要素のベースラインを、親要素のベースラインの指定値分上に揃えます。負の値を使えます。
-
{{cssxref("<percentage>")}}
-
<length> 値と似ていますが、{{Cssxref("line-height")}} プロパティに対するパーセンテージで指定します。負の値を使えます。
-
- -

行との相対値

- -

以下の値は、親要素ではなく、行全体に対しての縦方向の整列方法を表します。

- -
-
top
-
要素と子孫要素の上端を行全体の上端に揃えます。
-
bottom
-
要素と子孫要素の下端を行全体の下端に揃えます。
-
- -

ベースラインを持たない要素では、代わりにマージン境界の下端が使われます。

- -

表セル用の値

- -
-
baseline (および sub, super, text-top, text-bottom, <length>, <percentage>)
-
セルのベースラインを、行内でベースライン揃えにされた他のすべてのセルのベースラインに揃えます。
-
top
-
セルの上端のパディング境界を行の上端に揃えます。
-
middle
-
セルのパディングボックスが行の中央になるようにします。
-
bottom
-
セルの下端のパディング境界を行の下端に揃えます。
-
- -

負の値を使用することができます。

- -

公式定義

- -

{{CSSInfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

基本的な例

- -

HTML

- -
<div>An <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a default alignment.</div>
-<div>An <img class="top" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a text-top alignment.</div>
-<div>An <img class="bottom" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a text-bottom alignment.</div>
-<div>An <img class="middle" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a middle alignment.</div>
-
- -

CSS

- -
img.top { vertical-align: text-top; }
-img.bottom { vertical-align: text-bottom; }
-img.middle { vertical-align: middle; }
-
- -

Result

- -

{{EmbedLiveSample("Basic_example")}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS2.1', 'visudet.html#propdef-vertical-align', 'vertical-align')}}{{Spec2('CSS2.1')}}{{cssxref("<length>")}} 値を追加し、 {{cssxref("display")}} が table-cell である要素で使えるようにした。
{{SpecName('CSS1', '#vertical-align', 'vertical-align')}}{{Spec2('CSS1')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.vertical-align")}}

- -

関連情報

- - diff --git a/files/ja/web/css/vertical-align/index.md b/files/ja/web/css/vertical-align/index.md new file mode 100644 index 0000000000..7302c8c57b --- /dev/null +++ b/files/ja/web/css/vertical-align/index.md @@ -0,0 +1,252 @@ +--- +title: vertical-align +slug: Web/CSS/vertical-align +tags: + - CSS + - CSS プロパティ + - Reference +translation_of: Web/CSS/vertical-align +--- +
{{CSSRef}}
+ +

vertical-align は CSS のプロパティで、インラインボックス、インラインブロック、表セルボックスの垂直方向の配置を設定します。

+ +
{{EmbedInteractiveExample("pages/css/vertical-align.html")}}
+ + + +

vertical-align は、2 つの場面で使用することができます。

+ + + +
+ + + +
+ +

{{EmbedLiveSample("vertical-align-inline", 1200, 120, "", "", "example-outcome-frame")}}

+ + + +
+ + + +
+ +

{{EmbedLiveSample("vertical-align-table", 1200, 210, "", "", "example-outcome-frame")}}

+ +

vertical-align はインライン要素、インラインブロック要素、表セル要素だけに適用できることに注意してください。つまり、ブロックレベル要素の縦方向の整列には使えないのです。

+ +

構文

+ +
/* キーワード値 */
+vertical-align: baseline;
+vertical-align: sub;
+vertical-align: super;
+vertical-align: text-top;
+vertical-align: text-bottom;
+vertical-align: middle;
+vertical-align: top;
+vertical-align: bottom;
+
+/* <length> 値 */
+vertical-align: 10em;
+vertical-align: 4px;
+
+/* <percentage> 値 */
+vertical-align: 20%;
+
+/* グローバル値 */
+vertical-align: inherit;
+vertical-align: initial;
+vertical-align: unset;
+
+ +

vertical-align プロパティは、以下の値のうち一つで指定します。

+ +

インライン要素用の値

+ +

親要素との相対値

+ +

以下の値は、親要素に対しての縦方向の整列方法を表します。

+ +
+
baseline
+
要素のベースラインを親要素のベースラインに揃えます。 {{HTMLElement("textarea")}} のような、一部の 置換要素 のベースラインは HTML 仕様で未定義であり、このため、このキーワードの挙動はブラウザにより異なるかもしれません。
+
sub
+
要素のベースラインを親要素の subscript-baseline に揃えます。
+
super
+
要素のベースラインを親要素の superscript-baseline に揃えます。
+
text-top
+
要素の上端を親要素のフォントの上端に揃えます。
+
text-bottom
+
要素の下端を親要素のフォントの下端に揃えます。
+
middle
+
要素の中央を親要素の baseline + x-height の半分 に揃えます。
+
{{cssxref("<length>")}}
+
要素のベースラインを、親要素のベースラインの指定値分上に揃えます。負の値を使えます。
+
{{cssxref("<percentage>")}}
+
<length> 値と似ていますが、{{Cssxref("line-height")}} プロパティに対するパーセンテージで指定します。負の値を使えます。
+
+ +

行との相対値

+ +

以下の値は、親要素ではなく、行全体に対しての縦方向の整列方法を表します。

+ +
+
top
+
要素と子孫要素の上端を行全体の上端に揃えます。
+
bottom
+
要素と子孫要素の下端を行全体の下端に揃えます。
+
+ +

ベースラインを持たない要素では、代わりにマージン境界の下端が使われます。

+ +

表セル用の値

+ +
+
baseline (および sub, super, text-top, text-bottom, <length>, <percentage>)
+
セルのベースラインを、行内でベースライン揃えにされた他のすべてのセルのベースラインに揃えます。
+
top
+
セルの上端のパディング境界を行の上端に揃えます。
+
middle
+
セルのパディングボックスが行の中央になるようにします。
+
bottom
+
セルの下端のパディング境界を行の下端に揃えます。
+
+ +

負の値を使用することができます。

+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

基本的な例

+ +

HTML

+ +
<div>An <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a default alignment.</div>
+<div>An <img class="top" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a text-top alignment.</div>
+<div>An <img class="bottom" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a text-bottom alignment.</div>
+<div>An <img class="middle" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a middle alignment.</div>
+
+ +

CSS

+ +
img.top { vertical-align: text-top; }
+img.bottom { vertical-align: text-bottom; }
+img.middle { vertical-align: middle; }
+
+ +

Result

+ +

{{EmbedLiveSample("Basic_example")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS2.1', 'visudet.html#propdef-vertical-align', 'vertical-align')}}{{Spec2('CSS2.1')}}{{cssxref("<length>")}} 値を追加し、 {{cssxref("display")}} が table-cell である要素で使えるようにした。
{{SpecName('CSS1', '#vertical-align', 'vertical-align')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.vertical-align")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf