From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/display-outside/index.html | 93 +++++++++++++++++++++++++++++ 1 file changed, 93 insertions(+) create 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 new file mode 100644 index 0000000000..f96f37ea5d --- /dev/null +++ b/files/ja/web/css/display-outside/index.html @@ -0,0 +1,93 @@ +--- +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