aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--files/ja/web/css/align-content/index.md (renamed from files/ja/web/css/align-content/index.html)0
-rw-r--r--files/ja/web/css/align-items/index.md (renamed from files/ja/web/css/align-items/index.html)0
-rw-r--r--files/ja/web/css/align-self/index.md (renamed from files/ja/web/css/align-self/index.html)0
-rw-r--r--files/ja/web/css/column-gap/index.md (renamed from files/ja/web/css/column-gap/index.html)0
-rw-r--r--files/ja/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md (renamed from files/ja/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html)0
-rw-r--r--files/ja/web/css/css_box_alignment/box_alignment_in_flexbox/index.html119
-rw-r--r--files/ja/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md (renamed from files/ja/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html)0
-rw-r--r--files/ja/web/css/css_box_alignment/index.md (renamed from files/ja/web/css/css_box_alignment/index.html)0
-rw-r--r--files/ja/web/css/gap/index.md (renamed from files/ja/web/css/gap/index.html)0
-rw-r--r--files/ja/web/css/justify-content/index.md (renamed from files/ja/web/css/justify-content/index.html)0
-rw-r--r--files/ja/web/css/justify-items/index.md (renamed from files/ja/web/css/justify-items/index.html)0
-rw-r--r--files/ja/web/css/justify-self/index.md (renamed from files/ja/web/css/justify-self/index.html)0
-rw-r--r--files/ja/web/css/place-content/index.md (renamed from files/ja/web/css/place-content/index.html)0
-rw-r--r--files/ja/web/css/place-items/index.md (renamed from files/ja/web/css/place-items/index.html)0
-rw-r--r--files/ja/web/css/place-self/index.md (renamed from files/ja/web/css/place-self/index.html)0
-rw-r--r--files/ja/web/css/row-gap/index.md (renamed from files/ja/web/css/row-gap/index.html)0
16 files changed, 0 insertions, 119 deletions
diff --git a/files/ja/web/css/align-content/index.html b/files/ja/web/css/align-content/index.md
index 907888b7bc..907888b7bc 100644
--- a/files/ja/web/css/align-content/index.html
+++ b/files/ja/web/css/align-content/index.md
diff --git a/files/ja/web/css/align-items/index.html b/files/ja/web/css/align-items/index.md
index 49893ce4f4..49893ce4f4 100644
--- a/files/ja/web/css/align-items/index.html
+++ b/files/ja/web/css/align-items/index.md
diff --git a/files/ja/web/css/align-self/index.html b/files/ja/web/css/align-self/index.md
index 7605ab04dd..7605ab04dd 100644
--- a/files/ja/web/css/align-self/index.html
+++ b/files/ja/web/css/align-self/index.md
diff --git a/files/ja/web/css/column-gap/index.html b/files/ja/web/css/column-gap/index.md
index 032d6d4f62..032d6d4f62 100644
--- a/files/ja/web/css/column-gap/index.html
+++ b/files/ja/web/css/column-gap/index.md
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.md
index 2cb47a5709..2cb47a5709 100644
--- 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.md
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
deleted file mode 100644
index 5435419fac..0000000000
--- a/files/ja/web/css/css_box_alignment/box_alignment_in_flexbox/index.html
+++ /dev/null
@@ -1,119 +0,0 @@
----
-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>この例では、3つのフレックスアイテムが {{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>開始点に配置された一連のフレックスアイテムのうち、1つのアイテムで {{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.md
index 569a5e52af..569a5e52af 100644
--- 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.md
diff --git a/files/ja/web/css/css_box_alignment/index.html b/files/ja/web/css/css_box_alignment/index.md
index a220b68112..a220b68112 100644
--- a/files/ja/web/css/css_box_alignment/index.html
+++ b/files/ja/web/css/css_box_alignment/index.md
diff --git a/files/ja/web/css/gap/index.html b/files/ja/web/css/gap/index.md
index edc971b860..edc971b860 100644
--- a/files/ja/web/css/gap/index.html
+++ b/files/ja/web/css/gap/index.md
diff --git a/files/ja/web/css/justify-content/index.html b/files/ja/web/css/justify-content/index.md
index 7ec2d466e2..7ec2d466e2 100644
--- a/files/ja/web/css/justify-content/index.html
+++ b/files/ja/web/css/justify-content/index.md
diff --git a/files/ja/web/css/justify-items/index.html b/files/ja/web/css/justify-items/index.md
index b442c7889d..b442c7889d 100644
--- a/files/ja/web/css/justify-items/index.html
+++ b/files/ja/web/css/justify-items/index.md
diff --git a/files/ja/web/css/justify-self/index.html b/files/ja/web/css/justify-self/index.md
index 5f90a9d470..5f90a9d470 100644
--- a/files/ja/web/css/justify-self/index.html
+++ b/files/ja/web/css/justify-self/index.md
diff --git a/files/ja/web/css/place-content/index.html b/files/ja/web/css/place-content/index.md
index 0ffb456baf..0ffb456baf 100644
--- a/files/ja/web/css/place-content/index.html
+++ b/files/ja/web/css/place-content/index.md
diff --git a/files/ja/web/css/place-items/index.html b/files/ja/web/css/place-items/index.md
index 6c79e3e785..6c79e3e785 100644
--- a/files/ja/web/css/place-items/index.html
+++ b/files/ja/web/css/place-items/index.md
diff --git a/files/ja/web/css/place-self/index.html b/files/ja/web/css/place-self/index.md
index 4d9c85f610..4d9c85f610 100644
--- a/files/ja/web/css/place-self/index.html
+++ b/files/ja/web/css/place-self/index.md
diff --git a/files/ja/web/css/row-gap/index.html b/files/ja/web/css/row-gap/index.md
index f67c07b0ec..f67c07b0ec 100644
--- a/files/ja/web/css/row-gap/index.html
+++ b/files/ja/web/css/row-gap/index.md