From 72e17b31f45f8fd2973b9baf3d6d01e766a07296 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 31 Dec 2021 11:39:23 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/direction/index.md | 136 +++++++++++++++++------------------- 1 file changed, 66 insertions(+), 70 deletions(-) diff --git a/files/ja/web/css/direction/index.md b/files/ja/web/css/direction/index.md index 025c3ed6c2..5d187f38d4 100644 --- a/files/ja/web/css/direction/index.md +++ b/files/ja/web/css/direction/index.md @@ -2,98 +2,94 @@ title: direction slug: Web/CSS/direction tags: + - BiDi - CSS - - CSS Reference + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.direction translation_of: Web/CSS/direction --- -
{{CSSRef}}
+{{CSSRef}} -

CSS の direction プロパティは文章の記述方向にあわせて設定されるべきです。ヘブライ語やアラビア語のテキストでは rtl を、それ以外では ltr を使います。

+**`direction`** は CSS のプロパティで、テキスト、表の列、水平方向のはみ出しの方向を設定します。右書きの言語（ヘブライ語やアラビア語など）では `rtl` を、左書きの言語（英語やそれ以外の多くの言語）では `ltr` を使います。 -
{{EmbedInteractiveExample("pages/css/direction.html")}}
+{{EmbedInteractiveExample("pages/css/direction.html")}} +なお、テキストの方向はふつうは文書内で（例えば [HTML の `dir` 属性](/ja/docs/Web/HTML/Global_attributes/dir) で）定義するものであり、 `direction` プロパティ直接使用して行うものではありません。 +このプロパティは、基本的な文章の方向と、 {{Cssxref("unicode-bidi")}} プロパティで作られた埋め込み (embeddings) の方向を設定します。また、テキストやブロックレベル要素の既定の文字揃えや、表の行内にセルが流し込まれる方向を決めます。 -

通常、この設定は CSS から直接行うのではなく、文書の一部として HTML の dir 属性を使うなどして行うほうがよいでしょう。

+HTML の `dir` 属性とは異なり、`direction` プロパティは表の列から表のセルには継承されません。これは CSS の継承が文書木に従うためで、表のセルは表の列の中ではなく、行の中にあるからです。 -

このプロパティは基本的な文章の方向と {{Cssxref("unicode-bidi")}} プロパティで作られた 埋め込み (embeddings) の方向を設定します。また、テキストやブロックレベル要素のデフォルトの文字揃えや、テーブルの行内にセルが流し込まれる方向を決めます。

+`direction` プロパティと {{cssxref("unicode-bidi")}} プロパティのみが、 {{cssxref("all")}} 一括指定プロパティの影響を受けません。 -

HTML の dir 属性と違って、direction プロパティはテーブルの列からテーブルのセルに継承されません。これは CSS の継承が文書木に従うためで、テーブルセルはテーブルの列の中ではなく、行の中にあるからです。

+## 構文 -

direction プロパティと {{cssxref("unicode-bidi")}} プロパティは、 {{cssxref("all")}} 短縮プロパティの影響を受けない唯一のプロパティです。

- -

{{cssinfo}}

- -

構文

- -
/* Keyword values */
+```css
+/* キーワード値 */
 direction: ltr;
 direction: rtl;
 
-/* Global values */
+/* グローバル値 */
 direction: inherit;
 direction: initial;
-direction: unset;
+direction: revert; +direction: unset; +``` + +### 値 -

値

+- `ltr` + - : テキストやその他の要素は左から右へと進みます。これが既定値です。 +- `rtl` + - : テキストやその他の要素は右から左へと進みます。 -
-
ltr
-
デフォルト値です。テキストと他の要素は左から右に進みます
-
rtl
-
テキストと他の要素は右から左に進みます
-
+インラインレベル要素で `direction` プロパティに効果を持たせたいときは、{{Cssxref("unicode-bidi")}} プロパティの値が `embed` もしくは `override` である必要があります。 -

インラインレベル要素で direction プロパティに効果を持たせたいときは、{{Cssxref("unicode-bidi")}} プロパティの値が embed もしくは override である必要があります。

+## 公式定義 -

形式文法

+{{cssinfo}} -{{csssyntax("direction")}} +## 形式文法 -

例

+{{csssyntax}} -
blockquote {
+## 例
+
+### 右書きの方向を設定
+
+以下の例では、 2 つのテキスト文字列があり、どちらも `direction: rtl` を使って表示されています。アラビア語のテキストはこの設定で正しく表示されますが、日本語のテキストは句点が異常な位置に表示されるようになりました。
+
+```css
+blockquote {
   direction: rtl;
+  width: 300px;
 }
-
- -

仕様

- - - - - - - - - - - - - - - - - - - - - -
仕様書策定状況コメント
{{SpecName('CSS3 Writing Modes', '#direction', 'direction')}}{{Spec2('CSS3 Writing Modes')}}変更なし
{{SpecName('CSS2.1', 'visuren.html#direction', 'direction')}}{{Spec2('CSS2.1')}}初回定義
- -

ブラウザ実装状況

- -
-
- - -

{{Compat("css.properties.direction")}}

-
-
- -

関連情報

- - +``` + +```html +
+

この段落は日本語ですが、間違って右から左へ書かれています。

+

+ +
+

هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.

+

+``` + +{{EmbedLiveSample('Setting_right-to-left_direction', '100%', 200)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{Cssxref("unicode-bidi")}} +- {{Cssxref("writing-mode")}} +- HTML の {{htmlattrxref("dir")}} グローバル属性 -- cgit v1.2.3-54-g00ecf