diff options
Diffstat (limited to 'files/ja/web/css/css_logical_properties/index.md')
| -rw-r--r-- | files/ja/web/css/css_logical_properties/index.md | 289 |
1 files changed, 121 insertions, 168 deletions
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")}} | 初回定義 | + +## ブラウザーの互換性 + +完全な互換性情報は、それぞれのプロパティページを参照してください。 |