Skip to content

Commit 4d9e396

Browse files
committed
2024/03/26 時点の英語版に基づき更新
1 parent 76bca70 commit 4d9e396

File tree

2 files changed

+25
-47
lines changed

2 files changed

+25
-47
lines changed

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

Lines changed: 13 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
---
22
title: <display-inside>
33
slug: Web/CSS/display-inside
4+
l10n:
5+
sourceCommit: 8d4fb1e2934111a13989d2796152dc601468e7b5
46
---
57

68
{{CSSRef}}
@@ -11,28 +13,32 @@ slug: Web/CSS/display-inside
1113

1214
有効な `<display-inside>` の値は以下の通りです。
1315

14-
- `flow` {{Experimental_Inline}}
16+
- `flow`
1517

1618
- : 要素は、フローレイアウト (ブロックおよびインラインのレイアウト) を使用して、内容物をレイアウトします。
1719

1820
外部表示種別が `inline` または `run-in` であり、またブロックまたはインラインの整形コンテキストに関係する場合は、インラインボックスを生成します。そうでない場合は、ブロックコンテナーボックスを生成します。
1921

20-
ほかのプロパティ ({{cssxref("position")}}, {{cssxref("float")}}, {{cssxref("overflow")}} など) の値や、要素自体がブロックまたはインラインの整形コンテキストに関係するかによって、新たな[ブロック整形コンテキスト](/ja/docs/Web/Guide/CSS/Block_formatting_context) (BFC) を生成する、または内容物が親の整形コンテキストに吸収されます。
22+
ほかのプロパティ ({{CSSxRef("position")}}, {{CSSxRef("float")}}, {{CSSxRef("overflow")}} など) の値や、要素自体がブロックまたはインラインの整形コンテキストに関係するかによって、新たな[ブロック整形コンテキスト](/ja/docs/Web/CSS/CSS_display/Block_formatting_context) (BFC) を生成する、または内容物が親の整形コンテキストに吸収されます。
2123

2224
- `flow-root`
23-
- : 要素は、新たな[ブロック整形コンテキスト](/ja/docs/Web/Guide/CSS/Block_formatting_context)を確立するブロック要素ボックスを生成し、整形ルートがある場所を定義します。
25+
- : 要素は、新たな[ブロック整形コンテキスト](/ja/docs/Web/CSS/CSS_display/Block_formatting_context)を確立するブロック要素ボックスを生成し、整形ルートがある場所を定義します。
2426
- `table`
2527
- : HTML の {{HTMLElement("table")}} 要素と同じように動作します。これは、ブロックレベルボックスを定義します。
2628
- `flex`
27-
- : 要素は、ブロック要素のように動作しつつ、そのコンテンツを[フレックスボックスモデル](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout)に従ってレイアウトします。
29+
- : 要素は、ブロック要素のように動作しつつ、そのコンテンツを[フレックスボックスモデル](/ja/docs/Web/CSS/CSS_flexible_box_layout)に従ってレイアウトします。
2830
- `grid`
2931
- : 要素は、ブロック要素のように動作しつつ、そのコンテンツを[グリッドモデル](/ja/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)に従ってレイアウトします。
30-
- `ruby` {{Experimental_Inline}}
32+
- `ruby`
3133
- : 要素は、インライン要素のように動作しつつ、そのコンテンツをルビ (ruby) モデルに従ってレイアウトします。HTML の {{HTMLElement("ruby")}} 要素のように動作します。
3234

33-
> **メモ:** 二つの値の構文に対応しているブラウザーは`display: flex``display: grid` などの内部表示種別のみが指定されていると、外部表示種別を `block` に設定します。これで期待通りに動作します。例えば、ある要素を `display: grid` に指定した場合、そのボックスはブロックレベルボックスのグリッドコンテナーとして生成されることが期待されるでしょう。
35+
> **メモ:** 2 つの値の構文に対応しているブラウザーは`display: flex``display: grid` などの内部表示種別のみが指定されていると、外部表示種別を `block` に設定します。これで期待通りに動作します。例えば、ある要素を `display: grid` に指定した場合、そのボックスはブロックレベルボックスのグリッドコンテナーとして生成されることが期待されるでしょう。
3436
35-
<h2 id="Examples">例</h2>
37+
## 形式文法
38+
39+
{{csssyntax}}
40+
41+
##
3642

3743
この例では、親ボックスは `display: flow-root` となり、新しいブロック整形コンテキストを確立して浮動アイテムを含みます。
3844

@@ -74,30 +80,6 @@ slug: Web/CSS/display-inside
7480

7581
## ブラウザーの互換性
7682

77-
### 複数のキーワードの対応
78-
79-
{{Compat}}
80-
81-
- Chromium のバグ: <https://bugs.chromium.org/p/chromium/issues/detail?id=804600>
82-
83-
### flow-root の対応
84-
85-
{{Compat}}
86-
87-
### table の対応
88-
89-
{{Compat}}
90-
91-
### grid の対応
92-
93-
{{Compat}}
94-
95-
### flex の対応
96-
97-
{{Compat}}
98-
99-
### ruby の対応
100-
10183
{{Compat}}
10284

10385
## 関連情報

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

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
---
22
title: <display-internal>
33
slug: Web/CSS/display-internal
4+
l10n:
5+
sourceCommit: 8d4fb1e2934111a13989d2796152dc601468e7b5
46
---
57

68
{{CSSRef}}
@@ -27,18 +29,22 @@ slug: Web/CSS/display-internal
2729
- : これらの要素は HTML の {{HTMLElement("col")}} 要素のように動作します。
2830
- `table-caption`
2931
- : これらの要素は HTML の {{HTMLElement("caption")}} 要素のように動作します。
30-
- `ruby-base` {{Experimental_Inline}}
32+
- `ruby-base`
3133
- : これらの要素は HTML の {{HTMLElement("rb")}} 要素のように動作します。
32-
- `ruby-text` {{Experimental_Inline}}
34+
- `ruby-text`
3335
- : これらの要素は HTML の {{HTMLElement("rt")}} 要素のように動作します。
34-
- `ruby-base-container` {{Experimental_Inline}}
35-
- : これらの要素は無名のボックスとして生成された HTML の {{HTMLElement("rbc")}} 要素のように動作します
36-
- `ruby-text-container` {{Experimental_Inline}}
36+
- `ruby-base-container`
37+
- : これらの要素は無名のボックスとして生成されます
38+
- `ruby-text-container`
3739
- : これらの要素は HTML の {{HTMLElement("rtc")}} 要素のように動作します。
3840

41+
## 形式文法
42+
43+
{{csssyntax}}
44+
3945
##
4046

41-
<h3 id="CSS_tables_example">CSS テーブルの例</h3>
47+
### CSS テーブルの例
4248

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

@@ -85,16 +91,6 @@ input {
8591

8692
## ブラウザーの互換性
8793

88-
### 対応している table の値
89-
90-
`table`, `table-cell`, `table-column`, `table-column-group`, `table-footer-group`, `table-header-group`, `table-row`, `table-row-group`
91-
92-
{{Compat}}
93-
94-
### 対応している ruby の値
95-
96-
`ruby`, `ruby-base`, `ruby-base-container`, `ruby-text`, `ruby-text-container`
97-
9894
{{Compat}}
9995

10096
## 関連情報

0 commit comments

Comments
 (0)