From a0316dd2c57164e53651f4cb8c8de50120e72095 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 23 Nov 2021 23:35:37 +0900 Subject: CSS データ型に関する文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/23 時点の英語版に同期 --- files/ja/web/css/display-internal/index.md | 181 +++++++++++++---------------- 1 file changed, 84 insertions(+), 97 deletions(-) (limited to 'files/ja/web/css/display-internal') diff --git a/files/ja/web/css/display-internal/index.md b/files/ja/web/css/display-internal/index.md index 3c3d25c105..3187e6dffb 100644 --- a/files/ja/web/css/display-internal/index.md +++ b/files/ja/web/css/display-internal/index.md @@ -3,70 +3,71 @@ title: slug: Web/CSS/display-internal tags: - CSS - - CSS Data Type + - CSS データ型 - CSS Display - - Data Type - - Reference + - データ型 + - リファレンス - 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")}} 要素のように動作します。
-
- -

例

- -

CSS テーブルの例

- -

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

- -

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

- -
main {
+{{CSSRef}}
+
+`table` や `ruby` のような一部のレイアウトモデルでは、複雑な内部構造があり、様々なその子要素や子孫要素が担う様々な役割があります。このページではこれらを「内部の」表示値として定義し、特定のレイアウトモードでのみ意味を持ちます。
+
+## 構文
+
+有効な `` の値は次の通りです。
+
+- `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")}} 要素のように動作します。
+
+## 例
+
+
CSS テーブルの例

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

+  

+    
+    
+  

+  

+    
+    
+  

+

+```
+
+#### CSS
+
+```css
+main {
   display: table;
 }
 
@@ -77,53 +78,39 @@ div {
 label, input {
   display: table-cell;
   margin: 5px;
-}
+} +``` + +#### 結果 -

結果

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

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

+## 仕様書 -

仕様書

+| 仕様書 | 状態 | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | +| {{SpecName('CSS3 Display', '#typedef-display-internal', 'display-internal')}} | {{Spec2('CSS3 Display')}} | - - - - - - - - - - - - - -
仕様書状態
{{SpecName('CSS3 Display', '#typedef-display-internal', 'display-internal')}}{{Spec2('CSS3 Display')}}
+## ブラウザーの互換性 -

ブラウザーの互換性

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

対応している table の値

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

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)}} -

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

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

対応している ruby の値

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

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

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

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

+## 関連情報 -

関連情報

+- {{CSSxRef("display")}} - + - {{CSSxRef("<display-outside>")}} + - {{CSSxRef("<display-inside>")}} + - {{CSSxRef("<display-listitem>")}} + - {{CSSxRef("<display-box>")}} + - {{CSSxRef("<display-legacy>")}} -- cgit v1.2.3-54-g00ecf