From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/box-orient/index.html | 110 +++++++++++++++++++++++++++++++++ 1 file changed, 110 insertions(+) create mode 100644 files/ja/web/css/box-orient/index.html (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 new file mode 100644 index 0000000000..35708ac6e3 --- /dev/null +++ b/files/ja/web/css/box-orient/index.html @@ -0,0 +1,110 @@ +--- +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