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-outside/index.md | 122 +++++++++++++----------------- 1 file changed, 52 insertions(+), 70 deletions(-) (limited to 'files/ja/web/css/display-outside/index.md') diff --git a/files/ja/web/css/display-outside/index.md b/files/ja/web/css/display-outside/index.md index 5b4d14aef5..e43c09bd75 100644 --- a/files/ja/web/css/display-outside/index.md +++ b/files/ja/web/css/display-outside/index.md @@ -3,89 +3,71 @@ title: slug: Web/CSS/display-outside tags: - CSS - - CSS Data Type - - CSS Display - - Data Type - - Reference + - CSS データ型 + - CSS 表示 + - データ型 + - リファレンス - display-outside translation_of: Web/CSS/display-outside --- -
{{CSSRef}}
+{{CSSRef}} -

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

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

構文

+## 構文 -

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

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

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

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

例

+

例

-

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

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

HTML

+### HTML -
<span>span 1</span>
-<span>span 2</span>
+```html +span 1 +span 2 +``` -

CSS

+### CSS -
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)}}

- -

関連情報

- - +} +``` + +### 結果 + +{{EmbedLiveSample("Examples", 300, 60)}} + +## 仕様書 + +| 仕様書 | 状態 | +| ---------------------------------------------------------------------------------------------------- | -------------------------------- | +| {{SpecName('CSS3 Display', '#typedef-display-outside', 'display-outside')}} | {{Spec2('CSS3 Display')}} | + +## ブラウザーの互換性 + +{{Compat("css.properties.display.display-outside", 10)}} + +## 関連情報 + +- {{CSSxRef("display")}} + + - {{CSSxRef("<display-inside>")}} + - {{CSSxRef("<display-listitem>")}} + - {{CSSxRef("<display-internal>")}} + - {{CSSxRef("<display-box>")}} + - {{CSSxRef("<display-legacy>")}} + +- [通常フローでのブロックおよびインラインレイアウト](/ja/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow) +- [整形コンテキストの紹介](/ja/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts) -- cgit v1.2.3-54-g00ecf