diff options
| author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-11-09 00:03:41 +0900 |
|---|---|---|
| committer | potappo <potappo@gmail.com> | 2021-11-21 22:36:58 +0900 |
| commit | 03ca9dc9761e2bc51acb26aad3d995914e62fbfb (patch) | |
| tree | 88d495ebf3daa2403c238083e7319cccd4eab9c0 /files/ja | |
| parent | 3a068083649dcd274327e3f8ec8f930be9156462 (diff) | |
| download | translated-content-03ca9dc9761e2bc51acb26aad3d995914e62fbfb.tar.gz translated-content-03ca9dc9761e2bc51acb26aad3d995914e62fbfb.tar.bz2 translated-content-03ca9dc9761e2bc51acb26aad3d995914e62fbfb.zip | |
CSS Logical Properties and Values の関係の文書を更新
- 2021/11/08 時点の英語版に同期
Diffstat (limited to 'files/ja')
5 files changed, 333 insertions, 627 deletions
diff --git a/files/ja/web/css/css_logical_properties/basic_concepts/index.md b/files/ja/web/css/css_logical_properties/basic_concepts/index.md index 221091a5e5..869720d2c9 100644 --- a/files/ja/web/css/css_logical_properties/basic_concepts/index.md +++ b/files/ja/web/css/css_logical_properties/basic_concepts/index.md @@ -51,20 +51,6 @@ CSS は従来、画面の物理的な軸に沿って寸法を取っていまし  -## ブラウザーの互換性 - -論理的プロパティと値は、現在のブラウザーの対応状況の観点から、 2 つのグループに分けて考えることができます。一部のプロパティは基本的に物理的プロパティから対応付けられたものです。例えば {{CSSxRef("inline-size")}} は {{CSSxRef("width")}} から、 {{CSSxRef("margin-inline-start")}} は {{CSSxRef("margin-left")}} を代替するものです。これらの対応付けられたプロパティは、ブラウザーの対応が充実し始めており、 [MDN のリファレンス](/ja/docs/Web/CSS/CSS_Logical_Properties#reference)でプロパティの個別ページを見てみると、今では最近のブラウザーでこれらのプロパティがないのは Edge だけであることが分かります。 - -それから、既存の物理的プロパティに直接対応付けされていないグループのプロパティもあります。これらのプロパティは、ブロック軸またはインライン軸の両端を一度に参照できることによって可能となった一括指定です。例えば、 {{CSSxRef("margin-block")}} は、 {{CSSxRef("margin-block-start")}} と {{CSSxRef("margin-block-end")}} の一括指定であると言えます。 - -> **Note:** CSS 作業部会では、論理的プロパティにおいて 4 つの値の一括指定をどうするかを決めようとしています。例えば、 {{CSSxRef("margin")}} プロパティでマージンを指定する場合のように、 4 つの物理的なプロパティを一度に設定することに相当します。もし、 `margin` をフロー関連のプロパティに再利用するのであれば、何らかの修飾子が必要になるでしょう。この提案を読んだりコメントしたりしたい人は、 GitHub の [#1282](https://github.com/w3c/csswg-drafts/issues/1282) を参照してください。 - -### ブラウザーの対応のテスト - -機能クエリーを使用すると、論理的プロパティや値の対応状況をテストすることができます。たとえば、 {{CSSxRef("width")}} を設定し、 {{CSSxRef("inline-size")}} をテストし、対応していれば、`width` を `auto` に、`inline-size` を元の `width` の値に設定するようにすることができます。 - -{{EmbedGHLiveSample("css-examples/logical/intro-feature-queries.html", "100%", 700)}} - ## 関連情報 - [グリッドレイアウトのボックス配置](/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout) diff --git a/files/ja/web/css/css_logical_properties/floating_and_positioning/index.md b/files/ja/web/css/css_logical_properties/floating_and_positioning/index.md index c245570080..891fa2750f 100644 --- a/files/ja/web/css/css_logical_properties/floating_and_positioning/index.md +++ b/files/ja/web/css/css_logical_properties/floating_and_positioning/index.md @@ -4,136 +4,74 @@ slug: Web/CSS/CSS_Logical_Properties/Floating_and_positioning tags: - CSS - CSS 論理的プロパティ - - Guide + - 浮動 - ガイド - 位置指定 - - 浮動 translation_of: Web/CSS/CSS_Logical_Properties/Floating_and_positioning --- -<div>{{CSSRef}}</div> - -<p class="summary"><ruby><a href="https://drafts.csswg.org/css-logical/">論理的プロパティと値仕様書</a><rp> (</rp><rt>Logical Properties and Values specification</rt><rp>) </rp></ruby>には、 {{cssxref("float")}} および {{cssxref("clear")}} の物理的な値の論理的な対応付けと、<a href="/ja/docs/Web/CSS/CSS_Positioning">位置指定レイアウト</a>で使用する位置指定プロパティを含んでいます。このガイドはこれらの使い方を見てみます。</p> - -<h2 id="Mapped_properties_and_values" name="Mapped_properties_and_values">マッピングされるプロパティと値</h2> - -<p>以下の表はこのガイドで物理的なマッピングに沿って議論されるプロパティや値を説明しています。水平方向の {{cssxref("writing-mode")}} は、左書きを想定しています。</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">論理的プロパティまたは値</th> - <th scope="col">物理的プロパティまたは値</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{cssxref("float")}}: inline-start</td> - <td>{{cssxref("float")}}: left</td> - </tr> - <tr> - <td>{{cssxref("float")}}: inline-end</td> - <td>{{cssxref("float")}}: right</td> - </tr> - <tr> - <td>{{cssxref("clear")}}: inline-start</td> - <td>{{cssxref("clear")}}: left</td> - </tr> - <tr> - <td>{{cssxref("clear")}}: inline-end</td> - <td>{{cssxref("clear")}}: right</td> - </tr> - <tr> - <td>{{cssxref("inset-inline-start")}}</td> - <td>{{cssxref("left")}}</td> - </tr> - <tr> - <td>{{cssxref("inset-inline-end")}}</td> - <td>{{cssxref("right")}}</td> - </tr> - <tr> - <td>{{cssxref("inset-block-start")}}</td> - <td>{{cssxref("top")}}</td> - </tr> - <tr> - <td>{{cssxref("inset-block-end")}}</td> - <td>{{cssxref("bottom")}}</td> - </tr> - <tr> - <td>{{cssxref("text-align")}}: start</td> - <td>{{cssxref("text-align")}}: left</td> - </tr> - <tr> - <td>{{cssxref("text-align")}}: end</td> - <td>{{cssxref("text-align")}}: right</td> - </tr> - </tbody> -</table> - -<p>これらの対応付けられたプロパティに加えて、ブロック方向やインライン方向を示すことができる一括指定プロパティがいくつかあります。これらは {{cssxref("inset")}} プロパティを除いて物理的なプロパティに対応付けられていません。</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">論理的プロパティ</th> - <th scope="col">目的</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{cssxref("inset-inline")}}</td> - <td>上記のインライン方向における両方の inset 値を同時に設定します。</td> - </tr> - <tr> - <td>{{cssxref("inset-block")}}</td> - <td>上記のブロック方向における両方の inset 値を同時に設定します。</td> - </tr> - <tr> - <td>{{cssxref("inset")}}</td> - <td>4つの inset 値をすべて同時に設定し、複数値の物理的な対応付けを行います。</td> - </tr> - </tbody> -</table> - -<h2 id="Float_and_clear_example" name="Float_and_clear_example">浮動と解除の例</h2> - -<p>{{cssxref("float")}} および {{cssxref("clear")}} プロパティで用いられる物理的な値 <code>left</code>, <code>right</code>, <code>both</code> です。論理的プロパティの仕様書は、 <code>inline-start</code> および <code>inline-end</code> の値を <code>left</code> および <code>right</code> に対応付けて定義しています。</p> - -<p>下記の例では、二つのボックスがあります。 — 一つ目は <code>float: left</code> で、二つ目は <code>float: inline-start</code> で浮動させています。 <code>writing-mode</code> を <code>vertical-rl</code> に変更したり、 <code>direction</code> を <code>rtl</code> に変更したりすると、 left で浮動させたボックスは常に左にくっつきますが、 <code>inline-start</code> で浮動させたアイテムは <code>direction</code> や <code>writing-mode</code> に従います。</p> - -<p>{{EmbedGHLiveSample("css-examples/logical/float.html", '100%', 700)}}</p> - -<h2 id="Example_Inset_properties_for_positioned_layout" name="Example_Inset_properties_for_positioned_layout">例: 位置指定レイアウトにおける inset プロパティ</h2> - -<p>一般的に位置指定では、要素を含むブロックに対して相対的に要素を配置することができます。基本的に、通常のフローに基づいてアイテムが配置された場所に対して相対的にアイテムを挿入します。これを行うために、歴史的には {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} の物理的なプロパティを使用してきました。</p> - -<p>これらのプロパティは、長さまたはパーセント値を値として取り、ユーザーの画面寸法に関連します。</p> - -<p>論理的プロパティの仕様書では、指定した書字方向におけるテキストの流れに関連した位置合わせを行いたい場合のために、新しいプロパティが作成されました。これらは {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}}, {{cssxref("inset-inline-end")}} になります。</p> - -<p>以下の例では、 <code>inset-block-start</code> と <code>inset-inline-end</code> プロパティを使用して、青枠を灰色の点線で囲まれた領域 (<code>position: relative</code>) の内側に絶対位置を使用して配置しています 。 <code>writing-mode</code> プロパティを <code>vertical-rl</code> に変更するか、 <code>direction: rtl</code> を追加して、フロー相対ボックスがテキストの方向に従う様子を見てみましょう。</p> - -<p>{{EmbedGHLiveSample("css-examples/logical/positioning-inset.html", '100%', 700)}}</p> - -<h2 id="New_two-_and_four-value_shorthands" name="New_two-_and_four-value_shorthands">新しい2または4値の一括指定</h2> - -<p>仕様書の他のプロパティと同様に、いくつかの新しい一括指定プロパティがあり、一度に 2 つまたは 4 つの値を設定することができます。</p> - -<ul> - <li>{{cssxref("inset")}} — 物理的な対応付けを使用して四辺をすべて設定します。</li> - <li>{{cssxref("inset-inline")}} — 論理的なインライン方向の内側の距離を両方設定します。</li> - <li>{{cssxref("inset-block")}} — 論理的なブロック方向の内側の距離を両方設定します。</li> -</ul> - -<div class="blockIndicator note"> -<p><strong>注</strong>: 論理的プロパティ仕様書をを実装しているブラウザーは、これまでのところ直接マッピングを実装しており、新しい一括指定は実装していません。詳細については、各プロパティページのリファレンスにあるブラウザーの互換性データの節を参照してください。</p> -</div> - -<h2 id="Example_Logical_values_for_text-align" name="Example_Logical_values_for_text-align">例: text-align の論理値</h2> - -<p>{{cssxref("text-align")}} プロパティは、テキストの方向に関連する論理値を持っています。 <code>left</code> と <code>right</code> に代わり、 <code>start</code> と <code>end</code> を使用することができます。以下の例では、最初のブロックで <code>text-align: right</code>、2番目のブロックで <code>text-align: end</code> を設定しています。</p> - -<p><code>direction</code> の値を <code>rtl</code> に変更すると、最初のブロックでは配置が右に留まりますが、2番目のブロックでは論理的な末尾が左になることがわかります。</p> - -<p>{{EmbedGHLiveSample("css-examples/logical/text-align.html", '100%', 700)}}</p> - -<p>これは、物理的な方向ではなく、先頭と末尾を使用したボックス配置を使用した場合に、より一貫性のある方法で動作します。</p> +{{CSSRef}} + +[論理的プロパティと値仕様書](https://drafts.csswg.org/css-logical/) (Logical Properties and Values specification) には、 {{cssxref("float")}} および {{cssxref("clear")}} の物理的な値の論理的な対応付けと、[位置指定レイアウト](/ja/docs/Web/CSS/CSS_Positioning)で使用する位置指定プロパティを含んでいます。このガイドはこれらの使い方を見てみます。 + +## マッピングされるプロパティと値 + +以下の表はこのガイドで物理的なマッピングに沿って議論されるプロパティや値を説明しています。水平方向の {{cssxref("writing-mode")}} は、左書きを想定しています。 + +| 論理的プロパティまたは値 | 物理的プロパティまたは値 | +| ---------------------------------- | -------------------------------- | +| {{cssxref("float")}}: inline-start | {{cssxref("float")}}: left | +| {{cssxref("float")}}: inline-end | {{cssxref("float")}}: right | +| {{cssxref("clear")}}: inline-start | {{cssxref("clear")}}: left | +| {{cssxref("clear")}}: inline-end | {{cssxref("clear")}}: right | +| {{cssxref("inset-inline-start")}} | {{cssxref("left")}} | +| {{cssxref("inset-inline-end")}} | {{cssxref("right")}} | +| {{cssxref("inset-block-start")}} | {{cssxref("top")}} | +| {{cssxref("inset-block-end")}} | {{cssxref("bottom")}} | +| {{cssxref("text-align")}}: start | {{cssxref("text-align")}}: left | +| {{cssxref("text-align")}}: end | {{cssxref("text-align")}}: right | + +これらの対応付けられたプロパティに加えて、ブロック方向やインライン方向を示すことができる一括指定プロパティがいくつかあります。これらは {{cssxref("inset")}} プロパティを除いて物理的なプロパティに対応付けられていません。 + +| 論理的プロパティ | 目的 | +| --------------------------- | --------------------------------------------------------------- | +| {{cssxref("inset-inline")}} | インライン方向に上記の両方のインセット値を同時に設定する。 | +| {{cssxref("inset-block")}} | ブロック方向に上記の両方のインセット値を同時に設定する。 | +| {{cssxref("inset")}} | 多値の物理的マッピングで 4 つのインセット値を同時に設定します。 | + +## 浮動と解除の例 + +{{cssxref("float")}} および {{cssxref("clear")}} プロパティで用いられる物理的な値 `left`, `right`, `both` です。論理的プロパティの仕様では、 `inline-start` および `inline-end` の値を `left` および `right` に対応付けて定義しています。 + +下記の例では、2 つのボックスがあります。 — 1 つ目は `float: left` で、2 つ目は `float: inline-start` で浮動させています。 `writing-mode` を `vertical-rl` に変更したり、 `direction` を `rtl` に変更したりすると、 left で浮動させたボックスは常に左にくっつきますが、 `inline-start` で浮動させたアイテムは `direction` や `writing-mode` に従います。 + +{{EmbedGHLiveSample("css-examples/logical/float.html", '100%', 700)}} + +## 例: 位置指定レイアウトにおける inset プロパティ + +一般的に位置指定では、要素を含むブロックに対して相対的に要素を配置することができます。基本的に、通常のフローに基づいてアイテムが配置された場所に対して相対的にアイテムを挿入します。これを行うために、歴史的には {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} の物理的なプロパティを使用してきました。 + +これらのプロパティは、長さまたはパーセント値を値として取り、ユーザーの画面の寸法の相対になります。 + +論理的プロパティの仕様書では、指定した書字方向におけるテキストの流れに関連した位置合わせを行いたい場合のために、新しいプロパティが作成されました。これらは {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}}, {{cssxref("inset-inline-end")}} になります。 + +以下の例では、 `inset-block-start` と `inset-inline-end` プロパティを使用して、青枠を灰色の点線で囲まれた領域 (`position: relative`) の内側に絶対位置を使用して配置しています 。 `writing-mode` プロパティを `vertical-rl` に変更するか、 `direction: rtl` を追加して、フロー相対ボックスがテキストの方向に従う様子を見てみましょう。 + +{{EmbedGHLiveSample("css-examples/logical/positioning-inset.html", '100%', 700)}} + +## 新しい 2 つまたは 4 つの値の一括指定 + +仕様書の他のプロパティと同様に、いくつかの新しい一括指定プロパティがあり、一度に 2 つまたは 4 つの値を設定することができます。 + +- {{cssxref("inset")}} — 物理的な対応付けを使用して四辺をすべて設定します。 +- {{cssxref("inset-inline")}} — 論理的なインライン方向の内側の距離を両方設定します。 +- {{cssxref("inset-block")}} — 論理的なブロック方向の内側の距離を両方設定します。 + +## 例: text-align の論理的な値 + +{{cssxref("text-align")}} プロパティは、テキストの方向に関連する論理値を持っています。 `left` と `right` に代わり、 `start` と `end` を使用することができます。以下の例では、最初のブロックで `text-align: right`、2番目のブロックで `text-align: end` を設定しています。 + +`direction` の値を `rtl` に変更すると、最初のブロックでは配置が右に留まりますが、2 番目のブロックでは論理的な末尾が左になることがわかります。 + +{{EmbedGHLiveSample("css-examples/logical/text-align.html", '100%', 700)}} + +これは、物理的な方向ではなく、先頭と末尾を使用したボックス配置を使用した場合に、より一貫性のある方法で動作します。 diff --git a/files/ja/web/css/css_logical_properties/index.md b/files/ja/web/css/css_logical_properties/index.md index 71c78974aa..d6d546e5e5 100644 --- a/files/ja/web/css/css_logical_properties/index.md +++ b/files/ja/web/css/css_logical_properties/index.md @@ -3,176 +3,129 @@ title: CSS 論理的プロパティと値 slug: Web/CSS/CSS_Logical_Properties tags: - CSS - - CSS Logical Properties - CSS 論理的プロパティ + - ガイド - Landing - - Reference - 概要 + - Reference translation_of: Web/CSS/CSS_Logical_Properties --- -<p>{{CSSRef}}</p> - -<p class="summary"><ruby><strong>CSS 論理的プロパティと値</strong><rp> (</rp><rt>CSS Logical Properties and Values</rt><rp>) </rp></ruby>は <a href="/ja/docs/Web/CSS"><abbr title="Cascading Stylesheets">CSS</abbr></a> のモジュールの一つで、論理的プロパティと値を導入して、物理的ではなく論理的に方向や寸法をマッピングして、レイアウトを制御することができるようにします。</p> - -<p>このモジュールは以前に <abbr title="Cascading Stylesheets">CSS</abbr> 2.1 で定義されたプロパティについて、論理的なプロパティと値を定義します。論理的プロパティは方向を定義し、これは対応する物理的なプロパティと相対的に等価になります。</p> - -<h3 id="Block_vs._inline" name="Block_vs._inline">ブロックとインライン</h3> - -<p>論理プロパティと値は、<em>ブロック</em>と<em>インライン</em>という抽象的な用語を使用して、流れに対する方向を記述します。これらの用語の物理的な意味は、<a href="/ja/docs/Web/CSS/CSS_Writing_Modes">書字方向</a>に依存します。</p> - -<dl> - <dt id="block-dimension">ブロック方向</dt> - <dd>行内のテキストの流れとは垂直の方向、つまり、横書きでは垂直方向、縦書きでは水平方向です。標準的な英語のテキストでは、垂直方向になります。</dd> - <dt id="inline-dimension">インライン方向</dt> - <dd>行内のテキストの流れと平行の方向、つまり、横書きでは水平方向、縦書きでは垂直方向です。標準的な英語のテキストでは、水平方向になります。</dd> -</dl> - -<h2 id="Reference" name="Reference">リファレンス</h2> - -<h3 id="Properties_for_sizing" name="Properties_for_sizing">寸法のプロパティ</h3> - -<div class="index"> -<ul> - <li>{{CSSxRef("block-size")}}</li> - <li>{{CSSxRef("inline-size")}}</li> - <li>{{CSSxRef("max-block-size")}}</li> - <li>{{CSSxRef("max-inline-size")}}</li> - <li>{{CSSxRef("min-block-size")}}</li> - <li>{{CSSxRef("min-inline-size")}}</li> -</ul> -</div> - -<h3 id="Properties_for_margins_borders_and_padding" name="Properties_for_margins_borders_and_padding">マージン、境界、パディングのプロパティ</h3> - -<div class="index"> -<ul> - <li>{{CSSxRef("border-block")}}</li> - <li>{{CSSxRef("border-block-color")}}</li> - <li>{{CSSxRef("border-block-end")}}</li> - <li>{{CSSxRef("border-block-end-color")}}</li> - <li>{{CSSxRef("border-block-end-style")}}</li> - <li>{{CSSxRef("border-block-end-width")}}</li> - <li>{{CSSxRef("border-block-start")}}</li> - <li>{{CSSxRef("border-block-start-color")}}</li> - <li>{{CSSxRef("border-block-start-style")}}</li> - <li>{{CSSxRef("border-block-start-width")}}</li> - <li>{{CSSxRef("border-block-style")}}</li> - <li>{{CSSxRef("border-block-width")}}</li> - <li>{{CSSxRef("border-color")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} キーワード)</span></li> - <li>{{CSSxRef("border-inline")}}</li> - <li>{{CSSxRef("border-inline-color")}}</li> - <li>{{CSSxRef("border-inline-end")}}</li> - <li>{{CSSxRef("border-inline-end-color")}}</li> - <li>{{CSSxRef("border-inline-end-style")}}</li> - <li>{{CSSxRef("border-inline-end-width")}}</li> - <li>{{CSSxRef("border-inline-start")}}</li> - <li>{{CSSxRef("border-inline-start-color")}}</li> - <li>{{CSSxRef("border-inline-start-style")}}</li> - <li>{{CSSxRef("border-inline-start-width")}}</li> - <li>{{CSSxRef("border-inline-style")}}</li> - <li>{{CSSxRef("border-inline-width")}}</li> - <li>{{CSSxRef("border-start-start-radius")}}</li> - <li>{{CSSxRef("border-start-end-radius")}}</li> - <li>{{CSSxRef("border-end-start-radius")}}</li> - <li>{{CSSxRef("border-end-end-radius")}}</li> - <li>{{CSSxRef("border-style")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} キーワード)</span></li> - <li>{{CSSxRef("border-width")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} キーワード)</span></li> - <li>{{CSSxRef("margin")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} キーワード)</span></li> - <li>{{CSSxRef("margin-block")}}</li> - <li>{{CSSxRef("margin-block-end")}}</li> - <li>{{CSSxRef("margin-block-start")}}</li> - <li>{{CSSxRef("margin-inline")}}</li> - <li>{{CSSxRef("margin-inline-end")}}</li> - <li>{{CSSxRef("margin-inline-start")}}</li> - <li>{{CSSxRef("padding")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} キーワード)</span></li> - <li>{{CSSxRef("padding-block")}}</li> - <li>{{CSSxRef("padding-block-end")}}</li> - <li>{{CSSxRef("padding-block-start")}}</li> - <li>{{CSSxRef("padding-inline")}}</li> - <li>{{CSSxRef("padding-inline-end")}}</li> - <li>{{CSSxRef("padding-inline-start")}}</li> -</ul> -</div> - -<h3 id="Properties_for_floating_and_positioning" name="Properties_for_floating_and_positioning">浮動と位置指定のプロパティ</h3> - -<div class="index"> -<ul> - <li>{{CSSxRef("clear")}} (<code style="white-space: nowrap;">inline-end</code> および <span style="white-space: nowrap;"><code>inline-start</code> キーワード)</span></li> - <li>{{CSSxRef("float")}} (<code style="white-space: nowrap;">inline-end</code> および <span style="white-space: nowrap;"><code>inline-start</code> キーワード)</span></li> - <li>{{CSSxRef("inset")}}</li> - <li>{{CSSxRef("inset-block")}}</li> - <li>{{CSSxRef("inset-block-end")}}</li> - <li>{{CSSxRef("inset-block-start")}}</li> - <li>{{CSSxRef("inset-inline")}}</li> - <li>{{CSSxRef("inset-inline-end")}}</li> - <li>{{CSSxRef("inset-inline-start")}}</li> -</ul> -</div> - -<h3 id="Other_properties" name="Other_properties">その他のプロパティ</h3> - -<div class="index"> -<ul> - <li>{{CSSxRef("caption-side")}} (<code style="white-space: nowrap;">inline-end</code> および <span style="white-space: nowrap;"><code>inline-start</code> キーワード)</span></li> - <li>{{CSSxRef("overflow-block")}}</li> - <li>{{CSSxRef("overflow-inline")}}</li> - <li>{{CSSxRef("overscroll-behavior-block")}}</li> - <li>{{CSSxRef("overscroll-behavior-inline")}}</li> - <li>{{CSSxRef("resize")}} (<code>block</code> and <span style="white-space: nowrap;"><code>inline</code> keywords)</span></li> - <li>{{CSSxRef("text-align")}} (<code>end</code> および <span style="white-space: nowrap;"><code>start</code> キーワード)</span></li> -</ul> -</div> - -<h3 id="Deprecated_properties" name="Deprecated_properties">非推奨になったプロパティ</h3> - -<div class="index"> -<ul> - <li>{{CSSxRef("offset-block-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">({{CSSxRef("inset-block-end")}} {{Experimental_Inline}} に置き換え)</span></li> - <li>{{CSSxRef("offset-block-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">({{CSSxRef("inset-block-start")}} {{Experimental_Inline}} に置き換え)</span></li> - <li>{{CSSxRef("offset-inline-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">({{CSSxRef("inset-inline-end")}} {{Experimental_Inline}} に置き換え)</span></li> - <li>{{CSSxRef("offset-inline-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">({{CSSxRef("inset-inline-start")}} {{Experimental_Inline}} に置き換え)</span></li> -</ul> -</div> - -<h2 id="Guides" name="Guides">ガイド</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts">論理的プロパティと値の基本概念</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Logical_Properties/Sizing">寸法の論理的プロパティ</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Logical_Properties/Margins_borders_padding">マージン、境界、パディングの論理的プロパティ</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Logical_Properties/Floating_and_positioning">浮動と位置指定の論理的プロパティ</a></li> -</ul> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>全般的な対応:</p> - -<ul> - <li>Firefox はプロパティの対応付けに対応しています。 — 物理的なものに論理的なものに直接対応付けます。</li> - <li>Chrome はバージョン69から、プロパティの対応付けに対応しました。</li> - <li>Edge はバージョン79から Chrome と同様に対応しています。</li> - <li>Firefox 66 は二つの値の一括指定の対応を導入し、 Chrome ではフラグで隠しています。</li> - <li>Internet Explorer は対応していません。</li> -</ul> - -<p>互換性情報全体は、それぞれのプロパティページを参照してください。</p> +{{CSSRef}} + +**CSS 論理的プロパティと値** (CSS Logical Properties and Values) は [CSS](/ja/docs/Web/CSS) のモジュールの一つで、論理的プロパティと値を導入して、物理的ではなく論理的に方向や寸法をマッピングして、レイアウトを制御することができるようにします。 + +このモジュールは以前に CSS 2.1 で定義されたプロパティについて、論理的なプロパティと値を定義します。論理的プロパティは方向を定義し、これは対応する物理的なプロパティと相対的に等価になります。 + +### ブロックとインライン + +論理プロパティと値は、*ブロック*と*インライン*という抽象的な用語を使用して、流れに対する方向を記述します。これらの用語の物理的な意味は、[書字方向](/ja/docs/Web/CSS/CSS_Writing_Modes)に依存します。 + +- ブロック方向 + - : 行内のテキストの流れとは垂直の方向、つまり、横書きでは垂直方向、縦書きでは水平方向です。標準的な英語のテキストでは、垂直方向になります。 +- インライン方向 + - : 行内のテキストの流れと平行の方向、つまり、横書きでは水平方向、縦書きでは垂直方向です。標準的な英語のテキストでは、水平方向になります。 + +## リファレンス + +### 寸法のプロパティ + +- {{CSSxRef("block-size")}} +- {{CSSxRef("inline-size")}} +- {{CSSxRef("max-block-size")}} +- {{CSSxRef("max-inline-size")}} +- {{CSSxRef("min-block-size")}} +- {{CSSxRef("min-inline-size")}} + +### マージン、境界、パディングのプロパティ + +- {{CSSxRef("border-block")}} +- {{CSSxRef("border-block-color")}} +- {{CSSxRef("border-block-end")}} +- {{CSSxRef("border-block-end-color")}} +- {{CSSxRef("border-block-end-style")}} +- {{CSSxRef("border-block-end-width")}} +- {{CSSxRef("border-block-start")}} +- {{CSSxRef("border-block-start-color")}} +- {{CSSxRef("border-block-start-style")}} +- {{CSSxRef("border-block-start-width")}} +- {{CSSxRef("border-block-style")}} +- {{CSSxRef("border-block-width")}} +- {{CSSxRef("border-color")}} +- {{CSSxRef("border-inline")}} +- {{CSSxRef("border-inline-color")}} +- {{CSSxRef("border-inline-end")}} +- {{CSSxRef("border-inline-end-color")}} +- {{CSSxRef("border-inline-end-style")}} +- {{CSSxRef("border-inline-end-width")}} +- {{CSSxRef("border-inline-start")}} +- {{CSSxRef("border-inline-start-color")}} +- {{CSSxRef("border-inline-start-style")}} +- {{CSSxRef("border-inline-start-width")}} +- {{CSSxRef("border-inline-style")}} +- {{CSSxRef("border-inline-width")}} +- {{CSSxRef("border-start-start-radius")}} +- {{CSSxRef("border-start-end-radius")}} +- {{CSSxRef("border-end-start-radius")}} +- {{CSSxRef("border-end-end-radius")}} +- {{CSSxRef("border-style")}} +- {{CSSxRef("border-width")}} +- {{CSSxRef("margin")}} (`logical` {{Experimental_Inline}} キーワード) +- {{CSSxRef("margin-block")}} +- {{CSSxRef("margin-block-end")}} +- {{CSSxRef("margin-block-start")}} +- {{CSSxRef("margin-inline")}} +- {{CSSxRef("margin-inline-end")}} +- {{CSSxRef("margin-inline-start")}} +- {{CSSxRef("padding")}} (`logical` {{Experimental_Inline}} キーワード) +- {{CSSxRef("padding-block")}} +- {{CSSxRef("padding-block-end")}} +- {{CSSxRef("padding-block-start")}} +- {{CSSxRef("padding-inline")}} +- {{CSSxRef("padding-inline-end")}} +- {{CSSxRef("padding-inline-start")}} + +### 浮動と位置指定のプロパティ + +- {{CSSxRef("clear")}} (`inline-end` および `inline-start` キーワード) +- {{CSSxRef("float")}} (`inline-end` および `inline-start` キーワード) +- {{CSSxRef("inset")}} +- {{CSSxRef("inset-block")}} +- {{CSSxRef("inset-block-end")}} +- {{CSSxRef("inset-block-start")}} +- {{CSSxRef("inset-inline")}} +- {{CSSxRef("inset-inline-end")}} +- {{CSSxRef("inset-inline-start")}} + +### その他のプロパティ + +- {{CSSxRef("caption-side")}} (`inline-end` および `inline-start` キーワード) +- {{CSSxRef("overflow-block")}} +- {{CSSxRef("overflow-inline")}} +- {{CSSxRef("overscroll-behavior-block")}} +- {{CSSxRef("overscroll-behavior-inline")}} +- {{CSSxRef("resize")}} (`block` および `inline` キーワード) +- {{CSSxRef("text-align")}} (`end` および `start` キーワード) + +### 非推奨のプロパティ + +- {{CSSxRef("offset-block-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} ({{CSSxRef("inset-block-end")}} に置き換え) +- {{CSSxRef("offset-block-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} ({{CSSxRef("inset-block-start")}} に置き換え) +- {{CSSxRef("offset-inline-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} ({{CSSxRef("inset-inline-end")}} に置き換え) +- {{CSSxRef("offset-inline-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} ({{CSSxRef("inset-inline-start")}} に置き換え) + +### ガイド + +- [論理的プロパティと値の基本概念](/ja/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts) +- [寸法の論理的プロパティ](/ja/docs/Web/CSS/CSS_Logical_Properties/Sizing) +- [マージン、境界、パディングの論理的プロパティ](/ja/docs/Web/CSS/CSS_Logical_Properties/Margins_borders_padding) +- [浮動と位置指定の論理的プロパティ](/ja/docs/Web/CSS/CSS_Logical_Properties/Floating_and_positioning) + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| -------------------------------------- | ----------------------------------- | -------- | +| {{SpecName("CSS Logical Properties")}} | {{Spec2("CSS Logical Properties")}} | 初回定義 | + +## ブラウザーの互換性 + +完全な互換性情報は、それぞれのプロパティページを参照してください。 diff --git a/files/ja/web/css/css_logical_properties/margins_borders_padding/index.md b/files/ja/web/css/css_logical_properties/margins_borders_padding/index.md index cf4cf1ac51..ac5aced25f 100644 --- a/files/ja/web/css/css_logical_properties/margins_borders_padding/index.md +++ b/files/ja/web/css/css_logical_properties/margins_borders_padding/index.md @@ -5,294 +5,154 @@ tags: - CSS - CSS 論理的プロパティ - ガイド - - 書字方向 - 概念 + - 書字方向 translation_of: Web/CSS/CSS_Logical_Properties/Margins_borders_padding --- -<p>{{CSSRef}}</p> - -<p class="summary"><ruby><a href="https://drafts.csswg.org/css-logical/">論理的プロパティと値仕様書</a><rp> (</rp><rt>Logical Properties and Values specification</rt><rp>) </rp></ruby>では、それぞれのマージン、境界、パディングのプロパティおよびその一括指定について、フローに関連する対応付けを定義します。</p> - -<p><a href="/ja/docs/Web/CSS/CSS_Logical_Properties">CSS 論理的プロパティと値</a>のメインページを見ると、たくさんのプロパティが並んでいます。これは多くがマージン、境界、パディングのそれぞれの辺についての4つの個別指定値と、すべてを一括指定するものであるためです。</p> - -<h2 id="Mappings_for_margins_borders_and_padding" name="Mappings_for_margins_borders_and_padding">マージン、境界、パティングの対応付け</h2> - -<p>The specification details mappings for each logical value to a physical counterpart. In the table below I have given these mapped values assuming that the {{cssxref("writing-mode")}} in use is <code>horizontal-tb</code> — with a left to right direction. The inline direction therefore runs horizontally — left to right — and {{cssxref("margin-inline-start")}} would be equivalent to {{cssxref("margin-left")}}.</p> - -<p>If you were using a <code>horizontal-tb</code> writing mode with a right-to-left text direction then {{cssxref("margin-inline-start")}} would be the same as {{cssxref("margin-right")}}, and in a vertical writing mode it would be the same as using {{cssxref("margin-top")}}.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">論理的プロパティ</th> - <th scope="col">物理的プロパティ</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{cssxref("border-block-end")}}</td> - <td>{{cssxref("border-bottom")}}</td> - </tr> - <tr> - <td>{{cssxref("border-block-end-color")}}</td> - <td>{{cssxref("border-bottom-color")}}</td> - </tr> - <tr> - <td>{{cssxref("border-block-end-style")}}</td> - <td>{{cssxref("border-bottom-style")}}</td> - </tr> - <tr> - <td>{{cssxref("border-block-end-width")}}</td> - <td>{{cssxref("border-bottom-width")}}</td> - </tr> - <tr> - <td>{{cssxref("border-block-start")}}</td> - <td>{{cssxref("border-top")}}</td> - </tr> - <tr> - <td>{{cssxref("border-block-start-color")}}</td> - <td>{{cssxref("border-top-color")}}</td> - </tr> - <tr> - <td>{{cssxref("border-block-start-style")}}</td> - <td>{{cssxref("border-top-style")}}</td> - </tr> - <tr> - <td>{{cssxref("border-block-start-width")}}</td> - <td>{{cssxref("border-top-width")}}</td> - </tr> - <tr> - <td>{{cssxref("border-inline-end")}}</td> - <td>{{cssxref("border-right")}}</td> - </tr> - <tr> - <td>{{cssxref("border-inline-end-color")}}</td> - <td>{{cssxref("border-right-color")}}</td> - </tr> - <tr> - <td>{{cssxref("border-inline-end-style")}}</td> - <td>{{cssxref("border-right-style")}}</td> - </tr> - <tr> - <td>{{cssxref("border-inline-end-width")}}</td> - <td>{{cssxref("border-right-width")}}</td> - </tr> - <tr> - <td>{{cssxref("border-inline-start")}}</td> - <td>{{cssxref("border-left")}}</td> - </tr> - <tr> - <td>{{cssxref("border-inline-start-color")}}</td> - <td>{{cssxref("border-left-color")}}</td> - </tr> - <tr> - <td>{{cssxref("border-inline-start-style")}}</td> - <td>{{cssxref("border-left-style")}}</td> - </tr> - <tr> - <td>{{cssxref("border-inline-start-width")}}</td> - <td>{{cssxref("border-left-width")}}</td> - </tr> - <tr> - <td>{{cssxref("border-start-start-radius")}}</td> - <td>{{cssxref("border-top-left-radius")}}</td> - </tr> - <tr> - <td>{{cssxref("border-start-end-radius")}}</td> - <td>{{cssxref("border-bottom-left-radius")}}</td> - </tr> - <tr> - <td>{{cssxref("border-end-start-radius")}}</td> - <td>{{cssxref("border-top-right-radius")}}</td> - </tr> - <tr> - <td>{{cssxref("border-end-end-radius")}}</td> - <td>{{cssxref("border-bottom-right-radius")}}</td> - </tr> - <tr> - <td>{{cssxref("margin-block-end")}}</td> - <td>{{cssxref("margin-bottom")}}</td> - </tr> - <tr> - <td>{{cssxref("margin-block-start")}}</td> - <td>{{cssxref("margin-top")}}</td> - </tr> - <tr> - <td>{{cssxref("margin-inline-end")}}</td> - <td>{{cssxref("margin-right")}}</td> - </tr> - <tr> - <td>{{cssxref("margin-inline-start")}}</td> - <td>{{cssxref("margin-left")}}</td> - </tr> - <tr> - <td>{{cssxref("padding-block-end")}}</td> - <td>{{cssxref("padding-bottom")}}</td> - </tr> - <tr> - <td>{{cssxref("padding-block-start")}}</td> - <td>{{cssxref("padding-top")}}</td> - </tr> - <tr> - <td>{{cssxref("padding-inline-end")}}</td> - <td>{{cssxref("padding-right")}}</td> - </tr> - <tr> - <td>{{cssxref("padding-inline-start")}}</td> - <td>{{cssxref("padding-left")}}</td> - </tr> - </tbody> -</table> - -<p>There are also some additional shorthands, made possible because we have the ability to target both block or both inline edges of the box simultaneously. These shorthands have no physical equivalent.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">プロパティ</th> - <th scope="col">目的</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{cssxref("border-block")}}</td> - <td>Sets {{cssxref("border-color")}}, {{cssxref("border-style")}}, and {{cssxref("border-width")}} for both block borders.</td> - </tr> - <tr> - <td>{{cssxref("border-block-color")}}</td> - <td>Sets <code>border-color</code> for both block borders.</td> - </tr> - <tr> - <td>{{cssxref("border-block-style")}}</td> - <td>Sets <code>border-style</code> for both block borders.</td> - </tr> - <tr> - <td>{{cssxref("border-block-width")}}</td> - <td>Sets <code>border-width</code> for both block borders.</td> - </tr> - <tr> - <td>{{cssxref("border-inline")}}</td> - <td>Sets <code>border-color</code>, <code>-style</code>, and <code>-width</code> for both inline borders.</td> - </tr> - <tr> - <td>{{cssxref("border-inline-color")}}</td> - <td>Sets <code>border-color</code> for both inline borders.</td> - </tr> - <tr> - <td>{{cssxref("border-inline-style")}}</td> - <td>Sets <code>border-style</code> for both inline borders.</td> - </tr> - <tr> - <td>{{cssxref("border-inline-width")}}</td> - <td>Sets <code>border-width</code> for both inline borders.</td> - </tr> - <tr> - <td>{{cssxref("margin-block")}}</td> - <td>Sets all the block {{cssxref("margin")}}s.</td> - </tr> - <tr> - <td>{{cssxref("margin-inline")}}</td> - <td>Sets all the inline <code>margin</code>s.</td> - </tr> - <tr> - <td>{{cssxref("padding-block")}}</td> - <td>Sets the block {{cssxref("padding")}}.</td> - </tr> - <tr> - <td>{{cssxref("padding-inline")}}</td> - <td>Sets the inline <code>padding</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="Margin_examples" name="Margin_examples">マージンの例</h2> - -<p>The mapped margin properties of {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}}, {{cssxref("margin-block-start")}}, and {{cssxref("margin-inline-end")}} can be used instead of their physical counterparts.</p> - -<p>In the example below I have created two boxes and added different sized margins to each edge. I have added an extra container with a border in order to make the margin more obvious to see.</p> - -<p>One box uses physical properties and the other logical properties. Try changing the {{cssxref("direction")}} property to <code>rtl</code> to cause the boxes to display in a right-to-left direction, the margins on the first box will stay in the same place, while the margins on the inline dimension of the second box will switch.</p> - -<p>You can also try changing the <code>writing-mode</code> from <code>horizontal-tb</code> to <code>vertical-rl</code>. Again, notice how the margins stay in the same place for the first box, but switch around to follow the text direction in the second.</p> - -<p>{{EmbedGHLiveSample("css-examples/logical/margin-longhands.html", '100%', 700)}}</p> - -<h3 id="Margin_shorthands" name="Margin_shorthands">マージンの一括指定</h3> - -<p>As we can now target both sides of a box — either both inline sides or both block sides — there are new shorthands available, {{cssxref("margin-inline")}} and {{cssxref("margin-block")}}, which accept two values. The first value will apply to the start of that dimension, the second to the end. If you only use one value it is applied to both.</p> - -<p>In a horizontal writing mode this CSS would apply a 5px margin to the top of the box and a 10px margin to the bottom.</p> - -<pre class="brush: css">.box { +{{CSSRef}} + +[論理的プロパティと値仕様書](https://drafts.csswg.org/css-logical/) (Logical Properties and Values specification<) では、それぞれのマージン、境界、パディングのプロパティおよびその一括指定について、フローに関連する対応付けを定義します。 + +[CSS 論理的プロパティと値](/ja/docs/Web/CSS/CSS_Logical_Properties)のメインページを見ると、たくさんのプロパティが並んでいます。これは多くがマージン、境界、パディングのそれぞれの辺について 4 つの個別指定値と、一括指定値のすべてがあるためです。 + +## マージン、境界、パティングの対応付け + +この仕様では、それぞれの論理値の物理的な対応関係を詳細に示しています。下の表では、使用されている {{cssxref("writing-mode")}} が `horizontal-tb` — 左書きであると仮定して、これらに対応する値を与えています。インラインの方向は左から右への水平方向で、{{cssxref("margin-inline-start")}} は {{cssxref("margin-left")}} と同じになります。 + +`horizontal-tb` を使用して右書きである場合は、 {{cssxref("margin-inline-start")}} が {{cssxref("margin-right")}} と同じになり、縦書きの場合は {{cssxref("margin-top")}} を使うのと同じになります。 + +| 論理的プロパティ | 物理的プロパティ | +| ---------------------------------------- | ----------------------------------------- | +| {{cssxref("border-block-end")}} | {{cssxref("border-bottom")}} | +| {{cssxref("border-block-end-color")}} | {{cssxref("border-bottom-color")}} | +| {{cssxref("border-block-end-style")}} | {{cssxref("border-bottom-style")}} | +| {{cssxref("border-block-end-width")}} | {{cssxref("border-bottom-width")}} | +| {{cssxref("border-block-start")}} | {{cssxref("border-top")}} | +| {{cssxref("border-block-start-color")}} | {{cssxref("border-top-color")}} | +| {{cssxref("border-block-start-style")}} | {{cssxref("border-top-style")}} | +| {{cssxref("border-block-start-width")}} | {{cssxref("border-top-width")}} | +| {{cssxref("border-inline-end")}} | {{cssxref("border-right")}} | +| {{cssxref("border-inline-end-color")}} | {{cssxref("border-right-color")}} | +| {{cssxref("border-inline-end-style")}} | {{cssxref("border-right-style")}} | +| {{cssxref("border-inline-end-width")}} | {{cssxref("border-right-width")}} | +| {{cssxref("border-inline-start")}} | {{cssxref("border-left")}} | +| {{cssxref("border-inline-start-color")}} | {{cssxref("border-left-color")}} | +| {{cssxref("border-inline-start-style")}} | {{cssxref("border-left-style")}} | +| {{cssxref("border-inline-start-width")}} | {{cssxref("border-left-width")}} | +| {{cssxref("border-start-start-radius")}} | {{cssxref("border-top-left-radius")}} | +| {{cssxref("border-start-end-radius")}} | {{cssxref("border-bottom-left-radius")}} | +| {{cssxref("border-end-start-radius")}} | {{cssxref("border-top-right-radius")}} | +| {{cssxref("border-end-end-radius")}} | {{cssxref("border-bottom-right-radius")}} | +| {{cssxref("margin-block-end")}} | {{cssxref("margin-bottom")}} | +| {{cssxref("margin-block-start")}} | {{cssxref("margin-top")}} | +| {{cssxref("margin-inline-end")}} | {{cssxref("margin-right")}} | +| {{cssxref("margin-inline-start")}} | {{cssxref("margin-left")}} | +| {{cssxref("padding-block-end")}} | {{cssxref("padding-bottom")}} | +| {{cssxref("padding-block-start")}} | {{cssxref("padding-top")}} | +| {{cssxref("padding-inline-end")}} | {{cssxref("padding-right")}} | +| {{cssxref("padding-inline-start")}} | {{cssxref("padding-left")}} | + +また、ボックスの両方のブロックまたは両方のインライン側の縁を同時に対象にできることから、いくつかの追加の略語があります。これらの略語は、物理的プロパティに同等のものはありません。 + +| プロパティ | 目的 | +| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | +| {{cssxref("border-block")}} | {{cssxref("border-color")}}, {{cssxref("border-style")}}, {{cssxref("border-width")}} をブロック方向の両方の境界に設定します。 | +| {{cssxref("border-block-color")}} | `border-color` をブロック方向の両方の境界に設定します。 | +| {{cssxref("border-block-style")}} | `border-style` をブロック方向の両方の境界に設定します。 | +| {{cssxref("border-block-width")}} | `border-width` をブロック方向の両方の境界に設定します。 | +| {{cssxref("border-inline")}} | `border-color`, `-style`, `-width` をインライン方向の両方の境界に設定します。 | +| {{cssxref("border-inline-color")}} | `border-color` をインライン方向の両方の境界に設定します。 | +| {{cssxref("border-inline-style")}} | `border-style` をインライン方向の両方の境界に設定します。 | +| {{cssxref("border-inline-width")}} | `border-width` をインライン方向の両方の境界に設定します。 | +| {{cssxref("margin-block")}} | ブロック方向のすべての {{cssxref("margin")}} を設定します。 | +| {{cssxref("margin-inline")}} | インライン方向のすべての `margin` を設定します。 | +| {{cssxref("padding-block")}} | ブロック方向のすべての {{cssxref("padding")}} を設定します。 | +| {{cssxref("padding-inline")}} | インライン方向のすべての `padding` を設定します。 | + +## マージンの例 + +対応付けられたされたマージンのプロパティである {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}}, {{cssxref("margin-block-start")}}, {{cssxref("margin-inline-end")}} は、物理的に対応するプロパティの代わりに使用できます。 + +下の例では、2 つのボックスを作成し、それぞれの端に異なるサイズのマージンを加えています。マージンがよりわかりやすくなるように、境界付きの特別なコンテナーを追加しています。 + +一方のボックスは物理的なプロパティを使用しており、もう一方は論理的なプロパティを使用しています。{{cssxref("direction")}} プロパティを `rtl` に変更して、ボックスが右から左の方向に表示されるようにしてみてください。1 つ目のボックスのマージンは同じ場所に留まりますが、2 つ目のボックスのインライン方向のマージンは切り替わります。 + +また、`writing-mode` を `horizontal-tb` から `vertical-rl` に変更してみてください。ここでも、最初のボックスではマージンが同じ場所に留まっていますが、2 つ目のボックスではテキストの方向に合わせて切り替わっていることに注意してください。 + +{{EmbedGHLiveSample("css-examples/logical/margin-longhands.html", '100%', 700)}} + +### マージンの一括指定 + +ボックスの両側 (インラインの両側またはブロックの両側) を対象とすることができるようになったため、{{cssxref("margin-inline")}} と {{cssxref("margin-block")}} という新しい一括指定が用意されており、2 つの値を受け入れます。1 つ目の値はその次元の先頭に適用され、2 つ目の値は末尾に適用されます。1 つの値しか使用しない場合は、両方に適用されます。 + +横書きの場合、この CSS はボックスの上部に 5px のマージンを、下部に 10px のマージンを適用します。 + +```css +.box { margin-block: 5px 10px; -}</pre> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: The shorthand properties <code>margin-inline</code> and <code>margin-block</code> shipped in Firefox 66. As these are new properties check browser support before using.</p> -</div> +} +``` -<h2 id="Padding_examples" name="Padding_examples">パディングの例</h2> +## パディングの例 -<p>The mapped padding properties of {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}}, {{cssxref("padding-block-start")}}, and {{cssxref("padding-inline-end")}} can be used instead of their physical counterparts.</p> +{{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}}, {{cssxref("padding-block-start")}}, {{cssxref("padding-inline-end")}} の対応付けられたパディングプロパティは、物理的な対応の代わりに使用することができます。 -<p>In the example below I have two boxes, one of which is using physical padding properties and the other logical padding properties. With a <code>writing-mode</code> of <code>horizontal-tb</code>, both boxes should appear the same.</p> +以下の例では、2 つのボックスがあり、一方は物理的なパディングプロパティを使用しており、もう一方は論理的なパディングプロパティを使用しています。 `writing-mode` が `horizontal-tb` の場合は、両方のボックスは同じように表示されるはずです。 -<p>Try changing the <code>direction</code> property to <code>rtl</code> to cause the boxes to display in a right-to-left direction. The padding on the first box will stay in the same place, whereas the padding on the inline dimension of the second box will switch.</p> +`direction` プロパティを `rtl` に変更して、ボックスが右から左の方向に表示されるようにしてみてください。1 つ目のボックスのパディングは同じ場所に留まりますが、2 つ目のボックスのインライン方向のパディングは切り替わります。 -<p>You can also try changing the <code>writing-mode</code> from <code>horizontal-tb</code> to <code>vertical-rl</code>. Again, notice how the padding stays in the same place for the first box, but switches around to follow the text direction in the second.</p> +また、`writing-mode` を `horizontal-tb` から `vertical-rl` に変更してみてください。ここでも、最初のボックスではパディングは同じ場所に留まっていますが、2 つ目のボックスではテキストの方向に合わせて切り替わっていることに注意してください。 -<p>{{EmbedGHLiveSample("css-examples/logical/padding-longhands.html", '100%', 700)}}</p> +{{EmbedGHLiveSample("css-examples/logical/padding-longhands.html", '100%', 700)}} -<h3 id="Padding_shorthands" name="Padding_shorthands">パディングの一括指定</h3> +### パディングの一括指定 -<p>As with margin, there are two-value shorthands for padding — {{cssxref("padding-inline")}} and {{cssxref("padding-block")}} — which allow you to set the padding of the two inline, and two block dimensions, respectively.</p> +マージンと同様に、パディングにも 2 つの値の一括指定 — {{cssxref("padding-inline")}} と {{cssxref("padding-block")}} — があります。これにより、2 つのインライン方向と 2 つのブロック方向のパディングをそれぞれ設定することができます。 -<p>In a horizontal <code>writing-mode</code> this CSS would apply <code>5px</code> of padding to the top of the box and 10px of padding to the bottom:</p> +`writing-mode` が横書きである場合、この CSS はボックスの上部に `5px` のパディングを、下部に 10px のパディングを適用します。 -<pre class="brush: css">.box { +```css +.box { padding-block: 5px 10px; -}</pre> +} +``` -<div class="blockIndicator note"> -<p><strong>Note</strong>: The shorthand properties <code>padding-inline</code> and <code>padding-block</code> shipped in Firefox 66. As these are new properties check browser support before using.</p> -</div> +## 境界の例 -<h2 id="Border_examples" name="Border_examples">境界の例</h2> +境界のプロパティは、論理的プロパティと値が非常に多くのプロパティを持っているように見える主な原因であり、ボックスのそれぞれの辺の境界線の色、幅、スタイルを表す個別指定と、それぞれの辺に 3 つを一度に設定する一括指定があります。マージンやパディングと同様に、それぞれの物理的なプロパティの対応付けされたバージョンがあります。 -<p>The border properties are the main reason that Logical Properties and Values seems to have so many properties, as we have the longhands for the color, width, and style of the border on each side of a box, along with the shorthand to set all three at once for each side. As with margin and padding we have a mapped version of each physical property.</p> +以下のデモでは、いくつかの個別指定と 3 つの一括指定の値を使用しています。他のデモと同様に、`direction` プロパティを `rtl` に変更してボックスを右から左の方向に表示させたり、`writing-mode` を `horizontal-tb` から `vertical-rl` に変更したりしてみてください。 -<p>The demo below uses some longhands and three shorthand values. As with the other demos try changing the <code>direction</code> property to <code>rtl</code> to cause the boxes to display in a right-to-left direction, or changing the <code>writing-mode</code> from <code>horizontal-tb</code> to <code>vertical-rl</code>.</p> +{{EmbedGHLiveSample("css-examples/logical/border-longhands.html", '100%', 700)}} -<p>{{EmbedGHLiveSample("css-examples/logical/border-longhands.html", '100%', 700)}}</p> +### 新しい境界の一括指定 -<h3 id="New_border_shorthands" name="New_border_shorthands">新しい境界の一括指定</h3> +ブロックやインライン方向の幅、スタイル、色を設定する 2 値の一括指定と、ブロックやインライン方向の 3 つの値をすべて設定する 2 値の一括指定があります。下のコードは、横書きの場合、ボックスの上下に 2px の緑の実線の境界線、左右に 4px の紫の点線の境界線が表示されます。 -<p>There are two-value shorthands to set the width, style and, color of the block or inline dimension, and two-value shorthands to set all three values in the block or inline dimension. The below code, in a horizontal writing mode, would give you a 2px green solid border on the top and bottom of the box, and a 4px dotted purple border on the left and right.</p> - -<pre class="brush: css">.box { +```css +.box { border-block: 2px solid green; border-inline-width: 4px; border-inline-style: dotted; border-inline-color: rebeccapurple; -}</pre> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: these two value shorthands shipped in Firefox 66, check browser support before using as other browsers may not have implemented them yet.</p> -</div> +} +``` -<h3 id="Flow_relative_border-radius_properties" name="Flow_relative_border-radius_properties">フローに関連した border-radius プロパティ</h3> +### フローに関連した border-radius プロパティ -<p>The specification has fairly recently added flow-relative values for the {{cssxref("border-radius")}} longhands. These have not yet been implemented by any browser. The below example, in a horizontal <code>writing-mode</code>, would set the top-right border radius to 1em, the bottom-right to 0, the bottom-left to 20px and the top-left to 40px.</p> +この仕様では、かなり最近になって {{cssxref("border-radius")}} の個別指定にフロー相対値が追加されました。これらはまだどのブラウザーでも実装されていません。以下の例では、横長の `writing-mode` で、右上の境界の半径を 1em、右下を 0、左下を 20px、左上を 40px に設定しています。 -<pre class="brush: css">.box { +```css +.box { border-end-start-radius: 1em; border-end-end-radius: 0; border-start-end-radius: 20px; border-start-start-radius: 40px; -}</pre> +} +``` -<h2 id="Indicating_logical_values_for_the_4-value_shorthand_syntax" name="Indicating_logical_values_for_the_4-value_shorthand_syntax">4つの値の一括指定構文についての論理値による指定</h2> +## 4 つの値の一括指定構文で論理的な値を示す -<p>The specification makes a suggestion for the four-value shorthands such as the <code>margin</code> property, however the final decision on how this should be indicated is as yet unresolved, and is discussed in <a href="https://github.com/w3c/csswg-drafts/issues/1282">this issue</a>.</p> +仕様書では、`margin` プロパティのような 4 つの値の一括指定を提案していますが、これをどのように表示するかの最終決定はまだなされておらず、[この Issue](https://github.com/w3c/csswg-drafts/issues/1282) で議論されています。 -<p>Using any four-value shorthand such as margin, padding, or border will currently use the physical versions, so if following the flow of the document is important, use the longhand properties for the time being.</p> +margin、padding、border などの 4 つの値の一括指定を使用すると、現在は物理的なバージョンが使用されるので、文書の流れに従うことが重要な場合は、当面は個別指定のプロパティを使用してください。 diff --git a/files/ja/web/css/css_logical_properties/sizing/index.md b/files/ja/web/css/css_logical_properties/sizing/index.md index d6cbf58fb6..6f0c188b61 100644 --- a/files/ja/web/css/css_logical_properties/sizing/index.md +++ b/files/ja/web/css/css_logical_properties/sizing/index.md @@ -4,90 +4,59 @@ slug: Web/CSS/CSS_Logical_Properties/Sizing tags: - CSS - CSS 論理的プロパティ - - Guide + - ガイド - 寸法 - 書字方向 translation_of: Web/CSS/CSS_Logical_Properties/Sizing --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p class="summary">このガイドでは、ページ上の要素の寸法の設定に使用する、物理的な方向のプロパティと論理的なプロパティのフローに関連した対応付けを説明します。</p> +このガイドでは、ページ上の要素の寸法の設定に使用する、物理的な方向のプロパティと論理的なプロパティのフローに関連した対応付けを説明します。 -<p>アイテムの寸法を指定するときに、<a href="https://drafts.csswg.org/css-logical/">論理的プロパティと値</a>仕様書により、水平・垂直の物理的な長さ (左や右など) に関連する物理的な寸法ではなく、テキストの流れ (インラインとブロック) に関連した寸法を示すことができます。これらのフローに関連した対応付けは、私たちの大多数にとって普通であることもあるので、デザインでは物理的・論理的の両方の寸法を使用することができます。書字方向がどうであっても物理的な長さに関連した機能が使用したい場合もあるでしょう。</p> +アイテムの寸法を指定するときに、[論理的プロパティと値](https://drafts.csswg.org/css-logical/)仕様書により、水平・垂直の物理的な長さ (左や右など) に関連する物理的な寸法ではなく、テキストの流れ (インラインとブロック) に関連した寸法を示すことができます。これらのフローに関連した対応付けは、私たちの大多数にとって普通であることもあるので、デザインでは物理的・論理的の両方の寸法を使用することができます。書字方向がどうであっても物理的な長さに関連した機能が使用したい場合もあるでしょう。 -<h2 id="Mappings_for_dimensions" name="Mappings_for_dimensions">長さへの対応付け</h2> +## 長さへの対応付け -<p>以下の表は、論理的なプロパティと物理的なプロパティの対応付けを示しています。この対応付けは、英語やアラビア語のような <code>horizontal-tb</code> の書字方向を想定しており、この場合は {{CSSxRef("width")}} が {{CSSxRef("inline-size")}} に対応付けられます。</p> +以下の表は、論理的なプロパティと物理的なプロパティの対応付けを示しています。この対応付けは、英語やアラビア語のような `horizontal-tb` の書字方向を想定しており、この場合は {{CSSxRef("width")}} が {{CSSxRef("inline-size")}} に対応付けられます。 -<p>縦書きモードの場合は、 {{CSSxRef("inline-size")}} は {{CSSxRef("height")}} に対応付けられます。</p> +縦書きモードの場合は、 {{CSSxRef("inline-size")}} は {{CSSxRef("height")}} に対応付けられます。 -<table class="standard-table"> - <thead> - <tr> - <th scope="col">論理的プロパティ</th> - <th scope="col">物理的プロパティ</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{CSSxRef("inline-size")}}</td> - <td>{{CSSxRef("width")}}</td> - </tr> - <tr> - <td>{{CSSxRef("block-size")}}</td> - <td>{{CSSxRef("height")}}</td> - </tr> - <tr> - <td>{{CSSxRef("min-inline-size")}}</td> - <td>{{CSSxRef("min-width")}}</td> - </tr> - <tr> - <td>{{CSSxRef("min-block-size")}}</td> - <td>{{CSSxRef("min-height")}}</td> - </tr> - <tr> - <td>{{CSSxRef("max-inline-size")}}</td> - <td>{{CSSxRef("max-width")}}</td> - </tr> - <tr> - <td>{{CSSxRef("max-block-size")}}</td> - <td>{{CSSxRef("max-height")}}</td> - </tr> - </tbody> -</table> +| 論理的プロパティ | 物理的プロパティ | +| ------------------------------ | ------------------------- | +| {{CSSxRef("inline-size")}} | {{CSSxRef("width")}} | +| {{CSSxRef("block-size")}} | {{CSSxRef("height")}} | +| {{CSSxRef("min-inline-size")}} | {{CSSxRef("min-width")}} | +| {{CSSxRef("min-block-size")}} | {{CSSxRef("min-height")}} | +| {{CSSxRef("max-inline-size")}} | {{CSSxRef("max-width")}} | +| {{CSSxRef("max-block-size")}} | {{CSSxRef("max-height")}} | -<h2 id="Width_and_height_example" name="Width_and_height_example">幅と高さの例</h2> +## 幅と高さの例 -<p>{{CSSxRef("width")}} と {{CSSxRef("height")}} の論理的な対応付けでは、 {{CSSxRef("inline-size")}} がインライン方向の長さを設定し、 {{CSSxRef("block-size")}} がブロック方向の長さを設定します。英語の場合は、 <code>width</code> を <code>inline-size</code> で、 <code>height</code> を <code>block-size</code> で置き換えると同じレイアウトになります。</p> +{{CSSxRef("width")}} と {{CSSxRef("height")}} の論理的な対応付けでは、 {{CSSxRef("inline-size")}} がインライン方向の長さを設定し、 {{CSSxRef("block-size")}} がブロック方向の長さを設定します。英語の場合は、 `width` を `inline-size` で、 `height` を `block-size` で置き換えると同じレイアウトになります。 -<p>以下のライブデモでは、書字方向を <code>horizontal-tb</code> に設定しました。これを <code>vertical-rl</code> に変更すると、最初の例 — <code>width</code> と <code>height</code> を使用したもの — では、テキストが縦書きになるにもかかわらず、それぞれの方向が同じ寸法です。二番目の例 — <code>inline-size</code> と <code>block-size</code> を使用したもの — は、ブロック全体が回転したようにテキストの方向に従います。</p> +以下のライブデモでは、書字方向を `horizontal-tb` に設定しました。これを `vertical-rl` に変更すると、最初の例 — `width` と `height` を使用したもの — では、テキストが縦書きになるにもかかわらず、それぞれの方向が同じ寸法です。二番目の例 — `inline-size` と `block-size` を使用したもの — は、ブロック全体が回転したようにテキストの方向に従います。 -<p>{{EmbedGHLiveSample("css-examples/logical/size-inline-block.html", '100%', 500)}}</p> +{{EmbedGHLiveSample("css-examples/logical/size-inline-block.html", '100%', 500)}} -<h2 id="Min-width_and_min-height_example" name="Min-width_and_min-height_example">最小幅と最小高さの例</h2> +## 最小幅と最小高さの例 -<p>{{CSSxRef("min-width")}} と {{CSSxRef("min-height")}} も、 {{CSSxRef("min-inline-size")}} と {{CSSxRef("min-block-size")}} に対応付けられます。これらは <code>inline-size</code> および <code>block-size</code> プロパティと同様に動作しますが、固定の寸法ではなく最小寸法を設定します。</p> +{{CSSxRef("min-width")}} と {{CSSxRef("min-height")}} も、 {{CSSxRef("min-inline-size")}} と {{CSSxRef("min-block-size")}} に対応付けられます。これらは `inline-size` および `block-size` プロパティと同様に動作しますが、固定の寸法ではなく最小寸法を設定します。 -<p>最初の例のように、以下の例を <code>vertical-rl</code> に変更してみて、その作用を確認してみてください。最初の例では <code>min-height</code> を使用しており、二番目の例では <code>min-block-size</code> を使用しています。</p> +最初の例のように、以下の例を `vertical-rl` に変更してみて、その作用を確認してみてください。最初の例では `min-height` を使用しており、二番目の例では `min-block-size` を使用しています。 -<p>{{EmbedGHLiveSample("css-examples/logical/size-min.html", "100%", 500)}}</p> +{{EmbedGHLiveSample("css-examples/logical/size-min.html", "100%", 500)}} -<h2 id="Max-width_and_max-height_example" name="Max-width_and_max-height_example">最大幅と最大高さの例</h2> +## 最大幅と最大高さの例 -<p>最後に {{CSSxRef("max-inline-size")}} と {{CSSxRef("max-block-size")}} を、 {{CSSxRef("max-width")}} と {{CSSxRef("max-height")}} の論理的な置き換えとして使用することができます。以下の例を前と同様に操作してみてください。</p> +最後に {{CSSxRef("max-inline-size")}} と {{CSSxRef("max-block-size")}} を、 {{CSSxRef("max-width")}} と {{CSSxRef("max-height")}} の論理的な置き換えとして使用することができます。以下の例を前と同様に操作してみてください。 -<p>{{EmbedGHLiveSample("css-examples/logical/size-max.html", "100%", 500)}}</p> +{{EmbedGHLiveSample("css-examples/logical/size-max.html", "100%", 500)}} -<h2 id="Logical_keywords_for_resize" name="Logical_keywords_for_resize">大きさ変更の論理キーワード</h2> +## 大きさ変更の論理キーワード -<p>{{CSSxRef("resize")}} プロパティは、アイテムの大きさが変わるかどうかを物理的な値である <code>horizontal</code> および <code>vertical</code> で指定します。 <code>resize</code> プロパティは論理的なキーワード値にも対応しています。 <code>resize: inline</code> を使用すると、インライン方向の大きさが変わることを許可し、 <code>resize: block</code> を使用すると、ブロック方向の大きさが変わることを許可します。</p> +{{CSSxRef("resize")}} プロパティは、アイテムの大きさが変わるかどうかを物理的な値である `horizontal` および `vertical` で指定します。 `resize` プロパティは論理的なキーワード値にも対応しています。 `resize: inline` を使用すると、インライン方向の大きさが変わることを許可し、 `resize: block` を使用すると、ブロック方向の大きさが変わることを許可します。 -<p>both のキーワード値は物理的または論理的に考えて動作します。これは両方を同時に設定します。以下の例を実行してみてください。</p> +`both` のキーワード値は物理的または論理的に考えて動作します。これは両方を同時に設定します。以下の例を実行してみてください。 +{{EmbedGHLiveSample("css-examples/logical/size-resize.html", "100%", 700)}} - -<p>{{EmbedGHLiveSample("css-examples/logical/size-resize.html", "100%", 700)}}</p> - -<div class="blockIndicator warning"> -<p>なお、現在のところ大きさ変更の論理的プロパティは Firefox のみが対応しています。</p> -</div> |