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-legacy/index.md | 120 +++++++++++++++++++++++++++++++ 1 file changed, 120 insertions(+) create mode 100644 files/ja/web/css/display-legacy/index.md (limited to 'files/ja/web/css/display-legacy/index.md') diff --git a/files/ja/web/css/display-legacy/index.md b/files/ja/web/css/display-legacy/index.md new file mode 100644 index 0000000000..cfc82921bc --- /dev/null +++ b/files/ja/web/css/display-legacy/index.md @@ -0,0 +1,120 @@ +--- +title: +slug: Web/CSS/display-legacy +tags: + - CSS + - CSS Data Type + - CSS Display + - Data Type + - Reference + - display-legacy +translation_of: Web/CSS/display-legacy +--- +
{{CSSRef}}
+ +

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-flex で生成します。

+ +
+

HTML

+ +
<div class="container">
+  <div>Flex Item</div>
+  <div>Flex Item</div>
+</div>
+
+Not a flex item
+
+ +

CSS

+ +
.container {
+  display: inline-flex;
+}
+
+ +

結果

+ +

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

+
+ +

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

+ +
.container {
+  display: inline flex;
+}
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('CSS3 Display', '#typedef-display-legacy', 'display-legacy')}}{{Spec2('CSS3 Display')}}
+ +

ブラウザーの互換性

+ +

inline-block の対応

+ +

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

+ +

inline-table の対応

+ +

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

+ +

inline-flex の対応

+ +

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

+ +

inline-grid の対応

+ +

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

+ +

関連情報

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