initial commit

1 files changed, 178 insertions, 0 deletions

diff --git a/files/ja/web/css/css_logical_properties/index.html b/files/ja/web/css/css_logical_properties/index.html
new file mode 100644
index 0000000000..71c78974aa
--- /dev/null
+++ b/files/ja/web/css/css_logical_properties/index.html
@@ -0,0 +1,178 @@
+---
+title: CSS 論理的プロパティと値
+slug: Web/CSS/CSS_Logical_Properties
+tags:
+  - CSS
+  - CSS Logical Properties
+  - CSS 論理的プロパティ
+  - Landing
+  - 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>