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-outside/index.html | 91 ----------------------------- 1 file changed, 91 deletions(-) delete mode 100644 files/ja/web/css/display-outside/index.html (limited to 'files/ja/web/css/display-outside/index.html') diff --git a/files/ja/web/css/display-outside/index.html b/files/ja/web/css/display-outside/index.html deleted file mode 100644 index 5b4d14aef5..0000000000 --- a/files/ja/web/css/display-outside/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: -slug: Web/CSS/display-outside -tags: - - CSS - - CSS Data Type - - CSS Display - - Data Type - - Reference - - display-outside -translation_of: Web/CSS/display-outside ---- -
{{CSSRef}}
- -

<display-outside> のキーワードは、本質的にフローレイアウトにおける要素の役割である、要素の {{CSSxRef("display")}} の外部表示種別を指定します。これらのキーワードは display プロパティの値として使用され、単一のキーワードとしては伝統的な目的に、または Level 3 仕様書では {{CSSxRef("<display-inside>")}} のキーワードと共に使用されます。

- -

構文

- -

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

- -
-
block
-
要素は、ブロック要素ボックスを生成し、通常フローでは要素の前後に改行を生成します。
-
inline
-
要素は自分自身の前後に改行を生成しない、一つ以上のインライン要素ボックスを生成します。通常フローでは、次の要素は空間があれば同じ行に来ます。
-
run-in {{Experimental_Inline}}
-
要素は、ランインボックスを生成します。 display: run-in が定義された要素の隣接する兄弟がブロックボックスの場合、ランインボックスはその次のブロックスボックスの最初のインラインボックスになります。
-
- ランイン要素は、周囲の要素に応じてインラインボックスまたはブロックボックスのように動作します。ランインボックスがブロックボックスを含んでいる場合は、ブロックボックスと同じになります。ブロックボックスが後続する場合は、ランインボックスはブロックボックスの最初のインラインボックスになります。インラインボックスが後続する場合は、ブロックボックスになります。
-
- -
-

注: 二つの値の構文に対応しているブラウザーは、 display: block や display: inline などの外部表示種別のみが指定されていると、内部表示種別を flow に設定します。これで期待通りに動作します。例えば、ある要素を block になるよう指定した場合、その要素の子はブロックおよびインラインの通常フローレイアウトに加わることを期待するでしょう。

-
- -

例

- -

以下の例では、 span 要素 (通常はインライン要素として表示) に display: block が設定されているので、改行が行われ、コンテナーのインライン方向を埋めるように拡張されます。

- -

HTML

- -
<span>span 1</span>
-<span>span 2</span>
- -

CSS

- -
span {
-    display: block;
-    border: 1px solid rebeccapurple;
-}
- -

結果

- -

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

- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

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