initial commit

6 files changed, 509 insertions, 0 deletions

diff --git a/files/ja/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html b/files/ja/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html
new file mode 100644
index 0000000000..71f345c3d8
--- /dev/null
+++ b/files/ja/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html
@@ -0,0 +1,128 @@
+---
+title: 通常フローでのブロック及びインラインレイアウト
+slug: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow
+tags:
+  - CSS
+  - CSS Flow Layout
+  - CSS フローレイアウト
+  - Guide
+  - Intermediate
+  - Layout
+  - Margins
+  - flow
+  - ガイド
+  - マージン
+  - レイアウト
+  - 中級者
+translation_of: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">このガイドでは、通常フローの中でブロック及びインライン要素がどのように動作するかの基本を見てみます。</p>
+
+<p>通常フローは <a href="https://www.w3.org/TR/CSS2/visuren.html#normal-flow">CSS 2.1 仕様書</a>で定義されており、通常フロー内のあらゆるボックスが<em>整形コンテキスト</em>の一部になることを説明しています。ブロックかインラインのどちらかになることができますが、同時に両方になることはできません。<em>ブロック整形コンテキスト</em>に参加するものをブロックレベルボックス、<em>インライン整形コンテキスト</em>に参加するものをインラインレベルボックスと呼んでいます。</p>
+
+<p>ブロックまたはインライン整形コンテキストを持つ要素の動作は、この仕様書でも定義されています。ブロック整形コンテキストを持つ要素については、仕様書では以下にように言っています。</p>
+
+<blockquote>
+<p>“ブロック整形コンテキストでは、ボックスは次々と垂直に、包含ブロックの上からレイアウトされます。二つの兄弟ボックスの間の垂直距離は、 'margin' プロパティで指定されます。ブロック整形コンテキストにおいて、隣り合うブロックレベルボックスの間の垂直マージンは相殺されます。<br>
+ <br>
+ ブロック整形コンテキストの中では、それぞれのボックスの左外側の端は、包含ブロックの左端に接します (右書きの整形では、右端が接します)。” - 9.4.1</p>
+</blockquote>
+
+<p>インライン整形コンテキストを持つ要素については以下の通りです。</p>
+
+<blockquote>
+<p>“インライン整形コンテキストでは、ボックスは包含ブロックの上から次々と水平に、レイアウトされます。これらのボックスの間では、水平マージン、境界、パディングが尊重されます。ボックスは垂直方向には様々な方法で配置されます。下や上に配置されたり、テキストのベースラインに配置されたりします。1行を形成するボックスを含む矩形の領域は行ボックスと呼ばれます。” - 9.4.2</p>
+</blockquote>
+
+<p>なお、 CSS 2.1 仕様書では、横書きで上から下へ向かう書字方向の文書を説明しています。例えば、ブロックボックス間を垂直距離によって説明しています。ブロックおよびインライン要素の動作は、縦書きの書字方向でも同様に動作するものであり、今後のフローレイアウトと書字方向のガイドで明らかにする予定です。</p>
+
+<h2 id="Elements_participating_in_a_block_formatting_context" name="Elements_participating_in_a_block_formatting_context">ブロック整形コンテキストに参加する要素</h2>
+
+<p>英語のように書字方向が横書きのブロック要素は、垂直方向に、1つずつ下方向にレイアウトされます。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16125/mdn-horizontal.png" style="height: 382px; width: 521px;"></p>
+
+<p>書字方向が縦書きである場合は、水平方向にレイアウトされるでしょう。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16126/mdn-vertical.png" style="height: 382px; width: 418px;"></p>
+
+<p>このガイドでは、英語、すなわち横書きモードでの作業となります。しかし、文書が縦書きの場合でも、説明したことはすべて同じように動作するはずです。</p>
+
+<p>仕様書で定義されているように、2つのブロックボックスの間のマージンは、要素間に区切りを作るものです。2つの段落から成るとても単純なレイアウトで、境界を追加したところに見ることができます。既定ののブラウザースタイルシートでは、上下にマージンを追加することで、段落間の間隔が追加されています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow.html", '100%', 700)}}</p>
+
+<p>段落要素のマージンを <code>0</code> にすると、境界線が接触します。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-margin-zero.html", '100%', 700)}}</p>
+
+<p>既定では、ブロック要素はインライン方向の空間をすべて消費するので、段落は広がり、包含ブロックの中で可能な限り大きくなります。ブロック要素に幅を設定した場合、段落が横に並ぶ空間があったとしても、段落は下へ下へと配置されます。それぞれは包含ブロックの先頭側の反対側から始まりますので、その書字方向で文章が始まる場所になります。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-width.html", '100%', 700)}}</p>
+
+<h3 id="Margin_collapsing" name="Margin_collapsing">マージンの相殺</h3>
+
+<p>仕様書では、ブロック要素間のマージンは<em>相殺される</em>と説明されています。つまり、上マージンを持つ要素がに下マージンを持つ要素の直後に来た場合、空間の合計はこれら2つのマージンの合計になるのではなく、マージンが相殺され、本質的には2つのマージンのうち大きい方のマージンと同じくらいの大きさになるということです。</p>
+
+<p>下記の例では、段落の上マージンが <code>20px</code>、下マージンが <code>40px</code> となっています。段落間のマージンの大きさは、2段落目の小さい上マージンが1段目の大きい下マージンで相殺されるため、 <code>40px</code> になります。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-collapsing.html", '100%', 500)}}</p>
+
+<p>マージンの相殺については、<a href="/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">マージンの相殺</a>の記事で詳しく解説しています。</p>
+
+<div class="note">
+<p>注: マージンが相殺されているかどうか分からない場合は、ブラウザーのの DevTools でボックスモデルの値を確認してください。これにより、マージンの実際のサイズが表示されるので、何が起こっているかを特定するのに役立ちます。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16124/box-model.png" style="height: 848px; width: 828px;"></p>
+</div>
+
+<h2 id="Elements_participating_in_an_inline_formatting_context" name="Elements_participating_in_an_inline_formatting_context">インライン整形コンテキストに参加する要素</h2>
+
+<p>インライン要素は、その特定の書字方向で文章が進む方向に次々と表示されます。インライン要素がボックスを持っていると考えることはあまりありませんが、 CSS のすべての要素と同様にボックスを持っています。これらのインラインボックスは、次から次へと配置されています。すべてのボックスを含むブロックに十分な空間がない場合、ボックスは新しい行に分割されます。生成された行は行ボックスと呼ばれています。</p>
+
+<p>以下の例では、段落の内部に {{HTMLElement("strong")}} 要素があることで生成された3つのインラインボックスがあります。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/inline.html", '100%', 500)}}</p>
+
+<p><code>&lt;strong&gt;</code> 要素の前と <code>&lt;strong&gt;</code> 要素の後の言葉の周りのボックスは無名ボックスと呼ばれ、すべてがボックスに含まれていることを保証するために導入されていますが、私たちが直接ターゲットにすることはできません。</p>
+
+<p>行ボックスのブロック方向の寸法 (すなわち英語で作業しているときは高さ) は、その中の最も高さが高いボックスによって定義されます。次の例では、 <code>&lt;strong&gt;</code> 要素に 300% に設定しました。その内容がその行の行ボックスの高さを定義するようになります。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/line-box.html", '100%', 500)}}</p>
+
+<p>ブロックボックスとインラインボックスの動作についての詳細は、<a href="/ja/docs/Web/CSS/Visual_formatting_model">視覚整形モデル</a>のガイドを参照してください。</p>
+
+<h2 id="The_display_property_and_flow_layout" name="The_display_property_and_flow_layout">display プロパティとフローレイアウト</h2>
+
+<p>CSS 2.1 に存在する規則に加えて、新しい水準の CSS では、ブロックボックスとインラインボックスの動作がさらに記述されています。 {{cssxref("display")}} プロパティは、ボックスとその中のボックスの動作を定義します。 CSS Display Model Level 3 では、 <code>display</code> プロパティがどのようにボックスや生成されるボックスの動作を変えるのかを知ることができます。</p>
+
+<p>要素の表示種別は、外部表示型として、ボックスが同じ整形コンテキスト内の他の要素とどのように並んで表示されるかを定義します。また、内部表示型として、この要素内のボックスがどのように動作するかを決定します。フレックスボックスレイアウトを考えると、このことがよくわかります。下の例には {{HTMLElement("div")}} があり、それに <code>display: flex</code> を指定しています。フレックスコンテナーはブロック要素のように動作しており、新しい行に表示されてインライン方向に取ることができるすべての空間を取っています。これは外部表示型が <code>block</code> であるということです。</p>
+
+<p>フレックスアイテムはフレックス整形コンテキストに参加しています。これは、その親は <code>display: flex</code> を持つ要素であり、これは <code>flex</code> の内部表示型を持っているため、直接の子にフレックス整形コンテキストを確立しているためです。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/flex.html", '100%', 500)}}</p>
+
+<p>したがって、 CSS のすべてのボックスはこのように動作していると考えることができます。ボックス自体は外部表示型を持っているので、どのように他のボックスと並ぶよう動作するかを知っています。次に、ボックスは内部表示型を持ち、子ボックスの動作を変更します。これらの子も、外部と内部の表示型を持っています。前の例でフレックスアイテムはフレックスレベルのボックスになるので、フレックス整形コンテキストの一部として外部表示型が指定されます。しかし、これらのアイテムの内部表示型は<em>フロー</em>であり、子アイテムは通常フローに参加します。フレックスアイテムの内部に含まれているアイテムは、何か表示型が変更されない限り、ブロックおよびインライン要素として配置されます。</p>
+
+<p>外部と内部の表示型というこの概念は、フレックスボックス (<code>display: flex</code>) やグリッドレイアウト (<code>display: grid</code>) などのレイアウト方法を使用しているコンテナーも、外部表示型が <code>block</code> であるために、ブロックとインラインのレイアウトに参加しているということを教えてくれるので重要です。</p>
+
+<h3 id="Changing_the_Formatting_Context_an_element_participates_in" name="Changing_the_Formatting_Context_an_element_participates_in">要素が参加する整形コンテキストの変更</h3>
+
+<p>ブラウザーはアイテムを、その要素が通常ブロックやインラインの整形コンテキストの一部としての意味を持つものとして表示します。例えば、 {{HTMLElement("strong")}} 要素は単語を強調するために使用され、ブラウザーでは太字で表示されます。一般には、 <code>&lt;strong&gt;</code> 要素がブロックレベルの要素として表示され、改行して表示されるという意味は持ちません。すべての <code>&lt;strong&gt;</code> 要素をブロック要素として表示したい場合は、 <code>&lt;strong&gt;</code> に <code>display: block</code> を設定することで実現できます。これは、コンテンツのマークアップにほとんど意味に応じて HTML 要素を使用し、表示方法を変更するのに CSS を使用することができることを意味します。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/change-formatting.html", '100%', 500)}}</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>このガイドでは、通常のフローで要素がブロック要素やインライン要素として、どのように表示されるかを見てきました。これらの要素の既定の動作により、 CSS のスタイリングが全くない HTML 文書は、読みやすい形で表示されます。通常のフローがどのように機能するかを理解することで、要素の表示方法を変更するための出発点を理解し、レイアウトを容易にすることができるようになります。</p>
+
+<h2 id="See_Also" name="See_Also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Box_Model">CSS 基本ボックスモデル</a></li>
+ <li><em><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></em> - レイアウトの学習</li>
+ <li><a href="/ja/docs/Web/HTML/Inline_elements">インライン要素</a></li>
+ <li><a href="/ja/docs/Web/HTML/Block-level_elements">ブロックレベル要素</a></li>
+</ul>
diff --git a/files/ja/web/css/css_flow_layout/flow_layout_and_overflow/index.html b/files/ja/web/css/css_flow_layout/flow_layout_and_overflow/index.html
new file mode 100644
index 0000000000..bb13c91fb5
--- /dev/null
+++ b/files/ja/web/css/css_flow_layout/flow_layout_and_overflow/index.html
@@ -0,0 +1,73 @@
+---
+title: フローレイアウトとオーバーフロー
+slug: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow
+tags:
+  - CSS
+  - overflow
+  - text-overflow
+  - ガイド
+  - フローレイアウト
+  - レイアウト
+  - 中級者
+  - 可視性
+translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow
+---
+<p class="summary">コンテナーに収まらない量のコンテンツがある場合、オーバーフローが発生します。どのようにオーバーフローが動作するかを理解することは、 CSS で制約された寸法で要素を扱うのに重要です。このガイドでは、通常フローで作業中にオーバーフローがどのように起こるかを説明します。</p>
+
+<h2 id="What_is_overflow" name="What_is_overflow">オーバーフローとは</h2>
+
+<p>Giving an element a fixed height and width, then adding significant content to the box, creates a basic overflow example:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/overflow/overflow.html", '100%', 700)}}</p>
+
+<p>The content goes into the box. Once it fills the box, it continues to overflow in a visible way, displaying content outside the box, potentially displaying under subsequent content. The property that controls how overflow behaves is the <code><a href="/ja/docs//Web/CSS/overflow">overflow</a></code> property which has an initial value of <code>visible</code>. This is why we can see the overflow content.</p>
+
+<h2 id="Controlling_overflow" name="Controlling_overflow">オーバーフローの制御</h2>
+
+<p>There are other values that control how overflow content behaves. To hide overflowing content use a value of <code>hidden</code>. This may cause some of your content to not be visible.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/overflow/hidden.html", '100%', 700)}}</p>
+
+<p>Using a value of <code>scroll</code> contains the content in its box and add scrollbars to enable viewing it. Scrollbars will be added even if the content fits in the box.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/overflow/scroll.html", '100%', 700)}}</p>
+
+<p>Using a value of <code>auto</code> will display the content with no scrollbars if the content fits inside the box. If it doesn’t fit then scrollbars will be added. Comparing the next example with the example for <code>overflow: scroll</code> you should see <code>overflow scroll</code> has horizontal and vertical scrollbars when it only needs vertical scrolling. The <code>auto</code> example below only adds the scrollbar in the direct we need to scroll.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/overflow/auto.html", '100%', 700)}}</p>
+
+<p>As we have already learned, using any of these values, other than the default of <code>visible,</code> will create a new Block Formatting Context.</p>
+
+<p>Note: In the <a href="https://www.w3.org/TR/css-overflow-3/">Working Draft of Overflow Level 3</a>, there is an additional value <code>overflow: clip</code>. This will act like <code>overflow: hidden</code> however it does not allow for programmatic scrolling, the box becomes non-scrollable. In addition it does not create a Block Formatting Context.</p>
+
+<p>The overflow property is in reality a shorthand for the <code><a href="/ja/docs/Web/CSS/overflow-x">overflow-x</a></code> and <code><a href="/ja/docs/Web/CSS/overflow-y">overflow-y</a></code> properties. If you specify only one value for overflow, this value is used for both axes. However, you can specify both values in which case the first is used for <code>overflow-x</code> and therefore the horizontal direction, and the second for <code>overflow-y</code> and the vertical direction. In the below example, I have only specified <code>overflow-y: scroll</code> so we do not get the unwanted horizontal scrollbar.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/overflow/overflow-y.html", '100%', 700)}}</p>
+
+<h2 id="Flow_Relative_Properties" name="Flow_Relative_Properties">フロー関係のプロパティ</h2>
+
+<p>In the guide to <a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">Writing Modes and Flow Layout</a>, we looked at the newer properties of <code>block-size</code> and <code>inline-size</code> which make more sense when working with different writing modes than tying our layout to the physical dimensions of the screen. The Level 3 Overflow Module also includes flow relative properties for overflow - <code><a href="/ja/docs/Web/CSS/@media/overflow-block">overflow-block</a></code> and <code><a href="/ja/docs/Web/CSS/@media/overflow-inline">overflow-inline</a></code>. These correspond to <code>overflow-x</code> and <code>overflow-y</code> but the mapping depends on the writing mode of the document.</p>
+
+<p>These properties currently do not have implementations in browsers, so you will need to use the physical properties at the present time and adjust for your writing mode.</p>
+
+<h2 id="Indicating_Overflow" name="Indicating_Overflow">オーバーフローの指示</h2>
+
+<p>In the Level 3 Overflow specification we have some properties which can help improve the way content looks in an overflow situation.</p>
+
+<h3 id="Inline-Axis_Overflow" name="Inline-Axis_Overflow">インライン軸のオーバーフロー</h3>
+
+<p>The <code><a href="/ja/docs/Web/CSS/text-overflow">text-overflow</a></code> property deals with text overflowing in the inline direction. It takes one of two values <code>clip</code>, in which case content is clipped when it overflows, this is the initial value and therefore the default behaviour. We also have <code>ellipsis</code> which renders an ellipsis, which may be replaced with a better character for the language or writing mode in use.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/overflow/text-overflow.html", '100%', 500)}}</p>
+
+<h3 id="Block-Axis_Overflow" name="Block-Axis_Overflow">ブロック軸のオーバーフロー</h3>
+
+<p>There is also a proposal for a <code>block-overflow</code> property, although at the time of writing the name is still up for discussion. This proposal would enable the adding of an ellipsis when text overflows in the block dimension.</p>
+
+<p>This is useful in the situation where you have a listing of articles, for example, and you display the listings in fixed height boxes which only take a limited amount of text. It may not be obvious to the reader that there is more content to click through to when clicking the box or the title. An ellipsis indicates clearly the fact there is more content. The specification would allow a string of content or a regular ellipsis to be inserted.</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>Whether you are in continuous media on the web or in a Paged Media format such as print or EPUB, understanding how content overflows is useful when dealing with any layout method. By understanding how overflow works in normal flow, you should find it easier to understand the implications of overflow content in layout methods such as grid and flexbox.</p>
+
+<div>{{QuickLinksWithSubpages("/ja/docs/Web/CSS/CSS_Flow_Layout/")}}</div>
diff --git a/files/ja/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html b/files/ja/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html
new file mode 100644
index 0000000000..56ef206cbd
--- /dev/null
+++ b/files/ja/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html
@@ -0,0 +1,93 @@
+---
+title: フローレイアウトと書字方向
+slug: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes
+tags:
+  - CSS 書字方向
+  - ガイド
+  - フローレイアウト
+  - 方向
+  - 日本語処理
+  - 書字方向
+translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes
+---
+<p class="summary">通常フローの動きについて詳細を説明している CSS 2.1 仕様書は、横書きを想定しています。<a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">レイアウト</a>プロパティは縦書きモードでも同様に動作するべきです。このガイドでは、異なる文書の書字方向が使われた場合のフローレイアウトの動作を見てみましょう。</p>
+
+<p>これは CSS での書字方向の使用に関する包括的なガイドではなく、ここでの目的は、フローレイアウトと書字方向の起こりうる相互作用が予想できないような領域を文書化することです。この文書の<a href="#External_Resources">外部リソース</a>や<a href="#See_Also">関連情報</a>の節で、書字方向に関するより多くのリソースを紹介します。</p>
+
+<h2 id="The_Writing_Modes_Specification" name="The_Writing_Modes_Specification">書字方向の仕様書</h2>
+
+<p>CSS Writing Modes Level 3 仕様書では、フローレイアウトで文書の書字方向が変更された時の影響を定義しています。<a href="https://drafts.csswg.org/css-writing-modes-3/#text-flow">仕様書</a>の書字方向の導入部では、以下のように書かれています。</p>
+
+<blockquote>
+<p>“CSS の書字方向は {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} プロパティによって決められます。これは主にインラインベース方向とブロックフロー方向から決まります。”</p>
+</blockquote>
+
+<p>仕様書では<em>インラインベース方向</em>を、行内でコンテンツが並べられる方向として定義しています。ここでは、インライン方向の始点と終点を定義しています。始点は文が始まるところであり、終点はテキストの行が終わり、新しい行への折り返しが始まる前です。</p>
+
+<p><em>ブロックフロー方向</em>は、段落などのボックスが、その書字方向で積み重なる方向です。 CSS の writing-mode プロパティは、ブロックフロー方向を制御します。ページまたはページの一部を <code>vertical-lr</code> に変更したい場合、要素に <code>writing-mode: vertical-lr</code> と設定し、これがブロックの方向を変更して、従ってインライン方向も同様に変更します。</p>
+
+<p>特定の言語では書字方向やテキストの方向が使用されますが、これらの方向を創造的な効果として、例えば見出しを縦書きにするために使用することができます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/creative-use.html", '100%', 720)}}</p>
+
+<h2 id="The_writing-mode_property_and_block_flow" name="The_writing-mode_property_and_block_flow"><code>writing-mode</code> プロパティとブロックフロー</h2>
+
+<p>{{cssxref("writing-mode")}} プロパティは <code>horizontal-tb</code>, <code>vertical-rl</code>, <code>vertical-lr</code> の値を受け入れます。これらの値はページのブロックフローの方向を制御します。初期値は <code>horizontal-tb</code> で、ブロックフロー方向は上から下で、インライン方向は横書きとなります。英語のような左書きの言語、アラビア語のような右書きの言語は、すべて <code>horizontal-tb</code> です。</p>
+
+<p>以下の例は <code>horizontal-tb</code> を使用したブロックを示しています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/horizontal-tb.html", '100%', 720)}}</p>
+
+<p>vertical-rl の値は、次の例に見られるように、ブロックフロー方向は右から左で、インライン方向は縦書きになります。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-rl.html", '100%', 720)}}</p>
+
+<p>最後の例では <code>writing-mode</code> の第三の値である <code>vertical-lr</code> を紹介します。ブロックフロー方向は左から右で、インライン方向は縦書きになります。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-lr.html", '100%', 720)}}</p>
+
+<h2 id="Boxes_with_a_different_writing_mode_to_their_parent" name="Boxes_with_a_different_writing_mode_to_their_parent">書字方向が親と異なるボックス</h2>
+
+<p>親とは書字方向が異なる内部のボックスを作成した場合、インラインレベルボックスは <code>display: inline-block</code> であるかのように表示されます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-change-mode.html", '100%', 720)}}</p>
+
+<p>ブロックレベルボックスは新しいブロック整形コンテキストを生成し、つまり内部の display 種別が <code>flow</code> であれば、 display 種別の計算値は <code>flow-root</code> になります。次の例では、親が新しいブロック整形コンテキストを確立するため、 <code>horizontal-tb</code> で表示される浮動要素を含むボックスがどこに表示されるかを確認できます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/block-change-mode.html", '100%', 720)}}</p>
+
+<h2 id="Replaced_elements" name="Replaced_elements">置換要素</h2>
+
+<p>画像などの置換要素は、 <code>writing-mode</code> プロパティによって方向が変更されません。しかし、テキストを含むフォームコントロールのような置換要素は、使用中の書字方向に一致するでしょう。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/replaced.html", '100%', 720)}}</p>
+
+<h2 id="Logical_Properties_and_Values" name="Logical_Properties_and_Values">論理プロパティと値</h2>
+
+<p>書字方向を <code>horizontal-tb</code> 以外にして作業をすると、画面の物理的な寸法に合わせられた多くのプロパティと値はおかしく見えます。例えば、 <code>horizontal-tb</code> の中でボックスの幅を 100px に設定すると、インライン方向の寸法を制御することになります。 <code>vertical-lr</code> では、ブロック方向の寸法を制御することになり、テキストに合わせて回転するわけではありません。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/width.html", '100%', 720)}}</p>
+
+<p>従って、新しいプロパティ {{cssxref("block-size")}} および {{cssxref("inline-size")}} ができました。ブロックの <code>inline-size</code> を 100px に設定すると、書字方向が横書きか縦書きかに関わらず、 <code>inline-size</code> は常にインライン方向の寸法を意味します。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-size.html", '100%', 720)}}</p>
+
+<p><a href="/ja/docs/Web/CSS/CSS_Logical_Properties">CSS 論理プロパティと値</a>の仕様書は、マージン、パディング、境界の制御や、その他の通常は物理的な方向を使用して指定するものの論理バージョンのプロパティを含んでいます。</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>多くの場合、フローレイアウトは文書や文書の一部の書字方向を変更したときに、期待通りに動作するでしょう。これはふつう、縦書きの言語や創造的な理由で使用することができます。 CSS は論理プロパティと値を導入することで、縦書き時にインラインやブロック方向に基づいて寸法を決めやすくしています。これはどの書字方向でも動作するコンポーネントを作成するのに便利です。</p>
+
+<h2 id="See_Also" name="See_Also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Writing_Modes">書字方向</a></li>
+</ul>
+
+<h2 id="External_Resources" name="External_Resources">外部リソース</h2>
+
+<ul>
+ <li><em><a href="https://24ways.org/2016/css-writing-modes/">CSS Writing Modes</a></em>, Jen Simmons on 24 Ways</li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/ja/docs/Web/CSS/CSS_Flow_Layout/")}}</div>
diff --git a/files/ja/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html b/files/ja/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html
new file mode 100644
index 0000000000..cdccf842c6
--- /dev/null
+++ b/files/ja/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html
@@ -0,0 +1,64 @@
+---
+title: フロー内とフローの外
+slug: Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow
+translation_of: Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">前のガイド</a>では、通常フロー内でのブロック及びインラインレイアウトを説明しました。フロー内のすべての要素は、この方法を使用して配置されます。</p>
+
+<p>以下の例では、見出し、段落、リスト、そして <code>strong</code> 要素を含む最後の段落があります。見出しと段落はブロックレベルで、 <code>strong</code> 要素はインラインです。リストはフレックスボックスを使用してアイテムを1行に配置していますが、ブロックレイアウトとインラインレイアウトの両方に対応しています。 - コンテナーは外側で <code>display</code> が <code>block</code> になっています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/in-flow.html", '100%', 800)}}</p>
+
+<p>すべての要素がフローの中にあるといえます。ページ上にはソース内にある順序で出現しています。</p>
+
+<h2 id="Taking_an_item_out_of_flow" name="Taking_an_item_out_of_flow">項目のフローの外への持ち出し</h2>
+
+<p>以下のものを除いて、すべての要素がフロー内にあります。</p>
+
+<ul>
+ <li>浮動アイテム</li>
+ <li><code>position: absolute</code> のアイテム (同様に機能する <code>position: fixed</code> を含む)</li>
+ <li>ルート要素 (<code>html</code>)</li>
+</ul>
+
+<p>フローの外のアイテムは、新しいブロック整形コンテキスト (BFC) を作成するので、その中のものはページの残りから独立して、小さなレイアウトのように見えます。したがってルート要素はフローの外で、文書内のすべてのコンテナーとして、文書のブロック整形コンテキストを確立します。</p>
+
+<h3 id="Floated_Items" name="Floated_Items">浮動アイテム</h3>
+
+<p>この例では1つの <code>div</code> と、それから2つの段落があります。段落には背景色を塗っており、 <code>div</code> を左側に浮動させました。 <code>div</code> はフローの外になりました。</p>
+
+<p>浮動アイテムとして、最初は通常のフローであるようにレイアウトされますが、そのあとでフローから取り出され、左側のできるだけ遠くに移動されました。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/float.html", '100%', 800)}}</p>
+
+<p>次の段落の背景色が下層に表示されているのが見えます。その段落の行ボックスだけが短縮され、浮動アイテムの周りでコンテンツを折り返す効果があります。段落のボックスは、通常のフローの規則に従って表示されます。このため、行ボックスから距離を置くために浮動アイテムの周りに間隔を作るには、アイテムにマージンを追加する必要があります。このために以下のフロー内のコンテンツに追加することができるものはありません。</p>
+
+<h3 id="Absolute_Positioning" name="Absolute_Positioning">絶対位置指定</h3>
+
+<p>アイテムに <code>position: absolute</code> または <code>position: fixed</code> を与えると、アイテムをフローから外し、アイテムが占めるはずだった空間も除去されます。次の例では、3つの段落要素を用い、2番目の要素は <code>position</code> を <code>absolute</code> にし、オフセット値を <code>top: 30px</code> および <code>right: 30px</code> としています。アイテムは文書フローから除去されています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/abspos.html", '100%', 700)}}</p>
+
+<p><code>position: fixed</code> を使用しても、アイテムをフローから除去しますが、オフセットは包含ブロックではなくビューポートからのものになります。</p>
+
+<p>位置指定してアイテムをフローの外に持ち出す場合、コンテンツが重複する可能性を管理する必要があります。フローの外ということは、基本的にページ内の他の要素が、その要素が存在することを知ることがなく、従って影響を与えないことを意味します。</p>
+
+<h3 id="Relative_Positioning_and_Flow" name="Relative_Positioning_and_Flow">相対位置指定とフロー</h3>
+
+<p>アイテムに <code>position: relative</code> によって相対位置を与えた場合、フロー内には残りますが、周囲を押し広げるためにオフセット値を使用することができます。しかし、以下の例のように、通常フローで配置するはずだった空間は予約されます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/relative.html", '100%', 800)}}</p>
+
+<p>アイテムを除去するために何かをしたり、アイテムを通常フローで配置される場所からずらしたりした場合は、重ならないようにコンテンツやコンテンツの周囲を管理する必要が出てくる可能性があります。浮動をクリアしたり、要素に <code>position: absolute</code> を設定して他のコンテンツの上に来ないようにします。このため、フロー内の要素を除去する方法は、このような影響を理解したうえで使用する必要があります。</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>このガイドでは、特定の種類の位置指定を実現するために、要素をフローの外に持ち出す方法を紹介しました。次のガイドでは、 <a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting Contexts Explained</a> の中で、<a href="/ja/docs/Web/Guide/CSS/Block_formatting_context">ブロック整形コンテキスト</a>を作成する上での関連する問題を見てみます。</p>
+
+<h2 id="See_Also" name="See_Also">関連情報</h2>
+
+<ul>
+ <li>レイアウトの学習: <em><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></em></li>
+</ul>
diff --git a/files/ja/web/css/css_flow_layout/index.html b/files/ja/web/css/css_flow_layout/index.html
new file mode 100644
index 0000000000..a16c0cbd4f
--- /dev/null
+++ b/files/ja/web/css/css_flow_layout/index.html
@@ -0,0 +1,51 @@
+---
+title: CSS フローレイアウト
+slug: Web/CSS/CSS_Flow_Layout
+tags:
+  - CSS
+  - Reference
+  - ガイド
+  - フロー
+  - フローレイアウト
+  - レイアウト
+  - 中級者
+translation_of: Web/CSS/CSS_Flow_Layout
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><ruby><em>通常フロー</em><rp> (</rp><rt>Normal Flow</rt><rp>) </rp></ruby>、またはフローレイアウトは、レイアウトに変更が加えられる前にブロック要素やインライン要素がページに表示される方法です。このフローは本質的に、共に動作するすべてのものの組み合わせで、レイアウトの中で互いについてを知っています。いったん何かが<em>フローの外</em>に出ると、独立して動作します。</p>
+
+<p>通常フローでは、<strong>インライン</strong>要素はインライン方向、つまり文書の書字方向に従って、文の中で言葉が表示される方向に表示されます。<strong>ブロック</strong>要素は、文書の<a href="/ja/docs/Web/CSS/CSS_Writing_Modes">書字方向</a>の中で、段落として一つが他の物の後に表示されます。従って英語では、インライン要素は左から始まり、一つが他の物の後に表示され、ブロック要素は上から始まり、ページの下に向かいます。</p>
+
+<h2 id="Basic_Example" name="Basic_Example">基本的な例</h2>
+
+<p>以下の例はブロック及びインラインレベルボックスの例を示します。緑色の枠線がある二つの要素がブロックレベルで、他の物の下に表示されます。</p>
+
+<p>最初の文は青い背景をもつ span 要素を含んでいます。これはインラインレベルで、文の中に表示されます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/layout/normal-flow.html", '100%', 720)}}</p>
+
+<h2 id="Guides" name="Guides">ガイド</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">通常フローでのブロック及びインラインレイアウト</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">フロー内とフローの外</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting Contexts Explained</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">フローレイアウトと書字方向</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow">フローレイアウトとオーバーフロー</a></li>
+</ul>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="Glossary_Entries" name="Glossary_Entries">用語集の記事</h3>
+
+<ul>
+ <li>{{Glossary("Block/CSS", "ブロック (CSS)")}}</li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li>
+</ol>
+</section>
diff --git a/files/ja/web/css/css_flow_layout/intro_to_formatting_contexts/index.html b/files/ja/web/css/css_flow_layout/intro_to_formatting_contexts/index.html
new file mode 100644
index 0000000000..fcdc556b13
--- /dev/null
+++ b/files/ja/web/css/css_flow_layout/intro_to_formatting_contexts/index.html
@@ -0,0 +1,100 @@
+---
+title: 整形コンテキストの紹介
+slug: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts
+tags:
+  - BFC
+  - Block Formatting Context
+  - CSS
+  - Formatting contexts
+  - Guide
+  - Intermediate
+  - Layout
+  - flow
+  - ガイド
+  - ブロック整形コンテキスト
+  - 中級者
+  - 整形コンテキスト
+translation_of: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><span class="seoSummary">この記事では整形コンテキストの概念を紹介します。ブロック整形コンテキスト、インライン整形コンテキスト、フレックス整形コンテキストなど、いくつかの種類があります。どのように動作するのか、これらの動作をどのように利用できるのかについても紹介します。</span></p>
+
+<p>ページ上のすべてのものが<strong>整形コンテキスト</strong>、またはコンテンツを特定の方法でレイアウトする際に定義されている領域の一部です。<strong>ブロック整形コンテキスト</strong> (<abbr title="Block Formatting Context">BFC</abbr>) は、子要素をブロックレイアウトの規則に則って配置し、<strong>フレックス整形コンテキスト</strong>は、子要素を{{Glossary("flex item", "フレックスアイテム")}}として配置するなどです。それぞれの整形コンテキストは、そのコンテキストにあるときにどのようにレイアウトを行うかの特定の規則を持っています。</p>
+
+<h2 id="The_Block_Formatting_Context" name="The_Block_Formatting_Context">ブロック整形コンテキスト</h2>
+
+<p>ブロックレイアウト規則を使用する文書の中で一番外側の要素は、最初の、あるいは<strong>初期ブロック整形コンテキスト</strong>を確立します。これは、 <code>&lt;html&gt;</code> 要素のブロック内のすべての要素が、ブロックおよびインラインレイアウトの規則に従って、通常のフローに従ってレイアウトされることを意味します。ブロック整形コンテキスト (<abbr title="Block Formatting Context">BFC</abbr>) に参加する要素は、 CSS ボックスモデルによって概説された規則を使用します。これは、要素のマージン、境界、パディングが同じコンテキスト内の他のブロックとどのように相互作用するかを定義します。</p>
+
+<h3 id="Creating_a_new_block_formatting_context" name="Creating_a_new_block_formatting_context">新しいブロック整形コンテキストの生成</h3>
+
+<p>{{HTMLElement("html")}} 要素がブロック整形コンテキストを生成できる唯一の要素ではありません。どのブロックレベルの要素でも、特定の CSS プロパティを適用することで BFC を生成することができます。</p>
+
+<p>新しい BFC は以下のような場面で生成されます。</p>
+
+<ul>
+ <li>{{cssxref("float")}} を使用して浮動状態になった要素</li>
+ <li>絶対位置指定の要素 ({{cssxref("position", "position: fixed", "#fixed")}} または {{cssxref("position", "position: sticky", "#sticky")}} を含む)</li>
+ <li>{{cssxref("display", "display: inline-block", "#inline-block")}} の要素</li>
+ <li>表のセル、または <code>display: table-cell</code> が指定された要素で、 <code>display: table-*</code> プロパティを使用して生成された無名の表のセルを含む</li>
+ <li>テーブルのキャプション、または <code>display: table-caption</code> が付いた要素</li>
+ <li><code>overflow</code> が <code>visible</code> 以外の値であるブロック要素</li>
+ <li><code>display: flow-root</code> または <code>display: flow-root list-item </code> の要素</li>
+ <li>{{cssxref("contain", "contain: layout", "#layout")}}, <code>content</code>, <code>strict</code> のいずれかの要素</li>
+ <li>{{Glossary("flex item", "フレックスアイテム")}}</li>
+ <li>グリッドアイテム</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol">段組みコンテナー</a></li>
+ <li>{{cssxref("column-span")}} が <code>all</code> に設定された要素</li>
+</ul>
+
+<p>これは、新しい BFC がメインレイアウトの中でミニレイアウトとなり、一番外側の文書のように動作するので便利です。 BFC はその中にすべてを含み、 {{cssxref("float")}} と {{cssxref("clear")}} は同じ整形コンテキスト内の項目にのみ適用され、マージンは同じ書式設定コンテキスト内の要素間でのみ相殺されます。</p>
+
+<h3 id="BFC_creation_examples" name="BFC_creation_examples">BFC が生成される例</h3>
+
+<p>新しい <abbr title="Block Formatting Context">BFC</abbr> を生成する効果を見るために、いくつかの例を見てみましょう。</p>
+
+<p>下の例では、境界が適用された <code>&lt;div&gt;</code> の中に浮動要素があります。その <code>&lt;div&gt;</code> の内容は、その浮動要素の横に並んでいます。その浮動要素の内容は、その横にある内容よりも高さが高いため、 <code>&lt;div&gt;</code> の境界線がその浮動要素を通過するようになりました。<a href="/ja/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">フロー内とフローの外のガイド</a>で説明されているように、浮動要素はフローから外れているので、 <code>&lt;div&gt;</code> の背景と境界には内容だけが含まれ、浮動要素は含まれません。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}</p>
+
+<p>新しい <abbr title="Block Formatting Context">BFC</abbr> を生成すると浮動要素が収まります。これまでよく使われてきた方法は、 <code>overflow: auto</code> または初期値である <code>overflow: visible</code> 以外の値を設定することでした。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-overflow.html", '100%', 720)}}</p>
+
+<p><code>overflow: auto</code> を設定することで、浮動要素を含む新しい <abbr title="Block Formatting Context">BFC</abbr> を生成しました。 <code>&lt;div&gt;</code> はレイアウト内のミニレイアウトになりました。すべての子要素はその中に収まります。</p>
+
+<p><code>overflow</code> を使って新しい <abbr title="Block Formatting Context">BFC</abbr> を生成する場合の問題点は、 <code>overflow</code> プロパティは、あふれた内容をどのように処理したいかをブラウザーに伝えるためのものだということです。このプロパティを純粋に BFC を作成するために使用した場合、意図せずにスクロールバーが現れたり、影がクリッピングされたりすることに気づくこともあるでしょう。さらに、 <code>overflow</code> を使用した理由が明らかにならないこともあるかもしれないので、将来の開発者からは理解しやすくない可能性があります。このような場合は、コードにコメントをつけて説明するのが良いでしょう。</p>
+
+<h3 id="Explicitly_creating_a_BFC_using_display_flow-root" name="Explicitly_creating_a_BFC_using_display_flow-root">display: flow-root を使用した明示的な BFC の生成</h3>
+
+<p>包含ブロックに <code>display: flow-root</code> (または <code>display: flow-root list-item</code>) を使用すると、問題を起こす副作用が発生することなく新しい <abbr title="Block Formatting Context">BFC</abbr> を生成することができます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-flow-root.html", '100%', 720)}}</p>
+
+<p><code>display: flow-root</code> を {{HTMLElement("div")}} に指定すると、コンテナー内のすべてのものがそのコンテナーのブロック整形コンテキストに参加し、浮動要素が要素の底から飛び出すことはなくなります。</p>
+
+<p><code>flow-root</code> キーワードの名前は、新しいコンテキストがどのように作成され、そのフローレイアウト機能がどのように機能するかを考えると、本質的には ({{HTMLElement("html")}} にように) 新しいルート要素のような役割を果たすものを生成しているという事実を示しています。</p>
+
+<h2 id="Inline_formatting_contexts" name="Inline_formatting_contexts">インライン整形コンテキスト</h2>
+
+<p>インライン整形コンテキストは、他の整形コンテキストの中に存在する、段落のコンテキストと考えることができます。段落は、テキスト上で {{HTMLElement("strong")}}, {{HTMLElement("a")}}, {{HTMLElement("span")}} などの要素が使われた場合のようなインライン整形コンテキストを作成します。</p>
+
+<p>ボックスモデルは、インライン整形コンテキストに参加している項目には完全には適用されません。横書きモードの行では、水平方向のパディング、境界、マージンが要素に適用され、テキストを左右に押しのけます。ただし、要素の上下のマージンは適用されません。水平のパディングや境界は適用されますが、インライン整形コンテキストでは、ラインボックスがパディングや境界によって押し広げられることはないため、上下の内容が重なる可能性があります。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/inline.html", '100%', 720)}}</p>
+
+<h2 id="Other_formatting_contexts" name="Other_formatting_contexts">その他の整形コンテキスト</h2>
+
+<p>このガイドはフローレイアウトを対象としているため、他のありうる整形コンテキストについては言及していません。そのため、どのような種類の整形コンテキストを作成しても、その整形コンテキスト内の要素の動作が変わることを理解しておくと便利です。この動作は常に仕様書に記述されており、ここ、 MDN にも記述されています。</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>このガイドでは、ブロックおよびインライン整形コンテキストにおける詳細と、ブロック整形コンテキスト (<abbr title="Block Formatting Context">BFC</abbr>) を生成することの重要な目的を見てきました。次のガイドでは、<a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">通常フローがどのように様々な所持方向に対応するか</a>を見ていきます。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/Guide/CSS/Block_formatting_context">ブロック整形コンテキスト (BFC)</a></li>
+ <li><a href="/ja/docs/Web/CSS/Visual_formatting_model">視覚整形モデル</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Box_Model">CSS ボックスモデル</a></li>
+</ul>