Web/CSS/CSS_Logical_Properties/Basic_concepts を更新 (#2345)

- Markdownに変換
- 2021/08/13 時点の英語版に同期
- 未翻訳部分を翻訳

4 files changed, 73 insertions, 77 deletions

diff --git a/files/ja/web/css/css_logical_properties/basic_concepts/index.html b/files/ja/web/css/css_logical_properties/basic_concepts/index.html
deleted file mode 100644
index e190281ba3..0000000000
--- a/files/ja/web/css/css_logical_properties/basic_concepts/index.html
+++ /dev/null
@@ -1,77 +0,0 @@
----
-title: 論理的プロパティと値の基本概念
-slug: Web/CSS/CSS_Logical_Properties/Basic_concepts
-tags:
-  - CSS
-  - CSS 論理的プロパティ
-  - Guide
-  - 書字方向
-  - 概念
-translation_of: Web/CSS/CSS_Logical_Properties/Basic_concepts
----
-<div>{{CSSRef}}</div>
-
-<p class="summary">「論理的プロパティと値」仕様書では、 CSS のたくさんのプロパティや値のフローに関する対応付けを紹介しています。この記事はこの仕様書を紹介し、フローに関するプロパティと値を説明します。</p>
-
-<h2 id="Why_do_we_need_logical_properties" name="Why_do_we_need_logical_properties">なぜ論理的プロパティが必要なのか</h2>
-
-<p>CSS は従来、画面の物理的な方向に沿って寸法を取っていました。従って、ボックスを {{CSSxRef("width")}} および {{CSSxRef("height")}} を用いて記述したり、アイテムを <code>top</code> および <code>left</code> で配置したり、 left で浮動させたり、境界、マージン、パディングを <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> で割り当てたりします。<a href="https://drafts.csswg.org/css-logical/">論理的プロパティと値仕様書</a>はこれらの物理的な値を論理的、またはフローやその反対に関連したものへの対応付けを定義します。 — 例えば <code>start</code> と <code>end</code> は <code>left</code> と <code>right</code>/<code>top</code> と <code>bottom</code> に対応します。</p>
-
-<p>なぜこれらの対応付けが必要なのかは以下の通りです。 CSS グリッドを使用したレイアウトがあり、グリッドコンテナーに幅が設定されていて、アイテムを配置するために {{CSSxRef("align-self")}} および {{CSSxRef("justify-self")}} を使用していたとします。これらのプロパティはフローに相対的です。 — <code>justify-self: start</code> はインライン方向の始点にアイテムを配置し、 <code>align-self: start</code> はブロック方向の始点にアイテムを配置します。</p>
-
-<p><img alt="横書きモードでのグリッド" src="https://mdn.mozillademos.org/files/16338/grid-horizontal-width-sm.png" style="display: block; margin: 0 auto; width: 350px;"></p>
-
-<p>このコンポーネントの書字方向を、 <code>vertical-rl</code> を {{CSSxRef("writing-mode")}} プロパティに設定することで変更すると、配置は同様の方向で動作し続けます。インライン方向は垂直になり、ブロック方向は水平になります。しかし、幅がコンテナーの水平の寸法で割り当てられており、寸法が論理的またはテキストの流れではなく物理的な方向に結び付けられているため、グリッドは同じようには見えません。</p>
-
-<p><img alt="縦書きモードでのグリッド" src="https://mdn.mozillademos.org/files/16339/grid-vertical-width-sm.png" style="display: block; margin: 0 auto; width: 350px;"></p>
-
-<p><code>width</code> プロパティの代わりに論理的プロパティである {{CSSxRef("inline-size")}} を使用すれば、コンポーネントは表示される書字方向が何であっても同じように動作するようになります。</p>
-
-<p><img alt="縦書きモードでのグリッドレイアウト" src="https://mdn.mozillademos.org/files/16337/grid-vertical-inline-size-small.png" style="display: block; height: 382px; margin: 0 auto; width: 200px;"></p>
-
-<p>以下のライブデモを試してみることができます。 <code>.box</code> の <code>writing-mode</code> を <code>vertical-rl</code> から <code>horizontal-tb</code> へ変更して、プロパティが変わるとどのようにレイアウトが変わるかを確認することができます。</p>
-
-<p>{{EmbedGHLiveSample("css-examples/logical/intro-grid-example.html", '100%', 700)}}</p>
-
-<p>When working with a site in a writing mode other than a horizontal, top to bottom one, or when using writing modes for creative reasons, being able to relate to the flow of the content makes a lot of sense.</p>
-
-<h2 id="Block_and_inline_dimensions" name="Block_and_inline_dimensions">ブロック方向とインライン方向</h2>
-
-<p>A key concept of working with flow relative properties and values is the two dimensions of block and inline. As we saw above, newer CSS layout methods such as Flexbox and Grid Layout use the concepts of <code>block</code> and <code>inline</code> rather than <code>right</code> and <code>left</code>/<code>top</code> and <code>bottom</code> when aligning items.</p>
-
-<p>The <code>inline</code> dimension is the dimension along which a line of text runs in the writing mode in use. Therefore, in an English document with the text running horizontally left to right, or an Arabic document with the text running horizontally right to left, the inline dimension is <em>horizontal</em>. Switch to a vertical writing mode (e.g. a Japanese document) and the inline dimension is now <em>vertical</em>, as lines in that writing mode run vertically.</p>
-
-<p>The block dimension is the other dimension, and the direction in which blocks — such as paragraphs — display one after the other. In English and Arabic these run vertically, whereas in any vertical writing mode these run horizontally.</p>
-
-<p>The below diagram shows the inline and block directions in a horizontal writing mode:</p>
-
-<p><img alt="diagram showing the inline axis running horizontally, block axis vertically." src="https://mdn.mozillademos.org/files/16340/mdn-horizontal.png" style="display: block; height: 382px; margin: 0 auto; width: 521px;"></p>
-
-<p>This diagram shows block and inline in a vertical writing mode:</p>
-
-<p><img alt="Diagram showing the block axis running horizontally the inline axis vertically." src="https://mdn.mozillademos.org/files/16341/mdn-vertical.png" style="display: block; height: 382px; margin: 0 auto; width: 418px;"></p>
-
-<h2 id="Browser_support" name="Browser_support">ブラウザーの互換性</h2>
-
-<p>Logical Properties and Values can be thought of as a couple of groups in terms of current browser support. Some of the properties are essentially mappings from the physical versions, for example {{CSSxRef("inline-size")}} for {{CSSxRef("width")}} or {{CSSxRef("margin-inline-start")}} rather than {{CSSxRef("margin-left")}}. These mapped properties are starting to see good browser support, and if you look at the individual pages for the properties in the <a href="/ja/docs/Web/CSS/CSS_Logical_Properties#Reference">reference here on MDN</a> you will see that Edge is the only modern browser currently missing these.</p>
-
-<p>There are then a group of properties which do not have a direct mapping in terms of existing physical properties. These are shorthands made possible by the fact that we can refer to both edges of the block or inline dimension at once. An example would be {{CSSxRef("margin-block")}}, which is a shorthand setting for {{CSSxRef("margin-block-start")}} and {{CSSxRef("margin-block-end")}}. These currently have no browser support.</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: The CSS Working Group are currently trying to decide what to do about the four-value shorthands for logical properties, for example the equivalents to setting four physical properties at once, like margins with the {{CSSxRef("margin")}} property. We would need some kind of modifier if we were to reuse <code>margin</code> for flow-relative properties. If you would like to read the suggestions or comment on them the relevant GitHub issue is <a href="https://github.com/w3c/csswg-drafts/issues/1282">#1282</a>.</p>
-</div>
-
-<h3 id="Testing_for_browser_support" name="Testing_for_browser_support">ブラウザーの互換性のテスト</h3>
-
-<p>You can test for support of logical properties and values using feature queries. For example you could set a {{CSSxRef("width")}}, test for {{CSSxRef("inline-size")}} and, if it is supported, set the <code>width</code> to <code>auto</code> and the <code>inline-size</code> to the original <code>width</code> value.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/logical/intro-feature-queries.html", "100%", 700)}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">グリッドレイアウトのボックス配置</a></li>
- <li><a href="/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">フレックスレイアウトのボックス配置</a></li>
- <li><a href="https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/">Understanding Logical Properties and Values</a></li>
- <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">書字方向</a></li>
-</ul>
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
new file mode 100644
index 0000000000..221091a5e5
--- /dev/null
+++ b/files/ja/web/css/css_logical_properties/basic_concepts/index.md
@@ -0,0 +1,73 @@
+---
+title: 論理的プロパティと値の基本概念
+slug: Web/CSS/CSS_Logical_Properties/Basic_concepts
+tags:
+  - CSS
+  - CSS 論理的プロパティ
+  - ガイド
+  - 概念
+  - 書字方向
+translation_of: Web/CSS/CSS_Logical_Properties/Basic_concepts
+---
+{{CSSRef}}
+
+Logical Properties and Values (論理的プロパティと値) 仕様書では、 CSS のたくさんのプロパティや値のフローに関する対応付けを紹介しています。この記事はこの仕様書を紹介し、フローに関するプロパティと値を説明します。
+
+## なぜ論理的プロパティが必要なのか
+
+CSS は従来、画面の物理的な軸に沿って寸法を取っていました。したがって、ボックスを {{CSSxRef("width")}} および {{CSSxRef("height")}} を用いて記述したり、アイテムを `top` および `left` で配置したり、 left に浮動させたり、境界、マージン、パディングを `top`, `right`, `bottom`, `left` で割り当てたりします。 [Logical Properties and Values 仕様書](https://drafts.csswg.org/css-logical/)はこれらの物理的な値を論理的、またはフローやその反対に関連したものへの対応付けを定義します。例えば `start` と `end` は `left` と `right` または `top` と `bottom` に対応します。
+
+なぜこれらの対応付けが必要なのでしょうか。 CSS グリッドを使用したレイアウトがあり、グリッドコンテナーに幅が設定されていて、アイテムを配置するために {{CSSxRef("align-self")}} および {{CSSxRef("justify-self")}} を使用していたとします。これらのプロパティはフローに相対的です。 `justify-self: start` はインライン軸の先頭にアイテムを配置し、 `align-self: start` はブロック軸の先頭にアイテムを配置します。
+
+![横書きモードでのグリッド](grid-horizontal-width-sm.png)
+
+この部分の書字方向として `vertical-rl` を {{CSSxRef("writing-mode")}} プロパティに設定すると、配置は同様の方向で動作し続けます。インライン軸は垂直になり、ブロック軸は水平になります。しかし、幅がコンテナーの水平の寸法で割り当てられており、寸法が論理的またはテキストの流れではなく物理的な方向に結び付けられているため、グリッドは同じようには見えません。
+
+![縦書きモードでのグリッド](grid-vertical-width-sm.png)
+
+`width` プロパティの代わりに論理的プロパティである {{CSSxRef("inline-size")}} を使用すれば、コンポーネントは表示される書字方向が何であっても同じように動作するようになります。
+
+![縦書きモードでのグリッドレイアウト](grid-vertical-inline-size-small.png)
+
+次の実行例を試してみましょう。 `.box` の `writing-mode` を `vertical-rl` から `horizontal-tb` へ変更して、プロパティが変わるとどのようにレイアウトが変わるかを確認することができます。
+
+{{EmbedGHLiveSample("css-examples/logical/intro-grid-example.html", '100%', 700)}}
+
+水平方向、下方向以外の書字方向でサイトを操作する場合や、クリエイティブな理由で書字方向を使用する場合、コンテンツの流れに関連づけることができるのはとても意味のあることです。
+
+## ブロック軸とインライン軸
+
+フローに対して相対的なプロパティや値を扱う上で重要な概念は、ブロックとインラインという 2 つの軸です。前述したように、フレックスボックスやグリッドレイアウトなどの新しい CSS レイアウト手法では、アイテムを配置する際に、 `right` と `left` や `top` と `bottom` ではなく、 `block` と `inline` の概念を使用します。
+
+`inline` 軸は、使用されている書字方向でテキストの行が流れる方向の軸です。したがって、テキストが水平方向に左から右へ流れる英語の文書や、テキストが水平方向に右から左へ流れるアラビア語の文書では、インライン軸は*水平*になります。縦書きの文書 (日本語の文書など) に切り替えると、行が垂直方向に流れるので、縦書きの文書では行が縦に流れるので、インライン軸は*垂直*になります。
+
+ブロック軸はもう一つの軸で、段落などのブロックが次々と表示される方向を示します。英語やアラビア語では垂直方向に表示されますが、縦書きの場合は水平方向に表示されます。
+
+下の図は、横書きモードの場合のインラインとブロックの方向を示しています。
+
+![インライン軸が横方向、ブロック軸が縦方向の図。](mdn-horizontal.png)
+
+この図は、縦書きモードでのブロックとインラインの方向を示しています。
+
+![ブロック軸が水平方向、インライン軸が垂直方向に走っている図。](mdn-vertical.png)
+
+## ブラウザーの互換性
+
+論理的プロパティと値は、現在のブラウザーの対応状況の観点から、 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)
+- [フレックスレイアウトのボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox)
+- [Understanding Logical Properties and Values](https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/)
+- [書字方向](/ja/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes)
diff --git a/files/ja/web/css/css_logical_properties/basic_concepts/mdn-horizontal.png b/files/ja/web/css/css_logical_properties/basic_concepts/mdn-horizontal.png
new file mode 100644
index 0000000000..dca6006c71
--- /dev/null
+++ b/files/ja/web/css/css_logical_properties/basic_concepts/mdn-horizontal.png
diff --git a/files/ja/web/css/css_logical_properties/basic_concepts/mdn-vertical.png b/files/ja/web/css/css_logical_properties/basic_concepts/mdn-vertical.png
new file mode 100644
index 0000000000..b44a4a4d33
--- /dev/null
+++ b/files/ja/web/css/css_logical_properties/basic_concepts/mdn-vertical.png