From 3a068083649dcd274327e3f8ec8f930be9156462 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 8 Nov 2021 11:58:38 +0900 Subject: CSS Logical Properties に関する文書の変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../floating_and_positioning/index.html | 139 ---------- .../floating_and_positioning/index.md | 139 ++++++++++ files/ja/web/css/css_logical_properties/index.html | 178 ------------ files/ja/web/css/css_logical_properties/index.md | 178 ++++++++++++ .../margins_borders_padding/index.html | 298 --------------------- .../margins_borders_padding/index.md | 298 +++++++++++++++++++++ .../css/css_logical_properties/sizing/index.html | 93 ------- .../web/css/css_logical_properties/sizing/index.md | 93 +++++++ 8 files changed, 708 insertions(+), 708 deletions(-) delete mode 100644 files/ja/web/css/css_logical_properties/floating_and_positioning/index.html create mode 100644 files/ja/web/css/css_logical_properties/floating_and_positioning/index.md delete mode 100644 files/ja/web/css/css_logical_properties/index.html create mode 100644 files/ja/web/css/css_logical_properties/index.md delete mode 100644 files/ja/web/css/css_logical_properties/margins_borders_padding/index.html create mode 100644 files/ja/web/css/css_logical_properties/margins_borders_padding/index.md delete mode 100644 files/ja/web/css/css_logical_properties/sizing/index.html create mode 100644 files/ja/web/css/css_logical_properties/sizing/index.md (limited to 'files/ja') diff --git a/files/ja/web/css/css_logical_properties/floating_and_positioning/index.html b/files/ja/web/css/css_logical_properties/floating_and_positioning/index.html deleted file mode 100644 index c245570080..0000000000 --- a/files/ja/web/css/css_logical_properties/floating_and_positioning/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: 浮動と位置指定の論理的プロパティ -slug: Web/CSS/CSS_Logical_Properties/Floating_and_positioning -tags: - - CSS - - CSS 論理的プロパティ - - Guide - - ガイド - - 位置指定 - - 浮動 -translation_of: Web/CSS/CSS_Logical_Properties/Floating_and_positioning ---- -
{{CSSRef}}
- -

論理的プロパティと値仕様書 (Logical Properties and Values specification) には、 {{cssxref("float")}} および {{cssxref("clear")}} の物理的な値の論理的な対応付けと、位置指定レイアウトで使用する位置指定プロパティを含んでいます。このガイドはこれらの使い方を見てみます。

- -

マッピングされるプロパティと値

- -

以下の表はこのガイドで物理的なマッピングに沿って議論されるプロパティや値を説明しています。水平方向の {{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")}}上記のインライン方向における両方の inset 値を同時に設定します。
{{cssxref("inset-block")}}上記のブロック方向における両方の inset 値を同時に設定します。
{{cssxref("inset")}}4つの inset 値をすべて同時に設定し、複数値の物理的な対応付けを行います。
- -

浮動と解除の例

- -

{{cssxref("float")}} および {{cssxref("clear")}} プロパティで用いられる物理的な値 left, right, both です。論理的プロパティの仕様書は、 inline-start および inline-end の値を left および right に対応付けて定義しています。

- -

下記の例では、二つのボックスがあります。 — 一つ目は float: left で、二つ目は 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 つの値を設定することができます。

- - - -
-

注: 論理的プロパティ仕様書をを実装しているブラウザーは、これまでのところ直接マッピングを実装しており、新しい一括指定は実装していません。詳細については、各プロパティページのリファレンスにあるブラウザーの互換性データの節を参照してください。

-
- -

例: 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/floating_and_positioning/index.md b/files/ja/web/css/css_logical_properties/floating_and_positioning/index.md new file mode 100644 index 0000000000..c245570080 --- /dev/null +++ b/files/ja/web/css/css_logical_properties/floating_and_positioning/index.md @@ -0,0 +1,139 @@ +--- +title: 浮動と位置指定の論理的プロパティ +slug: Web/CSS/CSS_Logical_Properties/Floating_and_positioning +tags: + - CSS + - CSS 論理的プロパティ + - Guide + - ガイド + - 位置指定 + - 浮動 +translation_of: Web/CSS/CSS_Logical_Properties/Floating_and_positioning +--- +
{{CSSRef}}
+ +

論理的プロパティと値仕様書 (Logical Properties and Values specification) には、 {{cssxref("float")}} および {{cssxref("clear")}} の物理的な値の論理的な対応付けと、位置指定レイアウトで使用する位置指定プロパティを含んでいます。このガイドはこれらの使い方を見てみます。

+ +

マッピングされるプロパティと値

+ +

以下の表はこのガイドで物理的なマッピングに沿って議論されるプロパティや値を説明しています。水平方向の {{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")}}上記のインライン方向における両方の inset 値を同時に設定します。
{{cssxref("inset-block")}}上記のブロック方向における両方の inset 値を同時に設定します。
{{cssxref("inset")}}4つの inset 値をすべて同時に設定し、複数値の物理的な対応付けを行います。
+ +

浮動と解除の例

+ +

{{cssxref("float")}} および {{cssxref("clear")}} プロパティで用いられる物理的な値 left, right, both です。論理的プロパティの仕様書は、 inline-start および inline-end の値を left および right に対応付けて定義しています。

+ +

下記の例では、二つのボックスがあります。 — 一つ目は float: left で、二つ目は 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 つの値を設定することができます。

+ + + +
+

注: 論理的プロパティ仕様書をを実装しているブラウザーは、これまでのところ直接マッピングを実装しており、新しい一括指定は実装していません。詳細については、各プロパティページのリファレンスにあるブラウザーの互換性データの節を参照してください。

+
+ +

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

{{CSSRef}}

- -

CSS 論理的プロパティと値 (CSS Logical Properties and Values) は CSS のモジュールの一つで、論理的プロパティと値を導入して、物理的ではなく論理的に方向や寸法をマッピングして、レイアウトを制御することができるようにします。

- -

このモジュールは以前に CSS 2.1 で定義されたプロパティについて、論理的なプロパティと値を定義します。論理的プロパティは方向を定義し、これは対応する物理的なプロパティと相対的に等価になります。

- -

ブロックとインライン

- -

論理プロパティと値は、ブロックとインラインという抽象的な用語を使用して、流れに対する方向を記述します。これらの用語の物理的な意味は、書字方向に依存します。

- -
-
ブロック方向
-
行内のテキストの流れとは垂直の方向、つまり、横書きでは垂直方向、縦書きでは水平方向です。標準的な英語のテキストでは、垂直方向になります。
-
インライン方向
-
行内のテキストの流れと平行の方向、つまり、横書きでは水平方向、縦書きでは垂直方向です。標準的な英語のテキストでは、水平方向になります。
-
- -

リファレンス

- -

寸法のプロパティ

- -
- -
- -

マージン、境界、パディングのプロパティ

- -
- -
- -

浮動と位置指定のプロパティ

- -
- -
- -

その他のプロパティ

- -
- -
- -

非推奨になったプロパティ

- -
- -
- -

ガイド

- - - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Logical Properties")}}{{Spec2("CSS Logical Properties")}}初回定義
- -

ブラウザーの互換性

- -

全般的な対応:

- - - -

互換性情報全体は、それぞれのプロパティページを参照してください。

diff --git a/files/ja/web/css/css_logical_properties/index.md b/files/ja/web/css/css_logical_properties/index.md new file mode 100644 index 0000000000..71c78974aa --- /dev/null +++ b/files/ja/web/css/css_logical_properties/index.md @@ -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 +--- +

{{CSSRef}}

+ +

CSS 論理的プロパティと値 (CSS Logical Properties and Values) は CSS のモジュールの一つで、論理的プロパティと値を導入して、物理的ではなく論理的に方向や寸法をマッピングして、レイアウトを制御することができるようにします。

+ +

このモジュールは以前に CSS 2.1 で定義されたプロパティについて、論理的なプロパティと値を定義します。論理的プロパティは方向を定義し、これは対応する物理的なプロパティと相対的に等価になります。

+ +

ブロックとインライン

+ +

論理プロパティと値は、ブロックとインラインという抽象的な用語を使用して、流れに対する方向を記述します。これらの用語の物理的な意味は、書字方向に依存します。

+ +
+
ブロック方向
+
行内のテキストの流れとは垂直の方向、つまり、横書きでは垂直方向、縦書きでは水平方向です。標準的な英語のテキストでは、垂直方向になります。
+
インライン方向
+
行内のテキストの流れと平行の方向、つまり、横書きでは水平方向、縦書きでは垂直方向です。標準的な英語のテキストでは、水平方向になります。
+
+ +

リファレンス

+ +

寸法のプロパティ

+ +
+ +
+ +

マージン、境界、パディングのプロパティ

+ +
+ +
+ +

浮動と位置指定のプロパティ

+ +
+ +
+ +

その他のプロパティ

+ +
+ +
+ +

非推奨になったプロパティ

+ +
+ +
+ +

ガイド

+ + + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ +

全般的な対応:

+ + + +

互換性情報全体は、それぞれのプロパティページを参照してください。

diff --git a/files/ja/web/css/css_logical_properties/margins_borders_padding/index.html b/files/ja/web/css/css_logical_properties/margins_borders_padding/index.html deleted file mode 100644 index cf4cf1ac51..0000000000 --- a/files/ja/web/css/css_logical_properties/margins_borders_padding/index.html +++ /dev/null @@ -1,298 +0,0 @@ ---- -title: マージン、境界、パディングの論理的プロパティ -slug: Web/CSS/CSS_Logical_Properties/Margins_borders_padding -tags: - - CSS - - CSS 論理的プロパティ - - ガイド - - 書字方向 - - 概念 -translation_of: Web/CSS/CSS_Logical_Properties/Margins_borders_padding ---- -

{{CSSRef}}

- -

論理的プロパティと値仕様書 (Logical Properties and Values specification) では、それぞれのマージン、境界、パディングのプロパティおよびその一括指定について、フローに関連する対応付けを定義します。

- -

CSS 論理的プロパティと値のメインページを見ると、たくさんのプロパティが並んでいます。これは多くがマージン、境界、パディングのそれぞれの辺についての4つの個別指定値と、すべてを一括指定するものであるためです。

- -

マージン、境界、パティングの対応付け

- -

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 horizontal-tb — 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")}}.

- -

If you were using a horizontal-tb 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")}}.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
論理的プロパティ物理的プロパティ
{{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")}}
- -

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.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
プロパティ目的
{{cssxref("border-block")}}Sets {{cssxref("border-color")}}, {{cssxref("border-style")}}, and {{cssxref("border-width")}} for both block borders.
{{cssxref("border-block-color")}}Sets border-color for both block borders.
{{cssxref("border-block-style")}}Sets border-style for both block borders.
{{cssxref("border-block-width")}}Sets border-width for both block borders.
{{cssxref("border-inline")}}Sets border-color, -style, and -width for both inline borders.
{{cssxref("border-inline-color")}}Sets border-color for both inline borders.
{{cssxref("border-inline-style")}}Sets border-style for both inline borders.
{{cssxref("border-inline-width")}}Sets border-width for both inline borders.
{{cssxref("margin-block")}}Sets all the block {{cssxref("margin")}}s.
{{cssxref("margin-inline")}}Sets all the inline margins.
{{cssxref("padding-block")}}Sets the block {{cssxref("padding")}}.
{{cssxref("padding-inline")}}Sets the inline padding.
- -

マージンの例

- -

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.

- -

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.

- -

One box uses physical properties and the other logical properties. Try changing the {{cssxref("direction")}} property to rtl 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.

- -

You can also try changing the writing-mode from horizontal-tb to vertical-rl. 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.

- -

{{EmbedGHLiveSample("css-examples/logical/margin-longhands.html", '100%', 700)}}

- -

マージンの一括指定

- -

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.

- -

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.

- -
.box {
-  margin-block: 5px 10px;
-}
- -
-

Note: The shorthand properties margin-inline and margin-block shipped in Firefox 66. As these are new properties check browser support before using.

-
- -

パディングの例

- -

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.

- -

In the example below I have two boxes, one of which is using physical padding properties and the other logical padding properties. With a writing-mode of horizontal-tb, both boxes should appear the same.

- -

Try changing the direction property to rtl 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.

- -

You can also try changing the writing-mode from horizontal-tb to vertical-rl. 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.

- -

{{EmbedGHLiveSample("css-examples/logical/padding-longhands.html", '100%', 700)}}

- -

パディングの一括指定

- -

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.

- -

In a horizontal writing-mode this CSS would apply 5px of padding to the top of the box and 10px of padding to the bottom:

- -
.box {
-  padding-block: 5px 10px;
-}
- -
-

Note: The shorthand properties padding-inline and padding-block shipped in Firefox 66. As these are new properties check browser support before using.

-
- -

境界の例

- -

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.

- -

The demo below uses some longhands and three shorthand values. As with the other demos try changing the direction property to rtl to cause the boxes to display in a right-to-left direction, or changing the writing-mode from horizontal-tb to vertical-rl.

- -

{{EmbedGHLiveSample("css-examples/logical/border-longhands.html", '100%', 700)}}

- -

新しい境界の一括指定

- -

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.

- -
.box {
-  border-block: 2px solid green;
-  border-inline-width: 4px;
-  border-inline-style: dotted;
-  border-inline-color: rebeccapurple;
-}
- -
-

Note: these two value shorthands shipped in Firefox 66, check browser support before using as other browsers may not have implemented them yet.

-
- -

フローに関連した border-radius プロパティ

- -

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 writing-mode, 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.

- -
.box {
-  border-end-start-radius: 1em;
-  border-end-end-radius: 0;
-  border-start-end-radius: 20px;
-  border-start-start-radius: 40px;
-}
- -

4つの値の一括指定構文についての論理値による指定

- -

The specification makes a suggestion for the four-value shorthands such as the margin property, however the final decision on how this should be indicated is as yet unresolved, and is discussed in this issue.

- -

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.

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 new file mode 100644 index 0000000000..cf4cf1ac51 --- /dev/null +++ b/files/ja/web/css/css_logical_properties/margins_borders_padding/index.md @@ -0,0 +1,298 @@ +--- +title: マージン、境界、パディングの論理的プロパティ +slug: Web/CSS/CSS_Logical_Properties/Margins_borders_padding +tags: + - CSS + - CSS 論理的プロパティ + - ガイド + - 書字方向 + - 概念 +translation_of: Web/CSS/CSS_Logical_Properties/Margins_borders_padding +--- +

{{CSSRef}}

+ +

論理的プロパティと値仕様書 (Logical Properties and Values specification) では、それぞれのマージン、境界、パディングのプロパティおよびその一括指定について、フローに関連する対応付けを定義します。

+ +

CSS 論理的プロパティと値のメインページを見ると、たくさんのプロパティが並んでいます。これは多くがマージン、境界、パディングのそれぞれの辺についての4つの個別指定値と、すべてを一括指定するものであるためです。

+ +

マージン、境界、パティングの対応付け

+ +

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 horizontal-tb — 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")}}.

+ +

If you were using a horizontal-tb 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")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
論理的プロパティ物理的プロパティ
{{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")}}
+ +

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.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
プロパティ目的
{{cssxref("border-block")}}Sets {{cssxref("border-color")}}, {{cssxref("border-style")}}, and {{cssxref("border-width")}} for both block borders.
{{cssxref("border-block-color")}}Sets border-color for both block borders.
{{cssxref("border-block-style")}}Sets border-style for both block borders.
{{cssxref("border-block-width")}}Sets border-width for both block borders.
{{cssxref("border-inline")}}Sets border-color, -style, and -width for both inline borders.
{{cssxref("border-inline-color")}}Sets border-color for both inline borders.
{{cssxref("border-inline-style")}}Sets border-style for both inline borders.
{{cssxref("border-inline-width")}}Sets border-width for both inline borders.
{{cssxref("margin-block")}}Sets all the block {{cssxref("margin")}}s.
{{cssxref("margin-inline")}}Sets all the inline margins.
{{cssxref("padding-block")}}Sets the block {{cssxref("padding")}}.
{{cssxref("padding-inline")}}Sets the inline padding.
+ +

マージンの例

+ +

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.

+ +

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.

+ +

One box uses physical properties and the other logical properties. Try changing the {{cssxref("direction")}} property to rtl 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.

+ +

You can also try changing the writing-mode from horizontal-tb to vertical-rl. 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.

+ +

{{EmbedGHLiveSample("css-examples/logical/margin-longhands.html", '100%', 700)}}

+ +

マージンの一括指定

+ +

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.

+ +

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.

+ +
.box {
+  margin-block: 5px 10px;
+}
+ +
+

Note: The shorthand properties margin-inline and margin-block shipped in Firefox 66. As these are new properties check browser support before using.

+
+ +

パディングの例

+ +

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.

+ +

In the example below I have two boxes, one of which is using physical padding properties and the other logical padding properties. With a writing-mode of horizontal-tb, both boxes should appear the same.

+ +

Try changing the direction property to rtl 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.

+ +

You can also try changing the writing-mode from horizontal-tb to vertical-rl. 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.

+ +

{{EmbedGHLiveSample("css-examples/logical/padding-longhands.html", '100%', 700)}}

+ +

パディングの一括指定

+ +

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.

+ +

In a horizontal writing-mode this CSS would apply 5px of padding to the top of the box and 10px of padding to the bottom:

+ +
.box {
+  padding-block: 5px 10px;
+}
+ +
+

Note: The shorthand properties padding-inline and padding-block shipped in Firefox 66. As these are new properties check browser support before using.

+
+ +

境界の例

+ +

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.

+ +

The demo below uses some longhands and three shorthand values. As with the other demos try changing the direction property to rtl to cause the boxes to display in a right-to-left direction, or changing the writing-mode from horizontal-tb to vertical-rl.

+ +

{{EmbedGHLiveSample("css-examples/logical/border-longhands.html", '100%', 700)}}

+ +

新しい境界の一括指定

+ +

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.

+ +
.box {
+  border-block: 2px solid green;
+  border-inline-width: 4px;
+  border-inline-style: dotted;
+  border-inline-color: rebeccapurple;
+}
+ +
+

Note: these two value shorthands shipped in Firefox 66, check browser support before using as other browsers may not have implemented them yet.

+
+ +

フローに関連した border-radius プロパティ

+ +

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 writing-mode, 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.

+ +
.box {
+  border-end-start-radius: 1em;
+  border-end-end-radius: 0;
+  border-start-end-radius: 20px;
+  border-start-start-radius: 40px;
+}
+ +

4つの値の一括指定構文についての論理値による指定

+ +

The specification makes a suggestion for the four-value shorthands such as the margin property, however the final decision on how this should be indicated is as yet unresolved, and is discussed in this issue.

+ +

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.

diff --git a/files/ja/web/css/css_logical_properties/sizing/index.html b/files/ja/web/css/css_logical_properties/sizing/index.html deleted file mode 100644 index d6cbf58fb6..0000000000 --- a/files/ja/web/css/css_logical_properties/sizing/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: 寸法の論理的プロパティ -slug: Web/CSS/CSS_Logical_Properties/Sizing -tags: - - CSS - - CSS 論理的プロパティ - - Guide - - 寸法 - - 書字方向 -translation_of: Web/CSS/CSS_Logical_Properties/Sizing ---- -
{{CSSRef}}
- -

このガイドでは、ページ上の要素の寸法の設定に使用する、物理的な方向のプロパティと論理的なプロパティのフローに関連した対応付けを説明します。

- -

アイテムの寸法を指定するときに、論理的プロパティと値仕様書により、水平・垂直の物理的な長さ (左や右など) に関連する物理的な寸法ではなく、テキストの流れ (インラインとブロック) に関連した寸法を示すことができます。これらのフローに関連した対応付けは、私たちの大多数にとって普通であることもあるので、デザインでは物理的・論理的の両方の寸法を使用することができます。書字方向がどうであっても物理的な長さに関連した機能が使用したい場合もあるでしょう。

- -

長さへの対応付け

- -

以下の表は、論理的なプロパティと物理的なプロパティの対応付けを示しています。この対応付けは、英語やアラビア語のような horizontal-tb の書字方向を想定しており、この場合は {{CSSxRef("width")}} が {{CSSxRef("inline-size")}} に対応付けられます。

- -

縦書きモードの場合は、 {{CSSxRef("inline-size")}} は {{CSSxRef("height")}} に対応付けられます。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
論理的プロパティ物理的プロパティ
{{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")}}
- -

幅と高さの例

- -

{{CSSxRef("width")}} と {{CSSxRef("height")}} の論理的な対応付けでは、 {{CSSxRef("inline-size")}} がインライン方向の長さを設定し、 {{CSSxRef("block-size")}} がブロック方向の長さを設定します。英語の場合は、 width を inline-size で、 height を block-size で置き換えると同じレイアウトになります。

- -

以下のライブデモでは、書字方向を horizontal-tb に設定しました。これを vertical-rl に変更すると、最初の例 — width と height を使用したもの — では、テキストが縦書きになるにもかかわらず、それぞれの方向が同じ寸法です。二番目の例 — inline-size と block-size を使用したもの — は、ブロック全体が回転したようにテキストの方向に従います。

- -

{{EmbedGHLiveSample("css-examples/logical/size-inline-block.html", '100%', 500)}}

- -

最小幅と最小高さの例

- -

{{CSSxRef("min-width")}} と {{CSSxRef("min-height")}} も、 {{CSSxRef("min-inline-size")}} と {{CSSxRef("min-block-size")}} に対応付けられます。これらは inline-size および block-size プロパティと同様に動作しますが、固定の寸法ではなく最小寸法を設定します。

- -

最初の例のように、以下の例を vertical-rl に変更してみて、その作用を確認してみてください。最初の例では min-height を使用しており、二番目の例では min-block-size を使用しています。

- -

{{EmbedGHLiveSample("css-examples/logical/size-min.html", "100%", 500)}}

- -

最大幅と最大高さの例

- -

最後に {{CSSxRef("max-inline-size")}} と {{CSSxRef("max-block-size")}} を、 {{CSSxRef("max-width")}} と {{CSSxRef("max-height")}} の論理的な置き換えとして使用することができます。以下の例を前と同様に操作してみてください。

- -

{{EmbedGHLiveSample("css-examples/logical/size-max.html", "100%", 500)}}

- -

大きさ変更の論理キーワード

- -

{{CSSxRef("resize")}} プロパティは、アイテムの大きさが変わるかどうかを物理的な値である horizontal および vertical で指定します。 resize プロパティは論理的なキーワード値にも対応しています。 resize: inline を使用すると、インライン方向の大きさが変わることを許可し、 resize: block を使用すると、ブロック方向の大きさが変わることを許可します。

- -

both のキーワード値は物理的または論理的に考えて動作します。これは両方を同時に設定します。以下の例を実行してみてください。

- - - -

{{EmbedGHLiveSample("css-examples/logical/size-resize.html", "100%", 700)}}

- -
-

なお、現在のところ大きさ変更の論理的プロパティは Firefox のみが対応しています。

-
diff --git a/files/ja/web/css/css_logical_properties/sizing/index.md b/files/ja/web/css/css_logical_properties/sizing/index.md new file mode 100644 index 0000000000..d6cbf58fb6 --- /dev/null +++ b/files/ja/web/css/css_logical_properties/sizing/index.md @@ -0,0 +1,93 @@ +--- +title: 寸法の論理的プロパティ +slug: Web/CSS/CSS_Logical_Properties/Sizing +tags: + - CSS + - CSS 論理的プロパティ + - Guide + - 寸法 + - 書字方向 +translation_of: Web/CSS/CSS_Logical_Properties/Sizing +--- +
{{CSSRef}}
+ +

このガイドでは、ページ上の要素の寸法の設定に使用する、物理的な方向のプロパティと論理的なプロパティのフローに関連した対応付けを説明します。

+ +

アイテムの寸法を指定するときに、論理的プロパティと値仕様書により、水平・垂直の物理的な長さ (左や右など) に関連する物理的な寸法ではなく、テキストの流れ (インラインとブロック) に関連した寸法を示すことができます。これらのフローに関連した対応付けは、私たちの大多数にとって普通であることもあるので、デザインでは物理的・論理的の両方の寸法を使用することができます。書字方向がどうであっても物理的な長さに関連した機能が使用したい場合もあるでしょう。

+ +

長さへの対応付け

+ +

以下の表は、論理的なプロパティと物理的なプロパティの対応付けを示しています。この対応付けは、英語やアラビア語のような horizontal-tb の書字方向を想定しており、この場合は {{CSSxRef("width")}} が {{CSSxRef("inline-size")}} に対応付けられます。

+ +

縦書きモードの場合は、 {{CSSxRef("inline-size")}} は {{CSSxRef("height")}} に対応付けられます。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
論理的プロパティ物理的プロパティ
{{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")}}
+ +

幅と高さの例

+ +

{{CSSxRef("width")}} と {{CSSxRef("height")}} の論理的な対応付けでは、 {{CSSxRef("inline-size")}} がインライン方向の長さを設定し、 {{CSSxRef("block-size")}} がブロック方向の長さを設定します。英語の場合は、 width を inline-size で、 height を block-size で置き換えると同じレイアウトになります。

+ +

以下のライブデモでは、書字方向を horizontal-tb に設定しました。これを vertical-rl に変更すると、最初の例 — width と height を使用したもの — では、テキストが縦書きになるにもかかわらず、それぞれの方向が同じ寸法です。二番目の例 — inline-size と block-size を使用したもの — は、ブロック全体が回転したようにテキストの方向に従います。

+ +

{{EmbedGHLiveSample("css-examples/logical/size-inline-block.html", '100%', 500)}}

+ +

最小幅と最小高さの例

+ +

{{CSSxRef("min-width")}} と {{CSSxRef("min-height")}} も、 {{CSSxRef("min-inline-size")}} と {{CSSxRef("min-block-size")}} に対応付けられます。これらは inline-size および block-size プロパティと同様に動作しますが、固定の寸法ではなく最小寸法を設定します。

+ +

最初の例のように、以下の例を vertical-rl に変更してみて、その作用を確認してみてください。最初の例では min-height を使用しており、二番目の例では min-block-size を使用しています。

+ +

{{EmbedGHLiveSample("css-examples/logical/size-min.html", "100%", 500)}}

+ +

最大幅と最大高さの例

+ +

最後に {{CSSxRef("max-inline-size")}} と {{CSSxRef("max-block-size")}} を、 {{CSSxRef("max-width")}} と {{CSSxRef("max-height")}} の論理的な置き換えとして使用することができます。以下の例を前と同様に操作してみてください。

+ +

{{EmbedGHLiveSample("css-examples/logical/size-max.html", "100%", 500)}}

+ +

大きさ変更の論理キーワード

+ +

{{CSSxRef("resize")}} プロパティは、アイテムの大きさが変わるかどうかを物理的な値である horizontal および vertical で指定します。 resize プロパティは論理的なキーワード値にも対応しています。 resize: inline を使用すると、インライン方向の大きさが変わることを許可し、 resize: block を使用すると、ブロック方向の大きさが変わることを許可します。

+ +

both のキーワード値は物理的または論理的に考えて動作します。これは両方を同時に設定します。以下の例を実行してみてください。

+ + + +

{{EmbedGHLiveSample("css-examples/logical/size-resize.html", "100%", 700)}}

+ +
+

なお、現在のところ大きさ変更の論理的プロパティは Firefox のみが対応しています。

+
-- cgit v1.2.3-54-g00ecf