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/border-collapse/index.md | 160 +++++++------- files/ja/web/css/border-spacing/index.md | 127 +++++------ files/ja/web/css/caption-side/index.md | 162 ++++++-------- files/ja/web/css/css_table/index.md | 48 ++-- files/ja/web/css/empty-cells/index.md | 138 ++++++------ files/ja/web/css/table-layout/index.md | 2 +- files/ja/web/css/vertical-align/index.md | 350 ++++++++++++++---------------- files/ja/web/css/vertical-align/star.png | Bin 0 -> 753 bytes 8 files changed, 453 insertions(+), 534 deletions(-) create mode 100644 files/ja/web/css/vertical-align/star.png (limited to 'files') diff --git a/files/ja/web/css/border-collapse/index.md b/files/ja/web/css/border-collapse/index.md index 7de69d0f6f..588bd841b0 100644 --- a/files/ja/web/css/border-collapse/index.md +++ b/files/ja/web/css/border-collapse/index.md @@ -3,80 +3,90 @@ title: border-collapse slug: Web/CSS/border-collapse tags: - CSS - - CSS Reference + - CSS 境界 + - CSS プロパティ + - CSS 表 + - リファレンス + - recipe:css-property +browser-compat: css.properties.border-collapse translation_of: Web/CSS/border-collapse --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`border-collapse`** は [CSS](/ja/docs/Web/CSS) のプロパティで、表 ({{htmlElement("table")}}) の中のセルが境界を共有するか分離するかを設定します。 -
{{EmbedInteractiveExample("pages/css/border-collapse.html")}}
+{{EmbedInteractiveExample("pages/css/border-collapse.html")}} - +セルが折り畳まれている場合 (collapse)、 {{cssxref("border-style")}} の値で `inset` が `groove` のように動作し、 `outset` が `ridge` のように動作します。 -

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

+セルが分離されている場合 (separate)、セル間の距離は {{cssxref("border-spacing")}} プロパティで定義されます。 -

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

+## 構文 -

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 border-collapse: collapse;
 border-collapse: separate;
 
 /* グローバル値 */
 border-collapse: inherit;
 border-collapse: initial;
+border-collapse: revert;
 border-collapse: unset;
-
+``` + +`border-collapse` プロパティは、以下のリストから選択された単一のキーワードで指定します。 -

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

+### 値 -

値

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

形式文法

+{{CSSInfo}} + +## 形式文法 {{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 {
+## 例
+
+
ブラウザーエンジンのカラフルな表

+
+#### HTML
+
+```html
+
+  
+  
+    
+    
+    
+    
+    
+    
+  
+
border-collapse: separate
Browser Layout Engine
Firefox Gecko
Edge EdgeHTML
Safari Webkit
Chrome Blink
Opera Blink

+
+  
+  
+    
+    
+    
+    
+    
+    
+  
+
border-collapse: collapse
Browser Layout Engine
Firefox Gecko
Edge EdgeHTML
Safari Webkit
Chrome Blink
Opera Blink

+```
+
+#### CSS
+
+```css
+.collapse {
   border-collapse: collapse;
 }
 
@@ -103,40 +113,22 @@ table td {
 .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') }}初回定義
+.op { border-color: red; } +``` + +#### 結果 + +{{ EmbedLiveSample('A_colorful_table_of_browser_engines', 400, 300) }} + +## 仕様書 -

{{cssinfo}}

+{{Specifications}} -

ブラウザーの対応

+## ブラウザーの互換性 -

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

+{{Compat}} -

関連情報

+## 関連情報 - +- {{cssxref("border-spacing")}}, {{cssxref("border-style")}} +- `border-collapse` プロパティは HTML の {{htmlelement("table")}} 要素の表示方法を変更します。 diff --git a/files/ja/web/css/border-spacing/index.md b/files/ja/web/css/border-spacing/index.md index a7eb1e8afe..27da3fb4f2 100644 --- a/files/ja/web/css/border-spacing/index.md +++ b/files/ja/web/css/border-spacing/index.md @@ -3,81 +3,83 @@ title: border-spacing slug: Web/CSS/border-spacing tags: - CSS - - CSS テーブル - CSS プロパティ - CSS 表 - - Reference - リファレンス + - recipe:css-property +browser-compat: css.properties.border-spacing translation_of: Web/CSS/border-spacing --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`border-spacing`** は [CSS](/ja/docs/Web/CSS) のプロパティで、{{htmlelement("table")}} における隣り合うセルの境界同士の間隔を定めます。このプロパティは {{cssxref("border-collapse")}} が `separate` のときのみ適用されます。 -
{{EmbedInteractiveExample("pages/css/border-spacing.html")}}
+{{EmbedInteractiveExample("pages/css/border-spacing.html")}} - +`border-spacing` の値は、表の外周部分にも使用され、表の境界線と最初/最後の列または行との間の距離は、 (縦または横の) 対応する `border-spacing` と、表の対応する側 (上下左右のいずれか) の {{cssxref("padding")}} の合計になります。 -

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

+> **Note:** `border-spacing` プロパティは、`` 要素における非推奨の `cellspacing` 属性と同等ですが、任意で 2 つ目の値を指定して、水平方向と垂直方向に異なる間隔を設定することができる点が異なります。 -
-

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

-
+## 構文 -

構文

- -
/* <length> */
+```css
+/*  */
 border-spacing: 2px;
 
-/* 左右の <length> | 上下の <length> */
+/* 左右の  | 上下の  */
 border-spacing: 1cm 2em;
 
 /* グローバル値 */
 border-spacing: inherit;
 border-spacing: initial;
+border-spacing: revert;
 border-spacing: unset;
-
+``` + +`border-spacing` プロパティは 1 つまたは 2 つの値で指定することができます。 + +- **1 つ**の `` 値が指定された場合は、セル間の左右方向と上下方向の両方の間隔を定義します。 +- **2 つ**の `` 値が指定された場合は、最初の値がセル間の左右方向の間隔 (つまり、隣り合う*列*の間隔) を定義し、2 番目の値がセル間の上下方向の間隔 (つまり、隣り合う*行*の間隔) を定義します。 -

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

+### 値 -
    -
  • <length> 値が1つ指定された場合は、セル間の左右方向と上下方向の両方の間隔を定義します。
    • -
  • <length> 値が2つ指定された場合は、最初の値がセル間の左右方向の間隔 (つまり、隣り合う列の間隔) を定義し、2番目の値がセル間の上下方向の間隔 (つまり、隣り合う行の間隔) を定義します。
    • -
+- {{cssxref("<length>")}} + - : 固定値による間隔の大きさです。 -

値

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

形式文法

+## 形式文法 {{csssyntax}} -

例

+## 例 -

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

+

表のセルの余白とパディング

-

HTML

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

CSS

+```html +
+ + + + + + + + + +
123
456
789
+``` + +#### CSS -
table {
+```css
+table {
   border-spacing: 1em .5em;
   padding: 0 2em 1em 0;
   border: 1px solid orange;
@@ -90,40 +92,21 @@ td {
   text-align: center;
   vertical-align: middle;
 }
-
+``` -

結果

+#### 結果 -

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

+{{ EmbedLiveSample('Spacing_and_padding_table_cells', 400, 200) }} -

仕様書

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

{{cssinfo}}

+{{Specifications}} -

ブラウザーの対応

+## ブラウザーの互換性 -

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

+{{Compat}} -

関連情報

+## 関連情報 - +- {{cssxref("border-collapse")}}, {{cssxref("border-style")}} +- `border-spacing` プロパティは HTML の {{htmlelement("table")}} 要素の出現方法を変更します。 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}} diff --git a/files/ja/web/css/css_table/index.md b/files/ja/web/css/css_table/index.md index 8c1b45c427..e6d6366213 100644 --- a/files/ja/web/css/css_table/index.md +++ b/files/ja/web/css/css_table/index.md @@ -4,44 +4,28 @@ slug: Web/CSS/CSS_Table tags: - CSS - CSS 表 - - リファレンス + - ガイド - 概要 + - リファレンス translation_of: Web/CSS/CSS_Table --- -
{{CSSRef}}
+{{CSSRef}} -

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

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

リファレンス

+## リファレンス -

プロパティ

+### プロパティ -
- -
+- {{cssxref("border-collapse")}} +- {{cssxref("border-spacing")}} +- {{cssxref("caption-side")}} +- {{cssxref("empty-cells")}} +- {{cssxref("table-layout")}} +- {{cssxref("vertical-align")}} -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS2.1", "tables.html")}}{{Spec2("CSS2.1")}}初回定義
+| 仕様書 | 状態 | 備考 | +| ------------------------------------- | ------------------- | -------- | +| {{SpecName("CSS2.1", "tables.html")}} | {{Spec2("CSS2.1")}} | 初回定義 | diff --git a/files/ja/web/css/empty-cells/index.md b/files/ja/web/css/empty-cells/index.md index 8e4030d657..67e4ed0854 100644 --- a/files/ja/web/css/empty-cells/index.md +++ b/files/ja/web/css/empty-cells/index.md @@ -6,21 +6,22 @@ tags: - CSS プロパティ - CSS 表 - リファレンス + - recipe:css-property +browser-compat: css.properties.empty-cells translation_of: Web/CSS/empty-cells --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`empty-cells`** は CSS のプロパティで、{{htmlelement("table", "表")}}のセルが目に見える内容を持たない場合に、周囲の境界と背景を{{glossary("user agent", "ユーザーエージェント")}}がどのように描画するかを指定します。 -
{{EmbedInteractiveExample("pages/css/empty-cells.html")}}
+{{EmbedInteractiveExample("pages/css/empty-cells.html")}} - +このプロパティは、 {{cssxref("border-collapse")}} プロパティが `separate` であった場合のみ効果があります。 -

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

+## 構文 -

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 empty-cells: show;
 empty-cells: hide;
 
@@ -28,53 +29,59 @@ empty-cells: hide;
 empty-cells: inherit;
 empty-cells: initial;
 empty-cells: unset;
-
+``` + +`empty-cells` プロパティは、以下のキーワード値のうちの一つで指定します。 -

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

+### 値 -

値

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

例

+{{cssinfo}} + +## 形式文法 {{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 {
+## 例
+
+
表の空のセルの表示・非表示

+
+#### HTML
+
+```html
+
+  
+    
+    
+  
+  
+    
+    
+  
+
MoeLarry
Curly

+

+
+  
+    
+    
+  
+  
+    
+    
+  
+
MoeLarry
Curly

+```
+
+#### CSS
+
+```css
+.table_1 {
   empty-cells: show;
 }
 
@@ -86,33 +93,22 @@ td,
 th {
   border: 1px solid gray;
   padding: 0.5rem;
-}
+} +``` -

結果

+#### 結果 -

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

+{{ EmbedLiveSample('Showing_and_hiding_empty_table_cells', '100%', '200') }} -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS2.1', 'tables.html#empty-cells', 'empty-cells')}}{{Spec2('CSS2.1')}} 
+{{Specifications}} + +## ブラウザーの互換性 -

{{cssinfo}}

+{{Compat}} -

ブラウザーの対応

+## 関連情報 -

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

+- {{cssxref("border-collapse")}} +- [表のスタイル付け](/ja/docs/Learn/CSS/Building_blocks/Styling_tables) diff --git a/files/ja/web/css/table-layout/index.md b/files/ja/web/css/table-layout/index.md index 74507ca0d3..c10fdd6250 100644 --- a/files/ja/web/css/table-layout/index.md +++ b/files/ja/web/css/table-layout/index.md @@ -5,7 +5,7 @@ tags: - CSS - CSS プロパティ - CSS 表 - - Reference + - リファレンス - recipe:css-property browser-compat: css.properties.table-layout translation_of: Web/CSS/table-layout diff --git a/files/ja/web/css/vertical-align/index.md b/files/ja/web/css/vertical-align/index.md index 7302c8c57b..97000a1c58 100644 --- a/files/ja/web/css/vertical-align/index.md +++ b/files/ja/web/css/vertical-align/index.md @@ -4,108 +4,26 @@ slug: Web/CSS/vertical-align tags: - CSS - CSS プロパティ - - Reference + - リファレンス translation_of: Web/CSS/vertical-align --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`vertical-align`** は [CSS](/ja/docs/Web/CSS) のプロパティで、インラインボックス、インラインブロック、表セルボックスの垂直方向の配置を設定します。 -
{{EmbedInteractiveExample("pages/css/vertical-align.html")}}
+{{EmbedInteractiveExample("pages/css/vertical-align.html")}} - +vertical-align は、2 つの場面で使用することができます。 -

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

+- 包含する行ボックスの中で、インライン要素のボックスの垂直方向の配置を決める場合。例えば、[テキストの行の中で画像の垂直位置を決める](#vertical_alignment_in_a_line_box)ために使用することができます。 +- [表のセルの内容](#vertical_alignment_in_a_table_cell)の垂直方向の配置を決める場合。 - +`vertical-align` はインライン要素、インラインブロック要素、表のセル要素だけに適用されることに注意してください。つまり、[ブロックレベル要素](/ja/docs/Web/HTML/Block-level_elements)の垂直方向の配置には使用できません。 -
- - - -
- -

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

- - - -
- - - -
- -

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

- -

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

- -

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 vertical-align: baseline;
 vertical-align: sub;
 vertical-align: super;
@@ -115,138 +33,204 @@ 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: revert;
 vertical-align: unset;
-
+``` -

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

+`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")}} プロパティに対するパーセンテージで指定します。負の値を使えます。
-
+- `baseline` + - : 要素のベースラインを親要素のベースラインに揃えます。一部の[置換要素](/ja/docs/Web/CSS/Replaced_element)、例えば {{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
-
要素と子孫要素の下端を行全体の下端に揃えます。
-
+- `top` + - : 要素と子孫要素の上端を行全体の上端に揃えます。 +- `bottom` + - : 要素と子孫要素の下端を行全体の下端に揃えます。 -

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

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

表セル用の値

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

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

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

公式定義

+## 公式定義 -

{{CSSInfo}}

+{{CSSInfo}} -

形式文法

+## 形式文法 {{csssyntax}} -

例

+## 例 -

基本的な例

+

基本的な例

-

HTML

+#### 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>
-
+```html +
An link image with a default alignment.
+
An link image with a text-top alignment.
+
An link image with a text-bottom alignment.
+
An link image with a middle alignment.
+``` -

CSS

+#### CSS -
img.top { vertical-align: text-top; }
+```css
+img.top { vertical-align: text-top; }
 img.bottom { vertical-align: text-bottom; }
 img.middle { vertical-align: middle; }
-
+``` -

Result

+#### 結果 -

{{EmbedLiveSample("Basic_example")}}

+{{EmbedLiveSample("Basic_example")}} -

仕様書

+

行ボックス内での垂直方向の配置

- - - - - - - - - - - - - - +#### HTML + +```html +

+top: +middle: +bottom: +super: +sub: +

+ +

+text-top: +text-bottom: +0.2em: +-1em: +20%: +-100%: +

+``` + +```css hidden +#* { + box-sizing: border-box; +} + +img { + margin-right: 0.5em; +} + +p { + height: 3em; + padding: 0 .5em; + font-family: monospace; + text-decoration: underline overline; + margin-left: auto; + margin-right: auto; + width: 80%; +} +``` + +#### 結果 + +{{EmbedLiveSample("Vertical_alignment_in_a_line_box", '100%', 160, "", "")}} + +

表のセル内での垂直方向の配置

+ +#### HTML + +```html +
仕様書状態備考
{{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')}}初回定義baselinetopmiddlebottom +

There is a theory which states that if ever anyone discovers exactly + what the Universe is for and why it is here, it will instantly disappear and + be replaced by something even more bizarre and inexplicable.

+

There is another theory which states that this has already happened.

+
+``` + +#### CSS + +```css +table { + margin-left: auto; + margin-right: auto; + width: 80%; +} + +table, th, td { + border: 1px solid black; +} + +td { + padding: 0.5em; + font-family: monospace; +} +``` + +#### 結果 + +{{EmbedLiveSample("Vertical_alignment_in_a_table_cell", '100%', 230, "", "")}} + +## 仕様書 + +{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

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

+{{Compat}} -

関連情報

+## 関連情報 - +- [フレックスボックスの典型的な使用例の「アイテムの中央揃え」の節](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox#center_item) +- {{Cssxref("line-height")}}, {{Cssxref("text-align")}}, {{Cssxref("margin")}} +- [Understanding `vertical-align`, or "How (Not) To Vertically Center Content"](http://phrogz.net/css/vertical-align/index.html) +- [Vertical-Align: All You Need To Know](https://christopheraue.net/design/vertical-align) diff --git a/files/ja/web/css/vertical-align/star.png b/files/ja/web/css/vertical-align/star.png new file mode 100644 index 0000000000..bee01b962b Binary files /dev/null and b/files/ja/web/css/vertical-align/star.png differ -- cgit v1.2.3-54-g00ecf