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 +++++++++++++++++++++ 2 files changed, 139 insertions(+), 139 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 (limited to 'files/ja/web/css/css_logical_properties/floating_and_positioning') 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)}}

+ +

これは、物理的な方向ではなく、先頭と末尾を使用したボックス配置を使用した場合に、より一貫性のある方法で動作します。

-- cgit v1.2.3-54-g00ecf