initial commit

4 files changed, 503 insertions, 0 deletions

diff --git a/files/ja/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html b/files/ja/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html
new file mode 100644
index 0000000000..2cb47a5709
--- /dev/null
+++ b/files/ja/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html
@@ -0,0 +1,80 @@
+---
+title: ブロック、絶対配置、表レイアウトのブロック配置
+slug: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables
+tags:
+  - CSS
+  - ブロックレイアウト
+  - ボックス配置
+  - 絶対配置
+  - 表
+translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables
+---
+<p class="summary"><a href="/ja/docs/Web/CSS/CSS_Box_Alignment">ボックス配置仕様書</a>は、様々なレイアウト方法でどのように配置が動作するかを詳説しています。このページでは、ボックス配置は浮動、位置指定、表要素を含むボックスレイアウトのレイアウトでどのように動作するかを明らかにします。このページはブロックレイアウトとボックス配置に固有のことを詳説するため、様々なレイアウト方法に共通のボックス配置の共通機能について説明している、中心となる<a href="/ja/docs/Web/CSS/CSS_Box_Alignment">ボックス配置</a>ページを併せて読んでください。</p>
+
+<div class="note">
+<p><strong>Note</strong>: At the time of writing (May 2018), there is no real support for the box alignment properties in block layout. This document details how the specification expects these properties to be implemented for completeness, and is likely to change as the specification and browser implementations develop.</p>
+</div>
+
+<h2 id="align-content_and_justify-content" name="align-content_and_justify-content">align-content と justify-content</h2>
+
+<p>The {{cssxref("justify-content")}} property does not apply to block containers or table cells.</p>
+
+<p>The {{cssxref("align-content")}} property applies to the block axis in order to align the contents of the box within its container. If a content distribution method such as <code>space-between</code>, <code>space-around</code> or <code>space-evenly</code> is requested then the fallback alignment will be used, as the content is treated as a single <a href="/ja/docs/Glossary/Alignment_Subject">alignment subject</a>.</p>
+
+<h2 id="justify-self">justify-self</h2>
+
+<p>The {{cssxref("justify-self")}} property is used to align an item inside its containing block on the inline axis.</p>
+
+<p>This property does not apply to floated elements or table cells.</p>
+
+<h3 id="Absolutely_positioned_elements" name="Absolutely_positioned_elements">絶対配置要素</h3>
+
+<p>The alignment container is the positioned block, accounting for the offset values of top, left, bottom, and right. The normal keyword resolves to <code>stretch</code>, unless the positioned item is a replaced element, in which case it resolves to <code>start</code>.</p>
+
+<h2 id="align-self">align-self</h2>
+
+<p>The {{cssxref("align-self")}} property does not apply to block-level boxes (including floats), because there is more than one item in the block axis. It also does not apply to table cells.</p>
+
+<h3 id="Absolutely_positioned_elements_2" name="Absolutely_positioned_elements_2">絶対配置要素</h3>
+
+<p>The alignment container is the positioned block, accounting for the offset values of top, left, bottom, and right. The normal keyword resolves to <code>stretch</code>, unless the positioned item is a replaced element, in which case it resolves to <code>start</code>.</p>
+
+<h2 id="Aligning_in_these_layout_methods_today">Aligning in these layout methods today</h2>
+
+<p>As we do not currently have browser support for box alignment in block layout, your options for alignment are either to use one of the existing alignment methods or, to make even a single item inside a container a flex item in order to use the alignment properties as specified in flexbox.</p>
+
+<p>Alignment of blocks horizontally prior to flexbox was typically achieved by way of setting auto margins on the block. A {{cssxref("margin")}} of <code>auto</code> will absorb all available space in that dimension, therefore setting a left and right margin of auto, you can push a block into the center:</p>
+
+<pre class="brush: css">.container {
+  width: 20em;
+  margin-left: auto;
+  margin-right: auto;
+}
+</pre>
+
+<p>In table layout, you have access to the {{cssxref("vertical-align")}} property to align the contents of a cell inside that cell.</p>
+
+<p>For many use cases, turning the block container into a flex item will give you the alignment capability that you are looking for. In the example below, a container with a single item inside has been turned into a flex container for the purpose of being able to use the alignment properties.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="CSS_Properties" name="CSS_Properties">CSS プロパティ</h3>
+
+<ul>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("justify-self")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+</ul>
+
+<h3 id="Glossary_Entries" name="Glossary_Entries">用語集の項目</h3>
+
+<ul>
+ <li><a href="/ja/docs/Glossary/Alignment_Subject">Alignment subject</a></li>
+ <li><a href="/ja/docs/Glossary/Alignment_Container">Alignment container</a></li>
+ <li><a href="/ja/docs/Glossary/Fallback_Alignment">Fallback alignment</a></li>
+</ul>
+
+<p>{{CSSRef}}</p>
diff --git a/files/ja/web/css/css_box_alignment/box_alignment_in_flexbox/index.html b/files/ja/web/css/css_box_alignment/box_alignment_in_flexbox/index.html
new file mode 100644
index 0000000000..5435419fac
--- /dev/null
+++ b/files/ja/web/css/css_box_alignment/box_alignment_in_flexbox/index.html
@@ -0,0 +1,119 @@
+---
+title: フレックスボックスでのボックス配置
+slug: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox
+tags:
+  - CSS
+  - CSS ボックス配置
+  - フレックスボックス
+translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS/CSS_Box_Alignment">ボックス配置</a>の仕様書は、さまざまなレイアウト方法で配置がどのように働くかを詳述しています。このページでは、フレックスボックスのコンテキストにおいてボックス配置がどのように働くかを探ります。このページの目的は、フレックスボックスとボックス配置として定められた事柄を詳述するためのものですので、ボックス配置の様々なレイアウト方法の間で共通の機能について詳述した、主となる<a href="/ja/docs/Web/CSS/CSS_Box_Alignment">ボックス配置</a>ページを合わせてお読みください。</p>
+
+<h2 id="Basic_example" name="Basic_example">基本的な例</h2>
+
+<p>この例では、３つのフレックスアイテムが {{cssxref("justify-content")}} を使用して主軸に、 {{cssxref("align-items")}} を使用して交差軸に配置されます。最初のアイテムはグループに対して設定された <code>align-items</code> の値を上書きし、 {{cssxref("align-self")}} で <code>center</code> に設定しています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}</p>
+
+<h2 id="The_axes_and_flex-direction" name="The_axes_and_flex-direction">軸と flex-direction</h2>
+
+<p>フレックスボックスは文書の書字方向を尊重しますので、英語の場合で {{cssxref("justify-content")}} が <code>flex-end</code> に設定されていた場合、アイテムをフレックスコンテナーの末尾に配置します。 {{cssxref("flex-direction")}} が <code>row</code> に設定されていた場合、この配置はインライン方向になります。</p>
+
+<p>しかし、フレックスボックスでは <code>flex-direction</code> を <code>column</code> に設定することで、主軸を変更することができます。この場合、 <code>justify-content</code> はアイテムをブロック方向に配置します。したがって、フレックスボックスでは主軸と交差じっくについて次のように考えると最も簡単です。</p>
+
+<ul>
+ <li>主軸 = <code>flex-direction</code> で設定された向き = <code>justify-content</code> で配置</li>
+ <li>交差軸 = 主軸と交差 = <code>align-content</code>, <code>align-self</code>/<code>align-items</code> で配置</li>
+</ul>
+
+<h3 id="Main_Axis_Alignment" name="Main_Axis_Alignment">主軸の配置</h3>
+
+<ul>
+ <li>{{cssxref("justify-content")}}</li>
+</ul>
+
+<h3 id="Cross_Axis_Alignment" name="Cross_Axis_Alignment">交差軸の配置</h3>
+
+<ul>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+</ul>
+
+<h3 id="There_is_no_justify-self_in_Flexbox" name="There_is_no_justify-self_in_Flexbox">フレックスボックスには justify-self はない</h3>
+
+<p>主軸では、フレックスボックスはコンテンツをグループとして扱います。アイテムをレイアウトするために必要な空間の大きさが計算され、残りの空間は配分に利用されます。 <code>justify-content</code> プロパティは、どのように残りの領域を使用するかを制御します。 <code>justify-content: flex-end</code> に設定すると、余分な領域はアイテムの前に配置され、 <code>justify-content: space-around</code> に設定すると、その大きさアイテムの両側に配置される、などです。</p>
+
+<p>つまり、常にアイテムのグループ全体が動き回るよう配分されるため、 <code>justify-self</code> プロパティはフレックスボックスでは意味を持ちません。</p>
+
+<p>交差軸では、フレックスコンテナーのその方向に余白が追加され、単一のアイテムが始点と終点に動く可能性があるため、 <code>align-self</code> は意味を持ちます。</p>
+
+<h2 id="Alignment_and_auto_margins" name="Alignment_and_auto_margins">alignment および auto のマージン</h2>
+
+<p><code>justify-self</code> プロパティが必要であると考える可能性があるフレックスボックスの特定の利用場面があります。これは、おそらく分割ナビゲーションパターンを作成するために、一連のフレックスアイテムを分割したい場合です。この利用場面では、マージンに <code>auto</code> を使用することができます。 <code>auto</code> に設定されたマージンは、その方向で利用可能な領域をすべて吸収します。これが auto のマージンでブロックを中央揃えしたときの動作です。左右のマージンを <code>auto</code> に設定すると、ブロックの両側が利用可能なスペースをすべて利用しようとするので、ボックスは中央に配置されます。</p>
+
+<p>開始点に配置された一連のフレックスアイテムのうち、１つのアイテムで {{cssxref("margin")}} を <code>auto</code> に設定することで、分割ナビゲーションを作成できます。これは、フレックスボックスと alignment プロパティでうまくいきます。 auto のマージンに使用できる領域がなくなると、アイテムは他のすべてのフレックスアイテムと同じように動作し、スペースに収まるように縮小します。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/box-alignment/flexbox/auto-margins.html", '100%', 500)}}</p>
+
+<h2 id="The_gap_properties" name="The_gap_properties"><code>gap</code> プロパティ</h2>
+
+<ul>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+
+<h3 id="Creating_fixed_size_gaps_between_items" name="Creating_fixed_size_gaps_between_items">アイテム間における固定幅の間隔の作成</h3>
+
+<p>主軸では、 <code>column-gap</code> プロパティは兄弟アイテムの間に固定幅の間隔を作成します。</p>
+
+<p>交差軸では、 <code>row-gap</code> プロパティは、隣接するフレックス行の間隔を作成するので、この効果を得るには <code>flex-wrap</code> を <code>wrap</code> に設定する必要があります。</p>
+
+<div class="note">
+<p><strong>メモ</strong>: Firefox 63 時点で、 Firefox がフレックスボックスで gap プロパティを実装している唯一のブラウザーです。</p>
+</div>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="CSS_Properties" name="CSS_Properties">CSS プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("place-content")}}</li>
+ <li>{{cssxref("justify-items")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("place-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+</div>
+
+<h3 id="Glossary_Entries" name="Glossary_Entries">用語集の項目</h3>
+
+<div class="index">
+<ul>
+ <li>{{Glossary("Cross axis", "交差軸")}}</li>
+ <li>{{Glossary("Main axis", "主軸")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides" name="Guides">ガイド</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">フレックスコンテナーでのアイテムの配置</a></li>
+</ul>
+
+<h2 id="External_Resources" name="External_Resources">外部リソース</h2>
+
+<ul>
+ <li><a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box alignment cheatsheet</a></li>
+ <li><a href="https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/">CSS Grid, Flexbox and Box Alignment</a></li>
+ <li><a href="https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/">Thoughts on partial implementations of Box Alignment</a></li>
+</ul>
diff --git a/files/ja/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html b/files/ja/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html
new file mode 100644
index 0000000000..569a5e52af
--- /dev/null
+++ b/files/ja/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html
@@ -0,0 +1,51 @@
+---
+title: 段組みレイアウトでのボックス配置
+slug: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout
+tags:
+  - CSS
+  - CSS ボックス配置
+  - CSS 段組みレイアウト
+  - 段組み
+translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary"><a href="/ja/docs/Web/CSS/CSS_Box_Alignment">ボックス配置</a>仕様書では、様々なレイアウト方法でどのように配置が動作するかを詳説しています。このページでは、<a href="/ja/docs/Web/CSS/CSS_Columns">段組みレイアウト</a>のコンテキストでボックス配置がどのように動作するかを探ります。このページとしての目的は、段組みレイアウトとボックス配置に特有のことを探ることですので、レイアウト方法をまたがるボックス配置の共通の機能の詳細を詳説している、中心となる<a href="/ja/docs/Web/CSS/CSS_Box_Alignment">ボックス配置</a>ページと併せて読んでください。</p>
+
+<p>段組みレイアウトでは、配置コンテナーは段組みコンテナーのコンテンツボックスです。配置主題は段ボックスです。段組みレイアウトに適用するプロパティは以下に説明する通りです。</p>
+
+<div class="note">
+<p><strong>メモ</strong>: 段組みレイアウトはボックス配置仕様書に先立つものです。そしてここに挙げたプロパティは、段組みレイアウトのために設定されたものであっても、ブラウザーが対応していないことがあります。</p>
+</div>
+
+<h2 id="align-content_and_justify-content" name="align-content_and_justify-content">align-content と justify-content</h2>
+
+<p>{{cssxref("align-content")}} プロパティはブロック軸に、 {{cssxref("justify-content")}} はインライン軸に適用されます。段に追加された空間は配分に使用され、段間のすき間に追加されるため、段間は {{cssxref("column-gap")}} プロパティで指定された寸法よりも大きくなることがあります。</p>
+
+<p><code>justify-content</code> に <code>normal</code> または <code>stretch</code> 以外の値を使用すると、 {{cssxref("column-width")}} が指定された段組みコンテナーに表示し、残りの余白は justify-content の値によって配分されます。</p>
+
+<h2 id="column-gap">column-gap</h2>
+
+<p>段組みレイアウト仕様書の早期の版では、 {{cssxref("column-gap")}} プロパティが定義されていましたが、ボックス配置では他のレイアウト方法の gap プロパティと統合されました。他のレイアウト方法では、 column-gap の初期値を 0 として扱うのに対し、段組みレイアウトでは、一般に段間にすき間がないようにすることはないでしょうから、 1em として扱うようになっています。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="CSS_Properties" name="CSS_Properties">CSS プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+</ul>
+</div>
+
+<h3 id="Glossary_Entries" name="Glossary_Entries">用語集</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/ja/docs/Glossary/Alignment_Subject">配置主題</a></li>
+ <li><a href="/ja/docs/Glossary/Alignment_Container">配置コンテナー</a></li>
+ <li><a href="/ja/docs/Glossary/Fallback_Alignment">代替配置</a></li>
+</ul>
+</div>
diff --git a/files/ja/web/css/css_box_alignment/index.html b/files/ja/web/css/css_box_alignment/index.html
new file mode 100644
index 0000000000..a220b68112
--- /dev/null
+++ b/files/ja/web/css/css_box_alignment/index.html
@@ -0,0 +1,253 @@
+---
+title: CSS ボックス配置
+slug: Web/CSS/CSS_Box_Alignment
+tags:
+  - CSS
+  - CSS ボックス配置
+  - alignment
+  - box alignment
+  - グリッドレイアウト
+  - フレックスボックス
+  - 段組みレイアウト
+translation_of: Web/CSS/CSS_Box_Alignment
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><ruby>CSS ボックス配置<rp> (</rp><rt>CSS Box Alignment</rt><rp>) </rp></ruby>モジュールは、ブロックレイアウト、表レイアウト、フレックスレイアウト、グリッドレイアウトなどの様々な CSS ボックスレイアウトにおける、ボックスの配置に関する機能を定義します。このモジュールは CSS 全体において一貫性のある配置方法を作成することを目指しています。この文書はこの仕様書にある全般的な概念を解説します。</p>
+
+<div class="note">
+<p><strong>メモ</strong>: ボックス配置がどのように適用されるかは、各レイアウト方法のドキュメントに詳しく記載されています。</p>
+</div>
+
+<h2 id="古い配置方法">古い配置方法</h2>
+
+<p>CSS は伝統的に、配置機能がとても制約されていました。 {{cssxref("text-align")}} を使用してテキストの配置を指定したり、 {{cssxref("margin")}} に auto を使用してブロックを中央揃えしたり、 {{cssxref("vertical-align")}} を使用して表やインラインブロックをレイアウトしたりしていました。テキストの配置は<a href="https://www.w3.org/TR/css-inline-3/">インラインレイアウト</a>および <a href="https://www.w3.org/TR/css-text-3/">CSS テキスト</a>モジュールによってカバーされるようになり、ボックス配置の最初で、完全な水平方向と垂直方向の配置の機能を持ちました。</p>
+
+<p>先に<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a>を学んでいるのであれば、これらのプロパティはフレックスボックスの使用の一部と思うかもしれませんし、一部のプロパティは実際に、フレックスボックスのレベル1に並べられています。しかし仕様書では、現在フレックスボックスにある以上の追加の機能が追加される可能性があるため、ボックス配置仕様書を参照するよう注記しています。</p>
+
+<h2 id="Basic_examples" name="Basic_examples">基本的な例</h2>
+
+<p>次の例は、ボックス配置のプロパティの一部が<a href="/ja/docs/Web/CSS/CSS_Grid_Layout">グリッド</a>と<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a>にどのように適用されるかを示しています。</p>
+
+<h3 id="CSS_grid_layout_alignment_example" name="CSS_grid_layout_alignment_example">CSS グリッドレイアウトの配置の例</h3>
+
+<p>グリッドレイアウトを使用したこの例では、固定幅のグリッドトラックをインライン (主) 軸上にレイアウトした後に、グリッドコンテナ内に余分な空白が残っています。この空白は {{cssxref("justify-content")}} を使って分配されます。ブロック (交差) 軸上では、グリッド領域内のアイテムの配置は {{cssxref("align-items")}} で制御されます。最初のアイテムは {{cssxref("align-self")}} を <code>center</code> に設定して、グループに設定された <code>align-items</code> 値を上書きしています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}}</p>
+
+<h3 id="Flexbox_Alignment_Example" name="Flexbox_Alignment_Example">フレックスボックスの配置の例</h3>
+
+<p>この例では、3 つのフレックスアイテムが <code>justify-content</code> を使用して主軸上に配置され、 <code>align-items</code> を使用して交差軸上に配置されています。 最初のアイテムは<code>align-self</code> を <code>center</code> に設定して、グループに設定された <code>align-items</code> を上書きしています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}</p>
+
+<h2 id="Key_concepts_and_terminology" name="Key_concepts_and_terminology">主要概念と用語</h2>
+
+<p>この仕様書では、個別のレイアウト方法の実装以外でこれらの整列プロパティを簡単に説明できるように、整列に関する用語を詳しく説明しています。すべてのレイアウト方法に共通する、いくつかの重要な概念もあります。</p>
+
+<h3 id="Relationship_to_writing_modes" name="Relationship_to_writing_modes">書字方向との関連</h3>
+
+<p>配置は書字方向と結びついており、アイテムを配置するとき、物理的な寸法である上下左右に配置するかどうかを考慮しません。代わりに、作業している特定の距離の開始と終了によって配置を記述します。これにより、これにより、文書がどのような書字方向であっても、配置が同じように動作することを保証します。</p>
+
+<h3 id="Two_dimensions_of_alignment" name="Two_dimensions_of_alignment">二次元の配置</h3>
+
+<p>ボックス配置プロパティを使用すると、コンテンツは二本の軸 — インライン (主) 軸、およびブロック (交差) 軸 — のうちの一本の上に配置されます。インライン軸は書字方向が使用され、文の語がこの軸に沿って流れます。 — 例えば英語では、インライン軸は水平です。ブロック軸は、段落要素などのブロックの方向の軸で、インライン軸と交差する向きにレイアウトされます。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15952/two-axes.png"></p>
+
+<p>インライン軸上でアイテムを整列するときは、 <code>justify-</code> で始まるプロパティを使用します。</p>
+
+<ul>
+ <li>{{cssxref("justify-items")}}</li>
+ <li>{{cssxref("justify-self")}}</li>
+ <li>{{cssxref("justify-content")}}</li>
+</ul>
+
+<p>ブロック軸上でアイテムを整列するときは、 <code>align-</code> で始まるプロパティを使用します。</p>
+
+<ul>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+</ul>
+
+<p>フレックスボックスはさらに複雑であり、 {{cssxref("flex-direction")}} が <code>row</code> に設定されている場合に上記のものが当てはまります。フレックスボックスが <code>column</code> に設定されている場合、プロパティは逆になります。したがって、フレックスボックスを使用するときは、インライン軸とブロック軸よりも、主軸と交差軸について考えるほうが簡単です。 <code>justify-</code> プロパティは常に主軸上で、 <code>align-</code> プロパティは交差軸上で配置するために使用されます。</p>
+
+<h3 id="The_alignment_subject" name="The_alignment_subject">配置対象物</h3>
+
+<p><ruby><strong>配置対象物</strong><rp> (</rp><rt>alignment subject</rt><rp>) </rp></ruby>とは、配置が行われるもののことです。 <code>justify-self</code> または <code>align-self</code> の場合、あるいは <code>justify-items</code> または <code>align-items</code> によってこれらの値をグループとして設定する場合に、このプロパティが使用されている要素のマージンボックスになります。 <code>justify-content</code> および <code>align-content</code> プロパティはレイアウト方法ごとに異なります。</p>
+
+<h3 id="The_alignment_container" name="The_alignment_container">配置コンテナー</h3>
+
+<p><ruby><strong>配置コンテナー</strong><rp> (</rp><rt>alignment container</rt><rp>) </rp></ruby>は、内側で対象物を整列させるボックスです。これはふつう、配置対象物を内包するブロックになります。配置コンテナーには一つまたは多数の配置対象物を含めることができます。</p>
+
+<p>下の画像は、内側に2つの整列対象がある配置コンテナーの例です。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15953/align-container-subjects.png" style="height: 170px; width: 248px;"></p>
+
+<h3 id="Fallback_alignment" name="Fallback_alignment">代替配置</h3>
+
+<p>実現できない配置を設定した場合、<strong>代替配置</strong>が有効になり、利用可能な空間を扱います。この代替配置はレイアウト方法ごとに個別に定義されており、それぞれのページで詳しく説明されています。</p>
+
+<h2 id="Types_of_alignment" name="Types_of_alignment">配置の種類</h2>
+
+<p>この仕様書が詳述している配置には、3つの異なる種類があります。これらはキーワード値を使用します。</p>
+
+<ul>
+ <li><ruby><strong>位置指定配置</strong><rp> (</rp><rt>Positional alignment</rt><rp>)</rp></ruby>: 配置対象物の位置を、配置コンテナーからの相対で指定します。</li>
+ <li><ruby><strong>ベースライン配置</strong><rp> (</rp><rt>Baseline alignment</rt><rp>)</rp></ruby>: これらのキーワードは、配置コンテナー内にある複数の配置対象物のベースラインの関係で配置を定義します。</li>
+ <li><ruby><strong>分配配置</strong><rp> (</rp><rt>Distributed alignment</rt><rp>)</rp></ruby>: これらのキーワードは、配置対象物間の空白の分配で配置を定義します。</li>
+</ul>
+
+<h3 id="Positional_alignment_keyword_values" name="Positional_alignment_keyword_values">位置指定配置のキーワード値</h3>
+
+<p>以下の値は位置指定配置のために定義されており、 <code>justify-content</code> および <code>align-content</code> による内容の配置、そして <code>justify-self</code> および <code>align-self</code> による自己配置の値として使用することができます。</p>
+
+<ul>
+ <li><code>center</code></li>
+ <li><code>start</code></li>
+ <li><code>end</code></li>
+ <li><code>self-start</code></li>
+ <li><code>self-end</code></li>
+ <li><code>flex-start</code> フレックスボックスのみ</li>
+ <li><code>flex-end</code> フレックスボックスのみ</li>
+ <li><code>left</code></li>
+ <li><code>right</code></li>
+</ul>
+
+<p>画面の物理的な属性に関連する <code>left</code> と <code>right</code> の物理値を除いて、他のすべての値は論理値であり、内容の書字方向に関連します。</p>
+
+<p>たとえば、 CSS グリッドレイアウトで作業しているとき、英語で作業していて <code>justify-content</code> に <code>start</code> を設定すると、アイテムはインライン方向の先頭、すなわち英語の文は左端から始まるので左に移動します。右書きの言語であるアラビア語では、同じ <code>start</code> の値は、アラビア語の文がページの右側から始まるので、右に移動します。</p>
+
+<p>どちらの例も <code>justify-content: start</code> ですが、開始位置は書字方向によって異なります。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15956/writing-mode-start.png" style="height: 101px; width: 478px;"></p>
+
+<h3 id="Baseline_alignment" name="Baseline_alignment">ベースライン配置</h3>
+
+<p>ベースライン配置キーワードは、配置対象物のグループ間でボックスのベースラインを整列するために使用されます。これらは <code>justify-content</code> および <code>align-content</code> による内容の配置、そして <code>justify-self</code> および <code>align-self</code> による自己配置の値として使用することができます。</p>
+
+<ul>
+ <li><code>baseline</code></li>
+ <li><code>first baseline</code></li>
+ <li><code>last baseline</code></li>
+</ul>
+
+<p><code>justify-content</code> または <code>align-content</code> のためのベースライン配置の値を指定するベースラインのコンテンツ配置は、アイテムを行単位で整列するレイアウト方法で機能します。ボックスの内側にパディングを追加することによって、配置対象物のベースラインを相互に揃えます。</p>
+
+<p>ベースラインの自己配置では、ベースラインで配列するために、ボックスの外側にマージンを追加することによってボックスをずらします。自己配置は <code>justify-self</code> または <code>align-self</code> を使用する場合、あるいは <code>justify-items</code> または <code>align-items</code> を使用してこれらの値をグループとして設定する場合に行われます。</p>
+
+<h3 id="Distributed_alignment" name="Distributed_alignment">分配配置</h3>
+
+<p><strong>分配配置キーワード</strong> は <code>align-content</code> および <code>justify-content</code> で使用するプロパティです。これらのキーワードは、配置対象物を描画したあと、残りの空間をどう扱うか定義します。値は以下のとおりです。</p>
+
+<ul>
+ <li><code>stretch</code></li>
+ <li><code>space-between</code></li>
+ <li><code>space-around</code></li>
+ <li><code>space-evenly</code></li>
+</ul>
+
+<p>たとえばフレックスレイアウトでは、初期値の場合アイテムを <code>flex-start</code> で整列します。英語のように水平方向で上から下への書字方向で動作する場合、 <code>flex-direction</code> が <code>row</code> のときにはアイテムは左端から始まり、アイテムを描画した余白はすべてアイテムの後に配置されます。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15954/justify-content-start.png" style="height: 100px; width: 559px;"></p>
+
+<p>フレックスコンテナーに <code>justify-content: space-between</code> を設定すると、余白はアイテム間に分配されます。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15955/justify-content-space-between.png" style="height: 100px; width: 559px;"></p>
+
+<p>これらのキーワードを有効にするには、アイテムを配置する領域に余白が必要です。余白が存在しないと、分配されることはありません。</p>
+
+<h2 id="Overflow_alignment" name="Overflow_alignment">配置があふれた場合</h2>
+
+<p><code>safe</code> および <code>unsafe</code> キーワードは、配置コンテナーより配置対象物のほうが大きい場合の振る舞いを指定します。 <code>safe</code> キーワードを指定すると、指定された配置によりあふれが発生する場合、アイテムの一部が境界の外側に出て配置コンテナーがスクロールできないという「データ損失」を防ぐために、 <code>start</code> で配置します。</p>
+
+<p><code>unsafe</code> を指定した場合、データ損失が発生する可能性があっても配置が尊重されます。</p>
+
+<h2 id="Gaps_between_boxes" name="Gaps_between_boxes">ボックス間のギャップ</h2>
+
+<p>ボックス配置仕様書には、 <code>gap</code>, <code>row-gap</code>, <code>column-gap</code> も含まれています。これらのプロパティは、アイテムが配置されているあらゆるレイアウト方法で、行または列内のアイテム間で一貫したギャップを設定します。</p>
+
+<p><code>gap</code> プロパティは <code>row-gap</code> と <code>column-gap</code> の一括指定で、両プロパティを一度に設定することができます。</p>
+
+<ul>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+
+<p>以下の例では、グリッドレイアウトで <code>gap</code> の一括指定を使用して、行トラック間に <code>10px</code> のギャップと列トラック間に <code>2em</code> のギャップを設定します。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-gap.html", '100%', 500)}}</p>
+
+<p>この例では、 {{cssxref("gap")}} に加えて {{cssxref("grid-gap")}} プロパティを使用しています。 <code>gap</code> プロパティはもともとグリッドレイアウト仕様書の中で <code>grid-</code> という接頭辞をつけられていました。ブラウザーによってはこれらの接頭辞がついたバージョンにしか対応していません。</p>
+
+<ul>
+ <li>{{cssxref("grid-row-gap")}}</li>
+ <li>{{cssxref("grid-column-gap")}}</li>
+ <li>{{cssxref("grid-gap")}}</li>
+</ul>
+
+<p>接頭辞がついたバージョンは接頭辞がないバージョンの別名として保持されています。 <code>grid-gap</code> プロパティの次に <code>gap</code> を同じ値で追加すれば、ベンダー接頭辞と同じように使用できます。</p>
+
+<p>また、スペース配分キーワードを使用した場合やアイテムにマージンを追加したりした場合など、表示される視覚的なギャップが広がることもあります。</p>
+
+<h2 id="Pages_detailing_individual_alignment_properties" name="Pages_detailing_individual_alignment_properties">レイアウト別の配置詳細ページ</h2>
+
+<p>CSS ボックス配置のプロパティは、相互作用する仕様に応じて様々な方法で実装されています。レイアウトの種類ごとの使用方法の詳細は、それぞれのページを参照してください。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">フレックスボックスでのボックス配置</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout">CSS グリッドレイアウトでのボックス配置</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout">段組みレイアウトでのボックス配置</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables">ブロック、絶対配置、表レイアウトのブロック配置</a></li>
+</ul>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="CSS_Properties" name="CSS_Properties">CSS プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("place-content")}}</li>
+ <li>{{cssxref("justify-items")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("place-items")}}</li>
+ <li>{{cssxref("justify-self")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("place-self")}}</li>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+</div>
+
+<h3 id="Glossary_Entries" name="Glossary_Entries">用語集の項目</h3>
+
+<div class="index">
+<ul>
+ <li>{{Glossary("Cross axis", "交差軸")}}</li>
+ <li>{{Glossary("Main axis", "主軸")}}</li>
+ <li>{{Glossary("Alignment container", "配置コンテナー")}}</li>
+ <li>{{Glossary("Alignment subject", "配置対象物")}}</li>
+ <li>{{Glossary("Fallback alignment", "代替配置")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides" name="Guides">ガイド</h2>
+
+<ul>
+ <li>CSS フレックスボックスガイド: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">フレックスボックスの基本概念</a></em></li>
+ <li>CSS Flexbox guide: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">フレックスコンテナー内のアイテムの配置</a></em></li>
+ <li>CSS Grid guide: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">CSS グリッドレイアウトのボックス配置</a></em></li>
+</ul>
+
+<h2 id="External_Resources" name="External_Resources">外部リソース</h2>
+
+<ul>
+ <li><a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box alignment cheatsheet</a></li>
+ <li><a href="https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/">CSS Grid, Flexbox and Box alignment</a></li>
+ <li><a href="https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/">Thoughts on partial implementations of Box alignment</a></li>
+</ul>