From e16ef28d7ef580733a618d623768f802936fcb12 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 5 Dec 2021 00:28:29 +0900 Subject: フレックスボックスの旧プロパティの文書を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/box-orient/index.html | 108 --------------------------------- files/ja/web/css/box-orient/index.md | 108 +++++++++++++++++++++++++++++++++ 2 files changed, 108 insertions(+), 108 deletions(-) delete mode 100644 files/ja/web/css/box-orient/index.html create mode 100644 files/ja/web/css/box-orient/index.md (limited to 'files/ja/web/css/box-orient') diff --git a/files/ja/web/css/box-orient/index.html b/files/ja/web/css/box-orient/index.html deleted file mode 100644 index 95889a906c..0000000000 --- a/files/ja/web/css/box-orient/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: box-orient -slug: Web/CSS/box-orient -tags: - - CSS - - Non-standard - - Reference -translation_of: Web/CSS/box-orient ---- -
{{CSSRef}}{{Non-standard_header}} -

これはもともと CSS Flexible Box Layout Module の草稿でしたが、より新しい標準に置き換えられました。現在の標準についての情報はフレックスボックスを参照してください。

-
- -

CSS の box-orient プロパティは、要素がその中身をレイアウトする方向が、水平か垂直かを指定します。

- -
/* キーワード値 */
-box-orient: horizontal;
-box-orient: vertical;
-box-orient: inline-axis;
-box-orient: block-axis;
-
-/* グローバル値 */
-box-orient: inherit;
-box-orient: initial;
-box-orient: unset;
-
- -

例えば、 XUL の {{XULElem("box")}} や {{XULElem("hbox")}} 要素は既定で中身を水平にレイアウトするのに対し、XUL の {{XULElem("vbox")}} 要素は既定で中身を垂直にレイアウトします。

- -

HTML DOM 要素は既定で中身をインライン軸に沿ってレイアウトします。この CSS プロパティは HTML 要素のうち CSS の {{CSSxRef("display")}} が {{CSSxRef("box")}} または {{CSSxRef("inline-box")}} の値であるものに対してのみ適用されます。

- -

{{CSSInfo}}

- -

構文

- -

box-orient プロパティは以下の列挙されたキーワード値のうちの一つで指定します。

- -

値

- -
-
horizontal
-
ボックスは、その内容を水平にレイアウトします。
-
vertical
-
ボックスは、その内容を垂直にレイアウトします。
-
inline-axis (HTML)
-
ボックスは、子をインライン軸に沿って表示します。
-
block-axis (HTML)
-
ボックスは、子をブロック軸に沿って表示します。
-
- -

inline-axis と block-axis は書字方向に依存するキーワードであり、英語では、それぞれ horizontal と vertical に対応付けられます。

- -

形式文法

- -{{CSSSyntax}} - -

例

- -

CSS

- -
div.example {
-  display: -moz-box;                /* Mozilla */
-  display: -webkit-box;             /* WebKit */
-  display: box;                     /* 仕様書通り */
-
-  /* 子は垂直に向けられる */
-  -moz-box-orient: horizontal;      /* Mozilla */
-  -webkit-box-orient: horizontal;   /* WebKit */
-  box-orient: horizontal;           /* 仕様書通り */
-}
-
- -

HTML

- -
<div class="example">
-  <p>I will be to the left of my sibling.</p>
-  <p>I will be to the right of my sibling.</p>
-</div>
- -

結果

- -

box-orient プロパティは、例にある上記の二つの {{HTMLElement("p")}} セクションに作用して同じ行に表示するようにし、次のように表示します。

- -

{{ EmbedLiveSample('Examples', 600, 50, '', 'Web/CSS/box-orient') }}

- -

メモ

- -

XUL 要素では、方向は要素の {{XULAttr("orient")}} 属性を使用して設定されるので、このスタイルは無視されます。

- -

仕様書

- - - -

ブラウザーの対応

- -

{{Compat("css.properties.box-orient")}}

- -

関連情報

- - diff --git a/files/ja/web/css/box-orient/index.md b/files/ja/web/css/box-orient/index.md new file mode 100644 index 0000000000..95889a906c --- /dev/null +++ b/files/ja/web/css/box-orient/index.md @@ -0,0 +1,108 @@ +--- +title: box-orient +slug: Web/CSS/box-orient +tags: + - CSS + - Non-standard + - Reference +translation_of: Web/CSS/box-orient +--- +
{{CSSRef}}{{Non-standard_header}} +

これはもともと CSS Flexible Box Layout Module の草稿でしたが、より新しい標準に置き換えられました。現在の標準についての情報はフレックスボックスを参照してください。

+
+ +

CSS の box-orient プロパティは、要素がその中身をレイアウトする方向が、水平か垂直かを指定します。

+ +
/* キーワード値 */
+box-orient: horizontal;
+box-orient: vertical;
+box-orient: inline-axis;
+box-orient: block-axis;
+
+/* グローバル値 */
+box-orient: inherit;
+box-orient: initial;
+box-orient: unset;
+
+ +

例えば、 XUL の {{XULElem("box")}} や {{XULElem("hbox")}} 要素は既定で中身を水平にレイアウトするのに対し、XUL の {{XULElem("vbox")}} 要素は既定で中身を垂直にレイアウトします。

+ +

HTML DOM 要素は既定で中身をインライン軸に沿ってレイアウトします。この CSS プロパティは HTML 要素のうち CSS の {{CSSxRef("display")}} が {{CSSxRef("box")}} または {{CSSxRef("inline-box")}} の値であるものに対してのみ適用されます。

+ +

{{CSSInfo}}

+ +

構文

+ +

box-orient プロパティは以下の列挙されたキーワード値のうちの一つで指定します。

+ +

値

+ +
+
horizontal
+
ボックスは、その内容を水平にレイアウトします。
+
vertical
+
ボックスは、その内容を垂直にレイアウトします。
+
inline-axis (HTML)
+
ボックスは、子をインライン軸に沿って表示します。
+
block-axis (HTML)
+
ボックスは、子をブロック軸に沿って表示します。
+
+ +

inline-axis と block-axis は書字方向に依存するキーワードであり、英語では、それぞれ horizontal と vertical に対応付けられます。

+ +

形式文法

+ +{{CSSSyntax}} + +

例

+ +

CSS

+ +
div.example {
+  display: -moz-box;                /* Mozilla */
+  display: -webkit-box;             /* WebKit */
+  display: box;                     /* 仕様書通り */
+
+  /* 子は垂直に向けられる */
+  -moz-box-orient: horizontal;      /* Mozilla */
+  -webkit-box-orient: horizontal;   /* WebKit */
+  box-orient: horizontal;           /* 仕様書通り */
+}
+
+ +

HTML

+ +
<div class="example">
+  <p>I will be to the left of my sibling.</p>
+  <p>I will be to the right of my sibling.</p>
+</div>
+ +

結果

+ +

box-orient プロパティは、例にある上記の二つの {{HTMLElement("p")}} セクションに作用して同じ行に表示するようにし、次のように表示します。

+ +

{{ EmbedLiveSample('Examples', 600, 50, '', 'Web/CSS/box-orient') }}

+ +

メモ

+ +

XUL 要素では、方向は要素の {{XULAttr("orient")}} 属性を使用して設定されるので、このスタイルは無視されます。

+ +

仕様書

+ + + +

ブラウザーの対応

+ +

{{Compat("css.properties.box-orient")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf