From ef0e5625abed731ab03ceac0379b507db4ab4fb9 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 23 Nov 2021 22:14:22 +0900 Subject: 特定の CSS 値の型に関する文書を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/display-inside/index.html | 120 ----------------------------- files/ja/web/css/display-inside/index.md | 120 +++++++++++++++++++++++++++++ 2 files changed, 120 insertions(+), 120 deletions(-) delete mode 100644 files/ja/web/css/display-inside/index.html create mode 100644 files/ja/web/css/display-inside/index.md (limited to 'files/ja/web/css/display-inside') diff --git a/files/ja/web/css/display-inside/index.html b/files/ja/web/css/display-inside/index.html deleted file mode 100644 index 955c133f66..0000000000 --- a/files/ja/web/css/display-inside/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: -slug: Web/CSS/display-inside -tags: - - CSS - - CSS 表示 - - Reference - - display - - display-inside -translation_of: Web/CSS/display-inside ---- -
{{CSSRef}}
- -

以下のキーワードは、要素の内部の {{CSSxRef("display")}} 種別を指定し、これは要素 (置換要素ではないものとする) の内容物をレイアウトする整形コンテキストの種類を定義します。これらのキーワードは display プロパティの値として使用され、単一のキーワードとしては伝統的な目的に、または Level 3 仕様書では {{CSSxRef("<display-outside>")}} のキーワードと共に使用されます。

- -

構文

- -

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

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

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

- -

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

-
-
flow-root
-
要素は、新たなブロック整形コンテキストを確立するブロック要素ボックスを生成し、整形ルートがある場所を定義します。
-
table
-
HTML の {{HTMLElement("table")}} 要素と同じように動作します。これは、ブロックレベルボックスを定義します。
-
flex
-
要素は、ブロック要素のように動作しつつ、そのコンテンツをフレックスボックスモデルに従ってレイアウトします。
-
grid
-
要素は、ブロック要素のように動作しつつ、そのコンテンツをグリッドモデルに従ってレイアウトします。
-
ruby {{Experimental_Inline}}
-
要素は、インライン要素のように動作しつつ、そのコンテンツをルビ (ruby) モデルに従ってレイアウトします。HTML の {{HTMLElement("ruby")}} 要素のように動作します。
-
- -
-

メモ: 二つの値の構文に対応しているブラウザーは、 display: flex や display: grid などの内部表示種別のみが指定されていると、外部表示種別を block に設定します。これで期待通りに動作します。例えば、ある要素を display: grid に指定した場合、そのボックスはブロックレベルボックスのグリッドコンテナーとして生成されることが期待されるでしょう。

-
- -

例

- -

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

- -

HTML

- -
<div class="box">
-  <div class="float">I am a floated box!</div>
-  <p>I am content inside the container.</p>
-</div>
-
- -

CSS

- -
.box {
-    background-color: rgb(224, 206, 247);
-    border: 5px solid rebeccapurple;
-    display: flow-root;
-}
-
-.float {
-    float: left;
-    width: 200px;
-    height: 150px;
-    background-color: white;
-    border:1px solid black;
-    padding: 10px;
-}
- -

結果

- -

{{EmbedLiveSample("Example", "100%", 180)}}

- -

ブラウザーの互換性

- -

複数のキーワードの対応

- -

{{Compat("css.properties.display.multi-keyword_values", 10)}}

- - - -

flow-root の対応

- -

{{Compat("css.properties.display.flow-root", 10)}}

- -

table の対応

- -

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

- -

grid の対応

- -

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

- -

flex の対応

- -

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

- -

ruby の対応

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/display-inside/index.md b/files/ja/web/css/display-inside/index.md new file mode 100644 index 0000000000..955c133f66 --- /dev/null +++ b/files/ja/web/css/display-inside/index.md @@ -0,0 +1,120 @@ +--- +title: +slug: Web/CSS/display-inside +tags: + - CSS + - CSS 表示 + - Reference + - display + - display-inside +translation_of: Web/CSS/display-inside +--- +
{{CSSRef}}
+ +

以下のキーワードは、要素の内部の {{CSSxRef("display")}} 種別を指定し、これは要素 (置換要素ではないものとする) の内容物をレイアウトする整形コンテキストの種類を定義します。これらのキーワードは display プロパティの値として使用され、単一のキーワードとしては伝統的な目的に、または Level 3 仕様書では {{CSSxRef("<display-outside>")}} のキーワードと共に使用されます。

+ +

構文

+ +

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

+ +
+
flow {{Experimental_Inline}}
+
要素は、フローレイアウト (ブロックおよびインラインのレイアウト) を使用して、内容物をレイアウトします。 +

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

+ +

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

+
+
flow-root
+
要素は、新たなブロック整形コンテキストを確立するブロック要素ボックスを生成し、整形ルートがある場所を定義します。
+
table
+
HTML の {{HTMLElement("table")}} 要素と同じように動作します。これは、ブロックレベルボックスを定義します。
+
flex
+
要素は、ブロック要素のように動作しつつ、そのコンテンツをフレックスボックスモデルに従ってレイアウトします。
+
grid
+
要素は、ブロック要素のように動作しつつ、そのコンテンツをグリッドモデルに従ってレイアウトします。
+
ruby {{Experimental_Inline}}
+
要素は、インライン要素のように動作しつつ、そのコンテンツをルビ (ruby) モデルに従ってレイアウトします。HTML の {{HTMLElement("ruby")}} 要素のように動作します。
+
+ +
+

メモ: 二つの値の構文に対応しているブラウザーは、 display: flex や display: grid などの内部表示種別のみが指定されていると、外部表示種別を block に設定します。これで期待通りに動作します。例えば、ある要素を display: grid に指定した場合、そのボックスはブロックレベルボックスのグリッドコンテナーとして生成されることが期待されるでしょう。

+
+ +

例

+ +

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

+ +

HTML

+ +
<div class="box">
+  <div class="float">I am a floated box!</div>
+  <p>I am content inside the container.</p>
+</div>
+
+ +

CSS

+ +
.box {
+    background-color: rgb(224, 206, 247);
+    border: 5px solid rebeccapurple;
+    display: flow-root;
+}
+
+.float {
+    float: left;
+    width: 200px;
+    height: 150px;
+    background-color: white;
+    border:1px solid black;
+    padding: 10px;
+}
+ +

結果

+ +

{{EmbedLiveSample("Example", "100%", 180)}}

+ +

ブラウザーの互換性

+ +

複数のキーワードの対応

+ +

{{Compat("css.properties.display.multi-keyword_values", 10)}}

+ + + +

flow-root の対応

+ +

{{Compat("css.properties.display.flow-root", 10)}}

+ +

table の対応

+ +

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

+ +

grid の対応

+ +

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

+ +

flex の対応

+ +

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

+ +

ruby の対応

+ +

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

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf