diff options
Diffstat (limited to 'files/ja/web/css/display-legacy/index.md')
| -rw-r--r-- | files/ja/web/css/display-legacy/index.md | 151 |
1 files changed, 71 insertions, 80 deletions
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: <display-legacy> 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 --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p class="summary">CSS 2 では <code>display</code> プロパティで単一のキーワードによる構文を採用しており、同じレイアウトモードのブロックレベルとインラインレベルで別々のキーワードが必要でした。このページではこれらの値を詳しく紹介します。</p> +CSS 2 では `display` プロパティで単一のキーワードによる構文を採用しており、同じレイアウトモードのブロックレベルとインラインレベルで別々のキーワードが必要でした。このページではこれらの値を詳しく紹介します。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<p>有効な <code><display-legacy></code> は以下のとおりです。</p> +有効な `<display-legacy>` は以下のとおりです。 -<dl> - <dt><code>inline-block</code></dt> - <dd>この要素はブロック要素ボックスを生成しますが、周囲のコンテンツに対しては単一のインラインボックスであるかのように流れるようになります (置換要素の場合と似ています)。<br> - <br> - これは <code>inline flow-root</code> と等価です。</dd> - <dt><code>inline-table</code></dt> - <dd><code>inline-table</code> は、 HTML には直接的に対応するものがありません。これは、 HTML の {{HTMLElement("table")}} 要素と同じようにふるまいつつ、ブロックレベルボックスではなく、インラインボックスのようにふるまいます。表ボックスの内部はブロックレベルのコンテキストになります。<br> - <br> - これは <code>inline table</code> と等価です。</dd> - <dt><code>inline-flex</code></dt> - <dd>要素は、インライン要素のようにふるまいつつ、そのコンテンツをフレックスボックスモデルに従ってレイアウトします。<br> - <br> - これは <code>inline flex</code> と等価です。</dd> - <dt><code>inline-grid</code></dt> - <dd>要素は、インライン要素のようにふるまいつつ、そのコンテンツをグリッドモデルに従ってレイアウトします。<br> - <br> - これは <code>inline grid</code> と等価です。</dd> -</dl> +- `inline-block` -<h2 id="Examples" name="Examples">例</h2> + - : この要素はブロック要素ボックスを生成しますが、周囲のコンテンツに対しては単一のインラインボックスであるかのように流れるようになります (置換要素の場合と似ています)。 -<p>以下の例では、インラインフレックスコンテナーを従来型のキーワードである inline-flex で生成します。</p> + これは `inline flow-root` と等価です。 -<div id="Example"> -<h3 id="HTML">HTML</h3> +- `inline-table` -<pre class="brush: html notranslate"><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` と等価です。 + +<h2 id="Examples">例</h2> + +以下の例では、インラインフレックスコンテナーを従来型のキーワードである inline-flex で生成します。 + +### HTML + +```html +<div class="container"> + <div>Flex Item</div> + <div>Flex Item</div> +</div> Not a flex item -</pre> +``` -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css notranslate">.container { +```css +.container { display: inline-flex; } -</pre> +``` -<h3 id="Result" name="Result">結果</h3> +### 結果 -<p>{{EmbedLiveSample("Examples", 300, 150)}}</p> -</div> +{{EmbedLiveSample("Examples", 300, 150)}} -<p>新しい構文では、インラインフレックスコンテナーは二つの値を使用して生成され、外部表示種別が inline、内部表示種別が flex です。</p> +新しい構文では、インラインフレックスコンテナーは二つの値を使用して生成され、外部表示種別が inline、内部表示種別が flex です。 -<pre class="brush: css notranslate">.container { +```css +.container { display: inline flex; -}</pre> +} +``` + +## 仕様書 -<h2 id="Specifications" name="Specifications">仕様書</h2> +| 仕様書 | 状態 | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | +| {{SpecName('CSS3 Display', '#typedef-display-legacy', 'display-legacy')}} | {{Spec2('CSS3 Display')}} | -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Display', '#typedef-display-legacy', 'display-legacy')}}</td> - <td>{{Spec2('CSS3 Display')}}</td> - </tr> - </tbody> -</table> +## ブラウザーの互換性 -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +### inline-block の対応 -<h3 id="inline-block_の対応">inline-block の対応</h3> +{{Compat("css.properties.display.inline-block", 10)}} -<p>{{Compat("css.properties.display.inline-block", 10)}}</p> +### inline-table の対応 -<h3 id="inline-table_の対応">inline-table の対応</h3> +{{Compat("css.properties.display.inline-table", 10)}} -<p>{{Compat("css.properties.display.inline-table", 10)}}</p> +### inline-flex の対応 -<h3 id="inline-flex_の対応">inline-flex の対応</h3> +{{Compat("css.properties.display.inline-flex", 10)}} -<p>{{Compat("css.properties.display.inline-flex", 10)}}</p> +### inline-grid の対応 -<h3 id="inline-grid_の対応">inline-grid の対応</h3> +{{Compat("css.properties.display.inline-grid", 10)}} -<p>{{Compat("css.properties.display.inline-grid", 10)}}</p> +## 関連情報 -<h2 id="See_also" name="See_also">関連情報</h2> +- {{CSSxRef("display")}} -<ul> - <li>{{CSSxRef("display")}} - <ul> - <li>{{CSSxRef("<display-outside>")}}</li> - <li>{{CSSxRef("<display-inside>")}}</li> - <li>{{CSSxRef("<display-listitem>")}}</li> - <li>{{CSSxRef("<display-internal>")}}</li> - <li>{{CSSxRef("<display-box>")}}</li> - </ul> - </li> -</ul> + - {{CSSxRef("<display-outside>")}} + - {{CSSxRef("<display-inside>")}} + - {{CSSxRef("<display-listitem>")}} + - {{CSSxRef("<display-internal>")}} + - {{CSSxRef("<display-box>")}} |