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-align/index.html | 144 ------------------------------ files/ja/web/css/box-align/index.md | 144 ++++++++++++++++++++++++++++++ files/ja/web/css/box-direction/index.html | 97 -------------------- files/ja/web/css/box-direction/index.md | 97 ++++++++++++++++++++ files/ja/web/css/box-flex/index.html | 112 ----------------------- files/ja/web/css/box-flex/index.md | 112 +++++++++++++++++++++++ files/ja/web/css/box-lines/index.html | 76 ---------------- files/ja/web/css/box-lines/index.md | 76 ++++++++++++++++ files/ja/web/css/box-orient/index.html | 108 ---------------------- files/ja/web/css/box-orient/index.md | 108 ++++++++++++++++++++++ files/ja/web/css/box-pack/index.html | 142 ----------------------------- files/ja/web/css/box-pack/index.md | 142 +++++++++++++++++++++++++++++ 12 files changed, 679 insertions(+), 679 deletions(-) delete mode 100644 files/ja/web/css/box-align/index.html create mode 100644 files/ja/web/css/box-align/index.md delete mode 100644 files/ja/web/css/box-direction/index.html create mode 100644 files/ja/web/css/box-direction/index.md delete mode 100644 files/ja/web/css/box-flex/index.html create mode 100644 files/ja/web/css/box-flex/index.md delete mode 100644 files/ja/web/css/box-lines/index.html create mode 100644 files/ja/web/css/box-lines/index.md delete mode 100644 files/ja/web/css/box-orient/index.html create mode 100644 files/ja/web/css/box-orient/index.md delete mode 100644 files/ja/web/css/box-pack/index.html create mode 100644 files/ja/web/css/box-pack/index.md diff --git a/files/ja/web/css/box-align/index.html b/files/ja/web/css/box-align/index.html deleted file mode 100644 index cf3b2068ce..0000000000 --- a/files/ja/web/css/box-align/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: box-align -slug: Web/CSS/box-align -tags: - - CSS - - CSS プロパティ - - Non-standard - - Reference -translation_of: Web/CSS/box-align ---- -
{{CSSRef}}{{Non-standard_header}}{{warning("このプロパティは、当初の CSS Flexible Box Layout Module の草案段階のものでしたが、既により新しい標準のものが取って変わっています。")}}
- -

box-align は、交差軸方向に子要素をどう整列させるかを定義するCSSプロパティです。ボックス内に余分なスペースがある場合にかぎり、その効果を確認することができます。

- -

現在の標準仕様に関する情報については、フレックスボックスを確認してください。

- -
/* キーワード値 */
-box-align: start;
-box-align: center;
-box-align: end;
-box-align: baseline;
-box-align: stretch;
-
-/* グローバル値 */
-box-lines: inherit;
-box-lines: initial;
-box-lines: unset;
-
- -

配置する方向は、その要素の向き (水平か垂直か) に依存します。

- -

{{cssinfo}}

- -

構文

- -

box-align プロパティは、 以下に記載する値で定義されます。

- -

値

- -
-
start
-
ボックス内のコンテンツを先頭に寄せて、末尾に余分なスペースを残します。
-
center
-
ボックス内のコンテンツを中央に寄せて、余分なスペースを等分に分割し始端と終端に残します。
-
end
-
ボックス内のコンテンツを末尾に寄せて、先頭に余分なスペースを残します。
-
baseline
-
ボックス内のコンテンツが持つテキストのベースラインに整列させます。これはボックス内のコンテンツの向きが水平である場合にのみ適用されます。
-
stretch
-
ボックス内に余分なスペースがなくなるようコンテンツを引き伸ばします。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -
<!DOCTYPE html>
-<html>
-<head>
-<title>CSS box-align example</title>
-<style>
-div.example {
-  display: box;                   /* 仕様書通り */
-  display: -moz-box;              /* Mozilla */
-  display: -webkit-box;           /* WebKit */
-
-  /* ボックスの高さを子要素より高くし、
-     box-pack のためのスペースを確保する */
-  height: 400px;
-
-  /* ボックスの幅を子要素より広くし、
-     box-align のためのスペースを確保する */
-  width: 300px;
-
-  /* 子要素の向きは垂直方向にする */
-  box-orient: vertical;           /* 仕様書通り */
-  -moz-box-orient: vertical;      /* Mozilla */
-  -webkit-box-orient: vertical;   /* WebKit */
-
-  /* 子要素をボックス内の水平方向に対して中央に整列させる */
-  box-align: center;              /* 仕様書通り */
-  -moz-box-align: center;         /* Mozilla */
-  -webkit-box-align: center;      /* WebKit */
-
-  /* 子要素をボックス内の終端に寄せる */
-  box-pack: end;                  /* 仕様書通り */
-  -moz-box-pack: end;             /* Mozilla */
-  -webkit-box-pack: end;          /* WebKit */
-}
-
-div.example > p {
-  /* 子要素を親要素の幅より狭くし、
-  box-align のためのスペースを確保する */
-  width: 200px;
-}
-</style>
-</head>
-<body>
-  <div class="example">
-    <p>I will be second from the bottom of div.example, centered horizontally.</p>
-    <p>I will be on the bottom of div.example, centered horizontally.</p>
-  </div>
-</body>
-</html>
- -

メモ

- -

配置の用途で start と定義されるボックスの辺は、ボックスの向きに依存します。

- - - - - - - - - - - - -
Horizontaltop
Verticalleft
- -

start と反対方向の辺が end と定義されます。

- -

その要素の align 属性を使って整列する方向を指定した場合、スタイルで指定した値は無視されます。

- -

仕様書

- - - -

ブラウザーの対応

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/box-align/index.md b/files/ja/web/css/box-align/index.md new file mode 100644 index 0000000000..cf3b2068ce --- /dev/null +++ b/files/ja/web/css/box-align/index.md @@ -0,0 +1,144 @@ +--- +title: box-align +slug: Web/CSS/box-align +tags: + - CSS + - CSS プロパティ + - Non-standard + - Reference +translation_of: Web/CSS/box-align +--- +
{{CSSRef}}{{Non-standard_header}}{{warning("このプロパティは、当初の CSS Flexible Box Layout Module の草案段階のものでしたが、既により新しい標準のものが取って変わっています。")}}
+ +

box-align は、交差軸方向に子要素をどう整列させるかを定義するCSSプロパティです。ボックス内に余分なスペースがある場合にかぎり、その効果を確認することができます。

+ +

現在の標準仕様に関する情報については、フレックスボックスを確認してください。

+ +
/* キーワード値 */
+box-align: start;
+box-align: center;
+box-align: end;
+box-align: baseline;
+box-align: stretch;
+
+/* グローバル値 */
+box-lines: inherit;
+box-lines: initial;
+box-lines: unset;
+
+ +

配置する方向は、その要素の向き (水平か垂直か) に依存します。

+ +

{{cssinfo}}

+ +

構文

+ +

box-align プロパティは、 以下に記載する値で定義されます。

+ +

値

+ +
+
start
+
ボックス内のコンテンツを先頭に寄せて、末尾に余分なスペースを残します。
+
center
+
ボックス内のコンテンツを中央に寄せて、余分なスペースを等分に分割し始端と終端に残します。
+
end
+
ボックス内のコンテンツを末尾に寄せて、先頭に余分なスペースを残します。
+
baseline
+
ボックス内のコンテンツが持つテキストのベースラインに整列させます。これはボックス内のコンテンツの向きが水平である場合にのみ適用されます。
+
stretch
+
ボックス内に余分なスペースがなくなるようコンテンツを引き伸ばします。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +
<!DOCTYPE html>
+<html>
+<head>
+<title>CSS box-align example</title>
+<style>
+div.example {
+  display: box;                   /* 仕様書通り */
+  display: -moz-box;              /* Mozilla */
+  display: -webkit-box;           /* WebKit */
+
+  /* ボックスの高さを子要素より高くし、
+     box-pack のためのスペースを確保する */
+  height: 400px;
+
+  /* ボックスの幅を子要素より広くし、
+     box-align のためのスペースを確保する */
+  width: 300px;
+
+  /* 子要素の向きは垂直方向にする */
+  box-orient: vertical;           /* 仕様書通り */
+  -moz-box-orient: vertical;      /* Mozilla */
+  -webkit-box-orient: vertical;   /* WebKit */
+
+  /* 子要素をボックス内の水平方向に対して中央に整列させる */
+  box-align: center;              /* 仕様書通り */
+  -moz-box-align: center;         /* Mozilla */
+  -webkit-box-align: center;      /* WebKit */
+
+  /* 子要素をボックス内の終端に寄せる */
+  box-pack: end;                  /* 仕様書通り */
+  -moz-box-pack: end;             /* Mozilla */
+  -webkit-box-pack: end;          /* WebKit */
+}
+
+div.example > p {
+  /* 子要素を親要素の幅より狭くし、
+  box-align のためのスペースを確保する */
+  width: 200px;
+}
+</style>
+</head>
+<body>
+  <div class="example">
+    <p>I will be second from the bottom of div.example, centered horizontally.</p>
+    <p>I will be on the bottom of div.example, centered horizontally.</p>
+  </div>
+</body>
+</html>
+ +

メモ

+ +

配置の用途で start と定義されるボックスの辺は、ボックスの向きに依存します。

+ + + + + + + + + + + + +
Horizontaltop
Verticalleft
+ +

start と反対方向の辺が end と定義されます。

+ +

その要素の align 属性を使って整列する方向を指定した場合、スタイルで指定した値は無視されます。

+ +

仕様書

+ + + +

ブラウザーの対応

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/box-direction/index.html b/files/ja/web/css/box-direction/index.html deleted file mode 100644 index ec6b935a02..0000000000 --- a/files/ja/web/css/box-direction/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: box-direction -slug: Web/CSS/box-direction -tags: - - CSS - - Non-standard - - Reference - - box-direction -translation_of: Web/CSS/box-direction ---- -
{{CSSRef}}{{Non-standard_header}}
- -
-

これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。以前の標準であった box-direction は flex-direction に置き換えられたので、 -moz-box-direction は XUL でのみ使用されます。現在の標準についての情報はフレックスボックスを参照してください。

-
- -

CSS の box-direction プロパティは、ボックスが内容を通常通りに (上または左から) 配置するか、逆方向に (下または右から) 配置するかを指定します。

- -
/* キーワード値 */
-box-direction: normal;
-box-direction: reverse;
-
-/* グローバル値 */
-box-direction: inherit;
-box-direction: initial;
-box-direction: unset;
-
- -

{{CSSInfo}}

- -

構文

- -

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

- -

値

- -
-
normal
-
ボックスが内容を先頭 (左または上の端) から配置します。
-
reverse
-
ボックスが内容を末尾 (右または下の端) から配置します。
-
- -

形式文法

- -{{CSSSyntax}} - -

例

- -
.example {
-  /* bottom-to-top layout */
-  -moz-box-direction: reverse;      /* Mozilla */
-  -webkit-box-direction: reverse;   /* WebKit */
-  box-direction: reverse;           /* 仕様書通り */
-}
-
- -

メモ

- -

配置目的で start で示されるボックスの端は、ボックスの方向に依存します。

- - - - - - - - - - - - -
Horizontalleft
Verticaltop
- -

start と反対側の辺は end で示します。

- -

書字方向が要素の dir 属性を使用して設定されている場合は、このスタイルは無視されます。

- -

仕様書

- - - -

ブラウザーの対応

- -

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

- -

関連情報

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

これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。以前の標準であった box-direction は flex-direction に置き換えられたので、 -moz-box-direction は XUL でのみ使用されます。現在の標準についての情報はフレックスボックスを参照してください。

+
+ +

CSS の box-direction プロパティは、ボックスが内容を通常通りに (上または左から) 配置するか、逆方向に (下または右から) 配置するかを指定します。

+ +
/* キーワード値 */
+box-direction: normal;
+box-direction: reverse;
+
+/* グローバル値 */
+box-direction: inherit;
+box-direction: initial;
+box-direction: unset;
+
+ +

{{CSSInfo}}

+ +

構文

+ +

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

+ +

値

+ +
+
normal
+
ボックスが内容を先頭 (左または上の端) から配置します。
+
reverse
+
ボックスが内容を末尾 (右または下の端) から配置します。
+
+ +

形式文法

+ +{{CSSSyntax}} + +

例

+ +
.example {
+  /* bottom-to-top layout */
+  -moz-box-direction: reverse;      /* Mozilla */
+  -webkit-box-direction: reverse;   /* WebKit */
+  box-direction: reverse;           /* 仕様書通り */
+}
+
+ +

メモ

+ +

配置目的で start で示されるボックスの端は、ボックスの方向に依存します。

+ + + + + + + + + + + + +
Horizontalleft
Verticaltop
+ +

start と反対側の辺は end で示します。

+ +

書字方向が要素の dir 属性を使用して設定されている場合は、このスタイルは無視されます。

+ +

仕様書

+ + + +

ブラウザーの対応

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/box-flex/index.html b/files/ja/web/css/box-flex/index.html deleted file mode 100644 index 618e390843..0000000000 --- a/files/ja/web/css/box-flex/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: box-flex -slug: Web/CSS/box-flex -tags: - - CSS - - CSS プロパティ - - Non-standard - - Reference - - box-flex -translation_of: Web/CSS/box-flex ---- -
{{CSSRef}}{{Non-standard_header}}
- -
-

このプロパティは XUL ボックスモデルの部品を制御するためのものです。古い CSS Flexible Box Layout Module の草稿の 'box-flex' (このプロパティの元になったもの) または '-webkit-box-flex' (草稿の元になったもの) の動作のどちらとも一致しません。現在の標準についての情報はフレックスボックスを参照してください。

-
- -

CSS の -moz-box-flex および -webkit-box-flex プロパティは、 -moz-box または -webkit-box が、これを内包するボックスを、包含ボックスのレイアウトの方向で埋めるまで拡張する方法を指定します。

- -
/* <number> 値 */
--moz-box-flex: 0;
--moz-box-flex: 2;
--moz-box-flex: 3.5;
--webkit-box-flex: 0;
--webkit-box-flex: 2;
--webkit-box-flex: 3.5;
-
-/* Global values */
--moz-box-flex: inherit;
--moz-box-flex: initial;
--moz-box-flex: unset;
--webkit-box-flex: inherit;
--webkit-box-flex: initial;
--webkit-box-flex: unset;
-
- -
{{CSSInfo}}
- -

構文

- -

box-flex プロパティは {{CSSxRef("<number>")}} として指定されます。値が 0 の場合、ボックスは拡張されません。値が 0 より大きい場合は、ボックスは利用可能な余白の比率で拡張されます。

- -

形式文法

- -{{CSSSyntax}} - -

例

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <title>-moz-box-flex example</title>
-    <style>
-      div.example {
-        display: -moz-box;
-        display: -webkit-box;
-        border: 1px solid black;
-        width: 100%;
-      }
-      div.example > p:nth-child(1) {
-        -moz-box-flex: 1;       /* Mozilla */
-        -webkit-box-flex: 1;    /* WebKit */
-        border: 1px solid black;
-      }
-      div.example > p:nth-child(2) {
-        -moz-box-flex: 0;       /* Mozilla */
-        -webkit-box-flex: 0;    /* WebKit */
-        border: 1px solid black;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="example">
-      <p>I will expand to fill extra space</p>
-      <p>I will not expand</p>
-    </div>
-  </body>
-</html>
-
- -

メモ

- -

包含ボックスは利用可能な余白を、中のそれぞれの要素におけるフレックス値の比率で拡張します。

- -

フレックス値がゼロになっている中の要素は拡張されません。

- -

フレックス値がゼロではない中の要素が一つしかない場合は、有効な余白を埋めるまで拡張されます。

- -

同じフレックス値を持つ中の要素は、同じ絶対量だけ拡張されます。

- -

フレックス値が要素の flex 属性を使用して設定された場合は、スタイルは無視されます。

- -

包含ボックス内で同じ寸法の XUL 要素を作成するには、包含ボックスの equalsize 属性を always の値に設定してください。この属性には対応する CSS プロパティはありません。

- -

包含ボックス内のすべての中の要素を同じ寸法にするトリックとしては、すべてに対して固定の寸法 (例えば height: 0) と、同じゼロより大きい box-flex の値 (例えば -moz-box-flex: 1) を設定することです。

- -

仕様書

- -

このプロパティは標準外の拡張です。古い CSS3 Flexbox 仕様書の草稿には box-flex プロパティが定義されていましたが、この草稿はその後で置き換えられました。

- -

ブラウザーの対応

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

関連情報

- - diff --git a/files/ja/web/css/box-flex/index.md b/files/ja/web/css/box-flex/index.md new file mode 100644 index 0000000000..618e390843 --- /dev/null +++ b/files/ja/web/css/box-flex/index.md @@ -0,0 +1,112 @@ +--- +title: box-flex +slug: Web/CSS/box-flex +tags: + - CSS + - CSS プロパティ + - Non-standard + - Reference + - box-flex +translation_of: Web/CSS/box-flex +--- +
{{CSSRef}}{{Non-standard_header}}
+ +
+

このプロパティは XUL ボックスモデルの部品を制御するためのものです。古い CSS Flexible Box Layout Module の草稿の 'box-flex' (このプロパティの元になったもの) または '-webkit-box-flex' (草稿の元になったもの) の動作のどちらとも一致しません。現在の標準についての情報はフレックスボックスを参照してください。

+
+ +

CSS の -moz-box-flex および -webkit-box-flex プロパティは、 -moz-box または -webkit-box が、これを内包するボックスを、包含ボックスのレイアウトの方向で埋めるまで拡張する方法を指定します。

+ +
/* <number> 値 */
+-moz-box-flex: 0;
+-moz-box-flex: 2;
+-moz-box-flex: 3.5;
+-webkit-box-flex: 0;
+-webkit-box-flex: 2;
+-webkit-box-flex: 3.5;
+
+/* Global values */
+-moz-box-flex: inherit;
+-moz-box-flex: initial;
+-moz-box-flex: unset;
+-webkit-box-flex: inherit;
+-webkit-box-flex: initial;
+-webkit-box-flex: unset;
+
+ +
{{CSSInfo}}
+ +

構文

+ +

box-flex プロパティは {{CSSxRef("<number>")}} として指定されます。値が 0 の場合、ボックスは拡張されません。値が 0 より大きい場合は、ボックスは利用可能な余白の比率で拡張されます。

+ +

形式文法

+ +{{CSSSyntax}} + +

例

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <title>-moz-box-flex example</title>
+    <style>
+      div.example {
+        display: -moz-box;
+        display: -webkit-box;
+        border: 1px solid black;
+        width: 100%;
+      }
+      div.example > p:nth-child(1) {
+        -moz-box-flex: 1;       /* Mozilla */
+        -webkit-box-flex: 1;    /* WebKit */
+        border: 1px solid black;
+      }
+      div.example > p:nth-child(2) {
+        -moz-box-flex: 0;       /* Mozilla */
+        -webkit-box-flex: 0;    /* WebKit */
+        border: 1px solid black;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="example">
+      <p>I will expand to fill extra space</p>
+      <p>I will not expand</p>
+    </div>
+  </body>
+</html>
+
+ +

メモ

+ +

包含ボックスは利用可能な余白を、中のそれぞれの要素におけるフレックス値の比率で拡張します。

+ +

フレックス値がゼロになっている中の要素は拡張されません。

+ +

フレックス値がゼロではない中の要素が一つしかない場合は、有効な余白を埋めるまで拡張されます。

+ +

同じフレックス値を持つ中の要素は、同じ絶対量だけ拡張されます。

+ +

フレックス値が要素の flex 属性を使用して設定された場合は、スタイルは無視されます。

+ +

包含ボックス内で同じ寸法の XUL 要素を作成するには、包含ボックスの equalsize 属性を always の値に設定してください。この属性には対応する CSS プロパティはありません。

+ +

包含ボックス内のすべての中の要素を同じ寸法にするトリックとしては、すべてに対して固定の寸法 (例えば height: 0) と、同じゼロより大きい box-flex の値 (例えば -moz-box-flex: 1) を設定することです。

+ +

仕様書

+ +

このプロパティは標準外の拡張です。古い CSS3 Flexbox 仕様書の草稿には box-flex プロパティが定義されていましたが、この草稿はその後で置き換えられました。

+ +

ブラウザーの対応

+ +
{{Compat("css.properties.box-flex")}}
+ +

関連情報

+ + diff --git a/files/ja/web/css/box-lines/index.html b/files/ja/web/css/box-lines/index.html deleted file mode 100644 index c665a22a42..0000000000 --- a/files/ja/web/css/box-lines/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: box-lines -slug: Web/CSS/box-lines -tags: - - CSS - - CSS プロパティ - - Non-standard - - Reference - - 標準外 -translation_of: Web/CSS/box-lines ---- -
{{CSSRef}}{{Non-standard_header}}
- -
-

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

-
- -

CSS の box-lines プロパティは、ボックスの配置行 (水平方向のボックスでは行、垂直方向のボックスでは列) が単一なのか複数なのかを指定します。

- -
/* キーワード値 */
-box-lines: single;
-box-lines: multiple;
-
-/* グローバル値 */
-box-lines: inherit;
-box-lines: initial;
-box-lines: unset;
-
- -

既定では、水平方向のボックスは子を単一行で配置し、垂直方向のボックスは子を単一列で配置します。この動作は box-lines プロパティを使用して変更することができます。既定値は single であり、すべての要素が単一の行または列で配置され、それに合わない要素は単純にあふれさせて表示することを意味します。

- -

しかし、 multiple の値が指定された場合、ボックスはすべての子を収容できるように複数の配置行 (つまり、複数の行または列) に拡張することができます。ボックスはできるだけ少ない配置行数で子が収まるように、必要に応じて最小幅または高さまで縮小します。

- -

水平ボックスの中の子が最小幅まで縮小されても配置行上に収まらない場合、子は次の配置行上に1つずつ、残りが前の配置行に収まるまで移動されます。この手続は任意の配置行数に達するまで繰り返されます。配置行上に収まり切れない要素が1つしかない場合、要素はその配置行に留まりボックスの外にあふれます。その後の配置行は、順方向のボックスであれば前の配置行の下に、逆方向のボックスであれば上に配置されます。配置行の高さはその配置行内で最も高い子の高さになります。各配置行にある最大の要素のマージンを除いて、配置行間に余分な余白は表示されません。配置行の高さを計算するために、計算値が auto であるマージンは値が 0 として扱われます。

- -

同様の処理が垂直配置ボックスの子に対しても行われます。後の配置行は、順方向のボックスであれば前の配置行の右側に配置され、逆方向のボックスであれば前の配置行の左側に配置されます。

- -

配置行の数が決定すると、 {{CSSxRef("box-flex")}} の計算値が 0 以外である要素は、配置行の残りの空間を埋めるために必要なだけ引き伸ばされます。それぞれの配置行は個別に計算されるので、 {{CSSxRef("box-flex")}} と {{CSSxRef("box-flex-groups")}} を評価するときに、その配置行上の要素だけが考慮されます。配置行内の要素のまとめ方も、 {{CSSxRef("box-pack")}} プロパティで定義されている通り、それぞれの行で個別に計算されます。

- -
{{CSSInfo}}
- -

構文

- -

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

- -

値

- -
-
single
-
ボックスの要素は単一の行または列に配置されます。
-
multiple
-
ボックスの要素は複数の行または列に配置されます。
-
- -

形式文法

- -{{CSSSyntax}} - -

仕様書

- - - -

ブラウザーの対応

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

関連情報

- - diff --git a/files/ja/web/css/box-lines/index.md b/files/ja/web/css/box-lines/index.md new file mode 100644 index 0000000000..c665a22a42 --- /dev/null +++ b/files/ja/web/css/box-lines/index.md @@ -0,0 +1,76 @@ +--- +title: box-lines +slug: Web/CSS/box-lines +tags: + - CSS + - CSS プロパティ + - Non-standard + - Reference + - 標準外 +translation_of: Web/CSS/box-lines +--- +
{{CSSRef}}{{Non-standard_header}}
+ +
+

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

+
+ +

CSS の box-lines プロパティは、ボックスの配置行 (水平方向のボックスでは行、垂直方向のボックスでは列) が単一なのか複数なのかを指定します。

+ +
/* キーワード値 */
+box-lines: single;
+box-lines: multiple;
+
+/* グローバル値 */
+box-lines: inherit;
+box-lines: initial;
+box-lines: unset;
+
+ +

既定では、水平方向のボックスは子を単一行で配置し、垂直方向のボックスは子を単一列で配置します。この動作は box-lines プロパティを使用して変更することができます。既定値は single であり、すべての要素が単一の行または列で配置され、それに合わない要素は単純にあふれさせて表示することを意味します。

+ +

しかし、 multiple の値が指定された場合、ボックスはすべての子を収容できるように複数の配置行 (つまり、複数の行または列) に拡張することができます。ボックスはできるだけ少ない配置行数で子が収まるように、必要に応じて最小幅または高さまで縮小します。

+ +

水平ボックスの中の子が最小幅まで縮小されても配置行上に収まらない場合、子は次の配置行上に1つずつ、残りが前の配置行に収まるまで移動されます。この手続は任意の配置行数に達するまで繰り返されます。配置行上に収まり切れない要素が1つしかない場合、要素はその配置行に留まりボックスの外にあふれます。その後の配置行は、順方向のボックスであれば前の配置行の下に、逆方向のボックスであれば上に配置されます。配置行の高さはその配置行内で最も高い子の高さになります。各配置行にある最大の要素のマージンを除いて、配置行間に余分な余白は表示されません。配置行の高さを計算するために、計算値が auto であるマージンは値が 0 として扱われます。

+ +

同様の処理が垂直配置ボックスの子に対しても行われます。後の配置行は、順方向のボックスであれば前の配置行の右側に配置され、逆方向のボックスであれば前の配置行の左側に配置されます。

+ +

配置行の数が決定すると、 {{CSSxRef("box-flex")}} の計算値が 0 以外である要素は、配置行の残りの空間を埋めるために必要なだけ引き伸ばされます。それぞれの配置行は個別に計算されるので、 {{CSSxRef("box-flex")}} と {{CSSxRef("box-flex-groups")}} を評価するときに、その配置行上の要素だけが考慮されます。配置行内の要素のまとめ方も、 {{CSSxRef("box-pack")}} プロパティで定義されている通り、それぞれの行で個別に計算されます。

+ +
{{CSSInfo}}
+ +

構文

+ +

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

+ +

値

+ +
+
single
+
ボックスの要素は単一の行または列に配置されます。
+
multiple
+
ボックスの要素は複数の行または列に配置されます。
+
+ +

形式文法

+ +{{CSSSyntax}} + +

仕様書

+ + + +

ブラウザーの対応

+ +
{{Compat("css.properties.box-lines")}}
+ +

関連情報

+ + 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")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/box-pack/index.html b/files/ja/web/css/box-pack/index.html deleted file mode 100644 index 14b15998fe..0000000000 --- a/files/ja/web/css/box-pack/index.html +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: box-pack -slug: Web/CSS/box-pack -tags: - - CSS - - CSS プロパティ - - Non-standard - - Reference - - box-pack -translation_of: Web/CSS/box-pack ---- -
{{CSSRef}}{{Non-standard_header}}
- -
-

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

-
- -

CSS の -moz-box-pack および -webkit-box-pack プロパティは、 -moz-box または -webkit-box がどのようにレイアウトの方向に内容をまとめるかを指定します。この効果はボックス内に余白がある場合のみ見ることができます。

- -
/* キーワード値 */
-box-pack: start;
-box-pack: center;
-box-pack: end;
-box-pack: justify;
-
-/* グローバル値 */
-box-pack: inherit;
-box-pack: initial;
-box-pack: unset;
-
- -

レイアウトの方向は要素の方向、 horizontal または vertical に依存します。

- -
{{CSSInfo}}
- -

構文

- -

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

- -

値

- -
-
start
-
ボックスは内容を先頭にまとめ、残りの余白を末尾に残します。
-
center
-
ボックスは内容を中央にまとめ、残りの余白を先頭と末尾に均等に分配します。
-
end
-
ボックスは内容を末尾にまとめ、残りの余白を先頭に残します。
-
justify
-
余白はそれぞれの子の間に均等に配分され、最初の子の前と最後の子の後には余白が配置されません。子が一つだけであれば、値が start であるのと同様に扱われます。
-
- -

形式文法

- -{{CSSSyntax}} - -

例

- -
div.example {
-  border-style: solid;
-
-  display: -moz-box; /* Mozilla */
-  display: -webkit-box; /* WebKit */
-
-  /* このボックスを子よりも高くし、
-     box-pack のための余裕を作る */
-  height: 300px;
-  /* このボックスを、水平方向に中央揃えされた
-     内容を表示するのに十分な幅にする */
-  width: 300px;
-
-  /* 子を垂直方向に並べる */
-  -moz-box-orient: vertical; /* Mozilla */
-  -webkit-box-orient: vertical; /* WebKit */
-
-  /* 子をこのボックスの水平方向に中央揃えする */
-  -moz-box-align: center; /* Mozilla */
-  -webkit-box-align: center; /* WebKit */
-
-  /* 子をこのボックスの下にまとめる */
-  -moz-box-pack: end;             /* Mozilla */
-  -webkit-box-pack: end;          /* WebKit */
-}
-
-div.example p {
-  /* 子を親より狭くして、
-     box-align のための余裕を作る */
-  width: 200px;
-}
-
- -
<div class="example">
-  <p>I will be second from the bottom of div.example, centered horizontally.</p>
-  <p>I will be on the bottom of div.example, centered horizontally.</p>
-</div>
-
- -
{{EmbedLiveSample('Examples', 310, 310)}}
- -

メモ

- -

まとめる目的で start で示されるボックスの端は、ボックスの向きと方向に依存します。

- - - - - - - - - - - - - - - - - - - -
 NormalReverse
Horizontal左右
Vertical上下
- -

start と反対の端は end で表されます。

- -

まとめ方が要素の pack 属性を使用して設定されていた場合は、スタイルは無視されます。

- -

仕様書

- -

このプロパティは標準外ですが、 CSS3 Flexbox の早期の草稿に似たプロパティが現れ、仕様書のより新しい版で置き換えられました。

- -

ブラウザーの対応

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

関連情報

- - diff --git a/files/ja/web/css/box-pack/index.md b/files/ja/web/css/box-pack/index.md new file mode 100644 index 0000000000..14b15998fe --- /dev/null +++ b/files/ja/web/css/box-pack/index.md @@ -0,0 +1,142 @@ +--- +title: box-pack +slug: Web/CSS/box-pack +tags: + - CSS + - CSS プロパティ + - Non-standard + - Reference + - box-pack +translation_of: Web/CSS/box-pack +--- +
{{CSSRef}}{{Non-standard_header}}
+ +
+

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

+
+ +

CSS の -moz-box-pack および -webkit-box-pack プロパティは、 -moz-box または -webkit-box がどのようにレイアウトの方向に内容をまとめるかを指定します。この効果はボックス内に余白がある場合のみ見ることができます。

+ +
/* キーワード値 */
+box-pack: start;
+box-pack: center;
+box-pack: end;
+box-pack: justify;
+
+/* グローバル値 */
+box-pack: inherit;
+box-pack: initial;
+box-pack: unset;
+
+ +

レイアウトの方向は要素の方向、 horizontal または vertical に依存します。

+ +
{{CSSInfo}}
+ +

構文

+ +

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

+ +

値

+ +
+
start
+
ボックスは内容を先頭にまとめ、残りの余白を末尾に残します。
+
center
+
ボックスは内容を中央にまとめ、残りの余白を先頭と末尾に均等に分配します。
+
end
+
ボックスは内容を末尾にまとめ、残りの余白を先頭に残します。
+
justify
+
余白はそれぞれの子の間に均等に配分され、最初の子の前と最後の子の後には余白が配置されません。子が一つだけであれば、値が start であるのと同様に扱われます。
+
+ +

形式文法

+ +{{CSSSyntax}} + +

例

+ +
div.example {
+  border-style: solid;
+
+  display: -moz-box; /* Mozilla */
+  display: -webkit-box; /* WebKit */
+
+  /* このボックスを子よりも高くし、
+     box-pack のための余裕を作る */
+  height: 300px;
+  /* このボックスを、水平方向に中央揃えされた
+     内容を表示するのに十分な幅にする */
+  width: 300px;
+
+  /* 子を垂直方向に並べる */
+  -moz-box-orient: vertical; /* Mozilla */
+  -webkit-box-orient: vertical; /* WebKit */
+
+  /* 子をこのボックスの水平方向に中央揃えする */
+  -moz-box-align: center; /* Mozilla */
+  -webkit-box-align: center; /* WebKit */
+
+  /* 子をこのボックスの下にまとめる */
+  -moz-box-pack: end;             /* Mozilla */
+  -webkit-box-pack: end;          /* WebKit */
+}
+
+div.example p {
+  /* 子を親より狭くして、
+     box-align のための余裕を作る */
+  width: 200px;
+}
+
+ +
<div class="example">
+  <p>I will be second from the bottom of div.example, centered horizontally.</p>
+  <p>I will be on the bottom of div.example, centered horizontally.</p>
+</div>
+
+ +
{{EmbedLiveSample('Examples', 310, 310)}}
+ +

メモ

+ +

まとめる目的で start で示されるボックスの端は、ボックスの向きと方向に依存します。

+ + + + + + + + + + + + + + + + + + + +
 NormalReverse
Horizontal左右
Vertical上下
+ +

start と反対の端は end で表されます。

+ +

まとめ方が要素の pack 属性を使用して設定されていた場合は、スタイルは無視されます。

+ +

仕様書

+ +

このプロパティは標準外ですが、 CSS3 Flexbox の早期の草稿に似たプロパティが現れ、仕様書のより新しい版で置き換えられました。

+ +

ブラウザーの対応

+ +
{{Compat("css.properties.box-pack")}}
+ +

関連情報

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