diff options
Diffstat (limited to 'files/ja/web/css/display-internal/index.md')
| -rw-r--r-- | files/ja/web/css/display-internal/index.md | 129 |
1 files changed, 129 insertions, 0 deletions
diff --git a/files/ja/web/css/display-internal/index.md b/files/ja/web/css/display-internal/index.md new file mode 100644 index 0000000000..3c3d25c105 --- /dev/null +++ b/files/ja/web/css/display-internal/index.md @@ -0,0 +1,129 @@ +--- +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><display-internal></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"><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></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> + +<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("<display-outside>")}}</li> + <li>{{CSSxRef("<display-inside>")}}</li> + <li>{{CSSxRef("<display-listitem>")}}</li> + <li>{{CSSxRef("<display-box>")}}</li> + <li>{{CSSxRef("<display-legacy>")}}</li> + </ul> + </li> +</ul> |