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-legacy/index.md | 151 +++++++++++++++---------------- 1 file changed, 71 insertions(+), 80 deletions(-) (limited to 'files/ja/web/css/display-legacy') diff --git a/files/ja/web/css/display-legacy/index.md b/files/ja/web/css/display-legacy/index.md index cfc82921bc..06402649ae 100644 --- a/files/ja/web/css/display-legacy/index.md +++ b/files/ja/web/css/display-legacy/index.md @@ -3,118 +3,109 @@ title: slug: Web/CSS/display-legacy tags: - CSS - - CSS Data Type - - CSS Display - - Data Type - - Reference + - CSS データ型 + - CSS 表示 + - データ型 + - リファレンス - display-legacy translation_of: Web/CSS/display-legacy --- -
{{CSSRef}}
+{{CSSRef}} -

CSS 2 では display プロパティで単一のキーワードによる構文を採用しており、同じレイアウトモードのブロックレベルとインラインレベルで別々のキーワードが必要でした。このページではこれらの値を詳しく紹介します。

+CSS 2 では `display` プロパティで単一のキーワードによる構文を採用しており、同じレイアウトモードのブロックレベルとインラインレベルで別々のキーワードが必要でした。このページではこれらの値を詳しく紹介します。 -

構文

+## 構文 -

有効な <display-legacy> は以下のとおりです。

+有効な `` は以下のとおりです。 -
-
inline-block
-
この要素はブロック要素ボックスを生成しますが、周囲のコンテンツに対しては単一のインラインボックスであるかのように流れるようになります (置換要素の場合と似ています)。
-
- これは inline flow-root と等価です。
-
inline-table
-
inline-table は、 HTML には直接的に対応するものがありません。これは、 HTML の {{HTMLElement("table")}} 要素と同じようにふるまいつつ、ブロックレベルボックスではなく、インラインボックスのようにふるまいます。表ボックスの内部はブロックレベルのコンテキストになります。
-
- これは inline table と等価です。
-
inline-flex
-
要素は、インライン要素のようにふるまいつつ、そのコンテンツをフレックスボックスモデルに従ってレイアウトします。
-
- これは inline flex と等価です。
-
inline-grid
-
要素は、インライン要素のようにふるまいつつ、そのコンテンツをグリッドモデルに従ってレイアウトします。
-
- これは inline grid と等価です。
-
+- `inline-block` -

例

+ - : この要素はブロック要素ボックスを生成しますが、周囲のコンテンツに対しては単一のインラインボックスであるかのように流れるようになります (置換要素の場合と似ています)。 -

以下の例では、インラインフレックスコンテナーを従来型のキーワードである inline-flex で生成します。

+ これは `inline flow-root` と等価です。 -
-

HTML

+- `inline-table` -
<div class="container">
-  <div>Flex Item</div>
-  <div>Flex Item</div>
-</div>
+  - : `inline-table` は、 HTML には直接的に対応するものがありません。これは、 HTML の {{HTMLElement("table")}} 要素と同じようにふるまいつつ、ブロックレベルボックスではなく、インラインボックスのようにふるまいます。表ボックスの内部はブロックレベルのコンテキストになります。
+
+    これは `inline table` と等価です。
+
+- `inline-flex`
+
+  - : 要素は、インライン要素のようにふるまいつつ、その内容物をフレックスボックスモデルに従ってレイアウトします。
+
+    これは `inline flex` と等価です。
+- `inline-grid`
+
+  - : 要素は、インライン要素のようにふるまいつつ、その内容物をグリッドモデルに従ってレイアウトします。
+
+    これは `inline grid` と等価です。
+
+
例

+
+以下の例では、インラインフレックスコンテナーを従来型のキーワードである inline-flex で生成します。
+
+### HTML
+
+```html
+

+  
Flex Item

+  
Flex Item

+

 
 Not a flex item
-
+``` -

CSS

+### CSS -
.container {
+```css
+.container {
   display: inline-flex;
 }
-
+``` -

結果

+### 結果 -

{{EmbedLiveSample("Examples", 300, 150)}}

-
+{{EmbedLiveSample("Examples", 300, 150)}} -

新しい構文では、インラインフレックスコンテナーは二つの値を使用して生成され、外部表示種別が inline、内部表示種別が flex です。

+新しい構文では、インラインフレックスコンテナーは二つの値を使用して生成され、外部表示種別が inline、内部表示種別が flex です。 -
.container {
+```css
+.container {
   display: inline flex;
-}
+} +``` + +## 仕様書 -

仕様書

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

ブラウザーの互換性

+### inline-block の対応 -

inline-block の対応

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

{{Compat("css.properties.display.inline-block", 10)}}

+### inline-table の対応 -

inline-table の対応

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

{{Compat("css.properties.display.inline-table", 10)}}

+### inline-flex の対応 -

inline-flex の対応

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

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

+### inline-grid の対応 -

inline-grid の対応

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

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

+## 関連情報 -

関連情報

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