From fb615c08a16488e1f72311382425a1e6fff3c13b Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 5 Dec 2021 01:34:05 +0900 Subject: 2021/12/05 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/box-orient/index.md | 119 +++++++++++++++++------------------ 1 file changed, 59 insertions(+), 60 deletions(-) (limited to 'files/ja/web/css/box-orient/index.md') diff --git a/files/ja/web/css/box-orient/index.md b/files/ja/web/css/box-orient/index.md index 95889a906c..7f2401d93e 100644 --- a/files/ja/web/css/box-orient/index.md +++ b/files/ja/web/css/box-orient/index.md @@ -3,17 +3,20 @@ title: box-orient slug: Web/CSS/box-orient tags: - CSS - - Non-standard - - Reference + - 標準外 + - リファレンス + - recipe:css-property +browser-compat: css.properties.box-orient translation_of: Web/CSS/box-orient --- -
{{CSSRef}}{{Non-standard_header}} -

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

-
+{{CSSRef}}{{Non-standard_header}} + +> **Warning:** これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。現在の標準についての情報は[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)を参照してください。 -

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

+**`box-orient`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素がその中身をレイアウトする方向が、水平か垂直かを指定します。 -
/* キーワード値 */
+```css
+/* キーワード値 */
 box-orient: horizontal;
 box-orient: vertical;
 box-orient: inline-axis;
@@ -23,42 +26,56 @@ box-orient: block-axis;
 box-orient: inherit;
 box-orient: initial;
 box-orient: unset;
-
+``` + +## 構文 + +`box-orient` プロパティは以下の列挙されたキーワード値のうちの一つで指定します。 -

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

+### 値 -

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

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

{{CSSInfo}}

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

構文

+## 解説 -

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

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

値

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

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

+## 形式文法 -

形式文法

+{{csssyntax}} -{{CSSSyntax}} +## 例 -

例

+### ボックスを水平方向に設定 -

CSS

+ここでは、`box-orient`プロパティにより、例題の 2 つの {{HTMLElement("p")}} セクションが同じ行に表示されます。 + +#### HTML + +```html +
+

I will be to the left of my sibling.

+

I will be to the right of my sibling.

+
+``` -
div.example {
+#### CSS
+
+```css
+div.example {
   display: -moz-box;                /* Mozilla */
   display: -webkit-box;             /* WebKit */
   display: box;                     /* 仕様書通り */
@@ -68,41 +85,23 @@ box-orient: unset;
   -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")}} 属性を使用して設定されるので、このスタイルは無視されます。

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

仕様書

+## 仕様書 - +標準仕様には含まれていません。 -

ブラウザーの対応

+## ブラウザーの互換性 -

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

+{{Compat}} -

関連情報

+## 関連情報 - +- {{CSSxRef("box-direction")}} +- {{CSSxRef("box-pack")}} +- {{CSSxRef("box-align")}} +- {{CSSxRef("flex-direction")}} -- cgit v1.2.3-54-g00ecf