CSS box-align example

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-align/index.md | 141 ++++++++++++++--------------- files/ja/web/css/box-direction/index.md | 109 ++++++++++------------ files/ja/web/css/box-flex/index.md | 122 +++++++++++++------------ files/ja/web/css/box-lines/index.md | 87 ++++++++++-------- files/ja/web/css/box-orient/index.md | 119 ++++++++++++------------ files/ja/web/css/box-pack/index.md | 154 +++++++++++++++++--------------- 6 files changed, 367 insertions(+), 365 deletions(-) (limited to 'files') diff --git a/files/ja/web/css/box-align/index.md b/files/ja/web/css/box-align/index.md index cf3b2068ce..890b2c6b02 100644 --- a/files/ja/web/css/box-align/index.md +++ b/files/ja/web/css/box-align/index.md @@ -4,17 +4,21 @@ slug: Web/CSS/box-align tags: - CSS - CSS プロパティ - - Non-standard - - Reference + - NeedsUpdate + - 標準外 + - リファレンス + - recipe:css-property +browser-compat: css.properties.box-align translation_of: Web/CSS/box-align --- -

{{CSSRef}}{{Non-standard_header}}{{warning("このプロパティは、当初の CSS Flexible Box Layout Module の草案段階のものでしたが、既により新しい標準のものが取って変わっています。")}}

+{{CSSRef}}{{Non-standard_header}}{{warning("このプロパティは、当初の CSS Flexible Box Layout Module の草案段階のものでしたが、より新しい標準で置き換えられました。")}} -

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

+**`box-align`** は [CSS](/ja/docs/Web/CSS) のプロパティで、交差軸方向に子要素をどう整列させるかを定義します。ボックス内に余分な空間がある場合にかぎり、その効果を確認することができます。 -

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

+現在の標準仕様に関する情報については、[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)を確認してください。 -

/* キーワード値 */
+```css
+/* キーワード値 */
 box-align: start;
 box-align: center;
 box-align: end;
@@ -25,42 +29,56 @@ box-align: stretch;
 box-lines: inherit;
 box-lines: initial;
 box-lines: unset;
-

+``` -

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

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

+## 構文 -

構文

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

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

+### 値 -

値

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

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

+## メモ -

形式文法

+整列のために _start_ と指定されたボックスの辺は、ボックスの方向によって異なります。 + +- 水平方向の要素の場合、 _start_ は上端になります。 +- 垂直方向の要素の場合、 _start_ は左端になります。 + +start の反対側の端は _end_ となります。 + +要素の `align` 属性で配置が設定されている場合、このスタイルは無視されます。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 -

<!DOCTYPE html>
-<html>
-<head>
-<title>CSS box-align example</title>
-<style>
+### ボックス配置の設定
+
+```html
+
+
+
+CSS box-align example
+
+
+
+  
+    I will be second from the bottom of div.example, centered horizontally.
+    I will be on the bottom of div.example, centered horizontally.
+  
+
+
+```
 
-仕様書
+## 仕様書
 
-
- Flexible Box Layout Module (W3C Working Draft) {{note("この仕様書の現在の状態は、 Mozilla や WebKit の古い実装を反映しているものではありません。")}}
- Old Flexible Box Layout Module {{note("Mozilla および WebKit の実装は、こちらの版の仕様を反映していました。")}}
-
+標準仕様には含まれていません。
 
-ブラウザーの対応
+## ブラウザーの互換性
 
-{{Compat("css.properties.box-align")}}
+{{Compat}}
 
-関連情報
+## 関連情報
 
-
- {{cssxref("align-items")}}, {{cssxref("box-orient")}}, {{cssxref("box-direction")}}, {{cssxref("box-pack")}}
-
+- {{cssxref("align-items")}}, {{cssxref("box-orient")}}, {{cssxref("box-direction")}}, {{cssxref("box-pack")}}
diff --git a/files/ja/web/css/box-direction/index.md b/files/ja/web/css/box-direction/index.md
index ec6b935a02..ee023aae95 100644
--- a/files/ja/web/css/box-direction/index.md
+++ b/files/ja/web/css/box-direction/index.md
@@ -3,95 +3,84 @@ title: box-direction
 slug: Web/CSS/box-direction
 tags:
   - CSS
-  - Non-standard
-  - Reference
-  - box-direction
+  - 標準外
+  - リファレンス
+  - recipe:css-property
+browser-compat: css.properties.box-direction
 translation_of: Web/CSS/box-direction
 ---
-{{CSSRef}}{{Non-standard_header}}
+{{CSSRef}}{{Non-standard_header}}
 
-
-これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。以前の標準であった box-direction は flex-direction に置き換えられたので、 -moz-box-direction は XUL でのみ使用されます。現在の標準についての情報はフレックスボックスを参照してください。
-
+> **Warning:** これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。以前の標準であった `box-direction` は `flex-direction` に置き換えられたので、 `-moz-box-direction` は XUL でのみ使用されます。現在の標準についての情報は[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)を参照してください。
 
-CSS の box-direction プロパティは、ボックスが内容を通常通りに (上または左から) 配置するか、逆方向に (下または右から) 配置するかを指定します。
+**`box-direction`** は [CSS](/ja/docs/Web/CSS) のプロパティで、ボックスが内容を通常通りに (上または左から) 配置するか、逆方向に (下または右から) 配置するかを指定します。
 
-/* キーワード値 */
+```css
+/* キーワード値 */
 box-direction: normal;
 box-direction: reverse;
 
 /* グローバル値 */
 box-direction: inherit;
 box-direction: initial;
+box-direction: revert;
 box-direction: unset;
-
+```
 
-{{CSSInfo}}
+## 構文
 
-構文
+`box-direction` プロパティは以下に挙げたキーワード値のうちの一つで指定します。
 
-box-direction プロパティは以下の列挙されたキーワード値のうちの一つで指定します。
+### 値
 
-値
+- `normal`
+  - : ボックスが内容を先頭 (左または上の端) から配置します。
+- `reverse`
+  - : ボックスが内容を末尾 (右または下の端) から配置します。
 
-
- normal
- ボックスが内容を先頭 (左または上の端) から配置します。
- reverse
- ボックスが内容を末尾 (右または下の端) から配置します。
-
+## メモ
 
-形式文法
+整列のために _start_ と指定されたボックスの辺は、ボックスの方向によって異なります。
 
-{{CSSSyntax}}
+- 水平方向の要素の場合、 _start_ は上端になります。
+- 垂直方向の要素の場合、 _start_ は左端になります。
 
-例
+start の反対側の端は _end_ となります。
 
-.example {
-  /* bottom-to-top layout */
-  -moz-box-direction: reverse;      /* Mozilla */
-  -webkit-box-direction: reverse;   /* WebKit */
-  box-direction: reverse;           /* 仕様書通り */
-}
-
+要素の `dir` 属性を使用して書字方向を設定した場合は、このスタイルは無視されます。
+
+## 公式定義
 
-メモ
+{{cssinfo}}
 
-配置目的で start で示されるボックスの端は、ボックスの方向に依存します。
+## 形式文法
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
- 
-Horizontal left
Vertical top
+{{csssyntax}}
 
-start と反対側の辺は end で示します。
+## 例
 
-書字方向が要素の dir 属性を使用して設定されている場合は、このスタイルは無視されます。
+### ボックスの方向を設定
+
+```css
+.example {
+  /* bottom-to-top layout */
+  -moz-box-direction: reverse;      /* Mozilla */
+  -webkit-box-direction: reverse;   /* WebKit */
+  box-direction: reverse;           /* 仕様書通り */
+}
+```
 
-仕様書
+## 仕様書
 
-
- Flexible Box Layout Module (W3C Working Draft) {{note("この仕様書の現在の状態は、 Mozilla や WebKit の古い実装を反映しているものではありません。")}}
- Old Flexible Box Layout Module {{note("Mozilla および WebKit の実装は、こちらの版の仕様を反映していました。")}}
-
+標準仕様には含まれていません。
 
-ブラウザーの対応
+## ブラウザーの互換性
 
-{{Compat("css.properties.box-direction")}}
+{{Compat}}
 
-関連情報
+## 関連情報
 
-
- {{CSSxRef("box-orient")}}
- {{CSSxRef("box-pack")}}
- {{CSSxRef("box-align")}}
- {{CSSxRef("flex-direction")}}
-
+- {{CSSxRef("box-orient")}}
+- {{CSSxRef("box-pack")}}
+- {{CSSxRef("box-align")}}
+- {{CSSxRef("flex-direction")}}
diff --git a/files/ja/web/css/box-flex/index.md b/files/ja/web/css/box-flex/index.md
index 618e390843..0a06c1def4 100644
--- a/files/ja/web/css/box-flex/index.md
+++ b/files/ja/web/css/box-flex/index.md
@@ -4,20 +4,21 @@ slug: Web/CSS/box-flex
 tags:
   - CSS
   - CSS プロパティ
-  - Non-standard
-  - Reference
+  - 標準外
+  - リファレンス
   - box-flex
+  - recipe:css-property
+browser-compat: css.properties.box-flex
 translation_of: Web/CSS/box-flex
 ---
-{{CSSRef}}{{Non-standard_header}}
+{{CSSRef}}{{Non-standard_Header}}
 
-
-このプロパティは XUL ボックスモデルの部品を制御するためのものです。古い CSS Flexible Box Layout Module の草稿の 'box-flex' (このプロパティの元になったもの) または '-webkit-box-flex' (草稿の元になったもの) の動作のどちらとも一致しません。現在の標準についての情報はフレックスボックスを参照してください。
-
+> **Warning:** このプロパティは XUL ボックスモデルの部品を制御するためのものです。古い CSS Flexible Box Layout Module の草稿の '`box-flex`' (このプロパティの元になったもの) または '`-webkit-box-flex`' (草稿の元になったもの) の動作のどちらとも一致しません。現在の標準についての情報は[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)を参照してください。
 
-CSS の -moz-box-flex および -webkit-box-flex プロパティは、 -moz-box または -webkit-box が、これを内包するボックスを、包含ボックスのレイアウトの方向で埋めるまで拡張する方法を指定します。
+**`-moz-box-flex`** および **`-webkit-box-flex`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 `-moz-box` または `-webkit-box` が、これを内包するボックスを、包含ボックスのレイアウトの方向で埋めるまで拡張する方法を指定します。
 
-/* <number> 値 */
+```css
+/*  値 */
 -moz-box-flex: 0;
 -moz-box-flex: 2;
 -moz-box-flex: 3.5;
@@ -32,81 +33,84 @@ translation_of: Web/CSS/box-flex
 -webkit-box-flex: inherit;
 -webkit-box-flex: initial;
 -webkit-box-flex: unset;
-
+```
 
-{{CSSInfo}}
+## 構文
 
-構文
+`box-flex` プロパティは {{CSSxRef("<number>")}} として指定されます。値が 0 の場合、ボックスは拡張されません。値が 0 より大きい場合は、ボックスは利用可能な空間の比率で拡張されます。
 
-box-flex プロパティは {{CSSxRef("<number>")}} として指定されます。値が 0 の場合、ボックスは拡張されません。値が 0 より大きい場合は、ボックスは利用可能な余白の比率で拡張されます。
+## メモ
 
-形式文法
+包含ボックスは利用可能な空間を、中のそれぞれの要素におけるフレックス値の比率で拡張します。
 
-{{CSSSyntax}}
+フレックス値がゼロになっている中の要素は拡張されません。
 
-例
+フレックス値がゼロではない中の要素が一つしかない場合は、有効な空間を埋めるまで拡張されます。
 
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>-moz-box-flex example</title>
-    <style>
+同じフレックス値を持つ中の要素は、同じ絶対量だけ拡張されます。
+
+フレックス値が要素の `flex` 属性を使用して設定された場合は、このスタイルは無視されます。
+
+包含ボックス内で同じ寸法の XUL 要素を作成するには、包含ボックスの `equalsize` 属性を `always` の値に設定してください。この属性には対応する CSS プロパティはありません。
+
+包含ボックス内のすべての中の要素を同じ寸法にするトリックとしては、すべてに対して固定の寸法 (例えば `height: 0`) と、同じゼロより大きい `box-flex` の値 (例えば `-moz-box-flex: 1`) を設定することです。
+
+## 公式定義
+
+{{cssinfo}}
+
+## 形式文法
+
+{{csssyntax}}
+
+## 例
+
+### box-flex の設定
+
+```html
+
+
+  
+    -moz-box-flex example
+    
+  
+  
+    
+      I will expand to fill extra space
+      I will not expand
+    
+  
+
+```
 
-仕様書
+## 仕様書
 
-このプロパティは標準外の拡張です。古い CSS3 Flexbox 仕様書の草稿には box-flex プロパティが定義されていましたが、この草稿はその後で置き換えられました。
+標準仕様には含まれていません。
 
-ブラウザーの対応
+## ブラウザーの互換性
 
-{{Compat("css.properties.box-flex")}}
+{{Compat}}
 
-関連情報
+## 関連情報
 
-
- {{CSSxRef("box-orient")}}
- {{CSSxRef("box-pack")}}
- {{CSSxRef("box-direction")}}
- {{CSSxRef("flex")}}
-
+- {{CSSxRef("box-orient")}}
+- {{CSSxRef("box-pack")}}
+- {{CSSxRef("box-direction")}}
+- {{CSSxRef("flex")}}
diff --git a/files/ja/web/css/box-lines/index.md b/files/ja/web/css/box-lines/index.md
index c665a22a42..57578254f5 100644
--- a/files/ja/web/css/box-lines/index.md
+++ b/files/ja/web/css/box-lines/index.md
@@ -4,20 +4,20 @@ slug: Web/CSS/box-lines
 tags:
   - CSS
   - CSS プロパティ
-  - Non-standard
-  - Reference
   - 標準外
+  - リファレンス
+  - recipe:css-property
+browser-compat: css.properties.box-lines
 translation_of: Web/CSS/box-lines
 ---
-{{CSSRef}}{{Non-standard_header}}
+{{CSSRef}}{{Non-standard_header}}
 
-
-これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。現在の標準についての情報はフレックスボックスを参照してください。
-
+> **Warning:** これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。現在の標準についての情報は[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)を参照してください。
 
-CSS の box-lines プロパティは、ボックスの配置行 (水平方向のボックスでは行、垂直方向のボックスでは列) が単一なのか複数なのかを指定します。
+**`box-lines`** は [CSS](/ja/docs/Web/CSS) のプロパティで、ボックスの配置行 (水平方向のボックスでは行、垂直方向のボックスでは列) が単一なのか複数なのかを指定します。
 
-/* キーワード値 */
+```css
+/* キーワード値 */
 box-lines: single;
 box-lines: multiple;
 
@@ -25,52 +25,63 @@ box-lines: multiple;
 box-lines: inherit;
 box-lines: initial;
 box-lines: unset;
-
+```
 
-既定では、水平方向のボックスは子を単一行で配置し、垂直方向のボックスは子を単一列で配置します。この動作は box-lines プロパティを使用して変更することができます。既定値は single であり、すべての要素が単一の行または列で配置され、それに合わない要素は単純にあふれさせて表示することを意味します。
+既定では、水平方向のボックスは子を単一行で配置し、垂直方向のボックスは子を単一列で配置します。この動作は `box-lines` プロパティを使用して変更することができます。既定値は `single` であり、すべての要素が単一の行または列で配置され、それに合わない要素は単純にあふれさせて表示することを意味します。
 
-しかし、 multiple の値が指定された場合、ボックスはすべての子を収容できるように複数の配置行 (つまり、複数の行または列) に拡張することができます。ボックスはできるだけ少ない配置行数で子が収まるように、必要に応じて最小幅または高さまで縮小します。
+しかし、 `multiple` の値が指定された場合、ボックスはすべての子を収容できるように複数の配置行 (つまり、複数の行または列) に拡張することができます。ボックスはできるだけ少ない配置行数で子が収まるように、必要に応じて最小幅または高さまで縮小します。
 
-水平ボックスの中の子が最小幅まで縮小されても配置行上に収まらない場合、子は次の配置行上に1つずつ、残りが前の配置行に収まるまで移動されます。この手続は任意の配置行数に達するまで繰り返されます。配置行上に収まり切れない要素が1つしかない場合、要素はその配置行に留まりボックスの外にあふれます。その後の配置行は、順方向のボックスであれば前の配置行の下に、逆方向のボックスであれば上に配置されます。配置行の高さはその配置行内で最も高い子の高さになります。各配置行にある最大の要素のマージンを除いて、配置行間に余分な余白は表示されません。配置行の高さを計算するために、計算値が auto であるマージンは値が 0 として扱われます。
+水平ボックスの中の子が最小幅まで縮小されても配置行上に収まらない場合、子は次の配置行上に 1 つずつ、残りが前の配置行に収まるまで移動されます。この手続は任意の配置行数に達するまで繰り返されます。配置行上に収まり切れない要素が1つしかない場合、要素はその配置行に留まりボックスの外にあふれます。その後の配置行は、順方向のボックスであれば前の配置行の下に、逆方向のボックスであれば上に配置されます。配置行の高さはその配置行内で最も高い子の高さになります。各配置行にある最大の要素のマージンを除いて、配置行間に余分な余白は表示されません。配置行の高さを計算するために、計算値が auto であるマージンは値が 0 として扱われます。
 
-同様の処理が垂直配置ボックスの子に対しても行われます。後の配置行は、順方向のボックスであれば前の配置行の右側に配置され、逆方向のボックスであれば前の配置行の左側に配置されます。
+同様の処理が垂直配置ボックスの子に対しても行われます。後の配置行は、順方向のボックスであれば前の配置行の右側に配置され、逆方向のボックスであれば前の配置行の左側に配置されます。
 
-配置行の数が決定すると、 {{CSSxRef("box-flex")}} の計算値が 0 以外である要素は、配置行の残りの空間を埋めるために必要なだけ引き伸ばされます。それぞれの配置行は個別に計算されるので、 {{CSSxRef("box-flex")}} と {{CSSxRef("box-flex-groups")}} を評価するときに、その配置行上の要素だけが考慮されます。配置行内の要素のまとめ方も、 {{CSSxRef("box-pack")}} プロパティで定義されている通り、それぞれの行で個別に計算されます。
+配置行の数が決定すると、 {{CSSxRef("box-flex")}} の計算値が `0` 以外である要素は、配置行の残りの空間を埋めるために必要なだけ引き伸ばされます。それぞれの配置行は個別に計算されるので、 {{CSSxRef("box-flex")}} と {{CSSxRef("box-flex-groups")}} を評価するときに、その配置行上の要素だけが考慮されます。配置行内の要素のまとめ方も、 {{CSSxRef("box-pack")}} プロパティで定義されている通り、それぞれの行で個別に計算されます。
 
-{{CSSInfo}}
+## 構文
 
-構文
+`box-lines` プロパティは、以下に列挙されたキーワード値のうちの一つで指定します。
 
-box-lines プロパティは、以下に列挙されたキーワード値のうちの一つで指定します。
+### 値
 
-値
+- `single`
+  - : ボックスの要素は単一の行または列に配置されます。
+- `multiple`
+  - : ボックスの要素は複数の行または列に配置されます。
 
-
- single
- ボックスの要素は単一の行または列に配置されます。
- multiple
- ボックスの要素は複数の行または列に配置されます。
-
+## 公式定義
 
-形式文法
+{{CSSInfo}}
+
+## 形式文法
 
 {{CSSSyntax}}
 
-仕様書
+## 例
+
+### 単純な使用法の例
+
+仕様書の当初の版では、`box-lines`で、フレックスコンテナーの子を複数の行に折り返すことを指定できました。これは WebKit ベースのブラウザーのみが対応しており、接頭辞が付いていました。
+
+```css
+div {
+  display: box;
+  box-orient: horizontal;
+  box-lines: multiple;
+}
+```
+
+現在のフレックスボックスで同等のものは [`flex-wrap`](/ja/docs/Web/CSS/flex-wrap) です。
+
+## 仕様書
 
-
- Flexible Box Layout Module (W3C Working Draft) {{note("この仕様書の現在の状態は、 Mozilla や WebKit の古い実装を反映しているものではありません。")}}
- Old Flexible Box Layout Module {{note("Mozilla および WebKit の実装は、こちらの版の仕様を反映していました。")}}
-
+標準仕様には含まれていません。
 
-ブラウザーの対応
+## ブラウザーの互換性
 
-{{Compat("css.properties.box-lines")}}
+{{Compat}}
 
-関連情報
+## 関連情報
 
-
- {{CSSxRef("box-flex")}}
- {{CSSxRef("box-flex-group")}}
- {{CSSxRef("box-pack")}}
-
+- {{CSSxRef("box-flex")}}
+- {{CSSxRef("box-flex-group")}}
+- {{CSSxRef("box-pack")}}
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') }}
 
-仕様書
+## 仕様書
 
-
- Flexible Box Layout Module (W3C Working Draft) {{note("この仕様書の現在の状態は、 Mozilla や WebKit の古い実装を反映しているものではありません。")}}
- Old Flexible Box Layout Module {{note("Mozilla および WebKit の実装は、こちらの版の仕様を反映していました。")}}
-
+標準仕様には含まれていません。
 
-ブラウザーの対応
+## ブラウザーの互換性
 
-{{Compat("css.properties.box-orient")}}
+{{Compat}}
 
-関連情報
+## 関連情報
 
-
- {{CSSxRef("box-direction")}}
- {{CSSxRef("box-pack")}}
- {{CSSxRef("box-align")}}
- {{CSSxRef("flex-direction")}}
-
+- {{CSSxRef("box-direction")}}
+- {{CSSxRef("box-pack")}}
+- {{CSSxRef("box-align")}}
+- {{CSSxRef("flex-direction")}}
diff --git a/files/ja/web/css/box-pack/index.md b/files/ja/web/css/box-pack/index.md
index 14b15998fe..1880745505 100644
--- a/files/ja/web/css/box-pack/index.md
+++ b/files/ja/web/css/box-pack/index.md
@@ -4,20 +4,21 @@ slug: Web/CSS/box-pack
 tags:
   - CSS
   - CSS プロパティ
-  - Non-standard
-  - Reference
+  - 標準外
+  - リファレンス
   - box-pack
+  - recipe:css-property
+browser-compat: css.properties.box-pack
 translation_of: Web/CSS/box-pack
 ---
-{{CSSRef}}{{Non-standard_header}}
+{{CSSRef}}{{Non-standard_header}}
 
-
-これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。現在の標準についての情報はフレックスボックスを参照してください。
-
+> **Warning:** これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。現在の標準についての情報は[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)を参照してください。
 
-CSS の -moz-box-pack および -webkit-box-pack プロパティは、 -moz-box または -webkit-box がどのようにレイアウトの方向に内容をまとめるかを指定します。この効果はボックス内に余白がある場合のみ見ることができます。
+**`-moz-box-pack`** および **`-webkit-box-pack`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 `-moz-box` または `-webkit-box` がどのようにレイアウトの方向に内容をまとめるかを指定します。この効果はボックス内に空間がある場合のみ見ることができます。
 
-/* キーワード値 */
+```css
+/* キーワード値 */
 box-pack: start;
 box-pack: center;
 box-pack: end;
@@ -27,36 +28,70 @@ box-pack: justify;
 box-pack: inherit;
 box-pack: initial;
 box-pack: unset;
-
-
-レイアウトの方向は要素の方向、 horizontal または vertical に依存します。
-
-{{CSSInfo}}
+```
+
+レイアウトの方向は要素の方向、 horizontal または vertical に依存します。
+
+## 構文
+
+`box-pack` プロパティは、以下に列挙されたキーワード値のうちの一つで指定します。
+
+### 値
+
+- `start`
+  - : ボックスは内容を先頭にまとめ、残りの空間を末尾に残します。
+- `center`
+  - : ボックスは内容を中央にまとめ、残りの空間を先頭と末尾に均等に分配します。
+- `end`
+  - : ボックスは内容を末尾にまとめ、残りの空間を先頭に残します。
+- `justify`
+  - : 空間はそれぞれの子の間に均等に配分され、最初の子の前と最後の子の後には空間が配置されません。子が一つだけであれば、値が `start` であるのと同様に扱われます。
+
+## メモ
+
+ボックスの向きや方向によって、まとめる際に指定するボックスの端は異なります。
+
+- 水平方向の要素の場合、_start_ は上端になります。
+- 垂直方向の要素の場合、_start_ は左端になります。
+
+
+  
+    
+      
+      
+      
+    
+    
+      
+      
+      
+    
+    
+      
+      
+      
+    
+  
+ Normal Reverse
Horizontal left right
Vertical top bottom
 
-構文
+start と反対の端は _end_ で表されます。
 
-box-pack プロパティは、以下に列挙されたキーワード値のうちの一つで指定します。
+まとめ方が要素の `pack` 属性を使用して設定されていた場合は、スタイルは無視されます。
 
-値
+## 公式定義
 
-
- start
- ボックスは内容を先頭にまとめ、残りの余白を末尾に残します。
- center
- ボックスは内容を中央にまとめ、残りの余白を先頭と末尾に均等に分配します。
- end
- ボックスは内容を末尾にまとめ、残りの余白を先頭に残します。
- justify
- 余白はそれぞれの子の間に均等に配分され、最初の子の前と最後の子の後には余白が配置されません。子が一つだけであれば、値が start であるのと同様に扱われます。
-
+{{CSSInfo}}
 
-形式文法
+## 形式文法
 
 {{CSSSyntax}}
 
-例
+## 例
 
-div.example {
+## box-pack の例
+
+```css
+div.example {
   border-style: solid;
 
   display: -moz-box; /* Mozilla */
@@ -87,56 +122,27 @@ 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 で示されるボックスの端は、ボックスの向きと方向に依存します。
-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-  Normal Reverse
Horizontal 左 右
Vertical 上 下
+```
 
-start と反対の端は end で表されます。
+```html
+
+  I will be second from the bottom of div.example, centered horizontally.
+  I will be on the bottom of div.example, centered horizontally.
+
+```
 
-まとめ方が要素の pack 属性を使用して設定されていた場合は、スタイルは無視されます。
+{{EmbedLiveSample('Examples', 310, 310)}}
 
-仕様書
+## 仕様書
 
-このプロパティは標準外ですが、 CSS3 Flexbox の早期の草稿に似たプロパティが現れ、仕様書のより新しい版で置き換えられました。
+標準仕様には含まれていません。
 
-ブラウザーの対応
+## ブラウザーの互換性
 
-{{Compat("css.properties.box-pack")}}
+{{Compat}}
 
-関連情報
+## 関連情報
 
-
- {{CSSxRef("box-orient")}}
- {{CSSxRef("box-direction")}}
- {{CSSxRef("box-align")}}
-
+- {{CSSxRef("box-orient")}}
+- {{CSSxRef("box-direction")}}
+- {{CSSxRef("box-align")}}
-- 
cgit v1.2.3-54-g00ecf

Horizontal	left
Vertical	top

	Normal	Reverse
Horizontal	left	right
Vertical	top	bottom

	Normal	Reverse
Horizontal	左	右
Vertical	上	下