files/ja/web/css/display-internal/index.md


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116

---
title: <display-internal>
slug: Web/CSS/display-internal
tags:
  - CSS
  - CSS データ型
  - CSS Display
  - データ型
  - リファレンス
  - display-internal
translation_of: Web/CSS/display-internal
---
{{CSSRef}}

`table` や `ruby` のような一部のレイアウトモデルでは、複雑な内部構造があり、様々なその子要素や子孫要素が担う様々な役割があります。このページではこれらを「内部の」表示値として定義し、特定のレイアウトモードでのみ意味を持ちます。

## 構文

有効な `<display-internal>` の値は次の通りです。

- `table-row-group`
  - : これらの要素は HTML の {{HTMLElement("tbody")}} 要素のように動作します。
- `table-header-group`
  - : これらの要素は HTML の {{HTMLElement("thead")}} 要素のように動作します。
- `table-footer-group`
  - : これらの要素は HTML の {{HTMLElement("tfoot")}} 要素のように動作します。
- `table-row`
  - : これらの要素は HTML の {{HTMLElement("tr")}} 要素のように動作します。
- `table-cell`
  - : これらの要素は HTML の {{HTMLElement("td")}} 要素のように動作します。
- `table-column-group`
  - : これらの要素は HTML の {{HTMLElement("colgroup")}} 要素のように動作します。
- `table-column`
  - : これらの要素は HTML の {{HTMLElement("col")}} 要素のように動作します。
- `table-caption`
  - : これらの要素は HTML の {{HTMLElement("caption")}} 要素のように動作します。
- `ruby-base` {{Experimental_Inline}}
  - : これらの要素は HTML の {{HTMLElement("rb")}} 要素のように動作します。
- `ruby-text` {{Experimental_Inline}}
  - : これらの要素は HTML の {{HTMLElement("rt")}} 要素のように動作します。
- `ruby-base-container` {{Experimental_Inline}}
  - : これらの要素は無名のボックスとして生成された HTML の {{HTMLElement("rbc")}} 要素のように動作します。
- `ruby-text-container` {{Experimental_Inline}}
  - : これらの要素は HTML の {{HTMLElement("rtc")}} 要素のように動作します。

## 例

<h3 id="CSS_tables_example">CSS テーブルの例</h3>

以下の例は、 CSS テーブルレイアウトを使用した単純なフォームのレイアウトを紹介します。

#### HTML

```html
<main>
  <div>
    <label for="name">Name</label>
    <input type="text" id="name" name="name">
  </div>
  <div>
    <label for="age">Age</label>
    <input type="text" id="age" name="age">
  </div>
</main>
```

#### CSS

```css
main {
  display: table;
}

div {
  display: table-row;
}

label, input {
  display: table-cell;
  margin: 5px;
}
```

#### 結果

{{EmbedLiveSample('CSS_tables_example', '100%', 100)}}

## 仕様書

| 仕様書                                                                                            | 状態                           |
| -------------------------------------------------------------------------------------------------------- | -------------------------------- |
| {{SpecName('CSS3 Display', '#typedef-display-internal', 'display-internal')}} | {{Spec2('CSS3 Display')}} |

## ブラウザーの互換性

### 対応している table の値

`table`, `table-cell`, `table-column`, `table-column-group`, `table-footer-group`, `table-header-group`, `table-row`, `table-row-group`

{{Compat("css.properties.display.table_values", 10)}}

### 対応している ruby の値

`ruby`, `ruby-base`, `ruby-base-container`, `ruby-text`, `ruby-text-container`

{{Compat("css.properties.display.ruby_values", 10)}}

## 関連情報

- {{CSSxRef("display")}}

  - {{CSSxRef("&lt;display-outside&gt;")}}
  - {{CSSxRef("&lt;display-inside&gt;")}}
  - {{CSSxRef("&lt;display-listitem&gt;")}}
  - {{CSSxRef("&lt;display-box&gt;")}}
  - {{CSSxRef("&lt;display-legacy&gt;")}}