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


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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

---
title: <display-internal>
slug: Web/CSS/display-internal
tags:
  - CSS
  - CSS Data Type
  - CSS Display
  - Data Type
  - Reference
  - display-internal
translation_of: Web/CSS/display-internal
---
<div>{{CSSRef}}</div>

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

<h2 id="Syntax" name="Syntax">構文</h2>

<p>有効な <code>&lt;display-internal&gt;</code> の値は次の通りです。</p>

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

<h2 id="Examples" name="Examples">例</h2>

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

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

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;main&gt;
  &lt;div&gt;
    &lt;label for="name"&gt;Name&lt;/label&gt;
    &lt;input type="text" id="name" name="name"&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;label for="age"&gt;Age&lt;/label&gt;
    &lt;input type="text" id="age" name="age"&gt;
  &lt;/div&gt;
&lt;/main&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">main {
  display: table;
}

div {
  display: table-row;
}

label, input {
  display: table-cell;
  margin: 5px;
}</pre>

<h4 id="Result" name="Result">結果</h4>

<p>{{EmbedLiveSample('CSS_tables_example', '100%', 100)}}</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Display', '#typedef-display-internal', 'display-internal')}}</td>
   <td>{{Spec2('CSS3 Display')}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<h3 id="Support_of_table_values" name="Support_of_table_values">対応している table の値</h3>

<p><code>table</code>, <code>table-cell</code>, <code>table-column</code>, <code>table-column-group</code>, <code>table-footer-group</code>, <code>table-header-group</code>, <code>table-row</code>, <code>table-row-group</code></p>

<p>{{Compat("css.properties.display.table_values", 10)}}</p>

<h3 id="Support_of_ruby_values" name="Support_of_ruby_values">対応している ruby の値</h3>

<p><code>ruby</code>, <code>ruby-base</code>, <code>ruby-base-container</code>, <code>ruby-text</code>, <code>ruby-text-container</code></p>

<p>{{Compat("css.properties.display.ruby_values", 10)}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{CSSxRef("display")}}
  <ul>
   <li>{{CSSxRef("&lt;display-outside&gt;")}}</li>
   <li>{{CSSxRef("&lt;display-inside&gt;")}}</li>
   <li>{{CSSxRef("&lt;display-listitem&gt;")}}</li>
   <li>{{CSSxRef("&lt;display-box&gt;")}}</li>
   <li>{{CSSxRef("&lt;display-legacy&gt;")}}</li>
  </ul>
 </li>
</ul>