initial commit

14 files changed, 5634 insertions, 0 deletions

diff --git a/files/ja/learn/css/css_layout/flexbox/index.html b/files/ja/learn/css/css_layout/flexbox/index.html
new file mode 100644
index 0000000000..688db60aec
--- /dev/null
+++ b/files/ja/learn/css/css_layout/flexbox/index.html
@@ -0,0 +1,349 @@
+---
+title: フレックスボックス
+slug: Learn/CSS/CSS_layout/Flexbox
+tags:
+  - Article
+  - Beginner
+  - CSS
+  - CSS layouts
+  - CodingScripting
+  - Flexible Boxes
+  - Guide
+  - Layout
+  - Layouts
+  - Learn
+  - flexbox
+translation_of: Learn/CSS/CSS_layout/Flexbox
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary"><span class="seoSummary"><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a>（Flexbox）は、項目を行または列にレイアウトするための1次元のレイアウト方法です。 項目は追加のスペースを埋めるためにたわみ、小さいスペースに収まるように縮小します。 この記事では、すべての基本事項について説明します。</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提知識:</th>
+   <td>HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、および CSS の機能の考え方（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>を学ぶ）。</td>
+  </tr>
+  <tr>
+   <th scope="row">学習目標:</th>
+   <td>フレックスボックス・レイアウトシステムを使用してウェブのレイアウトを作成する方法を習得する。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Why_Flexbox" name="Why_Flexbox">なぜフレックスボックスなのか？</h2>
+
+<p>長い間、CSS レイアウトを作成するために利用可能な唯一の信頼できるクロスブラウザー互換ツールは<a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a>と<a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a>のようなものでした。 これらは問題なく機能しますが、いくつかの点ではかなり限定的でイライラするものです。</p>
+
+<p>次のような単純なレイアウト要件は、このようなツールを使用しても、便利で柔軟な方法で実現するのが困難または不可能です。</p>
+
+<ul>
+ <li>コンテンツのブロックをその親内で垂直方向に中央揃えにします。</li>
+ <li>コンテナのすべての子が、使用可能な幅や高さに関係なく、使用可能な幅や高さについて等しい量を占めるようにします。</li>
+ <li>複数列レイアウトのすべての列に、異なる量のコンテンツが含まれていても、同じ高さを採用するようにします。</li>
+</ul>
+
+<p>以降のセクションで見るように、フレックスボックスは多くのレイアウト作業をずっと簡単にします。 さあ始めましょう！</p>
+
+<h2 id="Introducing_a_simple_example" name="Introducing_a_simple_example">簡単な例の紹介</h2>
+
+<p>この記事では、フレックスボックスがどのように機能するのかを理解するのに役立つ一連の演習を進めていくようにします。 まず始めに、github リポジトリから最初のスターターファイル <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> のローカルコピーを作成し、最新のブラウザー（Firefox や Chrome など）にロードして、コードエディタでコードを確認してください。 ここでも<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">ライブを見る</a>ことができます。</p>
+
+<p>内部に最上位の見出しを持つ {{htmlelement("header")}} 要素と、3つの {{htmlelement("article")}} を含む {{htmlelement("section")}} 要素があります。 これらを使用して、かなり標準的な3列のレイアウトを作成します。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p>
+
+<h2 id="Specifying_what_elements_to_lay_out_as_flexible_boxes" name="Specifying_what_elements_to_lay_out_as_flexible_boxes">柔軟な箱としてレイアウトする要素を指定</h2>
+
+<p>まず最初に、どの要素を柔軟な箱（flexible box）としてレイアウトするかを選択する必要があります。 これを行うために、あなたが影響を与えたい要素の親要素に {{cssxref("display")}} の特別な値を設定します。 この場合、{{htmlelement("article")}} 要素をレイアウトしたいので、これを {{htmlelement("section")}} に設定します（これがフレックスコンテナになります）。</p>
+
+<pre class="brush: css notranslate">section {
+  display: flex;
+}</pre>
+
+<p>この結果は次のようになります。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13408/flexbox-example2.png" style="border-style: solid; border-width: 1px; display: block; height: 348px; margin: 0px auto; width: 800px;"></p>
+
+<p>それで、このたった一つの宣言が必要なものすべてを与えてくれます — 信じられないでしょ？ 同じ幅の列を持つ複数列のレイアウトがあり、列の高さはすべて同じです。 これは、フレックス項目（フレックスコンテナの子）に与えられるデフォルト値が、このような一般的な問題を解決するために設定されているためです。 それらについての詳細は後で。</p>
+
+<div class="note">
+<p><strong>注</strong>: インライン項目を柔軟な箱としてレイアウトしたい場合は、<code>inline-flex</code> を {{cssxref("display")}} の値として設定することもできます。</p>
+</div>
+
+<h2 id="An_aside_on_the_flex_model" name="An_aside_on_the_flex_model">フレックスモデルのさておき</h2>
+
+<p>要素が柔軟な箱として配置されるとき、それらは次のように2つの軸に沿って配置されます。</p>
+
+<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png" style="display: block; margin: 0px auto;"></p>
+
+<ul>
+ <li>主軸（<strong>main axis</strong>）は、フレックス項目が配置されている方向に走る軸です（例えば、ページを横切る行、またはページ下の列として）。 この軸の始点と終点は、主始点（<strong>main start</strong>）と主終点（<strong>main end</strong>）と呼ばれます。</li>
+ <li>交差軸（<strong>cross axis</strong>）は、フレックス項目が配置されている方向に対して垂直に走る軸です。 この軸の始点と終点は、交差始点（<strong>cross start</strong>）と交差終点（<strong>cross end</strong>）と呼ばれます。</li>
+ <li><code>display: flex</code> が設定されている親要素（この例では {{htmlelement("section")}}）は、フレックスコンテナ（<strong>flex container</strong>）と呼ばれます。</li>
+ <li>フレックスコンテナ内の柔軟な箱としてレイアウトされている項目は、フレックス項目（<strong>flex item</strong>）と呼ばれます（この例では {{htmlelement("article")}} 要素）。</li>
+</ul>
+
+<p>次のセクションを進むときには、この用語集のことを覚えておいてください。 使用されている用語のいずれかについて混乱した場合は、いつでもここを参照することができます。</p>
+
+<h2 id="Columns_or_rows" name="Columns_or_rows">列それとも行？</h2>
+
+<p>フレックスボックスは {{cssxref("flex-direction")}} というプロパティを提供します。 これは主軸が走る方向（フレックスボックスの子がどの方向にレイアウトされるか）を指定します — デフォルトではこれは <code>row</code> に設定されていて、ブラウザーのデフォルト言語が動作する方向（英語のブラウザーの場合は左から右に）にそれらが横一列にレイアウトされます。</p>
+
+<p>次の宣言を {{htmlelement("section")}}）の規則に追加してみてください。</p>
+
+<pre class="brush: css notranslate">flex-direction: column;</pre>
+
+<p>これにより、CSS を追加する前と同じように、項目が縦一列のレイアウトに戻されます。 先に進む前に、この宣言を例から削除してください。</p>
+
+<div class="note">
+<p><strong>注</strong>: <code>row-reverse</code> と <code>column-reverse</code> の値を使用して、フレックス項目を逆方向にレイアウトすることもできます。 これらの値も試してみてください！</p>
+</div>
+
+<h2 id="Columns_or_rows" name="Columns_or_rows">ラッピング</h2>
+
+<p>レイアウトの幅や高さが決まっているときに発生する問題の1つは、最終的にはフレックスボックスの子がコンテナをオーバーフローさせてレイアウトが壊れることです。 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html">flexbox-wrap0.html</a> の例を見て、それを<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html">ライブで見て</a>みてください（この例に沿って進めたい場合は、このファイルのローカルコピーを取ってください）。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13410/flexbox-example3.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"></p>
+
+<p>ここで実際に子がコンテナから抜け出しているのを見ます。 これを修正できる1つの方法は、{{htmlelement("section")}}）の規則に次の宣言を追加することです。</p>
+
+<pre class="brush: css notranslate">flex-wrap: wrap;</pre>
+
+<p>また、{{htmlelement("article")}} の規則に次の宣言を追加します。</p>
+
+<pre class="brush: css notranslate">flex: 200px;</pre>
+
+<p>試してみてください。 これが含まれていると次のようにレイアウトがはるかに良く見えることがわかります。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13412/flexbox-example4.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;">現在、複数の行があります — 多くのフレックスボックスの子が各行に納められているので、オーバーフローは次のラインに移動します。 <code>article</code> に設定した <code>flex: 200px</code> の宣言は、それぞれが少なくとも 200px 幅になることを意味します。 このプロパティについては後で詳しく説明します。 また、最後の行の最後の数個の子がそれぞれ幅広になっているので、依然として行全体がいっぱいになっていることに気付くかもしれません。</p>
+
+<p>しかし、ここでできることは他にもあります。 まず最初に、{{cssxref("flex-direction")}} プロパティの値を <code>row-reverse</code> に変更してみてください。 これで、まだ複数行のレイアウトがあることがわかりますが、ブラウザーウィンドウの反対側の隅から開始して逆方向に流れます。</p>
+
+<h2 id="flex-flow_shorthand" name="flex-flow_shorthand">flex-flow 一括指定</h2>
+
+<p>この時点で、{{cssxref("flex-flow")}} という {{cssxref("flex-direction")}} と {{cssxref("flex-wrap")}} の一括指定が存在することに注目する価値があります。 例えば、次のように置き換えることができます。</p>
+
+<pre class="brush: css notranslate">flex-direction: row;
+flex-wrap: wrap;</pre>
+
+<p>を</p>
+
+<pre class="brush: css notranslate">flex-flow: row wrap;</pre>
+
+<h2 id="Flexible_sizing_of_flex_items" name="Flexible_sizing_of_flex_items">フレックス項目の柔軟なサイズ変更</h2>
+
+<p>それでは、最初の例に戻って、フレックス項目の占めるスペースの割合を制御する方法を見てみましょう。 ローカルコピーの <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> を起動するか、新しい出発点として <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html">flexbox1.html</a> のコピーを入手してください（<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html">ライブで見る</a>）。</p>
+
+<p>まず、CSS の一番下に次の規則を追加します。</p>
+
+<pre class="brush: css notranslate">article {
+  flex: 1;
+}</pre>
+
+<p>これは、各フレックス項目が主軸に沿って使用可能なスペースのうちどれだけを占めるかを決定する、無単位の割合値です。 この場合、各 {{htmlelement("article")}} 要素に 1 の値を与えています。 つまり、パディングやマージンなどを設定した後の残りの予備スペースのうちから、すべてが同じ量を占めます。 これは割合であり、各フレックス項目に 400000 の値を指定してもまったく同じ効果があることを意味します。</p>
+
+<p>それでは、前の規則の下に次の規則を追加します。</p>
+
+<pre class="brush: css notranslate">article:nth-of-type(3) {
+  flex: 2;
+}</pre>
+
+<p>リフレッシュすると、3番目の {{htmlelement("article")}} が他の2つの幅の2倍の幅を占めます。 合計で 4 割合単位が使用可能です。 最初の2つのフレックス項目はそれぞれ 1 単位ずつ持つため、それぞれ使用可能なスペースの 1/4 を占めます。 3つ目は 2 単位を持っているので、それは使用可能なスペースの 2/4（または 1/2）を占めます。</p>
+
+<p><code>flex</code> の値内に最小サイズ値を指定することもできます。 既存の <code>article</code> の規則を次のように更新してみてください。</p>
+
+<pre class="brush: css notranslate">article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 2 200px;
+}</pre>
+
+<p>これは基本的に「各フレックス項目には最初に 200px の使用可能なスペースが与えられます。 その後、残りの使用可能なスペースは割合単位に従って共有されます。」と述べています。 リフレッシュしてみると、スペースの共有方法に違いが見られます。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p>
+
+<p>フレックスボックスの真の価値は、その柔軟性/応答性に見ることができます — ブラウザーウィンドウのサイズを変更したり、別の {{htmlelement("article")}} 要素を追加したりしても、レイアウトは問題なく機能します。</p>
+
+<h2 id="flex_shorthand_versus_longhand" name="flex_shorthand_versus_longhand">flex: 一括指定対個別指定</h2>
+
+<p>{{cssxref("flex")}} は、最大3つの異なる値を指定できる{{cssxref("Shorthand_properties","一括指定プロパティ")}}です。</p>
+
+<ul>
+ <li>上記で説明した無単位の割合値。 これは {{cssxref("flex-grow")}} 個別指定プロパティを使用して個別に指定できます。</li>
+ <li>{{cssxref("flex-shrink")}} というフレックス項目がコンテナをオーバーフローしているときに有効になる、2番目の無単位の割合値。 これは、各フレックス項目のサイズからオーバーフローする量を取り除き、それらがコンテナからオーバーフローするのを防ぐために指定します。 これはかなり高度なフレックスボックスの機能で、この記事ではこれ以上説明しません。</li>
+ <li>上記で説明した最小サイズ値。 これは、{{cssxref("flex-basis")}} の個別指定値を使用して個別に指定できます。</li>
+</ul>
+
+<p>本当に必要な場合以外は、個別指定の flex プロパティを使用しないことをお勧めします（例えば、以前に設定したものを上書きする場合など）。 それらは多くの余分なコードが書かれることにつながり、多少混乱するかもしれません。</p>
+
+<h2 id="Horizontal_and_vertical_alignment" name="Horizontal_and_vertical_alignment">水平方向と垂直方向の配置</h2>
+
+<p>フレックスボックスの機能を使用して、主軸または交差軸に沿ってフレックス項目を整列させることもできます。 新しい例である <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html">flex-align0.html</a> を見て（<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html">ライブも見る</a>）、これを調べてみましょう。 これは、きちんとした柔軟なボタン/ツールバーに変わります。 現時点では、いくつかのボタンが左上隅に詰まった水平のメニューバーが表示されます。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13414/flexbox-example5.png" style="display: block; height: 77px; margin: 0px auto; width: 600px;"></p>
+
+<p>まず、この例のローカルコピーを取ります。</p>
+
+<p>それでは、例の CSS の最後に次のものを追加してください。</p>
+
+<pre class="brush: css notranslate">div {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}</pre>
+
+<p>ページをリフレッシュすると、ボタンが横方向と縦方向に中央揃えになっていることがわかります。 これを2つの新しいプロパティを介して行いました。</p>
+
+<p>{{cssxref("align-items")}} は、フレックス項目が交差軸上のどこに配置されるかを制御します。</p>
+
+<ul>
+ <li>デフォルトでは、この値は <code>stretch</code> です。 これは、すべてのフレックス項目を交差軸の方向に親を埋めるように引き伸ばします。 親が交差軸方向に固定幅を持っていない場合、すべてのフレックス項目は最長のフレックス項目と同じ長さになります。 これが最初の例がデフォルトで同じ高さの列を得た方法です。</li>
+ <li>上記のコードで使用した <code>center</code> の値により、項目は固有の寸法を維持しますが、交差軸の中心に配置されます。 これが、この例のボタンが縦方向に中央揃えされている理由です。</li>
+ <li><code>flex-start</code> や <code>flex-end</code> のような値を持つこともできます。 これは、すべての項目をそれぞれ交差軸の始点や終点に揃えます。 詳細については {{cssxref("align-items")}} を参照してください。</li>
+</ul>
+
+<p>{{cssxref("align-self")}} プロパティを適用することで、個々のフレックス項目の {{cssxref("align-items")}} のふるまいを上書きできます。 例えば、CSS に次のコードを追加してみてください。</p>
+
+<pre class="brush: css notranslate">button:first-child {
+  align-self: flex-end;
+}</pre>
+
+<p>これがどのような影響を与えるのかを見て、終了したらもう一度削除します。</p>
+
+<p>{{cssxref("justify-content")}} は、フレックス項目が主軸上のどこに配置されるかを制御します。</p>
+
+<ul>
+ <li>デフォルト値は <code>flex-start</code> です。 これにより、すべての項目が主軸の始点に配置されます。</li>
+ <li>それらを終点に配置させるために <code>flex-end</code> を使うことができます。</li>
+ <li><code>center</code> は <code>justify-content</code> のための値でもあり、フレックス項目を主軸の中心に配置します。</li>
+ <li>上記で使用した値、<code>space-around</code> は便利です。 両端に少しのスペースを残して、すべての項目を主軸に沿って均等に配置します。</li>
+ <li>もう1つの値、<code>space-between</code> があります。 これは、両端にスペースを残さないという点を除けば、<code>space-around</code> に非常に似ています。</li>
+</ul>
+
+<p>続ける前に、これらの値を使用してそれらがどのように機能するかを確認することをお勧めします。</p>
+
+<h2 id="Ordering_flex_items" name="Ordering_flex_items">フレックス項目の順序付け</h2>
+
+<p>フレックスボックスには、ソース順に影響を与えずにフレックス項目のレイアウトの順序を変更する機能もあります。 これも従来のレイアウト方法では不可能なことです。</p>
+
+<p>このコードは簡単です。 ボタンバーのサンプルコードに次の CSS を追加してみてください。</p>
+
+<pre class="brush: css notranslate">button:first-child {
+  order: 1;
+}</pre>
+
+<p>リフレッシュすると、[Smile] ボタンが主軸の終点に移動したことがわかります。 これがどのように機能するかについてもう少し詳しく説明しましょう。</p>
+
+<ul>
+ <li>デフォルトでは、すべてのフレックス項目の {{cssxref("order")}} の値は 0 です。</li>
+ <li>大きな <code>order</code> の値が設定されているフレックス項目は、小さな <code>order</code> の値を持つ項目よりも表示順序の後半に表示されます。</li>
+ <li>同じ <code>order</code> の値を持つフレックス項目は、ソース順で表示されます。 そのため、2、1、1、0 の <code>order</code> の値がそれぞれ設定された4つの項目がある場合、それらの表示順序は 4、2、3、1 となります。</li>
+ <li>3番目の項目は2番目の後に表示されます。 これは、同じ <code>order</code> の値を持ち、ソース順でそれより後にあるためです。</li>
+</ul>
+
+<p>負の <code>order</code> の値を設定して、0 が設定されている項目よりも早く項目を表示することができます。 例えば、次の規則を使用して、[Blush] ボタンを主軸の始点に表示させることができます。</p>
+
+<pre class="brush: css notranslate">button:last-child {
+  order: -1;
+}</pre>
+
+<h2 id="Nested_flex_boxes" name="Nested_flex_boxes">ネストしたフレックスボックス</h2>
+
+<p>フレックスボックスを使ってかなり複雑なレイアウトを作成することは可能です。 フレックス項目をフレックスコンテナとしても設定して、その子も柔軟な箱のようにレイアウトできるようにしてもまったく問題ありません。 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html">complex-flexbox.html</a> を見てください（<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html">ライブも見る</a>）。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13418/flexbox-example7.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>このための HTML はかなり単純です。 3つの {{htmlelement("article")}} を含む {{htmlelement("section")}} 要素があります。 3番目の {{htmlelement("article")}} には3つの {{htmlelement("div")}} が含まれています。</p>
+
+<pre class="notranslate">section - article
+          article
+          article - div - button
+                    div   button
+                    div   button
+                          button
+                          button</pre>
+
+<p>レイアウトに使用したコードを見てみましょう。</p>
+
+<p>まず、{{htmlelement("section")}} の子を柔軟な箱として配置するように設定します。</p>
+
+<pre class="brush: css notranslate">section {
+  display: flex;
+}</pre>
+
+<p>次に、{{htmlelement("article")}} 自体にいくつかの <code>flex</code> の値を設定します。 ここで2番目の規則に特に注意してください — 3番目の {{htmlelement("article")}} は、その子もフレックス項目のようにレイアウトするように設定していますが、今回はそれらを <code>column</code> のようにレイアウトしています。</p>
+
+<pre class="brush: css notranslate">article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 3 200px;
+  display: flex;
+  flex-flow: column;
+}
+</pre>
+
+<p>次に、最初の {{htmlelement("div")}} を選択します。 最初に <code>flex: 1 100px;</code> を使用して効果的にそれの最小の高さを 100px にしてから、その子（{{htmlelement("button")}} 要素）もフレックス項目のように配置されるように設定します。 ここでそれらをラッピングする行にレイアウトし、先ほど見た個々のボタンの例で行ったように、それらを使用可能なスペースの中央に配置します。</p>
+
+<pre class="brush: css notranslate">article:nth-of-type(3) div:first-child {
+  flex: 1 100px;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: space-around;
+}</pre>
+
+<p>最後に、ボタンのサイズを設定しましたが、もっとおもしろいことに、<code>1 auto</code> の <code>flex</code> の値を設定しています。 これは非常に興味深い効果があり、ブラウザーウィンドウの幅を変更してみるとわかります。 ボタンは可能な限り多くのスペースを占有し、できるだけ同じラインに配置できますが、同じラインに収まりきらなくなった場合は、ドロップダウンして新しいラインを作成します。</p>
+
+<pre class="brush: css notranslate">button {
+  flex: 1 auto;
+  margin: 5px;
+  font-size: 18px;
+  line-height: 1.5;
+}</pre>
+
+<h2 id="Cross_browser_compatibility" name="Cross_browser_compatibility">クロスブラウザー互換性</h2>
+
+<p>フレックスボックスのサポートは、Firefox、Chrome、Opera、Microsoft Edge、IE 11、Android / iOS の新しいバージョンなど、ほとんどの新しいブラウザーで利用できます。 ただし、フレックスボックスをサポートしていない古いブラウザーもまだあります（または、しますが、本当に古い、時代遅れのバージョンをサポートします）。</p>
+
+<p>あなたがただ学んで実験している間、これはあまり重要ではありません。 ただし、実際のウェブサイトでフレックスボックスを使用することを検討している場合は、テストを行い、できるだけ多くのブラウザーでユーザーエクスペリエンスが許容範囲内であることを確認する必要があります。</p>
+
+<p>フレックスボックスはいくつかの CSS 機能よりも少しトリッキーです。 例えば、ブラウザーに CSS ドロップシャドウがない場合でも、そのサイトは引き続き使用可能です。 ただし、フレックスボックス機能をサポートしていないと、レイアウトが完全に壊れて使用できなくなる可能性があります。</p>
+
+<p><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing">クロスブラウザーテスト</a>のモジュールでは、クロスブラウザーのサポートの問題を解決するための戦略について説明します。</p>
+
+<h2 id="スキルをテストしましょう!">スキルをテストしましょう!</h2>
+
+<p>この記事では多くをカバーしましたが、最も大事な情報を覚えていますか？次に移動する前に、この情報を保持しているか検証するテストがあります — <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Flexbox_skills">Test your skills: Flexbox</a> を見てください。</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>これで、フレックスボックスの基本についてのツアーは終了です。 私たちはあなたが楽しみを持って、学習と共に前進するにつれてそれと一緒に良い遊びがあることを願っています。 次に、CSS レイアウトのもう1つの重要な側面、CSS グリッドについて見ていきます。</p>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div>
+
+<div>
+<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li>
+</ul>
+</div>
diff --git a/files/ja/learn/css/css_layout/floats/index.html b/files/ja/learn/css/css_layout/floats/index.html
new file mode 100644
index 0000000000..8de6f5367f
--- /dev/null
+++ b/files/ja/learn/css/css_layout/floats/index.html
@@ -0,0 +1,528 @@
+---
+title: フロート
+slug: Learn/CSS/CSS_layout/Floats
+tags:
+  - Article
+  - Beginner
+  - CSS
+  - Clearing
+  - CodingScripting
+  - Floats
+  - Guide
+  - Layout
+  - columns
+  - multi-column
+translation_of: Learn/CSS/CSS_layout/Floats
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary"><span class="seoSummary">{{cssxref("float")}} プロパティは、もともとはテキストブロック内の浮動画像のためのものでしたが、ウェブページ上に複数列レイアウトを作成するために最も一般的に使われるツールの1つになりました。 この記事で説明しているように、フレックスボックスとグリッドの出現により、今は当初の目的に戻っています。</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提知識:</th>
+   <td>HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、および CSS の機能の考え方（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>を学ぶ）。</td>
+  </tr>
+  <tr>
+   <th scope="row">学習目標:</th>
+   <td>ウェブページ上に浮動の特長を作成する方法と、<code>clear</code> プロパティおよびその他のフロートのクリア方法の使い方を習得します。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="The_background_of_floats" name="The_background_of_floats">フロートの背景</h2>
+
+<p>画像の左や右を包み込むテキストにより、テキストの列内に浮かぶ画像を含む単純なレイアウトをウェブ開発者が実装できるようにするために {{cssxref("float")}} プロパティが導入されました。 あなたが新聞のレイアウトで得るかもしれない種類のものです。</p>
+
+<p>しかしウェブ開発者はすぐに画像だけでなく何でも浮かべることができることに気づいたので、フロートの使用は広がりました。 例えば、<a href="https://css-tricks.com/snippets/css/drop-caps/">drop-caps</a> のような楽しいレイアウト効果です。</p>
+
+<p>フロートは一般に、互いに並ぶように浮動する複数列の情報を含むウェブサイト全体のレイアウトを作成するために使用されてきました（デフォルトのふるまいでは、列はソースに表れる順序と同じ順序で上下に配置されます）。 より新しくより良いレイアウトテクニックが利用可能なので、このようにフロートを使うことは<a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のテクニック</a>とみなされるべきです。</p>
+
+<p>この記事では、フロートの正しい使い方に集中します。</p>
+
+<h2 id="A_simple_float_example" name="A_simple_float_example">簡単なフロートの例</h2>
+
+<p>フロートの使い方を探りましょう。 要素の周りにテキストのブロックを浮かべることを含む本当に簡単な例から始めましょう。 コンピュータ上に新しい <code>index.html</code> ファイルを作成し、<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">簡単な HTML テンプレート</a>を使ってそれを埋め、適切な場所に以下のコードを挿入することで、フォローすることができます。 セクションの一番下では、最終的なコードがどのようになるべきかの実例を見ることができます。</p>
+
+<p>まず、簡単な HTML から始めましょう。 HTML の <code>body</code> に次のコードを追加し、それまでの内部にあるものはすべて削除します。</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Simple float example&lt;/h1&gt;
+
+&lt;div class="box"&gt;Float&lt;/div&gt;
+
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. &lt;/p&gt;
+
+&lt;p&gt;Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;</pre>
+
+<p>次の CSS を HTML に適用します（{{htmlelement("style")}} 要素を使用するか、{{htmlelement("link")}} を使用して別の <code>.css</code> ファイルを作成するか、選択します）。</p>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.box {
+  width: 150px;
+  height: 100px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}</pre>
+
+<p>保存してリフレッシュすると予想していたものとよく似たものが表示されます — <code>box</code> が通常フローでテキストの上側に表示されます。 テキストをそれの周囲に浮かべるには、次のように <code>.box</code> 規則に {{cssxref("float")}} と {{cssxref("margin-right")}} プロパティを追加します。</p>
+
+<pre class="brush: css notranslate">.box {
+  float: left;
+  margin-right: 15px;
+  width: 150px;
+  height: 100px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}</pre>
+
+<p>保存してリフレッシュすると、次のようになります。</p>
+
+<div id="Float_1">
+<div class="hidden">
+<h6 id="Float_Example_1">Float Example 1</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Simple float example&lt;/h1&gt;
+
+&lt;div class="box"&gt;Float&lt;/div&gt;
+
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+
+&lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.box {
+  float: left;
+  margin-right: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_1', '100%', 500) }}</p>
+
+<p>フロートがどのように機能するかを考えてみましょう。 <code>float</code> が設定されている要素（この場合は {{htmlelement("div")}} 要素）は、文書の通常のレイアウトフローから除かれ、その親コン​​テナ（この場合は {{htmlelement("body")}}）の左側に固定されます。 通常のレイアウトフローで浮動要素の下側に来るコンテンツは、それを包み込み、浮動要素の最上部まで、その右側のスペースを埋めます。 そこで、それは止まるでしょう。</p>
+
+<p>コンテンツを右に浮かべるとまったく同じ効果が得られますが、逆になります。 つまり、浮動要素は右に固定され、コンテンツはその左側を包み込みます。 <code>float</code> の値を <code>right</code> に変更し、最後のルールセットで {{cssxref("margin-right")}} を {{cssxref("margin-left")}} に置き換えて、結果がどうなるかを確認してください。</p>
+
+<p>テキストを押しのけるためにフロートにマージン（margin、余白）を追加することはできますが、テキストをフロートから遠ざけるためにテキストにマージンを追加することはできません。 これは、浮動要素は通常フローから外され、後続項目のボックスが実際にはフロートの背後にあるためです。 例にいくつかの変更を加えることによってこれを実証することができます。</p>
+
+<p>テキストの最初の段落、つまり浮動ボックスの直後の段落に <code>special</code> のクラスを追加してから、CSS に次の規則を追加します。 これらは後続段落に背景色を与えます。</p>
+
+<pre class="brush: css notranslate">.special {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+</pre>
+
+<p>効果を見やすくするために、フロートの <code>margin-right</code> を <code>margin</code> に変更すると、フロートの全周にマージンができます。 以下の例のように、浮動ボックスの真下にある段落の背景を見ることができます。</p>
+
+<div id="Float_2">
+<div class="hidden">
+<h6 id="Float_Example_2">Float Example 2</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Simple float example&lt;/h1&gt;
+
+&lt;div class="box"&gt;Float&lt;/div&gt;
+
+&lt;p class="special"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+
+&lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;    </pre>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+
+.special {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_2', '100%', 500) }}</p>
+
+<p>後続要素の<a href="/ja/docs/Web/CSS/Visual_formatting_model#Line_boxes">行ボックス</a>は短くなっているのでテキストはフロートの周りを囲みますが、フロートは通常フローから除かれるため、段落の周りのボックスは依然として全幅のままです。</p>
+
+<h2 id="Clearing_floats" name="Clearing_floats">フロートのクリア</h2>
+
+<p>フロートは通常フローから除かれ、他の要素がその横に表示されることを見てきました。 したがって、後続要素の上方向への移動を止めたい場合は、それをクリアする必要があります; これは {{cssxref("clear")}} プロパティによって達成されます。</p>
+
+<p>前の例の HTML では、浮動項目の下の2番目の段落に <code>cleared</code> のクラスを追加します。 次に、CSS に以下を追加してください。</p>
+
+<pre class="brush: css notranslate">.cleared {
+  clear: left;
+}
+</pre>
+
+<div id="Float_3">
+<div class="hidden">
+<h6 id="Float_Example_3">Float Example 3</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Simple float example&lt;/h1&gt;
+
+&lt;div class="box"&gt;Float&lt;/div&gt;
+
+&lt;p class="special"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+
+&lt;p class="cleared"&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+    </pre>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+
+.special {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+
+.cleared {
+  clear: left;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_3', '100%', 600) }}</p>
+
+<p>後続段落で、浮動要素がクリアされ、並んで現れなくなったことがわかります。 <code>clear</code> プロパティは次の値を受け入れます。</p>
+
+<ul>
+ <li><code>left</code>: 左に浮いている項目をクリアします。</li>
+ <li><code>right</code>: 右に浮いている項目をクリアします。</li>
+ <li><code>both</code>: 左や右に浮いている項目をどちらもクリアします。</li>
+</ul>
+
+<h2 id="Clearing_boxes_wrapped_around_a_float" name="Clearing_boxes_wrapped_around_a_float">フロートを包み込むボックスのクリア</h2>
+
+<p>浮動要素に後続するものをクリアする方法はわかりましたが、背の高いフロートと短い段落があり、その両方の要素の周りをボックスが包む場合はどうなるか見てみましょう。 最初の段落と浮動ボックスが <code>wrapper</code> のクラスの {{htmlelement("div")}} に囲まれるように文書を変更します。</p>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;Float&lt;/div&gt;
+
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>CSS で、<code>.wrapper</code> クラスに次の規則を追加してからページをリロードします。</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}</pre>
+
+<p>加えて、元の <code>.cleared</code> クラスを削除します。</p>
+
+<pre class="brush: css notranslate" id="ct-0">.cleared {
+    clear: left;
+}</pre>
+
+<p>段落に背景色を与えた例と同じように、背景色がフロートの背後にあることがわかります。</p>
+
+<div id="Float_4">
+<div class="hidden">
+<h6 id="Float_Example_4">Float Example 4</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Simple float example&lt;/h1&gt;
+&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;Float&lt;/div&gt;
+
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+&lt;/div&gt;
+
+&lt;p class="cleared"&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;    </pre>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_4', '100%', 600) }}</p>
+
+<p>前と同じように、これもまた、フロートが通常フローから外されたためです。 コンテンツが短い場合でも、ボックスの底に浮動項目とラッピングコンテンツを包む必要がある場合には、後続要素のクリアでは、このボックスのクリアの問題を解決することはできません。 これに対処する方法は3つあります。 そのうちの2つはすべてのブラウザーで機能します — それでもやや厄介です — そしてこの状況に適切に対処する3番目の新しい方法です。</p>
+
+<h3 id="The_clearfix_hack" name="The_clearfix_hack">clearfix ハック</h3>
+
+<p>この状況に伝統的に対処してきた方法は、「clearfix ハック」として知られているものを使うことです。 これはフロートとラッピングコンテンツを含むボックスの後に生成したコンテンツを挿入し、両方をクリアするように設定することを含みます。</p>
+
+<p>例に次の CSS を追加します。</p>
+
+<pre class="brush: css notranslate">.wrapper::after {
+  content: "";
+  clear: both;
+  display: block;
+}</pre>
+
+<p>ページをリロードすると、ボックスはクリアされます。 これは、項目の下に <code>&lt;div&gt;</code> などの HTML 要素を追加して <code>clear: both</code> に設定した場合と基本的に同じです。</p>
+
+<div id="Float_5">
+<div class="hidden">
+<h6 id="Float_Example_5">Float Example 5</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Simple float example&lt;/h1&gt;
+&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;Float&lt;/div&gt;
+
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+&lt;/div&gt;
+&lt;p class="cleared"&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;      </pre>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+
+.wrapper::after {
+  content: "";
+  clear: both;
+  display: block;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_5', '100%', 600) }}</p>
+
+<h3 id="Using_overflow" name="Using_overflow">オーバーフローを使用する</h3>
+
+<p>別の方法は、<code>wrapper</code> の {{cssxref("overflow")}} プロパティを <code>visible</code> 以外の値に設定することです。</p>
+
+<p>前のセクションで追加した clearfix の CSS を削除し、代わりに <code>wrapper</code> の規則に <code>overflow: auto</code> を追加してください。 前と同じように、ボックスはクリアされます。</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  overflow: auto;
+}</pre>
+
+<div id="Float_6">
+<div class="hidden">
+<h6 id="Float_Example_6">Float Example 6</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Simple float example&lt;/h1&gt;
+&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;Float&lt;/div&gt;
+
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+&lt;/div&gt;
+&lt;p class="cleared"&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;    </pre>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  overflow: auto;
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_6', '100%', 600) }}</p>
+
+<p>この例は、<a href="/ja/docs/Web/Guide/CSS/Block_formatting_context">ブロック整形コンテキスト</a>（<strong>block formatting context</strong>、BFC）と呼ばれるものを作成することによって機能します。 これはページの中にあるミニレイアウトのようなもので、その中にすべてが含まれているので、浮動要素は BFC の中に含まれ、背景は両方の項目の背後にあります。 これは通常はうまくいきますが、場合によっては、オーバーフローを使用することによる意図しない結果が原因で、不要なスクロールバーや切り取られた影が見つかることがあります。</p>
+
+<h3 id="display_flow-root" name="display_flow-root">display: flow-root</h3>
+
+<p>この問題を解決する現代的な方法は、<code>display</code> プロパティの <code>flow-root</code> という値を使うことです。 これはハックを使用せずに BFC を作成するためだけに存在します — それを使用しても意図しない結果が生じることはありません。 <code>.wrapper</code> 規則から <code>overflow: auto</code> を削除し、<code>display: flow-root</code> を追加してください。 これを<a href="/ja/docs/Web/CSS/display#Browser_compatibility">サポートするブラウザー</a>を持っていると仮定すると、ボックスはクリアされます。</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  display: flow-root;
+}</pre>
+
+<div id="Float_7">
+<div class="hidden">
+<h6 id="Float_Example_7">Float Example 7</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Simple float example&lt;/h1&gt;
+&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;Float&lt;/div&gt;
+
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+&lt;/div&gt;
+&lt;p class="cleared"&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;    </pre>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  display: flow-root;
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_7', '100%', 600) }}</p>
+
+<h2 id="スキルをテストしましょう!">スキルをテストしましょう!</h2>
+
+<p>この記事の最後に到達しましたが、最も大事な情報を覚えていますか？次に移動する前に、この情報を保持しているか検証するテストがあります — <a href="/ja/docs/Learn/CSS/CSS_layout/Floats_skills">Test your skills: Floats</a> を見てください。</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>あなたは今、現代のウェブ開発でフロートについて知っておくべきことがすべてわかっています。 過去のレイアウト方法の使用方法については、<a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a>に関する記事を参照してください。 古いプロジェクトで作業している場合に便利です。</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li>
+</ul>
diff --git a/files/ja/learn/css/css_layout/fundamental_layout_comprehension/index.html b/files/ja/learn/css/css_layout/fundamental_layout_comprehension/index.html
new file mode 100644
index 0000000000..42e19361bc
--- /dev/null
+++ b/files/ja/learn/css/css_layout/fundamental_layout_comprehension/index.html
@@ -0,0 +1,91 @@
+---
+title: 基礎的なレイアウトの理解
+slug: Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension
+tags:
+  - Assessment
+  - Beginner
+  - CSS
+  - Layout
+  - Learn
+translation_of: Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary"><span class="seoSummary">このモジュールを乗り越えてきたならば、今日 CSS レイアウトを行うために知っておくべきことや、より古い CSS を使って作業するために必要なことの基本についてはすでに説明しているはずです。 このタスクでは、さまざまなテクニックを使用して簡単なウェブページレイアウトを作成することによって、あなたの知識の一部をテストします。</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提知識:</th>
+   <td>この評価を試みる前に、このモジュールのすべての記事を読んでおくべきです。</td>
+  </tr>
+  <tr>
+   <th scope="row">学習目標:</th>
+   <td>このモジュールで説明してきた基本的なレイアウトスキルの理解をテストすること。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Project_Brief" name="Project_Brief">プロジェクトの概要</h2>
+
+<p>生の HTML、基本的な CSS、そして画像が提供されています — これで、次の画像にそっくりなデザインのレイアウトを作成する必要があります。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16076/layout-task-complete.png" style="height: 706px; width: 1000px;"></p>
+
+<h3 id="Basic_Setup" name="Basic_Setup">基本設定</h3>
+
+<p>HTML、CSS、および6枚の画像を<a href="https://github.com/mdn/learning-area/tree/master/css/css-layout/fundamental-layout-comprehension">ここからダウンロード</a>できます。</p>
+
+<p>HTML ドキュメントとスタイルシートをコンピュータ上のディレクトリに保存し、画像を <code>images</code> という名前のフォルダに追加します。 ブラウザーで <code>index.html</code> ファイルを開くと、次の画像のような基本的なスタイルは設定されているがレイアウトが設定されていないページが表示されます。</p>
+
+<p>この出発点には、通常フローでブラウザーに表示されるレイアウトのすべての内容が含まれています。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16075/layout-task-start.png" style="height: 675px; width: 1000px;"></p>
+
+<h3 id="Your_tasks" name="Your_tasks">あなたのタスク</h3>
+
+<p>あなたは今レイアウトを実装する必要があります。 達成する必要があるタスクは次のとおりです。</p>
+
+<ol>
+ <li>ナビゲーション項目を、項目間に等間隔のスペースを置いて、1行に並べて表示します。</li>
+ <li>ナビゲーションバーはコンテンツと一緒にスクロールし、ビューポートの上部に到達するとそこに固定されるべきです。</li>
+ <li>記事の中にある画像は、それを囲むテキストを持つべきです。</li>
+ <li>{{htmlelement("article")}} 要素と {{htmlelement("aside")}} 要素は、2列のレイアウトとして表示するべきです。 ブラウザーウィンドウが小さくなると列が狭くなるように、列は柔軟なサイズにするべきです。</li>
+ <li>写真は、画像間に1ピクセルの間隔を空けて2列のグリッドとして表示するべきです。</li>
+</ol>
+
+<p>このレイアウトを実現するために HTML を編集する必要はなく、使用するべきテクニックは次のとおりです。</p>
+
+<ul>
+ <li>位置指定</li>
+ <li>フロート</li>
+ <li>フレックスボックス</li>
+ <li>CSS グリッドレイアウト</li>
+</ul>
+
+<p>これらのタスクのいくつかを達成することができるいくつかの方法があり、物事を行うための唯一の正しい方法も間違った方法も、多くの場合ありません。 いくつかの異なる方法を試して、どれが最もうまくいくかを確かめてください。 実験しながらメモを取ってください。 この演習のディスカッションスレッドまたは <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC チャンネルで、自分のアプローチについて常に議論することができます。</p>
+
+<h2 id="Assessment" name="Assessment">評価</h2>
+
+<p>組織的コースの一環としてこの評価に従っている場合は、採点のために作品を教師や指導者に渡すことができるはずです。 自己学習をしている場合は、<a href="https://discourse.mozilla.org/t/fundamental-layout-comprehension-assessment/29982">この演習についてのディスカッションスレッド</a>や <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> の <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC チャンネルで尋ねることで、かなり簡単に採点の手引きを得ることができます。 まず演習を試してみてください — 不正行為によって得られるものは何もありません！</p>
+
+<div>{{PreviousMenu("Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}</div>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li>
+</ul>
diff --git a/files/ja/learn/css/css_layout/grids/index.html b/files/ja/learn/css/css_layout/grids/index.html
new file mode 100644
index 0000000000..d7ca3601c3
--- /dev/null
+++ b/files/ja/learn/css/css_layout/grids/index.html
@@ -0,0 +1,722 @@
+---
+title: グリッド
+slug: Learn/CSS/CSS_layout/Grids
+tags:
+  - Article
+  - Beginner
+  - CSS
+  - CSS Grids
+  - CodingScripting
+  - Grids
+  - Guide
+  - Layout
+  - Learn
+  - Tutorial
+  - grid design
+  - grid framework
+  - grid system
+translation_of: Learn/CSS/CSS_layout/Grids
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary"><span class="seoSummary">CSS グリッドレイアウト（Grid Layout）は、ウェブ用の2次元レイアウトシステムです。 これにより、コンテンツを行と列にレイアウトすることができ、複雑なレイアウトを簡単に構築できるようにする多くの機能があります。 この記事では、ページレイアウトを始めるために知っておくべきことをすべて説明します。</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提知識:</th>
+   <td>HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、および CSS の機能の考え方（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>と<a href="/ja/docs/Learn/CSS/Styling_boxes">ボックスの装飾</a>を学ぶ）。</td>
+  </tr>
+  <tr>
+   <th scope="row">学習目標:</th>
+   <td>グリッドレイアウトシステムの背後にある基本概念と、CSS グリッドを使用してグリッドレイアウトを実装する方法を理解すること。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="What_is_grid_layout" name="What_is_grid_layout">グリッドレイアウトとは？</h2>
+
+<p>グリッドとは、水平方向と垂直方向のラインを集めたもので、デザイン要素を並べて表示することができます。 ページ間を移動するときに要素が跳び回ったり幅が変わったりしないようなデザインを作成するのに役立ちます。 これにより、ウェブサイトの一貫性が向上します。</p>
+
+<p>グリッドには通常、列（<strong>column</strong>）、行（<strong>row</strong>）、そしてそれぞれの行と列の間のギャップ（通常はガター（<strong>gutter</strong>）と呼ばれます）があります。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13899/grid.png" style="display: block; height: 553px; margin: 0px auto; width: 1196px;"></p>
+
+<h2 id="Creating_your_grid_in_CSS" name="Creating_your_grid_in_CSS">CSS でグリッドを作りましょう</h2>
+
+<p>デザインに必要なグリッドを決定したら、CSS グリッドレイアウトを使用して CSS でそのグリッドを作成し、その上に項目を配置できます。 最初にグリッドレイアウトの基本機能を見てから、プロジェクト用のシンプルなグリッドシステムを作成する方法を探ります。</p>
+
+<p>The following video provides a nice visual explanation of using CSS Grid:</p>
+
+<p>{{EmbedYouTube("KOvGeFUHAC0")}}</p>
+
+<h3 id="Defining_a_grid" name="Defining_a_grid">グリッドを定義する</h3>
+
+<p>出発点として、テキストエディタとブラウザーで<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/0-starting-point.html">出発点ファイル</a>をダウンロードして開きます（<a href="https://mdn.github.io/learning-area/css/css-layout/grids/0-starting-point.html">ここでライブを見る</a>こともできます）。 いくつかの子項目を持つコンテナの例が表示されます。 デフォルトではこれらは通常フローで表示されるので、ボックスは上下に表示されます。 このレッスンの最初の部分でこのファイルを使用して、グリッドのふるまいを確認するための変更を加えます。</p>
+
+<p>グリッドを定義するために、{{cssxref("display")}} プロパティに <code>grid</code> の値を使います。 フレックスボックスと同様に、これによりグリッドレイアウトがオンになり、コンテナの直接の子すべてがグリッド項目になります。 次のものをファイル内の CSS に追加してください。</p>
+
+<pre class="brush: css notranslate">.container {
+    display: grid;
+}</pre>
+
+<p>フレックスボックスとは異なり、項目はすぐには違ったようには見えません。 <code>display: grid</code> を宣言すると1列のグリッドになるので、項目は通常フローで表示されるように上下に表示され続けます。</p>
+
+<p>よりグリッドらしく見せるには、グリッドにいくつかの列を追加する必要があります。 ここに 200 ピクセルの列を3つ追加しましょう。 これらの列トラックを作成するために、任意の長さの単位やパーセントを使用できます。</p>
+
+<pre class="brush: css notranslate">.container {
+    display: grid;
+    grid-template-columns: 200px 200px 200px;
+}</pre>
+
+<p>CSS 規則に2番目の宣言を追加してからページをリロードすると、作成したグリッドの各セルに項目が1つずつ再配置されていることがわかります。</p>
+
+<div id="Grid_1">
+<div class="hidden">
+<h6 id="Simple_Grid_Example">Simple Grid Example</h6>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+
+.container &gt; div {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}          </pre>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+ &lt;div&gt;One&lt;/div&gt;
+ &lt;div&gt;Two&lt;/div&gt;
+ &lt;div&gt;Three&lt;/div&gt;
+ &lt;div&gt;Four&lt;/div&gt;
+ &lt;div&gt;Five&lt;/div&gt;
+ &lt;div&gt;Six&lt;/div&gt;
+ &lt;div&gt;Seven&lt;/div&gt;
+&lt;/div&gt; </pre>
+
+<pre class="brush: css notranslate">.container {
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
+} </pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_1', '100%', 400) }}</p>
+
+<h3 id="Flexible_grids_with_the_fr_unit" name="Flexible_grids_with_the_fr_unit">fr 単位での柔軟なグリッド</h3>
+
+<p>長さとパーセントを使用してグリッドを作成するだけでなく、<code>fr</code> 単位を使用して柔軟にグリッドの行と列のサイズを変更できます。 この単位は、グリッドコンテナ内の使用可能スペースの割合を表します。</p>
+
+<p>トラックのリストを次の定義に変更し、<code>1fr</code> のトラックを3つ作成します。</p>
+
+<pre class="brush: css notranslate">.container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+}</pre>
+
+<p>あなたは今、柔軟なトラックを持っているのを見るべきです。 <code>fr</code> 単位はスペースを比例して配分するので、トラックには異なる正の値を指定できます。 例えば次のように定義を変更したとします。</p>
+
+<pre class="brush: css notranslate">.container {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr;
+}</pre>
+
+<p>最初のトラックの使用可能スペースは <code>2fr</code> になり、他の2つのトラックの使用可能スペースは <code>1fr</code> になり、最初のトラックのサイズが大きくなります。 <code>fr</code> 単位と固定長トラックを混在させることができます — そのような場合、固定長トラックに必要なスペースは、スペースが他のトラックに分配される前に取り除かれます。</p>
+
+<div id="Grid_2">
+<div class="hidden">
+<h6 id="Simple_Grid_Example_with_fr_units">Simple Grid Example with fr units</h6>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+}
+
+.container &gt; div {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}
+                </pre>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+  &lt;div&gt;Six&lt;/div&gt;
+  &lt;div&gt;Seven&lt;/div&gt;
+&lt;/div&gt;                        </pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_2', '100%', 400) }}</p>
+
+<div class="note">
+<p><strong>注</strong>: <code>fr</code> 単位は、<em>すべて</em>のスペースではなく、<em>使用可能</em>なスペースを分配します。 あなたのトラックの1つがその中に大きな何かを持っているならば、共有する空きスペースは少なくなります。</p>
+</div>
+
+<h3 id="Gaps_between_tracks" name="Gaps_between_tracks">トラック間のギャップ</h3>
+
+<p>トラック間のギャップを作成するには、列間のギャップには {{cssxref("grid-column-gap")}} プロパティ、行間のギャップには {{cssxref("grid-row-gap")}} プロパティ、両方を同時に設定するには {{cssxref("grid-gap")}} プロパティを使用します。</p>
+
+<pre class="brush: css notranslate">.container {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr;
+    grid-gap: 20px;
+}</pre>
+
+<p>これらのギャップは、長さの単位またはパーセントのいずれでもかまいませんが、<code>fr</code> 単位ではありません。</p>
+
+<div id="Grid_3">
+<div class="hidden">
+<h6 id="Simple_Grid_Example_with_fr_units_2">Simple Grid Example with fr units</h6>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+  grid-gap: 20px;
+}
+
+.container &gt; div {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}
+                </pre>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+  &lt;div&gt;Six&lt;/div&gt;
+  &lt;div&gt;Seven&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_3', '100%', 400) }}</p>
+
+<div class="note">
+<p><strong>注</strong>: <code>*gap</code> プロパティは以前は <code>grid-</code> という接頭辞を付けていましたが、これは仕様変更されています。 その意図はそれらを複数のレイアウト方法で使えるようにすることです。 接頭辞の付いたバージョンはエイリアスとして保持されるため、しばらくの間は安全に使用できます。 安全のために、コードをより万全にするために、両方のプロパティを倍増して追加することができます。</p>
+</div>
+
+<pre class="brush: css notranslate">.container {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+  grid-gap: 20px;
+  gap: 20px;
+}</pre>
+
+<h3 id="Repeating_track_listings" name="Repeating_track_listings">トラックリストの繰り返し</h3>
+
+<p>反復記法を使用して、トラックリストの全部または一部を繰り返すことができます。 トラックリストを次のように変更します。</p>
+
+<pre class="brush: css notranslate">.container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 20px;
+}</pre>
+
+<p>今までと同じ3つの <code>1fr</code> のトラックが手に入ります。 repeat 関数に渡す最初の値はリストを繰り返す回数で、2番目の値はトラックリストで、1つ以上のトラックを繰り返すことができます。</p>
+
+<h3 id="The_implicit_and_explicit_grid" name="The_implicit_and_explicit_grid">暗黙的グリッドと明示的グリッド</h3>
+
+<p>ここまでは列トラックのみを指定しましたが、コンテンツを保持するために行が作成されています。 これは明示的グリッド対暗黙的グリッドの例です。 明示的グリッドは、<code>grid-template-columns</code> または <code>grid-template-rows</code> を使用して作成したものです。 暗黙的グリッドは、コンテンツがそのグリッドの外側、例えば行に配置されたときに作成されます。 明示的グリッドと暗黙的グリッドは、フレックスボックスの主軸および交差軸と類似しています。</p>
+
+<p>デフォルトでは、暗黙的グリッドに作成されたトラックは <code>auto</code> でサイズ調整されます。 これは一般に、コンテンツに合わせて十分に大きいことを意味します。 暗黙的グリッドのトラックにサイズを指定したい場合は、{{cssxref("grid-auto-rows")}} プロパティと {{cssxref("grid-auto-columns")}} プロパティを使用できます。 CSS に <code>100px</code> の値で <code>grid-auto-rows</code> を追加すると、作成された行の高さは 100 ピクセルになります。</p>
+
+<div id="Grid_4">
+<div class="hidden">
+<h6 id="Simple_Grid_Example_with_fr_units_3">Simple Grid Example with fr units</h6>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+
+.container &gt; div {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}                  </pre>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+  &lt;div&gt;Six&lt;/div&gt;
+  &lt;div&gt;Seven&lt;/div&gt;
+&lt;/div&gt;
+                        </pre>
+</div>
+
+<pre class="brush: css notranslate">.container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 20px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_4', '100%', 400) }}</p>
+
+<h3 id="The_minmax_function" name="The_minmax()_function">minmax() 関数</h3>
+
+<p>100 ピクセルより高いコンテンツを追加する場合、100 ピクセルの高さのトラックはあまり役に立ちません。 その場合、オーバーフローが発生します。 トラックの高さは<em>最低</em> 100 ピクセルで、さらに多くのコンテンツがトラックに入る場合は拡大できると良いでしょう。 ウェブについてのかなり基本的な事実は、あなたが実際に何かがどれほど高くなるかを本当に知らないということです。 追加のコンテンツや大きなフォントサイズは、あらゆる次元でピクセルパーフェクトになろうとするデザインに問題を引き起こす可能性があります。</p>
+
+<p>{{cssxref("minmax")}} 関数を使用すると、トラックの最小サイズと最大サイズ、例えば <code>minmax(100px, auto)</code> を設定できます。 最小サイズは 100 ピクセルですが、最大サイズは <code>auto</code> で、コンテンツに合わせて拡大されます。 次のように <code>minmax</code> の値を使用するように <code>grid-auto-rows</code> を変更してみてください。</p>
+
+<pre class="brush: css notranslate">.container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-rows: minmax(100px, auto);
+    grid-gap: 20px;
+}</pre>
+
+<p>追加のコンテンツを追加すると、それが収まるようにトラックが拡大されます。 拡張は行に沿って行われることに注意してください。</p>
+
+<h3 id="As_many_columns_as_will_fit" name="As_many_columns_as_will_fit">収まる限り多くの列</h3>
+
+<p>トラックリスト、反復記法、{{cssxref("minmax")}} について学んだことのいくつかを組み合わせて、便利なパターンを作成できます。 グリッドに、コンテナに収まるだけの数の列を作成するように依頼できると便利な場合があります。 これを行うには、{{cssxref("repeat")}} 記法を使用して <code>grid-template-columns</code> の値を設定しますが、数値を渡す代わりにキーワード <code>auto-fill</code> を渡します。 関数の2番目のパラメータには、<code>minmax()</code> を使用し、最小値は、必要な最小トラックサイズに等しく、最大値は <code>1fr</code> です。</p>
+
+<p>以下の CSS を使用して、今すぐあなたのファイルで次を試してください。</p>
+
+<div id="Grid_5">
+<div class="hidden">
+<h6 id="As_many_columns_as_will_fit_2">As many columns as will fit</h6>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+
+.container &gt; div {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}
+                </pre>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+  &lt;div&gt;Six&lt;/div&gt;
+  &lt;div&gt;Seven&lt;/div&gt;
+&lt;/div&gt;                      </pre>
+</div>
+
+<pre class="brush: css notranslate">.container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  grid-auto-rows: minmax(100px, auto);
+  grid-gap: 20px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_5', '100%', 400) }}</p>
+
+<p>これは、グリッドがコンテナに収まるだけの数の 200 ピクセルの列を作成し、その後すべての列の間で残っているスペースを共有するためです — 最大は <code>1fr</code> で、すでにご存じのとおり、トラック間でスペースを均等に配分するためのものです。</p>
+
+<h2 id="Line-based_placement" name="Line-based_placement">ラインベースの配置</h2>
+
+<p>グリッドの作成から、グリッド上に物を配置することに移ります。 グリッドは常にラインを持っていて、そのラインは 1 から始まり、文書の書字方向モード（Writing Mode）に関連しています。 したがって、英語では、桁の1ライン目がグリッドの左側にあり、行の1ライン目が一番上にあります。 アラビア語では、アラビア語は右から左に書かれているので、桁の1ライン目が右側になります。</p>
+
+<p>開始ラインと終了ラインを指定することで、これらのラインに従って物を配置できます。 次のプロパティを使用してこれを行います。</p>
+
+<ul>
+ <li>{{cssxref("grid-column-start")}}</li>
+ <li>{{cssxref("grid-column-end")}}</li>
+ <li>{{cssxref("grid-row-start")}}</li>
+ <li>{{cssxref("grid-row-end")}}</li>
+</ul>
+
+<p>これらのプロパティはすべて値としてライン番号を持つことができます。 次の一括指定プロパティを使用することもできます。</p>
+
+<ul>
+ <li>{{cssxref("grid-column")}}</li>
+ <li>{{cssxref("grid-row")}}</li>
+</ul>
+
+<p>これにより、開始ラインと終了ラインを <code>/</code> （スラッシュ文字）で区切って一度に指定できます。</p>
+
+<p><a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/8-placement-starting-point.html">出発点としてこのファイルをダウンロードする</a>か、<a href="https://mdn.github.io/learning-area/css/css-layout/grids/8-placement-starting-point.html">ここにあるライブを見てください</a>。 それはすでに定義されたグリッドを持ち、そして簡単な記事が概説されています。 自動配置により、作成したグリッドの各セルに項目を1つずつ配置していることがわかります。</p>
+
+<p>代わりに、グリッドラインを使用して、サイトのすべての要素をグリッドに配置します。 CSS の最後に次の規則を追加してください。</p>
+
+<pre class="brush: css notranslate">header {
+  grid-column: 1 / 3;
+  grid-row: 1;
+}
+
+article {
+  grid-column: 2;
+  grid-row: 2;
+}
+
+aside {
+  grid-column: 1;
+  grid-row: 2;
+}
+
+footer {
+  grid-column: 1 / 3;
+  grid-row: 3;
+}</pre>
+
+<div id="Grid_6">
+<div class="hidden">
+<h6 id="Line-based_placement_2">Line-based placement</h6>
+
+<pre class="brush: css notranslate">                body {
+                    width: 90%;
+                    max-width: 900px;
+                    margin: 2em auto;
+                    font: .9em/1.2 Arial, Helvetica, sans-serif;
+                }
+
+                .container {
+                    display: grid;
+                    grid-template-columns: 1fr 3fr;
+                    grid-gap: 20px;
+                }
+header {
+    grid-column: 1 / 3;
+    grid-row: 1;
+}
+
+article {
+    grid-column: 2;
+    grid-row: 2;
+}
+
+aside {
+    grid-column: 1;
+    grid-row: 2;
+}
+
+footer {
+    grid-column: 1 / 3;
+    grid-row: 3;
+}
+
+header,
+footer {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}
+
+aside {
+  border-right: 1px solid #999;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+  &lt;header&gt;This is my lovely blog&lt;/header&gt;
+  &lt;article&gt;
+    &lt;h1&gt;My article&lt;/h1&gt;
+    &lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+  &lt;/article&gt;
+  &lt;aside&gt;
+    &lt;h2&gt;Other things&lt;/h2&gt;
+    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.&lt;/p&gt;
+  &lt;/aside&gt;
+  &lt;footer&gt;Contact me@mysite.com&lt;/footer&gt;
+&lt;/div&gt;               </pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_6', '100%', 400) }}</p>
+
+<div class="note">
+<p><strong>注</strong>: 終点の列または行のラインをターゲットとして値 <code>-1</code> を使用し、負の値を使用して終点から内側に向かって数えることもできます。 しかしこれは明示的グリッドに対してのみ有効です。 値 <code>-1</code> は、<a href="/ja/docs/Glossary/Grid">暗黙的グリッド</a>の終点のラインをターゲットにしません。</p>
+</div>
+
+<h2 id="Positioning_with_grid-template-areas" name="Positioning_with_grid-template-areas">grid-template-areas での配置</h2>
+
+<p>項目をグリッドに配置する別の方法は、{{cssxref("grid-template-areas")}} プロパティを使用して、デザインのさまざまな要素に名前を付けることです。</p>
+
+<p>最後の例からラインベースの配置を削除して（またはファイルを再ダウンロードして新しい出発点にして）、次の CSS を追加します。</p>
+
+<pre class="brush: css notranslate">.container {
+  display: grid;
+  grid-template-areas:
+      "header header"
+      "sidebar content"
+      "footer footer";
+  grid-template-columns: 1fr 3fr;
+  grid-gap: 20px;
+}
+
+header {
+  grid-area: header;
+}
+
+article {
+  grid-area: content;
+}
+
+aside {
+  grid-area: sidebar;
+}
+
+footer {
+  grid-area: footer;
+}</pre>
+
+<p>ページをリロードすると、ライン番号を使用しなくても項目が以前と同じように配置されたことがわかります！</p>
+
+<div id="Grid_7">
+<div class="hidden">
+<h6 id="Line-based_placement_3">Line-based placement</h6>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+
+header,
+footer {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}
+
+aside {
+  border-right: 1px solid #999;
+}
+
+.container {
+  display: grid;
+  grid-template-areas:
+  "header header"
+  "sidebar content"
+  "footer footer";
+  grid-template-columns: 1fr 3fr;
+  grid-gap: 20px;
+}
+
+header {
+  grid-area: header;
+}
+
+article {
+  grid-area: content;
+}
+
+aside {
+  grid-area: sidebar;
+}
+
+footer {
+  grid-area: footer;
+}
+                </pre>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+  &lt;header&gt;This is my lovely blog&lt;/header&gt;
+  &lt;article&gt;
+    &lt;h1&gt;My article&lt;/h1&gt;
+    &lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+  &lt;/article&gt;
+  &lt;aside&gt;&lt;h2&gt;Other things&lt;/h2&gt;
+    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.&lt;/p&gt;
+  &lt;/aside&gt;
+  &lt;footer&gt;Contact me@mysite.com&lt;/footer&gt;
+&lt;/div&gt;                     </pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_7', '100%', 400) }}</p>
+
+<p><code>grid-template-area</code> の規則は次のとおりです。</p>
+
+<ul>
+ <li>グリッドのすべてのセルを塗りつぶす必要があります。</li>
+ <li>2つのセルにまたがるようにするには、名前を繰り返します。</li>
+ <li>セルを空のままにするには、<code>.</code> （ピリオド）を使用します。</li>
+ <li>領域は長方形である必要があります。 例えば、L字型の領域を持つことはできません。</li>
+ <li>領域は異なる場所で繰り返すことはできません。</li>
+</ul>
+
+<p>あなたは私たちのレイアウトで遊ぶことができます。 例えば、フッターをコンテンツの下にだけあるように変更し、サイドバーをずっと下に広げるように変更できます。 これは、何が起こっているのかが CSS から明らかなので、レイアウトを記述するためのとても良い方法です。</p>
+
+<h2 id="A_CSS_Grid_grid_framework" name="A_CSS_Grid_grid_framework">CSS グリッド、グリッドフレームワーク</h2>
+
+<p>グリッドの「フレームワーク」は、12列または16列のグリッドと CSS グリッドを基にし、そのようなフレームワークを提供するためにサードパーティ製ツールを必要としません — すでに仕様にあります。</p>
+
+<p><a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/11-grid-system-starting-point.html">出発点ファイルをダウンロードしてください</a>。 これには、12列のグリッドが定義されたコンテナと、前の2つの例で使用したのと同じマークアップが含まれています。 ラインベースの配置を使用して、次のようにコンテンツを12列のグリッドに配置できます。</p>
+
+<pre class="brush: css notranslate">header {
+  grid-column: 1 / 13;
+  grid-row: 1;
+}
+
+article {
+  grid-column: 4 / 13;
+  grid-row: 2;
+}
+
+aside {
+  grid-column: 1 / 4;
+  grid-row: 2;
+}
+
+footer {
+  grid-column: 1 / 13;
+  grid-row: 3;
+}</pre>
+
+<div id="Grid_8">
+<div class="hidden">
+<h6 id="A_CSS_Grid_Grid_System">A CSS Grid Grid System</h6>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0,1fr));
+  grid-gap: 20px;
+}
+
+header {
+  grid-column: 1 / 13;
+  grid-row: 1;
+}
+
+article {
+  grid-column: 4 / 13;
+  grid-row: 2;
+}
+
+aside {
+  grid-column: 1 / 4;
+  grid-row: 2;
+}
+
+footer {
+  grid-column: 1 / 13;
+  grid-row: 3;
+}
+
+header,
+footer {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}
+
+aside {
+  border-right: 1px solid #999;
+}
+                </pre>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+  &lt;header&gt;This is my lovely blog&lt;/header&gt;
+  &lt;article&gt;
+    &lt;h1&gt;My article&lt;/h1&gt;
+    &lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+  &lt;/article&gt;
+  &lt;aside&gt;&lt;h2&gt;Other things&lt;/h2&gt;
+    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.&lt;/p&gt;
+  &lt;/aside&gt;
+  &lt;footer&gt;Contact me@mysite.com&lt;/footer&gt;
+&lt;/div&gt;
+                        </pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_8', '100%', 400) }}</p>
+
+<p><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox のグリッドインスペクタ</a>を使用してデザイン上のグリッドラインをオーバーレイすると、12列グリッドがどのように機能するかがわかります。</p>
+
+<p><img alt="私たちのデザインの上に重ねられた12列のグリッド。" src="https://mdn.mozillademos.org/files/16045/learn-grids-inspector.png" style="height: 1026px; width: 2028px;"></p>
+
+<h2 id="スキルをテストしましょう!">スキルをテストしましょう!</h2>
+
+<p>この記事の最後に到達しましたが、最も大事な情報を覚えていますか？次に移動する前に、この情報を保持しているか検証するテストがあります — <a href="/ja/docs/Learn/CSS/CSS_layout/Grid_skills">Test your skills: Grids</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_Grid_Layout#Guides">CSS グリッドのガイド</a></li>
+ <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">CSS グリッドインスペクター: グリッドレイアウトを調査する</a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li>
+</ul>
diff --git a/files/ja/learn/css/css_layout/index.html b/files/ja/learn/css/css_layout/index.html
new file mode 100644
index 0000000000..419de7d135
--- /dev/null
+++ b/files/ja/learn/css/css_layout/index.html
@@ -0,0 +1,80 @@
+---
+title: CSS レイアウト
+slug: Learn/CSS/CSS_layout
+tags:
+  - Beginner
+  - CSS
+  - Floating
+  - Grids
+  - Guide
+  - Landing
+  - Layout
+  - Learn
+  - Module
+  - Multiple column
+  - Positioning
+  - alignment
+  - flexbox
+  - float
+  - table
+translation_of: Learn/CSS/CSS_layout
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">現段階で、すでに CSS の基本、テキストの装飾方法、コンテンツを格納するボックスの装飾方法と操作方法を見てきました。 今度は、ビューポートや互いを基準にしてボックスを適切な場所に配置する方法を検討します。 必要な前提知識をカバーしているので、さまざまな <code>display</code> の設定、フレックスボックス・CSS グリッド・位置指定などの最新のレイアウトツール、そしてまだ知っておきたいと思うかもしれない過去のテクニックのいくつかを見ながら、CSS レイアウトについて深く掘り下げることができます。</p>
+
+<h2 id="Prerequisites" name="Prerequisites">前提知識</h2>
+
+<p>このモジュールを始める前に、次のことを理解しているべきです。</p>
+
+<ol>
+ <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>で説明したように、HTML についての基本的な知識があること。</li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>で説明したように、CSS の基本を容易にこなせること。</li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_boxes">ボックスを装飾する方法</a>を理解していること。</li>
+</ol>
+
+<div class="note">
+<p><strong>注: </strong>使用しているコンピューター/タブレット/その他のデバイスで自分のファイルを作成できない場合は、<a href="http://jsbin.com/">JSBin</a> や <a href="https://thimble.mozilla.org/ja/">Thimble</a> などのオンラインコーディングプログラムで（ほとんどの）コードサンプルを試すことができます。</p>
+</div>
+
+<h2 id="Guides" name="Guides">ガイド</h2>
+
+<p>これらの記事では、CSS で利用可能な基本的なレイアウトのツールとテクニックについての教育を提供します。 レッスンの最後には、ウェブページをレイアウトすることによって、レイアウト方法の理解を確認するのに役立つ評価試験があります。</p>
+
+<dl>
+ <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></dt>
+ <dd>この記事では、以前のモジュールで既に触れた CSS レイアウト機能のいくつか（さまざまな {{cssxref("display")}} の値など）を要約し、このモジュール全体で取り上げるいくつかの概念を紹介します。</dd>
+ <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></dt>
+ <dd>ウェブページ上の要素は、通常フローを変えるために何かをするまで、通常フローに従ってレイアウトされます。 この記事では、通常フローを変える方法を学ぶための基礎として、通常フローの基本について説明します。</dd>
+ <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></dt>
+ <dd>
+ <p><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">フレックスボックス</a>は、項目を行または列にレイアウトするための1次元のレイアウト方法です。 項目は追加のスペースを埋めるためにたわみ、小さいスペースに収まるように縮小します。 この記事では、すべての基本事項について説明します。</p>
+ </dd>
+ <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></dt>
+ <dd>CSS グリッドレイアウトは、ウェブ用の2次元レイアウトシステムです。 これにより、コンテンツを行と列にレイアウトすることができ、複雑なレイアウトを簡単に構築できるようにする多くの機能があります。 この記事では、ページレイアウトを始めるために知っておくべきことをすべて説明します。</dd>
+ <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></dt>
+ <dd>{{cssxref("float")}} プロパティは、もともとはテキストブロック内の浮動画像のためのものでしたが、ウェブページ上に複数列レイアウトを作成するために最も一般的に使われるツールの1つになりました。 この記事で説明しているように、フレックスボックスとグリッドの出現により、今は当初の目的に戻っています。</dd>
+ <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></dt>
+ <dd>位置指定を使用すると、通常のドキュメントレイアウトフローから要素を取り出して異なるふるまいをさせることができます。 例えば、互いの上に重なったり、常にブラウザーのビューポート内の同じ場所に留まったりします。 この記事では、さまざまな {{cssxref("position")}} の値とその使い方について説明します。</dd>
+ <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></dt>
+ <dd>段組みレイアウトの仕様では、新聞に見られるような、コンテンツを段にレイアウトする方法が提供されています。 この記事では、この機能の使い方について説明します。</dd>
+ <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></dt>
+ <dd>Web 対応デバイスでより多様な画面サイズが登場するにつれて、レスポンシブ Web デザイン（RWD）の概念が登場しました。 これは、さまざまな画面幅、解像度などに合わせて Web ページがレイアウトと外観を変更できるようにする一連の実践です。 これは、マルチデバイス Web 向けのデザイン方法を変更したアイデアであり、この記事では、それをマスターするために知っておくべき主なテクニックを理解するのに役立ちます。</dd>
+ <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></dt>
+ <dd><strong>CSS メディアクエリー</strong>を使用すると、例えば、「ビューポートは 480 ピクセルよりも広い」というような、ブラウザーとデバイスの環境が指定した規則に一致する場合にのみ CSS を適用できます。 メディアクエリーは、ビューポートのサイズに応じて異なるレイアウトを作成できるため、レスポンシブ Web デザイン（responsive web design、RWD）の重要な部分ですが、例えば、ユーザーはマウスではなくタッチスクリーンを使用しているというような、サイトが実行されている環境に関する他のものを検出するためにも使用できます。 このレッスンでは、最初にメディアクエリーで使用される構文について学習し、次に単純なデザインでどのようにレスポンシブにするかを示す実際の例で使用してみます。</dd>
+ <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></dt>
+ <dd>グリッドシステムは CSS レイアウトで使用される非常に一般的な機能で、CSS グリッドレイアウト以前はフロートや他のレイアウト機能を使用して実装される傾向がありました。 あなたはレイアウトをいくつかの列（例えば 4、6、または 12）として想像し、そしてコンテンツの列をこれらの想像上の列の内側に合わせます。 この記事では、古いプロジェクトで作業した場合に、それらがどう使われたかを理解するために、これらの古い方法がどのように機能するのかを説明します。</dd>
+ <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザのサポート</a></dt>
+ <dd>
+ <p>このモジュールでは、フレックスボックスとグリッドをデザインの主なレイアウト方法として使用することをお勧めしています。 しかしながら、サイトへの訪問者には、古いブラウザーや、使用している方法をサポートしていないブラウザーを使用している人がいます。 これはウェブ上で常に当てはまります — 新しい機能が開発されると、ブラウザーによって異なるものが優先されます。 この記事では、古い技術のユーザーを締め出すことなく最新のウェブテクニックを使用する方法について説明します。</p>
+ </dd>
+ <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">評価試験: 基礎的なレイアウトの理解</a></dt>
+ <dd>ウェブページをレイアウトすることによって、さまざまなレイアウト方法に関する知識をテストするための評価試験です。</dd>
+</dl>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<dl>
+ <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">実用的な位置指定の例</a></dt>
+ <dd>この記事では、位置指定でどのようなことができるかを説明するために、実際に使用されるいくつかの例を作成する方法を示します。</dd>
+</dl>
diff --git a/files/ja/learn/css/css_layout/introduction/index.html b/files/ja/learn/css/css_layout/introduction/index.html
new file mode 100644
index 0000000000..3425a29729
--- /dev/null
+++ b/files/ja/learn/css/css_layout/introduction/index.html
@@ -0,0 +1,720 @@
+---
+title: CSS レイアウト入門
+slug: Learn/CSS/CSS_layout/Introduction
+tags:
+  - Article
+  - Beginner
+  - CSS
+  - Floats
+  - Grids
+  - Introduction
+  - Layout
+  - Learn
+  - Positioning
+  - Tables
+  - flexbox
+  - flow
+translation_of: Learn/CSS/CSS_layout/Introduction
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary"><span class="seoSummary">この記事では、以前のモジュールで既に触れた CSS レイアウト機能のいくつか（さまざまな {{cssxref("display")}} の値など）を要約し、このモジュール全体で取り上げるいくつかの概念を紹介します。</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提知識:</th>
+   <td>HTML の基礎（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、および CSS の機能の考え方（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>を学ぶ）。</td>
+  </tr>
+  <tr>
+   <th scope="row">学習目標:</th>
+   <td>CSS ページレイアウトのテクニックの概要を説明します。 各テクニックは、以降のチュートリアルで詳細に学ぶことができます。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>CSS のページレイアウト技術によって、ウェブページに含まれる要素の位置を制御できます。通常のレイアウトフローによる初期配置、隣接する要素、それらの親コンテナ、またはメインビューポート、ウィンドウの位置、といったものが位置を制御する基準になりえます。 このモジュールでは次に挙げるページレイアウト技術の詳細について説明します。</p>
+
+<ul>
+ <li>通常フロー</li>
+ <li>{{cssxref("display")}} プロパティ</li>
+ <li>フレックスボックス</li>
+ <li>グリッド</li>
+ <li>フロート</li>
+ <li>位置指定</li>
+ <li>表レイアウト</li>
+ <li>段組みレイアウト</li>
+</ul>
+
+<p>どの技術にも、それぞれ用途、長所、短所があり、単独で使用するようには設計されていません。 ひとつひとつの技術がどのように設計されているかを理解することは、それぞれのタスクに最適なレイアウト方法を判断するための基礎になるでしょう。</p>
+
+<h2 id="Normal_flow" name="Normal_flow">通常フロー</h2>
+
+<p>通常フロー（Normal flow）は、ページレイアウトの制御を何もしない場合に、ブラウザーがデフォルトで HTML ページをレイアウトする方法です。 次の簡単な HTML の例を見てみましょう。</p>
+
+<pre class="brush: html">&lt;p&gt;I love my cat.&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;Buy cat food&lt;/li&gt;
+  &lt;li&gt;Exercise&lt;/li&gt;
+  &lt;li&gt;Cheer up friend&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;p&gt;The end!&lt;/p&gt;</pre>
+
+<p>デフォルトでは、ブラウザーはこのコードを次のように表示します。</p>
+
+<p>{{ EmbedLiveSample('Normal_flow', '100%', 200) }}</p>
+
+<p>ここでは、HTML がソースコードに現れる順序どおりに表示されていることに注意してください — 最初の段落の後に番号なしリストが続き、その後に2番目の段落が続きます。</p>
+
+<p>上下に並んで表示される要素は<em>ブロック</em>要素と呼ばれています。段落内の個々の単語と同じように横に並んで表示される<em>インライン</em>要素とは対照的です。</p>
+
+<div class="note">
+<p><strong>注</strong>: ブロック要素のコンテンツがレイアウトされる方向は、ブロック方向（Block Direction）と呼ばれます。 ブロック方向は、英語などの横書きモード（Horizontal Writing Mode）の言語では垂直に走ります。 日本語のような縦書きモード（Vertical Writing Mode）では、どの言語でも水平に走ります。 対応するインライン方向（Inline Direction）は、インラインコンテンツ（文など）が走る方向です。</p>
+</div>
+
+<p>CSSで何かをレイアウトするとその要素を通常フローから遠ざけることになりますが、ページ上の多くの要素は通常フローにしたがって適宜レイアウトされます。これが、構造化された HTML 文書から始めることが非常に重要である理由です。 なぜなら、多くの要素のレイアウトに一から悪戦苦闘するかわりに、あらかじめ多くのものがレイアウトされている現状で作業できるからです。</p>
+
+<p>CSS で要素をどのように配置するかを変更できる方法は次のとおりです。</p>
+
+<ul>
+ <li><strong>{{cssxref("display")}} プロパティ</strong> — <code>block</code>、<code>inline</code>、<code>inline-block</code> などの標準値は、要素が通常フローでどのようにふるまうかを変更することができます（詳細については、<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">CSS ボックスの種類</a>を参照してください）。それから、<a href="/ja/docs/Learn/CSS/CSS_layout/Grids">CSS グリッド</a>や<a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a>のように、<code>display</code> の値によってオンにされるレイアウト方法全体があります。</li>
+ <li><strong>フロート</strong> — <code>left</code> のような {{cssxref("float")}} の値を適用すると、雑誌のレイアウトで画像の周囲をテキストが取り囲むことがあるように、要素の片側に沿ってブロックレベル要素が折り返されることがあります。</li>
+ <li><strong>{{cssxref("position")}} プロパティ</strong> — 他のボックス内のボックスの配置を正確に制御できます。 通常フローでは <code>static</code> 位置指定がデフォルトですが、他の値を使用して要素を異なる方法でレイアウトすることもできます。 例えば、ブラウザーのビューポートの左上に固定するなどです。</li>
+ <li><strong>表レイアウト</strong> — HTML 表の一部をスタイルするために設計された機能は、<code>display: table</code> とそれに関連するプロパティを使用して、表以外の要素にも使用できます。</li>
+ <li><strong>段組みレイアウト</strong> — <a href="/ja/docs/Web/CSS/CSS_Columns">段組みレイアウト</a>のプロパティを使用すると、新聞のようにブロックのコンテンツを段組みにレイアウトできます。</li>
+</ul>
+
+<h2 id="The_display_property" name="The_display_property">display プロパティ</h2>
+
+<p>CSS でページレイアウトを実現するための主な方法は、<code>display</code> プロパティのすべての値です。 このプロパティにより、デフォルトの表示方法を変更することができます。 通常フローに属するすべての要素には <code>display</code> の値が設定されており、この値によって要素のデフォルトのふるまいが決まります。 例えば、英語の文書内で{{htmlelement("p", "段落")}}が上から下へ表示されるのは、<code>display: block</code> でスタイルが設定されているためです。 段落内のテキストの周囲にリンクを作成しても、そのリンクは残りのテキストとインラインのままで、改行しません。 これは、{{htmlelement("a")}} 要素がデフォルトで <code>display: inline</code> であるためです。</p>
+
+<p>このような display のデフォルトのふるまいは変更できます。 例えば、{{htmlelement("li")}} 要素はデフォルトで <code>display: block</code> です。 つまり、英語の文書ではリスト項目は上下に表示されます。 <code>display</code> の値を <code>inline</code> に変更した場合、単語が文中で行うように、それらは互いに隣接して表示されます。 任意の要素に対して <code>display</code> の値を変更できるということは、どのように見えるかについて心配することなく、<ruby>意味論的<rp>(</rp><rt>semantic</rt><rp>)</rp></ruby>な視点で HTML 要素を選択できるということです。 見た目はあなたが変えることができるものです。</p>
+
+<p>ひとつの項目を <code>block</code> から <code>inline</code> に、またはその逆に切り替えてデフォルトの表示方法を変更することに加えて、より大きい単位で作用するいくつかのレイアウト手法を <code>display</code> の値を通じて使い始めることができます。 ただし、これらを使用するときは、通常、追加のプロパティを指定する必要があります。 要素のレイアウトを検討する目的において最も重要な値は <code>display: flex</code> と <code>display: grid</code> の2つです。</p>
+
+<h2 id="Flexbox" name="Flexbox">フレックスボックス</h2>
+
+<p>フレックスボックス（Flexbox）は <a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexible Box Layout</a> Module の略称で、行または列のいずれかとして、物を1次元にレイアウトすることを容易にするように設計されています。 フレックスボックスを使うには、<code>display: flex</code> をレイアウトしたい要素の親要素に適用します。 その直接の子はすべてフレックス項目になります。これは簡単な例で見ることができます。</p>
+
+<p>以下の HTML マークアップは、3つの {{htmlelement("div")}} 要素が入っている <code>wrapper</code> クラスを持つ包含要素を示しています。 デフォルトでは、これらは英語の文書では上下にブロック要素として表示されます。</p>
+
+<p>ただし、<code>display: flex</code> を親に追加すると、3つの項目は列に配置されます。 これは、それらが<em>フレックス項目</em>になり、フレックスボックスがそれらに与えるいくつかの初期値を使用するためです。 {{cssxref("flex-direction")}} の初期値は <code>row</code> なので、行として表示されます。 {{cssxref("align-items")}} プロパティの初期値は <code>stretch</code> であるため、それらはすべて最も高い項目の高さまで伸びているように見えます。 これは、項目がフレックスコンテナの高さまで伸びることを意味します。 この場合、項目は最も高い項目によって定義されます。 項目はすべてコンテナの先頭に配置され、行の末尾に余分なスペースが残ります。</p>
+
+<div id="Flex_1">
+<div class="hidden">
+<h6 id="Flexbox_Example_1">Flexbox Example 1</h6>
+
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper &gt; div {
+    border-radius: 5px;
+    background-color: rgb(207,232,220);
+    padding: 1em;
+}
+    </pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: flex;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;One&lt;/div&gt;
+  &lt;div class="box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box3"&gt;Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Flex_1', '300', '200') }}</p>
+
+<p>フレックスコンテナに適用できる上記のプロパティに加えて、フレックス項目に適用できるプロパティがあります。 これらのプロパティは、とりわけ、項目のたわみ方を変えることができ、利用可能なスペースに収まるように項目を拡大および縮小することを可能にします。</p>
+
+<p>この単純な例として、すべての子項目に <code>1</code> の値の {{cssxref("flex")}} プロパティを追加できます。 これにより、末尾にスペースを残すのではなく、すべての項目が拡大してコンテナがいっぱいになります。 より多くのスペースがあるならば、項目はより広くなり、スペースが少ないと狭くなります。 さらに、マークアップに別の要素を追加すると、項目はすべてスペースを空けるために小さくなります — サイズに関係なく、同じ大きさのスペースを占めるようにサイズが調整されます。</p>
+
+<div id="Flex_2">
+<div class="hidden">
+<h6 id="Flexbox_Example_2">Flexbox Example 2</h6>
+
+<pre class="brush: css">    * {box-sizing: border-box;}
+
+    .wrapper &gt; div {
+        border-radius: 5px;
+        background-color: rgb(207,232,220);
+        padding: 1em;
+    }
+    </pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+    display: flex;
+}
+
+.wrapper &gt; div {
+    flex: 1;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+    &lt;div class="box1"&gt;One&lt;/div&gt;
+    &lt;div class="box2"&gt;Two&lt;/div&gt;
+    &lt;div class="box3"&gt;Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Flex_2', '300', '200') }}</p>
+
+<div class="note">
+<p><strong>注</strong>: これはフレックスボックスで可能なことの非常に短い紹介です。 詳細については、<a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a>の記事を参照してください。</p>
+</div>
+
+<h2 id="Grid_Layout" name="Grid_Layout">グリッドレイアウト</h2>
+
+<p>フレックスボックスは1次元レイアウト用に設計されていますが、グリッドレイアウト（Grid Layout）は2次元用に設計されています — 行と列に物を並べます。</p>
+
+<p>繰り返しになりますが、<code>display: grid</code> という特定の <code>display</code> の値でグリッドレイアウト（Grid Layout）をオンにすることができます。 以下の例では、コンテナといくつかの子要素とともに、<code>flex</code> の例と同様のマークアップを使用しています。 <code>display: grid</code> の使用に加えて、{{cssxref("grid-template-rows")}} プロパティと {{cssxref("grid-template-columns")}} プロパティをそれぞれ使用して、親の行と列のトラックをいくつか定義します。 それぞれ <code>1fr</code> の3列と <code>100px</code> の2行を定義しました。 子要素に規則を置く必要はなく、自動的にグリッドが作成したセルに配置されます。</p>
+
+<div id="Grid_1">
+<div class="hidden">
+<h6 id="Grid_example_1">Grid example 1</h6>
+
+<pre class="brush: css">    * {box-sizing: border-box;}
+
+    .wrapper &gt; div {
+        border-radius: 5px;
+        background-color: rgb(207,232,220);
+        padding: 1em;
+    }
+    </pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+    &lt;div class="box1"&gt;One&lt;/div&gt;
+    &lt;div class="box2"&gt;Two&lt;/div&gt;
+    &lt;div class="box3"&gt;Three&lt;/div&gt;
+    &lt;div class="box4"&gt;Four&lt;/div&gt;
+    &lt;div class="box5"&gt;Five&lt;/div&gt;
+    &lt;div class="box6"&gt;Six&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_1', '300', '330') }}</p>
+
+<p>グリッドを作成したら、上記の自動配置のふるまいに頼らずに、明示的に項目を配置できます。 以下の2番目の例では、同じグリッドを定義しましたが、今回は3つの子項目を使用しています。 {{cssxref("grid-column")}} プロパティと {{cssxref("grid-row")}} プロパティを使用して各項目の開始ラインと終了ラインを設定しました。 これにより、項目が複数のトラックにまたがるようになります。</p>
+
+<div id="Grid_2">
+<div class="hidden">
+<h6 id="Grid_example_2">Grid example 2</h6>
+
+<pre class="brush: css">    * {box-sizing: border-box;}
+
+    .wrapper &gt; div {
+        border-radius: 5px;
+        background-color: rgb(207,232,220);
+        padding: 1em;
+    }
+    </pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+
+.box1 {
+    grid-column: 2 / 4;
+    grid-row: 1;
+}
+
+.box2 {
+    grid-column: 1;
+    grid-row: 1 / 3;
+}
+
+.box3 {
+    grid-row: 2;
+    grid-column: 3;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+    &lt;div class="box1"&gt;One&lt;/div&gt;
+    &lt;div class="box2"&gt;Two&lt;/div&gt;
+    &lt;div class="box3"&gt;Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_2', '300', '330') }}</p>
+
+<div class="note">
+<p><strong>注</strong>: これら2つの例は、グリッドレイアウトの機能のほんの一部です。 詳細については、<a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッドレイアウト</a>の記事を参照してください。</p>
+</div>
+
+<p>このガイドの残りの部分では、他のレイアウト方法について説明します。 これは、ページの主なレイアウト構造にとってはそれほど重要ではありませんが、それでも特定のタスクを達成するのに役立ちます。 各レイアウトタスクの性質を理解することで、デザインの特定の構成要素を見たときに、それに最も適したレイアウトの種類が明らかになることがすぐにわかります。</p>
+
+<h2 id="Floats" name="Floats">フロート</h2>
+
+<p>要素を浮動すると、その要素とそれに通常フローで続くブロックレベル要素のふるまいが変わります。 要素が左または右に移動されて通常フローから除かれ、囲むコンテンツが浮動項目の周囲に浮かびます。</p>
+
+<p>{{cssxref("float")}} プロパティには次の4つの可能な値があります。</p>
+
+<ul>
+ <li><code>left</code> — 要素を左に浮かべる。</li>
+ <li><code>right</code> — 要素を右に浮かべる。</li>
+ <li><code>none</code> — まったく浮動しないことを指定する。 これがデフォルト値です。</li>
+ <li><code>inherit</code> — <code>float</code> プロパティの値がこの要素の親要素から継承されるべきであることを指定します。</li>
+</ul>
+
+<p>以下の例では、<code>&lt;div&gt;</code> を左に浮かべ、テキストを要素から遠ざけるために右に {{cssxref("margin")}} を与えます。 これはそのボックスの周りに巻かれたテキストの効果を与え、そしてあなたが最新のウェブデザインで使用されるフロート（Floats）について知る必要があるものの大部分です。</p>
+
+<div id="Float_1">
+<div class="hidden">
+<h6 id="Floats_example">Floats example</h6>
+
+<pre class="brush: css">body {
+    width: 90%;
+    max-width: 900px;
+    margin: 0 auto;
+}
+
+p {
+    line-height: 2;
+    word-spacing: 0.1rem;
+}
+
+.box {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    border-radius: 5px;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;h1&gt;Simple float example&lt;/h1&gt;
+
+&lt;div class="box"&gt;Float&lt;/div&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+</pre>
+
+<pre class="brush: css">
+.box {
+    float: left;
+    width: 150px;
+    height: 150px;
+    margin-right: 30px;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Float_1', '100%', 600) }}</p>
+
+<div class="note">
+<p><strong>注</strong>: フロートについては、<a href="/ja/docs/Learn/CSS/CSS_layout/Floats">float と clear</a> のプロパティに関するレッスンで詳しく説明しています。 フレックスボックスやグリッドレイアウトなどのテクニックの前は、列レイアウトの作成方法としてフロートが使用されていました。 あなたはまだウェブ上でこれらの方法に出くわすかもしれません。 これらについては、<a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a>に関するレッスンで説明します。</p>
+</div>
+
+<h2 id="Positioning_techniques" name="Positioning_techniques">位置指定のテクニック</h2>
+
+<p>位置指定（Positioning）を使用すると、通常フローのときに要素を配置されていた場所から別の場所に移動できます。 位置指定はメインページのレイアウトを作成するための方法ではなく、ページ上の特定の項目の位置を管理および微調整することを目的としています。</p>
+
+<p>ただし、{{cssxref("position")}} プロパティに依存する特定のレイアウトパターンには便利なテクニックがあります。 位置指定を理解することは、通常フローを理解し、項目を通常フローから移動させることとは何かを理解するのに役立ちます。</p>
+
+<p>あなたが知っておくべき、次の5種類の位置指定があります。</p>
+
+<ul>
+ <li><strong>静的位置指定</strong>（Static positioning）は、すべての要素が取得するデフォルトです。 これは、「要素をドキュメントレイアウトフロー内の通常の位置に配置する — ここで見るべき特別なことは何もありません」という意味です。</li>
+ <li><strong>相対位置指定</strong>（Relative positioning）を使用すると、ページ上の要素の位置を変更して、通常フロー内の位置に相対的に移動できます — ページ上の他の要素と重なるようにすることも含まれます。</li>
+ <li><strong>絶対位置指定</strong>（Absolute positioning）では、要素は別のレイヤーに配置されているように、ページの通常のレイアウトフローから完全に外れます。 そこから、それをページの <code>&lt;html&gt;</code> 要素（あるいはそれに最も近くに位置する祖先要素）の端に相対的な位置に固定することができます。 これは、さまざまなコンテンツパネルを重ねて表示したり、必要に応じて表示/非表示にしたりするタブ付きボックスや、デフォルトでは画面外にありコントロールボタンを使用して画面上をスライドさせることができる情報パネルを作成するのに便利です。</li>
+ <li><strong>固定位置指定</strong>（Fixed positioning）は絶対位置指定と非常によく似ていますが、他の要素ではなく、ブラウザーのビューポートを基準にして要素を固定する点が異なります。 これは、他のコンテンツがスクロールしても常に画面上の同じ場所にとどまる永続的なナビゲーションメニューなどの効果を作成するのに役立ちます。</li>
+ <li><strong>粘着位置指定</strong>（Sticky positioning）は、要素が定義されたビューポートからのオフセットにぶつかるまで、要素は <code>position: static</code> のようにふるまい、その位置からは <code>position: fixed</code> のようにふるまう、より新しい位置指定方法です。</li>
+</ul>
+
+<h3 id="Simple_positioning_example" name="Simple_positioning_example">簡単な位置指定の例</h3>
+
+<p>これらのページレイアウトのテクニックに慣れるために、いくつかの簡単な例を紹介します。 例はすべて同じ HTML を特徴とするでしょう。 それは以下の通りです。</p>
+
+<pre class="brush: html">&lt;h1&gt;Positioning&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element.&lt;/p&gt;
+&lt;p class="positioned"&gt;I am a basic block level element.&lt;/p&gt;
+&lt;p&gt;I am a basic block level element.&lt;/p&gt;</pre>
+
+<p>この HTML はデフォルトで次の CSS を使ってスタイルされます。</p>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}
+</pre>
+
+<p>レンダリングされた出力は次のとおりです。</p>
+
+<p>{{ EmbedLiveSample('Simple_positioning_example', '100%', 300) }}</p>
+
+<h3 id="Relative_positioning" name="Relative_positioning">相対位置指定</h3>
+
+<p>相対位置指定（Relative positioning）を使用すると、デフォルトで設定されている通常フローの位置から項目をずらすことができます。 これは、アイコンをテキストラベルに合わせるためにアイコンを少し下に移動するなどのタスクを実行できることを意味します。 これを行うには、相対位置指定を追加するために次の規則を追加します。</p>
+
+<pre class="brush: css">.positioned {
+  position: relative;
+  top: 30px;
+  left: 30px;
+}</pre>
+
+<p>ここで私たちは真ん中の段落に <code>relative</code> の {{cssxref("position")}} の値を与えます — これはそれ自身では何もしませんので、{{cssxref("top")}} プロパティと {{cssxref("left")}} プロパティも追加します。 これらは影響を受けた要素を右下に動かすのに役立ちます — これはあなたが期待していたのとは反対のように思えるかもしれませんが、要素の左側と上側を押されていると考える必要があり、その結果として右下に移動します。</p>
+
+<p>このコードを追加すると、次のようになります。</p>
+
+<div id="Relative_1">
+<div class="hidden">
+<h6 id="Relative_positioning_example">Relative positioning example</h6>
+
+<pre class="brush: html">&lt;h1&gt;Relative positioning&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element.&lt;/p&gt;
+&lt;p class="positioned"&gt;This is my relatively positioned element.&lt;/p&gt;
+&lt;p&gt;I am a basic block level element.&lt;/p&gt;</pre>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.positioned {
+  position: relative;
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Relative_1', '100%', 300) }}</p>
+
+<h3 id="Absolute_positioning" name="Absolute_positioning">絶対位置指定</h3>
+
+<p>絶対位置指定（Absolute positioning）は、通常フローから要素を完全に除き、包含ブロックの端からのオフセットを使用して配置するために使用されます。</p>
+
+<p>元の位置指定のない例に戻ると、絶対位置指定を実装するために次の CSS 規則を追加できます。</p>
+
+<pre class="brush: css">.positioned {
+  position: absolute;
+  top: 30px;
+  left: 30px;
+}</pre>
+
+<p>ここでは、真ん中の段落に <code>absolute</code> の {{cssxref("position")}} の値と、前と同じ {{cssxref("top")}} プロパティと {{cssxref("left")}} プロパティを与えます。 ただし、このコードを追加すると、次のようになります。</p>
+
+<div id="Absolute_1">
+<div class="hidden">
+<h6 id="Absolute_positioning_example">Absolute positioning example</h6>
+
+<pre class="brush: html">&lt;h1&gt;Absolute positioning&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element.&lt;/p&gt;
+&lt;p class="positioned"&gt;This is my absolutely positioned element.&lt;/p&gt;
+&lt;p&gt;I am a basic block level element.&lt;/p&gt;</pre>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.positioned {
+    position: absolute;
+    background: rgba(255,84,104,.3);
+    border: 2px solid rgb(255,84,104);
+    top: 30px;
+    left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Absolute_1', '100%', 300) }}</p>
+
+<p>これはとても違います！ 位置指定要素は、ページレイアウトの残りの部分から完全に分離され、その上に配置されています。 他の2つの段落は、配置された兄弟が存在しないかのように一緒にいます。 {{cssxref("top")}} プロパティと {{cssxref("left")}} プロパティは、絶対位置指定要素に対しては、相対位置指定要素とは異なる効果があります。 この場合、オフセットはページの上側と左側から計算されています。 このコンテナになる親要素を変更することは可能で、<a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a>のレッスンでそれを見ます。</p>
+
+<h3 id="Fixed_positioning" name="Fixed_positioning">固定位置指定</h3>
+
+<p>固定位置指定（Fixed positioning）は、絶対位置指定と同じ方法で、ドキュメントフローから要素を除きます。 ただし、コンテナからのオフセットが適用されるのではなく、ビューポートからのオフセットが適用されます。 項目がビューポートに対して固定されたままであるので、ページがその下でスクロールするときに固定されたままであるメニューのような効果を作成することができます。</p>
+
+<p>この例では、HTML を3段落のテキストにして、ページをスクロールさせます。 また、<code>position: fixed</code> を指定したボックスもあります。</p>
+
+<pre class="brush: html">&lt;h1&gt;Fixed positioning&lt;/h1&gt;
+
+&lt;div class="positioned"&gt;Fixed&lt;/div&gt;
+
+&lt;p&gt;Paragraph 1.&lt;/p&gt;
+&lt;p&gt;Paragraph 2.&lt;/p&gt;
+&lt;p&gt;Paragraph 3.&lt;/p&gt;
+</pre>
+
+<div id="Fixed_1">
+<div class="hidden">
+<h6 id="Fixed_positioning_example">Fixed positioning example</h6>
+
+<pre class="brush: html">&lt;h1&gt;Fixed positioning&lt;/h1&gt;
+
+&lt;div class="positioned"&gt;Fixed&lt;/div&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+</pre>
+
+<pre class="brush: css">body {
+    width: 500px;
+    margin: 0 auto;
+}
+
+.positioned {
+    background: rgba(255,84,104,.3);
+    border: 2px solid rgb(255,84,104);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}</pre>
+</div>
+
+<pre class="brush: css">.positioned {
+    position: fixed;
+    top: 30px;
+    left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Fixed_1', '100%', 200) }}</p>
+
+<h3 id="Sticky_positioning" name="Sticky_positioning">粘着位置指定</h3>
+
+<p>粘着位置指定（Sticky positioning）は、私たちが自由に使える最後の位置指定方法です。 デフォルトの静的位置指定に固定位置指定を組み合わせたものです。 項目に <code>position: sticky</code> があるとき、それは定義したビューポートからのオフセットにぶつかるまで通常フローでスクロールします。 その時点で、<code>position：fixed</code> が適用されているかのように「動かなくなります」。</p>
+
+<div id="Sticky_1">
+<div class="hidden">
+<h6 id="Sticky_positioning_example">Sticky positioning example</h6>
+
+<pre class="brush: html">&lt;h1&gt;Sticky positioning&lt;/h1&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;div class="positioned"&gt;Sticky&lt;/div&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;       </pre>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+.positioned {
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  padding: 10px;
+  margin: 10px;
+  border-radius: 5px;
+}</pre>
+</div>
+
+<pre class="brush: css">.positioned {
+  position: sticky;
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Sticky_1', '100%', 200) }}</p>
+
+<div class="note">
+<p><strong>注</strong>: 位置指定の詳細については、<a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a>の記事をご覧ください。</p>
+</div>
+
+<h2 id="Table_layout" name="Table_layout">表レイアウト</h2>
+
+<p>HTML 表は表形式のデータを表示するのに適していますが、何年も前に — 基本的な CSS でさえブラウザー間で確実にサポートされる前に — ウェブ開発者はウェブページ全体のレイアウトにも表を使用していました — ヘッダー、フッター、異なる列などを、いろいろな表の行と列に配置します。 これは当時はうまくいきましたが、多くの問題を抱えています — 表レイアウトは柔軟性がなく、マークアップが非常に重く、デバッグが難しく、意味論的に間違っています（例えば、スクリーンリーダーのユーザーは表レイアウトをナビゲートするのに問題があります）。</p>
+
+<p>表のマークアップを使用したときに表がウェブページ上で表示される方法は、表レイアウトを定義する CSS プロパティのセットによるものです。 これらのプロパティは、表ではない要素をレイアウトするために使用することができ、その使用法は「CSS 表の使用」として説明されることがあります。</p>
+
+<p>以下の例はそのような使い方の1つを示しています。 フレックスボックスやグリッドをサポートしていない非常に古いブラウザーを使用しているような状況では、レイアウトに CSS 表を使用することをこの時点では過去の方法と見なすべきです。</p>
+
+<p>例を見てみましょう。 まず、HTML フォームを作成する簡単なマークアップです。 各入力要素にはラベルがあり、段落内にキャプションも含まれています。 各ラベル/入力ペアは、レイアウトのために {{htmlelement("div")}} で囲まれています。</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;p&gt;First of all, tell us your name and age.&lt;/p&gt;
+  &lt;div&gt;
+    &lt;label for="fname"&gt;First name:&lt;/label&gt;
+    &lt;input type="text" id="fname"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="lname"&gt;Last name:&lt;/label&gt;
+    &lt;input type="text" id="lname"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="age"&gt;Age:&lt;/label&gt;
+    &lt;input type="text" id="age"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>今、私たちの例のための CSS。 {{cssxref("display")}} プロパティの使用方法を除いて、ほとんどの CSS はかなり普通のものです。 {{htmlelement("form")}}、{{htmlelement("div")}}、{{htmlelement("label")}} と {{htmlelement("input")}} は、それぞれ表、表の行、表のセルのように表示されるように指示しています — 基本的に、それらは HTML 表のマークアップのようにふるまい、デフォルトでラベルと入力がうまく並ぶようにします。 あとは、サイズやマージンなどを少し追加するだけで、すべてが少し見栄えよくなります。</p>
+
+<p>あなたは、キャプションの段落に  <code>display：table-caption;</code> が与えられていることに気付くでしょう — これは表の {{htmlelement("caption")}} のようにふるまいます — そして <code>caption-side: bottom;</code> により、マークアップがソースの <code>&lt;input&gt;</code> 要素の前にある場合でも、スタイル設定の目的でキャプションが表の下部に表示されるようにします。 これにより、かなりの柔軟性が得られます。</p>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+form {
+  display: table;
+  margin: 0 auto;
+}
+
+form div {
+  display: table-row;
+}
+
+form label, form input {
+  display: table-cell;
+  margin-bottom: 10px;
+}
+
+form label {
+  width: 200px;
+  padding-right: 5%;
+  text-align: right;
+}
+
+form input {
+  width: 300px;
+}
+
+form p {
+  display: table-caption;
+  caption-side: bottom;
+  width: 300px;
+  color: #999;
+  font-style: italic;
+}</pre>
+
+<p>これにより、次のような結果が得られます。</p>
+
+<p>{{ EmbedLiveSample('Table_layout', '100%', '170') }}</p>
+
+<p>この例は <a href="https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html">css-tables-example.html</a> でもライブで見ることができます（<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html">ソースコード</a>も見る）。</p>
+
+<h2 id="Multi-column_layout" name="Multi-column_layout">段組みレイアウト</h2>
+
+<p>段組みレイアウトモジュール（Multi-column layout module）は、新聞のテキストの流れと同じように、コンテンツを列にレイアウトする方法を提供します。 ユーザーに強制的に上下にスクロールさせたくない場合は、列を上下に読むことはウェブのコンテキストではあまり役に立ちませんが、コンテンツを列に配置することは便利なテクニックです。</p>
+
+<p>ブロックを段組みコンテナに変えるには、次のどちらかを使います。 {{cssxref("column-count")}} プロパティは、ブラウザーにいくつの列を持たせたいかを指示します。 {{cssxref("column-width")}} プロパティは、ブラウザーにその幅以上の列をコンテナに入れるように指示します。</p>
+
+<p>以下の例では、<code>container</code> クラスを持つ <code>&lt;div&gt;</code> 要素を含む HTML ブロックから始めます。</p>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+    &lt;h1&gt;Multi-column layout&lt;/h1&gt;
+
+    &lt;p&gt;Paragraph 1.&lt;/p&gt;
+    &lt;p&gt;Paragraph 2.&lt;/p&gt;
+
+&lt;/div&gt;
+</pre>
+
+<p>このコンテナでは 200 ピクセルの <code>column-width</code> を使用しているため、ブラウザーはコンテナに収まるだけの数の 200 ピクセルの列を作成し、作成された列間で残りのスペースを共有します。</p>
+
+<div id="Multicol_1">
+<div class="hidden">
+<h6 id="Multicol_example">Multicol example</h6>
+
+<pre class="brush: html">    &lt;div class="container"&gt;
+        &lt;h1&gt;Multi-column Layout&lt;/h1&gt;
+
+        &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+
+        &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+
+    &lt;/div&gt;
+        </pre>
+
+<pre class="brush: css">body { max-width: 800px; margin: 0 auto; } </pre>
+</div>
+
+<pre class="brush: css">    .container {
+        column-width: 200px;
+    }</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Multicol_1', '100%', 200) }}</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>この記事では、知っておくべきすべてのレイアウト技術について簡単に説明しました。 個々の技術の詳細については、続けて読んでください！</p>
+
+<p>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li>
+</ul>
diff --git a/files/ja/learn/css/css_layout/legacy_layout_methods/index.html b/files/ja/learn/css/css_layout/legacy_layout_methods/index.html
new file mode 100644
index 0000000000..8c1c318e6f
--- /dev/null
+++ b/files/ja/learn/css/css_layout/legacy_layout_methods/index.html
@@ -0,0 +1,588 @@
+---
+title: 過去のレイアウト方法
+slug: Learn/CSS/CSS_layout/Legacy_Layout_Methods
+tags:
+  - Beginner
+  - CSS
+  - Floats
+  - Guide
+  - Layout
+  - Learn
+  - grid system
+  - legacy
+translation_of: Learn/CSS/CSS_layout/Legacy_Layout_Methods
+---
+<div>{{LearnSidebar}}</div>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}</p>
+
+<p class="summary"><span class="seoSummary">グリッドシステムは CSS レイアウトで使用される非常に一般的な機能で、CSS グリッドレイアウト以前はフロートや他のレイアウト機能を使用して実装される傾向がありました。 あなたはレイアウトをいくつかの列（例えば 4、6、または 12）として想像し、そしてコンテンツの列をこれらの想像上の列の内側に合わせます。 この記事では、古いプロジェクトで作業した場合に、それらがどう使われたかを理解するために、これらの古い方法がどのように機能するのかを説明します。</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提知識:</th>
+   <td>HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、および CSS の機能の考え方（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>と<a href="/ja/docs/Learn/CSS/Styling_boxes">ボックスの装飾</a>を学ぶ）。</td>
+  </tr>
+  <tr>
+   <th scope="row">学習目標:</th>
+   <td>CSS グリッドレイアウトがブラウザーで利用可能になる前に使用されていたグリッドレイアウトシステムの背後にある基本概念を理解すること。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Layout_and_grid_systems_before_CSS_Grid_Layout" name="Layout_and_grid_systems_before_CSS_Grid_Layout">CSS グリッドレイアウト以前のレイアウトとグリッドシステム</h2>
+
+<p>CSS がごく最近まで内蔵されたグリッドシステムを持っていなかったことを、デザインをやってきた誰かは驚くかもしれません。 そして代わりにグリッドのようなデザインを作成するためにさまざまな次善の方法を用いていたようです。 今これらを「過去の」方法と呼んでいます。</p>
+
+<p>新しいプロジェクトでは、ほとんどの場合、CSS グリッドレイアウトを他の1つ以上の最新のレイアウト方法と組み合わせて使用​​して、任意のレイアウトの基礎とします。 しかし、時々、これらの過去の方法を使用している「グリッドシステム」に遭遇するでしょう。 それらがどのように機能するのか、そしてなぜそれらが CSS グリッドレイアウトと異なるのかを理解するのは価値があります。</p>
+
+<p>このレッスンでは、フロートとフレックスボックスに基づいたグリッドシステムとグリッドフレームワークの仕組みについて説明します。 グリッドレイアウトを勉強してきたので、おそらくこれがどれほど複雑であるかに驚くことでしょう！ この種のシステムを使用する既存のプロジェクトで作業できるようにすることに加えて、新しい方法をサポートしないブラウザー用の代替コードを作成する必要がある場合に、この知識は役に立ちます。</p>
+
+<p>これらのシステムを検討する際には、それらのどれも実際には CSS グリッドレイアウトがグリッドを作成する方法でグリッドを作成しないことに、留意する価値があります。 それらは項目にサイズを与え、グリッドのように<em>見える</em>ように一列に並べることによって機能します。</p>
+
+<h2 id="A_two_column_layout" name="A_two_column_layout">2列レイアウト</h2>
+
+<p>最も簡単な例として、2列のレイアウトから始めましょう。 コンピュータ上に新しい <code>index.html</code> ファイルを作成し、それを<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">単純な HTML テンプレート</a>で埋め、適切な場所に以下のコードを挿入することで、従うことができます。 このセクションの一番下には、最終的なコードがどのようになっているべきかの実例があります。</p>
+
+<p>まず最初に、列に入れるためにいくつかのコンテンツが必要です。 次のもので <code>body</code> の中に現在あるものはすべて置き換えます。</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;2 column layout example&lt;/h1&gt;
+&lt;div&gt;
+  &lt;h2&gt;First column&lt;/h2&gt;
+  &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;h2&gt;Second column&lt;/h2&gt;
+  &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<p>それぞれの列はそのコンテンツを含むために外側の要素が必要です。 この例では {{htmlelement("div")}} を選択しましたが、{{htmlelement("article")}}、{{htmlelement("section")}}、{{htmlelement("aside")}} など、より意味論的に適切なものを選択することもできます。</p>
+
+<p>今 CSS に対して、まず最初に、HTML に従うため、いくつかの基本的な設定を提供するために次を適用します。</p>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+}</pre>
+
+<p><code>body</code> の幅が 900px になるまで、<code>body</code> はビューポートの幅の 90% になります。 この場合、<code>body</code> はこの幅に固定され、ビューポートの中央に配置されます。 デフォルトでは、その子（{{htmlelement("h1")}} と2つの {{htmlelement("div")}}）は <code>body</code> の幅の 100% にわたります。 2つの {{htmlelement("div")}} を互いに並べてフロートしたい場合は、それらの幅の合計をその親要素の幅の 100% 以下に設定して、互いに並んで収まるようにする必要があります。 CSS の最後に次を追加してください。</p>
+
+<pre class="brush: css notranslate">div:nth-of-type(1) {
+  width: 48%;
+}
+
+div:nth-of-type(2) {
+  width: 48%;
+}</pre>
+
+<p>ここでは、両方とも親の幅の 48% に設定しました — これは合計 96% で、2列の間のガターのために 4% の空きを残し、コンテンツに余裕を持たせることができます。 さらに次のようにして、列をフロートにする必要があります。</p>
+
+<pre class="brush: css notranslate">div:nth-of-type(1) {
+  width: 48%;
+  float: left;
+}
+
+div:nth-of-type(2) {
+  width: 48%;
+  float: right;
+}</pre>
+
+<p>これらすべてをまとめると、次のような結果が得られます。</p>
+
+<div id="Floated_Two_Col">
+<div class="hidden">
+<h6 id="Simple_two-column_layout" name="Simple_two-column_layout">Simple two-column layout</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;2 column layout example&lt;/h1&gt;
+
+&lt;div&gt;
+  &lt;h2&gt;First column&lt;/h2&gt;
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;h2&gt;Second column&lt;/h2&gt;
+  &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+div:nth-of-type(1) {
+  width: 48%;
+  float: left;
+}
+
+div:nth-of-type(2) {
+  width: 48%;
+  float: right;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Floated_Two_Col', '100%', 520) }}</p>
+
+<p>ここでは、すべての幅にパーセントを使用していることに気付くでしょう。 これは、さまざまな画面サイズに合わせて調整し、小さい画面サイズで列幅に同じ比率を維持する、<strong>リキッドレイアウト</strong>（liquid layout）を作成するため、非常に良い戦略です。 ブラウザーウィンドウの幅を調整して確認してください。 これはレスポンシブウェブデザインのための貴重なツールです。</p>
+
+<div class="note">
+<p><strong>注</strong>: この例は <a href="http://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html">0_two-column-layout.html</a> で実行できます（<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/0_two-column-layout.html">ソースコード</a>も見る）。</p>
+</div>
+
+<h2 id="Creating_simple_legacy_grid_frameworks" name="Creating_simple_legacy_grid_frameworks">単純な過去のグリッドフレームワークを作成する</h2>
+
+<p>過去のフレームワークの大部分は、グリッドのように見えるものを作成するために、{{cssxref("float")}} プロパティのふるまいを使用して、ある列を別の列の隣にフロートします。 フロートによるグリッドを作成するプロセスを通して、これがどのように機能するかを説明し、<a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロートとクリア</a>のレッスンで学んだことを基にしてさらに高度な概念を紹介します。</p>
+
+<p>作成する最も簡単な種類のグリッドフレームワークは固定幅のものです — デザインに必要な合計幅、列数、およびガター幅と列幅を求める必要があります。 ブラウザーの幅に合わせて増減する列を含むグリッドにデザインをレイアウトすることにした場合は、列とそれらの間のガターに対してパーセント幅を計算する必要があります。</p>
+
+<p>次のセクションでは、両方を作成する方法を見ていきます。 12列のグリッドを作成します — 12 が 6、4、3、および 2 で割り切れることを考えると、さまざまな状況に非常に適応できると見られる非常に一般的な選択です。</p>
+
+<h3 id="A_simple_fixed_width_grid" name="A_simple_fixed_width_grid">単純な固定幅グリッド</h3>
+
+<p>最初に固定幅の列を使用するグリッドシステムを作成しましょう。</p>
+
+<p>サンプルの <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid.html">simple-grid.html</a> ファイルのローカルコピーを作成することから始めます。 このファイルには、<code>body</code> に次のマークアップが含まれています。</p>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="row"&gt;
+    &lt;div class="col"&gt;1&lt;/div&gt;
+    &lt;div class="col"&gt;2&lt;/div&gt;
+    &lt;div class="col"&gt;3&lt;/div&gt;
+    &lt;div class="col"&gt;4&lt;/div&gt;
+    &lt;div class="col"&gt;5&lt;/div&gt;
+    &lt;div class="col"&gt;6&lt;/div&gt;
+    &lt;div class="col"&gt;7&lt;/div&gt;
+    &lt;div class="col"&gt;8&lt;/div&gt;
+    &lt;div class="col"&gt;9&lt;/div&gt;
+    &lt;div class="col"&gt;10&lt;/div&gt;
+    &lt;div class="col"&gt;11&lt;/div&gt;
+    &lt;div class="col"&gt;12&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="row"&gt;
+    &lt;div class="col span1"&gt;13&lt;/div&gt;
+    &lt;div class="col span6"&gt;14&lt;/div&gt;
+    &lt;div class="col span3"&gt;15&lt;/div&gt;
+    &lt;div class="col span2"&gt;16&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>目的は、これを 12 列 2 行のグリッドのデモ用グリッドに変換することです — 一番上の行は個々の列のサイズを示し、2番目の行はグリッド上のいくつかの異なるサイズの領域です。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13901/simple-grid-finished.png" style="display: block; height: 50px; margin: 0px auto; width: 952px;"></p>
+
+<p>{{htmlelement("style")}} 要素に、次のコードを追加します。 これにより、<code>wrapper</code> コンテナの幅は 980 ピクセルになり、右側のパディングは 20 ピクセルになります。 これにより、列幅とガター幅の合計が 960 ピクセルになります — この場合、サイト上のすべての要素で {{cssxref("box-sizing")}} を <code>border-box</code> に設定しているため、パディングはコンテンツの幅の合計から差し引かれます（詳細については、<a href="/ja/docs/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">ボックスモデルの完全な変更</a>を参照）。</p>
+
+<pre class="brush: css notranslate">* {
+  box-sizing: border-box;
+}
+
+body {
+  width: 980px;
+  margin: 0 auto;
+}
+
+.wrapper {
+  padding-right: 20px;
+}</pre>
+
+<p>次に、グリッドの各行を囲む <code>row</code> コンテナを使用して、ある行を別の行からクリアします。 前の規則の下に次の規則を追加します。</p>
+
+<pre class="brush: css notranslate">.row {
+  clear: both;
+}</pre>
+
+<p>このクリアを適用すると、各行を12列の要素で完全に埋める必要がなくなります。 行は分離されたままになり、互いに干渉しません。</p>
+
+<p>列の間のガターは 20 ピクセル幅です。 最初の列を含め、各列の左側にマージンとしてこれらのガターを作成して、コンテナの右側にある 20 ピクセルのパディングとのバランスを取ります。 だから全部で12のガターを持っています — 12 x 20 = 240。</p>
+
+<p>これを 960 ピクセルの合計幅から差し引いて、列に 720 ピクセルを与える必要があります。 これを 12 で割ると、各列の幅は 60 ピクセルになるはずです。</p>
+
+<p>次のステップは、<code>.col</code> クラスの規則を作成し、それを左にフロートして、ガターを形成する 20 ピクセルの {{cssxref("margin-left")}} と、60 ピクセルの {{cssxref("width")}} を与えることです。 CSS の最後に次の規則を追加してください。</p>
+
+<pre class="brush: css notranslate">.col {
+  float: left;
+  margin-left: 20px;
+  width: 60px;
+  background: rgb(255, 150, 150);
+}</pre>
+
+<p>これで、一番上の単一列の行がグリッドとしてきちんとレイアウトされます。</p>
+
+<div class="note">
+<p><strong>注</strong>: また、各列に薄い赤色を指定したので、各列がどれだけのスペースを占めているかを正確に確認できます。</p>
+</div>
+
+<p>複数列にまたがるコンテナのレイアウトには、必要な列数（足す、その間のガター）に合わせて {{cssxref("width")}} の値を調整するための特別なクラスを指定する必要があります。 コンテナが2〜12列にまたがるようにするために、追加のクラスを作成する必要があります。 それぞれの幅は、その列数の列幅にガター幅を加えた結果です。 ガター幅は常に列数より1つ少なくなります。</p>
+
+<p>CSS の最後に次を追加してください。</p>
+
+<pre class="brush: css notranslate">/* Two column widths (120px) plus one gutter width (20px) */
+.col.span2 { width: 140px; }
+/* Three column widths (180px) plus two gutter widths (40px) */
+.col.span3 { width: 220px; }
+/* And so on... */
+.col.span4 { width: 300px; }
+.col.span5 { width: 380px; }
+.col.span6 { width: 460px; }
+.col.span7 { width: 540px; }
+.col.span8 { width: 620px; }
+.col.span9 { width: 700px; }
+.col.span10 { width: 780px; }
+.col.span11 { width: 860px; }
+.col.span12 { width: 940px; }</pre>
+
+<p>これらのクラスを作成したら、グリッド上にさまざまな幅の列を配置できます。 効果を確認するには、ページを保存してブラウザーでロードします。</p>
+
+<div class="note">
+<p><strong>注</strong>: 上記の例がうまくいかない場合は、GitHub の<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">完成版</a>と比較してみてください（<a href="http://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html">ライブでも見られます</a>）。</p>
+</div>
+
+<p>要素のクラスを変更したり、コンテナを追加したり削除したりして、レイアウトの変更方法を確認してください。 例えば、2行目を次のようにすることができます。</p>
+
+<pre class="brush: css notranslate">&lt;div class="row"&gt;
+  &lt;div class="col span8"&gt;13&lt;/div&gt;
+  &lt;div class="col span4"&gt;14&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>これで、グリッドシステムが機能したので、単純に行と各行の列数を定義してから、各コンテナに必要なコンテンツを埋めるだけです。 すばらしいです！</p>
+
+<h3 id="Creating_a_fluid_grid" name="Creating_a_fluid_grid">フルードグリッドを作成する</h3>
+
+<p>私たちのグリッドはうまく機能しますが、幅は固定されています。 ブラウザーの{{Glossary("viewport","ビューポート")}}で利用可能なスペースに応じて拡大縮小する柔軟な（フルード（fluid、流動的な））グリッドが本当に必要です。 これを実現するために、参照するピクセル幅をパーセントに変えることができます。</p>
+
+<p>固定幅を柔軟なパーセントベースのものに変換する式は次のとおりです。</p>
+
+<pre class="notranslate">target / context = result</pre>
+
+<p>列幅については、目標の幅（<strong>target width</strong>）は 60 ピクセル、コンテキスト（<strong>context</strong>）は 960 ピクセルの <code>wrapper</code> です。 パーセントを計算するために次のようにします。</p>
+
+<pre class="notranslate">60 / 960 = 0.0625</pre>
+
+<p>次に小数点を2桁移動して、6.25% のパーセントを得ます。 したがって、私たちの CSS では、60 ピクセルの列幅を 6.25% に置き換えることができます。</p>
+
+<p>ガター幅についても次のように同じことをする必要があります。</p>
+
+<pre class="notranslate">20 / 960 = 0.02083333333</pre>
+
+<p>そのため、<code>.col</code> 規則の 20 ピクセルの {{cssxref("margin-left")}} と、<code>.wrapper</code> 規則の 20 ピクセルの {{cssxref("padding-right")}} を 2.08333333% に置き換える必要があります。</p>
+
+<h4 id="Updating_our_grid" name="Updating_our_grid">グリッドを更新する</h4>
+
+<p>このセクションで始めるには、前のサンプルページの新しいコピーを作成するか、または出発点として使用するために <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">simple-grid-finished.html</a> コードのローカルコピーを作成してください。</p>
+
+<p>次のように（<code>.wrapper</code> セレクターの）2番目の CSS 規則を更新します。</p>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 980px;
+  margin: 0 auto;
+}
+
+.wrapper {
+  padding-right: 2.08333333%;
+}</pre>
+
+<p>パーセントの {{cssxref("width")}} を指定しただけでなく、レイアウトが広くなり過ぎるのを防ぐために {{cssxref("max-width")}} プロパティも追加しました。</p>
+
+<p>次に、（<code>.col</code> セレクターの）4番目の CSS 規則を次のように更新します。</p>
+
+<pre class="brush: css notranslate">.col {
+  float: left;
+  margin-left: 2.08333333%;
+  width: 6.25%;
+  background: rgb(255, 150, 150);
+}</pre>
+
+<p>もう少し面倒な部分があります。 ピクセル幅ではなくパーセントを使用するようにすべての <code>.col.span</code> 規則を更新する必要があります。 これは電卓で少し時間がかかります。 あなたの努力を節約するために、それを下に用意しました。</p>
+
+<p>次のように CSS 規則の一番下のブロックを更新します。</p>
+
+<pre class="brush: css notranslate">/* Two column widths (12.5%) plus one gutter width (2.08333333%) */
+.col.span2 { width: 14.58333333%; }
+/* Three column widths (18.75%) plus two gutter widths (4.1666666) */
+.col.span3 { width: 22.91666666%; }
+/* And so on... */
+.col.span4 { width: 31.24999999%; }
+.col.span5 { width: 39.58333332%; }
+.col.span6 { width: 47.91666665%; }
+.col.span7 { width: 56.24999998%; }
+.col.span8 { width: 64.58333331%; }
+.col.span9 { width: 72.91666664%; }
+.col.span10 { width: 81.24999997%; }
+.col.span11 { width: 89.5833333%; }
+.col.span12 { width: 97.91666663%; }</pre>
+
+<p>コードを保存してブラウザーにロードし、ビューポートの幅を変更してみます — 列の幅は適切に調整されるはずです。</p>
+
+<div class="note">
+<p><strong>注</strong>: 上記の例がうまくいかない場合は、<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">GitHub の完成版</a>と比較してみてください（<a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html">ライブでも見られます</a>）。</p>
+</div>
+
+<h3 id="Easier_calculations_using_the_calc_function" name="Easier_calculations_using_the_calc()_function">calc() 関数を使ったより簡単な計算</h3>
+
+<p>CSS のすぐ内側で {{cssxref("calc","calc()")}} 関数を使って数学を行うことができます — これは CSS の値に簡単な数学の方程式を挿入して、値が何であるべきかを計算することを可能にします。 複雑な計算が必要な場合に特に便利です。 例えば、「この要素の高さは、常に親の高さの 100% から 50px を引いた値です」など、さまざまな単位を使用した計算も計算できます。 <a href="/ja/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API#Keeping_the_interface_constrained_to_the_viewport_regardless_of_device_height_with_calc()">MediaRecorder API のチュートリアルからこの例</a>を参照してください。</p>
+
+<p>とにかく、私たちのグリッドに戻りましょう！ グリッドの複数の列にまたがる列は、合計幅が 6.25% x またがる列の数 + 2.08333333% x ガターの数（常に列の数 - 1）になります。 <code>calc()</code> 関数を使用すると、<code>width</code> の値の内側でこの計算を実行できます。 そのため、例えば、4列にまたがる項目であれば、次のようにします。</p>
+
+<pre class="brush: css notranslate">.col.span4 {
+  width: calc((6.25%*4) + (2.08333333%*3));
+}</pre>
+
+<p>規則の一番下のブロックを次のように置き換えてから、ブラウザーにリロードして、同じ結果になるかどうかを確認します。</p>
+
+<pre class="brush: css notranslate">.col.span2 { width: calc((6.25%*2) + 2.08333333%); }
+.col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); }
+.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); }
+.col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); }
+.col.span6 { width: calc((6.25%*6) + (2.08333333%*5)); }
+.col.span7 { width: calc((6.25%*7) + (2.08333333%*6)); }
+.col.span8 { width: calc((6.25%*8) + (2.08333333%*7)); }
+.col.span9 { width: calc((6.25%*9) + (2.08333333%*8)); }
+.col.span10 { width: calc((6.25%*10) + (2.08333333%*9)); }
+.col.span11 { width: calc((6.25%*11) + (2.08333333%*10)); }
+.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }</pre>
+
+<div class="note">
+<p><strong>注</strong>: <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html">fluid-grid-calc.html</a> で完成版を見ることができます（<a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html">ライブでも見られます</a>）。</p>
+</div>
+
+<div class="note">
+<p><strong>注</strong>: これがうまくいかない場合は、ブラウザーが <code>calc()</code> 関数をサポートしていないことが考えられます。 ブラウザー間ではかなりよくサポートされています — IE9 までさかのぼります。</p>
+</div>
+
+<h3 id="Semantic_versus_“unsemantic”_grid_systems" name="Semantic_versus_“unsemantic”_grid_systems">意味論的グリッドシステム対「意味論的でない」グリッドシステム</h3>
+
+<p>マークアップにクラスを追加してレイアウトを定義するということは、コンテンツとマークアップが視覚的表現に結び付くことを意味します。 この CSS クラスの使い方は、コンテンツを説明するクラスの意味論的な使い方ではなく、「意味論的でない」（コンテンツがどのように見えるかを説明する）ものとして説明されることがあります。 これは、<code>span2</code>、<code>span3</code> などのクラスの場合です。</p>
+
+<p>これらが唯一のアプローチではありません。 代わりにグリッドを決定してから、サイズ情報を既存の意味論的クラスの規則に追加することができます。 例えば、8列にまたがる <code>content</code> のクラスが {{htmlelement("div")}} にある場合は、<code>span8</code> のクラスから <code>width</code> をコピーして、次のような規則を指定できます。</p>
+
+<pre class="brush: css notranslate">.content {
+  width: calc((6.25%*8) + (2.08333333%*7));
+}</pre>
+
+<div class="note">
+<p><strong>注</strong>: <a href="http://sass-lang.com/">Sass</a> などのプリプロセッサを使用する場合は、単純な mixin を作成してその値を挿入することができます。</p>
+</div>
+
+<h3 id="Enabling_offset_containers_in_our_grid" name="Enabling_offset_containers_in_our_grid">グリッドでオフセットしたコンテナを使えるようにする</h3>
+
+<p>作成したグリッドは、すべてのコンテナをグリッドの左側から始めてぴったり重ねる限り、うまく機能します。 最初のコンテナの前（または、コンテナ間）に空の列スペースを残したい場合は、視覚的にグリッドを横切って押すための左マージンを追加するためのオフセットクラスを作成する必要があります。 もっと数学！</p>
+
+<p>これを試してみましょう。</p>
+
+<p>以前のコードから始めるか、出発点として <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">fluid-grid.html</a> ファイルを使用してください。</p>
+
+<p>CSS でコンテナ要素を1列幅だけオフセットするクラスを作成しましょう。 CSS の最後に次を追加してください。</p>
+
+<pre class="brush: css notranslate">.offset-by-one {
+  margin-left: calc(6.25% + (2.08333333%*2));
+}</pre>
+
+<p>パーセントを自分で計算したい場合は、こちらを使用してください。</p>
+
+<pre class="brush: css notranslate">.offset-by-one {
+  margin-left: 10.41666666%;
+}</pre>
+
+<p>これで、このクラスを左側に1列幅の空きスペースに残したいコンテナに追加できます。 例えば、HTML に次のものがあるとします。</p>
+
+<pre class="brush: html notranslate">&lt;div class="col span6"&gt;14&lt;/div&gt;</pre>
+
+<p>これを次に置き換えてみてください。</p>
+
+<pre class="brush: html notranslate">&lt;div class="col span5 offset-by-one"&gt;14&lt;/div&gt;</pre>
+
+<div class="note">
+<p><strong>注</strong>: オフセット用のスペースを確保するために、またがる列の数を減らす必要があることに注意してください！</p>
+</div>
+
+<p>違いを確認するには、ロードとリフレッシュを試してみるか、<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-offset.html">fluid-grid-offset.html</a> の例を確認してください（<a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-offset.html">ライブでも見られます</a>）。 完成した例は次のようになります。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13903/offset-grid-finished.png" style="display: block; height: 47px; margin: 0px auto; width: 944px;"></p>
+
+<div class="note">
+<p><strong>注</strong>: 特別な演習として、<code>offset-by-two</code> クラスを実装できますか？</p>
+</div>
+
+<h3 id="Floated_grid_limitations" name="Floated_grid_limitations">フロートのグリッドの制限</h3>
+
+<p>このようなシステムを使用するときは、合計幅が正しく加算され、行に含むことができるよりも多くの列にまたがる要素を行に含めないように注意する必要があります。 フロートの機能のために、グリッドの列の数がグリッドに対して広くなりすぎると、最後の要素が次のラインにドロップダウンされ、グリッドが壊れます。</p>
+
+<p>また、要素のコンテンツがそれらが占める行よりも広くなると、オーバーフローしてだらしなく見えることも覚えておいてください。</p>
+
+<p>このシステムの最大の制限は、それが本質的に一次元であるということです。 私たちは列を扱っていて、要素は列にまたがっていますが、行には及んでいません。 これらの古いレイアウト方法では、高さを明示的に設定せずに要素の高さを制御することは非常に困難で、これも非常に柔軟性のない方法です — コンテンツが一定の高さになることを保証できる場合にのみ機能します。</p>
+
+<h2 id="Flexbox_grids" name="Flexbox_grids">フレックスボックスのグリッド？</h2>
+
+<p>以前の<a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a>に関する記事を読んだことがあれば、フレックスボックスがグリッドシステムを作成するための理想的な解決策であると考えるかもしれません。 利用可能な多くのフレックスボックスベースのグリッドシステムがあり、フレックスボックスは上記のグリッドを作成するときに私たちがすでに発見した問題の多くを解決することができます。</p>
+
+<p>ただし、フレックスボックスはグリッドシステムとして設計されたことはなく、その1つとして使用すると新しい一連の問題が発生します。 この簡単な例として、上記で使用したのと同じマークアップ例を使用し、次の CSS を使用して <code>wrapper</code>、<code>row</code>、<code>col</code> クラスをスタイルすることができます。</p>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 980px;
+  margin: 0 auto;
+}
+
+.wrapper {
+  padding-right: 2.08333333%;
+}
+
+
+.row {
+  display: flex;
+}
+
+.col {
+  margin-left: 2.08333333%;
+  margin-bottom: 1em;
+  width: 6.25%;
+  flex: 1 1 auto;
+  background: rgb(255,150,150);
+}</pre>
+
+<p>あなた自身の例でこれらの置き換えをすることを試みるか、または <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/flexbox-grid.html">flexbox-grid.html</a> の例のコードを見ることができます（<a href="http://mdn.github.io/learning-area/css/css-layout/grids/flexbox-grid.html">ライブでも見られます</a>）。</p>
+
+<p>ここで各行をフレックスコンテナに変えています。 フレックスボックスベースのグリッドでは、合計が 100% 未満の要素を持つことができるようにするために、まだ行が必要です。 そのコンテナを <code>display: flex</code> に設定します。</p>
+
+<p><code>.col</code> では、{{cssxref("flex")}} プロパティの最初の値（{{cssxref("flex-grow")}}）を 1 に設定して項目を大きくできるようにし、2番目の値（{{cssxref("flex-shrink")}}）を 1 にして項目を縮小できるようにし、3番目の値（{{cssxref("flex-basis")}}）を <code>auto</code> に設定します。 この要素には {{cssxref("width")}} が設定されているので、<code>auto</code> はその幅を <code>flex-basis</code> の値として使用します。</p>
+
+<p>一番上のラインでは、グリッド上に12個のきちんとしたボックスが表示され、ビューポートの幅を変更すると、それらは均等に拡大および縮小されます。 しかし、次のラインでは、4つの項目しかなく、これらも基本の 60px から増減しています。 それらのうちの4つだけで、それらは上の行の項目よりもはるかに大きく成長することができ、その結果、それらはすべて2番目の行で同じ幅を占めます。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13905/flexbox-grid-incomplete.png" style="display: block; height: 71px; margin: 0px auto; width: 944px;"></p>
+
+<p>これを修正するには、その要素に対して <code>flex-basis</code> によって使用される値を置き換える幅を提供するために、<code>span</code> クラスを含める必要があります。</p>
+
+<p>それらは、直上の項目について何も知らないので、直上の項目によって使用されるグリッドを尊重もしません。</p>
+
+<p>フレックスボックスは設計上<strong>一次元</strong>です。 それは単一の次元、つまり行または列の次元を扱います。 列と行に厳密なグリッドを作成することはできません。 つまり、グリッドにフレックスボックスを使用する場合でも、フロートのレイアウトの場合と同様にパーセントを計算する必要があります。</p>
+
+<p>プロジェクトでは、フレックスボックスがフロートを介して提供する追加の位置合わせとスペース分配機能のために、フレックスボックスの「グリッド」を使用することを選択することもできます。 しかし、設計されたもの以外の何かのためのツールを使っているのだということを知っているべきです。 だからあなたは望む最終結果を得るために、それが追加の輪くぐりの輪を飛び越えさせているように感じているかもしれません。</p>
+
+<h2 id="Third_party_grid_systems" name="Third_party_grid_systems">サードパーティのグリッドシステム</h2>
+
+<p>グリッド計算の背後にある数学を理解したので、一般的に使用されているサードパーティのグリッドシステムのいくつかを検討するのに適した状況です。 ウェブ上で「CSS Grid framework」を検索すると、膨大な選択肢のリストが見つかるでしょう。 <a href="http://getbootstrap.com/">Bootstrap</a> や <a href="http://foundation.zurb.com/">Foundation</a> などの人気のあるフレームワークには、グリッドシステムが含まれています。 CSS やプリプロセッサを使用して開発されたスタンドアロンのグリッドシステムもあります。</p>
+
+<p>グリッドフレームワークを扱うための一般的なテクニックを説明しているので、これらのスタンドアロンシステムの1つを見てみましょう。これから使用するグリッドは、単純な CSS フレームワークである Skeleton の一部です。</p>
+
+<p>はじめに <a href="http://getskeleton.com/">Skeleton のウェブサイト</a>にアクセスし、「Download」を選択して ZIP ファイルをダウンロードします。 これを解凍し、<code>skeleton.css</code> ファイルと <code>normalize.css</code> ファイルを新しいディレクトリにコピーします。</p>
+
+<p><a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton.html">html-skeleton.html</a> ファイルのコピーを作成し、それを <code>skeleton.css</code> と <code>normalize.css</code> と同じディレクトリに保存します。</p>
+
+<p>その <code>head</code> に次を追加することによって、<code>skeleton.css</code> と <code>normalize.css</code> を HTML ページに含めます。</p>
+
+<pre class="brush: html notranslate">&lt;link href="normalize.css" rel="stylesheet"&gt;
+&lt;link href="skeleton.css" rel="stylesheet"&gt;</pre>
+
+<p>Skeleton にはグリッドシステム以上のものが含まれています — タイポグラフィや、出発点として使用できるその他のページ要素の CSS も含んでいます。 ただし、これらはデフォルトのままにします — ここで本当に関心があるのはグリッドです。</p>
+
+<div class="note">
+<p><strong>注</strong>: <a href="http://necolas.github.io/normalize.css/">Normalize</a> は Nicolas Gallagher によって書かれた本当に便利で小さな CSS ライブラリです。 これは基本的ないくつかの基本的なレイアウトの修正を自動的に行い、ブラウザー間でデフォルトの要素のスタイル設定をより一貫させます。</p>
+</div>
+
+<p>前の例と同様の HTML を使用します。 HTML の <code>body</code> に次を追加してください。</p>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+  &lt;div class="row"&gt;
+    &lt;div class="col"&gt;1&lt;/div&gt;
+    &lt;div class="col"&gt;2&lt;/div&gt;
+    &lt;div class="col"&gt;3&lt;/div&gt;
+    &lt;div class="col"&gt;4&lt;/div&gt;
+    &lt;div class="col"&gt;5&lt;/div&gt;
+    &lt;div class="col"&gt;6&lt;/div&gt;
+    &lt;div class="col"&gt;7&lt;/div&gt;
+    &lt;div class="col"&gt;8&lt;/div&gt;
+    &lt;div class="col"&gt;9&lt;/div&gt;
+    &lt;div class="col"&gt;10&lt;/div&gt;
+    &lt;div class="col"&gt;11&lt;/div&gt;
+    &lt;div class="col"&gt;12&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="row"&gt;
+    &lt;div class="col"&gt;13&lt;/div&gt;
+    &lt;div class="col"&gt;14&lt;/div&gt;
+    &lt;div class="col"&gt;15&lt;/div&gt;
+    &lt;div class="col"&gt;16&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p><br>
+ Skeleton を使い始めるためには、ラッパーの {{htmlelement("div")}} に <code>container </code>クラスを与える必要があります — これは既に HTML に含まれています。 これにより、最大幅 960 ピクセルのコンテンツが中央に配置されます。 ボックスが 960 ピクセルよりも広くならないことがわかります。</p>
+
+<p>このクラスを適用するときに使用される CSS を見るために <code>skeleton.css</code> ファイルを見ることができます。 <code>&lt;div&gt;</code> は <code>auto</code> の左右のマージンで中央に配置され、左右に 20 ピクセルのパディングが適用されます。 Skeleton はまた、先ほど行ったように {{cssxref("box-sizing")}} プロパティを <code>border-box</code> に設定するので、この要素のパディングとボーダーは合計幅に含まれます。</p>
+
+<pre class="brush: css notranslate">.container {
+  position: relative;
+  width: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 0 20px;
+  box-sizing: border-box;
+}</pre>
+
+<p>要素が行内にある場合にのみ要素をグリッドの一部にすることができます。 前の例と同様に、<code>content</code> <code>&lt;div&gt;</code> と実際のコンテンツコンテナの <code>&lt;div&gt;</code> の間にネストした <code>row</code> クラスを持つ追加の <code>&lt;div&gt;</code> またはその他の要素が必要です。 これも既に行ってあります。</p>
+
+<p>それではコンテナボックスをレイアウトしましょう。 Skeleton は12列グリッドに基づいています。 一番上のラインのボックスはすべて、1列にまたがるようにするために <code>one column</code> クラスが必要です。</p>
+
+<p>次のスニペットに示すように、これらを追加します。</p>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+  &lt;div class="row"&gt;
+    &lt;div class="one column"&gt;1&lt;/div&gt;
+    &lt;div class="one column"&gt;2&lt;/div&gt;
+    &lt;div class="one column"&gt;3&lt;/div&gt;
+    /* and so on */
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>次に、2番目の <code>row</code> クラスのコンテナに、それらがまたがるべき列数を説明します。</p>
+
+<pre class="brush: html notranslate">&lt;div class="row"&gt;
+  &lt;div class="one column"&gt;13&lt;/div&gt;
+  &lt;div class="six columns"&gt;14&lt;/div&gt;
+  &lt;div class="three columns"&gt;15&lt;/div&gt;
+  &lt;div class="two columns"&gt;16&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>HTML ファイルを保存してブラウザーにロードして、効果を確認してください。</p>
+
+<div class="note">
+<p><strong>注</strong>: この例がうまく動作しない場合は、<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html">html-skeleton-finished.html</a> ファイルと比較してみてください（<a href="http://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html">ライブでも見られます</a>）。</p>
+</div>
+
+<p><code>skeleton.css</code> ファイルを見ると、これがどのように機能するかがわかります。 例えば、Skeleton には、「<code>three columns</code>」クラスを追加して要素をスタイルするための次の定義があります。</p>
+
+<pre class="brush: css notranslate">.three.columns { width: 22%; }</pre>
+
+<p>Skeleton（または他のグリッドフレームワーク）が行っていることはすべて、マークアップに追加することで使用できる定義済みクラスを設定することだけです。 これらのパーセントを自分で計算する作業を行ったのとまったく同じです。</p>
+
+<p>ご覧のとおり、Skeleton を使用するときには、CSS をほとんど書く必要がありません。 マークアップにクラスを追加すると、すべてのフロートが処理されます。 グリッドシステムのフレームワークを使用することを説得力のある選択にしたのは、レイアウトに対する責任を他に引き継ぐ、この能力です！ しかし最近では、CSS グリッドレイアウトを使用して、多くの開発者がこれらのフレームワークから CSS が提供する内蔵されたネイティブグリッドを使用するように移行しています。</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>これで、さまざまなグリッドシステムの作成方法が理解できました。 これは、古いサイトでの作業や、CSS グリッドレイアウトのネイティブグリッドとこれらの古いシステムとの違いの理解に役立ちます。</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li>
+</ul>
diff --git a/files/ja/learn/css/css_layout/media_queries/index.html b/files/ja/learn/css/css_layout/media_queries/index.html
new file mode 100644
index 0000000000..6cfb1366b1
--- /dev/null
+++ b/files/ja/learn/css/css_layout/media_queries/index.html
@@ -0,0 +1,445 @@
+---
+title: メディアクエリーの初心者向けガイド
+slug: Learn/CSS/CSS_layout/Media_queries
+tags:
+  - Beginner
+  - CSS
+  - Layout
+  - Learn
+  - media query
+translation_of: Learn/CSS/CSS_layout/Media_queries
+---
+<p>{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}</p>
+
+<p><strong>CSS メディアクエリー</strong>（CSS Media Query）を使用すると、例えば、「ビューポートは 480 ピクセルよりも広い」というような、ブラウザーとデバイスの環境が指定した規則に一致する場合にのみ CSS を適用できます。 メディアクエリーは、ビューポートのサイズに応じて異なるレイアウトを作成できるため、レスポンシブ Web デザイン（responsive web design、RWD）の重要な部分ですが、例えば、ユーザーはマウスではなくタッチスクリーンを使用しているというような、サイトが実行されている環境に関する他のものを検出するためにも使用できます。 このレッスンでは、最初にメディアクエリーで使用される構文について学習し、次に単純なデザインでどのようにレスポンシブにするかを示す実際の例で使用してみます。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提知識:</th>
+   <td>HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、および CSS の機能の考え方（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>と <a href="/ja/docs/Learn/CSS/Building_blocks">CSS の構成要素</a>を学ぶ）。</td>
+  </tr>
+  <tr>
+   <th scope="row">学習目標:</th>
+   <td>メディアクエリーの使用方法、およびそれらを使用してレスポンシブデザインを作成するための最も一般的なアプローチを理解する。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Media_Query_Basics" name="Media_Query_Basics">メディアクエリーの基本</h2>
+
+<p>最も単純なメディアクエリーの構文は次のようになります。</p>
+
+<pre class="brush: css notranslate">@media <em>media-type</em> and (<em>media-feature-rule</em>) {
+  /* CSS 規則をここに */
+}</pre>
+
+<p>これは、次のもので構成されます。</p>
+
+<ul>
+ <li>メディアタイプ（media type）。 このコードがどのようなメディア（例えば、印刷、画面）のためのものであるかをブラウザーに伝えます。</li>
+ <li>メディア式。 規則（rule）または、含まれている CSS を適用するために合格する必要があるテストです。</li>
+ <li>CSS 規則のセット。 テストに合格し、メディアタイプが正しい場合に適用されます。</li>
+</ul>
+
+<h3 id="Media_types" name="Media_types">メディアタイプ</h3>
+
+<p>指定できるメディアの種類は次のとおりです。</p>
+
+<ul>
+ <li><code>all</code>（すべて）</li>
+ <li><code>print</code>（印刷）</li>
+ <li><code>screen</code>（画面）</li>
+ <li><code>speech</code>（音声合成）</li>
+</ul>
+
+<p>次のメディアクエリーは、ページが印刷される場合にのみ <code>body</code> を <code>12pt</code> に設定します。 ページがブラウザーにロードされるときは適用されません。</p>
+
+<pre class="brush: css notranslate"><code>@media print {
+    body {
+        font-size: 12pt;
+    }
+}</code></pre>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: ここでのメディアタイプは、いわゆる {{glossary("MIME type","MIME タイプ")}}とは異なります。</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: レベル3のメディアクエリー仕様には、他にも多くのメディアタイプが定義されています。 これらは非推奨であり、避けるべきです。</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: メディアタイプはオプションです。 メディアクエリーでメディアタイプを指定しない場合、メディアクエリーはデフォルトですべてのメディアタイプ用になります。</p>
+</div>
+
+<h3 id="Media_feature_rules" name="Media_feature_rules">メディア特性の規則</h3>
+
+<p>タイプを指定したら、規則を使用してメディア特性（media feature）を対象にできます。</p>
+
+<h4 id="Width_and_height" name="Width_and_height">幅と高さ</h4>
+
+<p>レスポンシブデザインを作成するために最も頻繁に検出される特性（そして広範なブラウザーサポートを備えた特性）は、ビューポートの幅で、ビューポートが特定の幅よりも上または下にある（または正確な幅の）場合に、CSS を適用できます。 これには、<code>min-width</code>、<code>max-width</code>、<code>width</code> のメディア特性を使用します。</p>
+
+<p>これらの特性は、さまざまな画面サイズに対応するレイアウトを作成するために使用されます。 例えば、ビューポートが正確に 600 ピクセルの場合に <code>body</code> のテキストの色を赤に変更するには、次のメディアクエリーを使用します。</p>
+
+<pre class="brush: css notranslate"><code>@media screen and (width: 600px) {
+    body {
+        color: red;
+    }
+}</code></pre>
+
+<p>ブラウザーで<a href="https://mdn.github.io/css-examples/learn/media-queries/width.html">この例を開く</a>か、<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/width.html">ソースを表示</a>します。</p>
+
+<p><code>width</code>（および <code>height</code>）のメディア特性は範囲として使用でき、<code>min-</code> または <code>max-</code> を前に付けて、指定された値が最小または最大であることを示します。 例えば、ビューポートが 600 ピクセルより狭い場合に色を青にするには、次のように <code>max-width</code> を使用します。</p>
+
+<pre class="brush: css notranslate"><code>@media screen and (max-width: 600px) {
+    body {
+        color: blue;
+    }
+}</code></pre>
+
+<p>ブラウザーで<a href="https://mdn.github.io/css-examples/learn/media-queries/max-width.html">この例を開く</a>か、<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/max-width.html">ソースを表示</a>します。</p>
+
+<p>実際には、レスポンシブデザインでは最小値または最大値を使用する方がはるかに便利であるため、<code>width</code> または <code>height</code> を単独で使用することはほとんどありません。</p>
+
+<p>テストできるメディア特性は他にも多数ありますが、メディアクエリー仕様のレベル4および5で導入された新しい特性の一部は、ブラウザーサポートが制限されています。 各特性は、ブラウザーサポート情報とともに MDN で文書化されていて、完全なリストは、<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディアクエリーの使用: メディア特性</a>で見つけることができます。</p>
+
+<h4 id="Orientation" name="Orientation">オリエンテーション</h4>
+
+<p>よくサポートされているメディア特性の1つはオリエンテーション（<code>orientation</code>）です。 これにより、ポートレートモード（<code>portrait</code> mode、肖像画のような縦長）またはランドスケープモード（<code>landscape</code> mode、風景画のような横長）をテストできます。 デバイスがランドスケープの場合に本文の色を変更するには、次のメディアクエリーを使用します。</p>
+
+<pre class="brush: css notranslate"><code>@media (orientation: landscape) {
+    body {
+        color: rebeccapurple;
+    }
+}</code></pre>
+
+<p>ブラウザーで<a href="https://mdn.github.io/css-examples/learn/media-queries/orientation.html">この例を開く</a>か、<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/orientation.html">ソースを表示</a>します。</p>
+
+<p>標準のデスクトップビューはランドスケープであり、このオリエンテーションで適切に機能するデザインは、ポートレートモードの携帯電話またはタブレットで表示した場合に機能しない場合があります。 オリエンテーションのテストは、ポートレートモードのデバイス用に最適化されたレイアウトの作成に役立ちます。</p>
+
+<h4 id="Use_of_pointing_devices" name="Use_of_pointing_devices">ポインティングデバイスの使用</h4>
+
+<p>レベル4仕様の一部として、ホバー（<code>hover</code>）メディア特性が導入されました。 この特性は、ユーザーが要素の上にポインターを乗せることができるかどうかをテストできることを意味します。 つまり、本質的に何らかのポインティングデバイスを使用していることを意味します。 タッチスクリーンとキーボードナビゲーションはホバーしません。</p>
+
+<pre class="brush: css notranslate"><code>@media (hover: hover) {
+    body {
+        color: rebeccapurple;
+    }
+}</code></pre>
+
+<p>ブラウザーで<a href="https://mdn.github.io/css-examples/learn/media-queries/hover.html">この例を開く</a>か、<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/hover.html">ソースを表示</a>します。</p>
+
+<p>ユーザーがホバーできないことがわかっている場合、デフォルトでいくつかのインタラクティブ機能を表示できます。 ホバーできるユーザーの場合、リンクの上にポインターを乗せたときにそれらを利用可能にすることを選択できます。</p>
+
+<p>レベル4には、ポインター（<code>pointer</code>）メディア特性もあります。 これには、<code>none</code>（なし）、<code>fine</code>（細かい）、<code>coarse</code>（粗い）の3つの値があります。 <code>fine</code> ポインターは、マウスやトラックパッドのようなものです。 これにより、ユーザーは狭い領域を正確に対象にすることができます。 <code>coarse</code> ポインターは、タッチスクリーン上の指です。 値 <code>none</code> は、ユーザーにポインティングデバイスがないことを意味し、おそらく、キーボードのみ、または音声コマンドでナビゲートしています。</p>
+
+<p><code>pointer</code> を使用すると、ユーザーが画面に対して行っている操作の種類に対応する、より優れたインターフェイスを設計できます。 例えば、ユーザーがタッチスクリーンでデバイスと対話していることがわかっている場合、より大きなヒット領域を作成できます。</p>
+
+<h2 id="More_complex_media_queries" name="More_complex_media_queries">より複雑なメディアクエリー</h2>
+
+<p>考えられるさまざまなメディアクエリーのすべてを使用して、それらを組み合わせたり、いずれにも一致する可能性があるクエリーのリストを作成したりすることができます。</p>
+
+<h3 id="and_logic_in_media_queries" name="and_logic_in_media_queries">メディアクエリーの "and" 論理</h3>
+
+<p>メディア特性を組み合わせるには、上記で <code>and</code> を使用してメディアタイプとメディア特性を組み合わせるのとほぼ同じ方法で <code>and</code> を使用できます。 例えば、<code>min-width</code> と <code>orientation</code> をテストする場合があります。 ビューポートの幅が少なくとも 600 ピクセルで、デバイスがランドスケープモードの場合にのみ <code>body</code> のテキストは青色になります。</p>
+
+<pre class="brush: css notranslate"><code>@media screen and (min-width: 600px) and (orientation: landscape) {
+    body {
+        color: blue;
+    }
+}</code></pre>
+
+<p>ブラウザーで<a href="https://mdn.github.io/css-examples/learn/media-queries/and.html">この例を開く</a>か、<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/and.html">ソースを表示</a>します。</p>
+
+<h3 id="or_logic_in_media_queries" name="or_logic_in_media_queries">メディアクエリーの "or" 論理</h3>
+
+<p>クエリーのセットがあり、そのいずれかが一致する場合、これらのクエリーをコンマで区切ることができます。 次の例では、ビューポートの幅が少なくとも 600 ピクセルの場合、<strong>または</strong>デバイスがランドスケープの場合、テキストは青になります。 これらのいずれかが当てはまる場合、クエリーは一致します。</p>
+
+<pre class="brush: css notranslate"><code>@media screen and (min-width: 600px), screen and (orientation: landscape) {
+    body {
+        color: blue;
+    }
+}</code></pre>
+
+<p>ブラウザーで<a href="https://mdn.github.io/css-examples/learn/media-queries/or.html">この例を開く</a>か、<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/or.html">ソースを表示</a>します。</p>
+
+<h3 id="not_logic_in_media_queries" name="not_logic_in_media_queries">メディアクエリーの "not" 論理</h3>
+
+<p><code>not</code> 演算子を使用して、メディアクエリー全体を否定することができます。 これにより、メディアクエリー全体の意味が逆になります。 したがって、次の例では、オリエンテーションがポートレートの場合にのみテキストが青になります。</p>
+
+<pre class="brush: css notranslate"><code>@media not all and (orientation: landscape) {
+    body {
+        color: blue;
+    }
+}</code></pre>
+
+<p>ブラウザーで<a href="https://mdn.github.io/css-examples/learn/media-queries/not.html">この例を開く</a>か、<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/not.html">ソースを表示</a>します。</p>
+
+<h2 id="How_to_choose_breakpoints" name="How_to_choose_breakpoints">ブレークポイントの選択方法</h2>
+
+<p>レスポンシブデザインの初期には、多くのデザイナーが非常に具体的な画面サイズを対象にしようとしました。 人気のある携帯電話やタブレットの画面のサイズのリストは、それらのビューポートにきちんと一致するデザインを作成できるように公開されました。</p>
+
+<p>現在、非常に多様なサイズのデバイスが多すぎて、それを実現できません。 つまり、すべてのデザインにおいて特定のサイズを対象にするのではなく、コンテンツが何らかの方法で壊れ始める（starts to break）サイズでデザインを変更することをお勧めします。 おそらく、行の長さが非常に長くなるか、枠で囲まれたサイドバーが押しつぶされて読みにくくなります。 これが、メディアクエリーを使用して、使用可能なスペースに合わせてデザインをより良いものに変更するポイントです。 このアプローチは、使用されているデバイスの正確な寸法は問題ではなく、あらゆる範囲に対応できることを意味します。 メディアクエリーが導入されるポイントは、<strong>ブレークポイント</strong>（breakpoints）と呼ばれます。</p>
+
+<p>Firefox 開発ツールの<a href="/ja/docs/Tools/Responsive_Design_Mode">レスポンシブデザインモード</a>は、これらのブレークポイントがどこに行くべきかを判断するのに非常に便利です。 メディアクエリーを追加してデザインを微調整しながら、ビューポートを小さくしたり大きくしたりして、コンテンツが改善される場所を簡単に確認できます。</p>
+
+<p><img alt="Firefox 開発ツールのモバイルビューのレイアウトのスクリーンショット。" src="https://mdn.mozillademos.org/files/16867/rwd-mode.png" style="height: 917px; width: 1443px;"></p>
+
+<h2 id="Active_learning_mobile_first_responsive_design" name="Active_learning_mobile_first_responsive_design">能動的学習: モバイルファースト レスポンシブデザイン</h2>
+
+<p>レスポンシブデザインには、大きく分けて2つのアプローチがあります。 デスクトップまたは最も広いビューから始めて、ビューポートが小さくなるにつれて並べ替えるためのブレークポイントを追加するか、最小のビューから始めて、ビューポートが大きくなるにつれてレイアウトを追加することができます。 この2番目のアプローチは、<strong>モバイルファースト</strong> レスポンシブデザインと呼ばれ、多くの場合、従うべき最善のアプローチです。</p>
+
+<p>非常に小さなデバイスのビューは、通常フローで見られるように、多くの場合、コンテンツの単純な1列です。 これは、小さなデバイスに対して多くのレイアウトを行う必要がほとんどないことを意味します — ソースを適切な順序にすれば、デフォルトで読みやすいレイアウトになります。</p>
+
+<p>以下のチュートリアルでは、非常に単純なレイアウトでこのアプローチを説明します。 実稼働サイトでは、メディアクエリー内で調整する必要があるものが多くありますが、アプローチはまったく同じです。</p>
+
+<h3 id="Walkthrough_a_simple_mobile-first_layout" name="Walkthrough_a_simple_mobile-first_layout">チュートリアル: 単純なモバイルファーストのレイアウト</h3>
+
+<p>出発点は、レイアウトのさまざまな部分に背景色を追加するために CSS を適用した HTML ドキュメントです。</p>
+
+<pre class="brush: css notranslate"><code>* {
+    box-sizing: border-box;
+}
+
+body {
+    width: 90%;
+    margin: 2em auto;
+    font: 1em/1.3 Arial, Helvetica, sans-serif;
+}
+
+a:link,
+a:visited {
+    color: #333;
+}
+
+nav ul,
+aside ul {
+    list-style: none;
+    padding: 0;
+}
+
+nav a:link,
+nav a:visited {
+    background-color: rgba(207, 232, 220, 0.2);
+    border: 2px solid rgb(79, 185, 227);
+    text-decoration: none;
+    display: block;
+    padding: 10px;
+    color: #333;
+    font-weight: bold;
+}
+
+nav a:hover {
+    background-color: rgba(207, 232, 220, 0.7);
+}
+
+.related {
+    background-color: rgba(79, 185, 227, 0.3);
+    border: 1px solid rgb(79, 185, 227);
+    padding: 10px;
+}
+
+.sidebar {
+    background-color: rgba(207, 232, 220, 0.5);
+    padding: 10px;
+}
+
+article {
+    margin-bottom: 1em;
+}
+</code></pre>
+
+<p>レイアウトの変更は行っていませんが、ドキュメントのソースはコンテンツが読みやすいように並べられています。 これは重要な最初のステップであり、コンテンツがスクリーンリーダーで読み上げられる場合に理解できるようにするものです。</p>
+
+<pre class="brush: html notranslate"><code>&lt;body&gt;
+    &lt;div class="wrapper"&gt;
+      &lt;header&gt;
+        &lt;nav&gt;
+          &lt;ul&gt;
+            &lt;li&gt;&lt;a href=""&gt;About&lt;/a&gt;&lt;/li&gt;
+            &lt;li&gt;&lt;a href=""&gt;Contact&lt;/a&gt;&lt;/li&gt;
+            &lt;li&gt;&lt;a href=""&gt;Meet the team&lt;/a&gt;&lt;/li&gt;
+            &lt;li&gt;&lt;a href=""&gt;Blog&lt;/a&gt;&lt;/li&gt;
+          &lt;/ul&gt;
+        &lt;/nav&gt;
+      &lt;/header&gt;
+      &lt;main&gt;
+        &lt;article&gt;
+          &lt;div class="content"&gt;
+            &lt;h1&gt;Veggies!&lt;/h1&gt;
+            &lt;p&gt;
+              ...
+            &lt;/p&gt;
+          &lt;/div&gt;
+          &lt;aside class="related"&gt;
+            &lt;p&gt;
+              ...
+            &lt;/p&gt;
+          &lt;/aside&gt;
+        &lt;/article&gt;
+
+        &lt;aside class="sidebar"&gt;
+          &lt;h2&gt;External vegetable-based links&lt;/h2&gt;
+          &lt;ul&gt;
+            &lt;li&gt;
+              ...
+            &lt;/li&gt;
+          &lt;/ul&gt;
+        &lt;/aside&gt;
+      &lt;/main&gt;
+
+      &lt;footer&gt;&lt;p&gt;&amp;copy;2019&lt;/p&gt;&lt;/footer&gt;
+    &lt;/div&gt;
+  &lt;/body&gt;
+</code></pre>
+
+<p>この単純なレイアウトはモバイルでもうまく機能します。 開発ツールのレスポンシブデザインモードでレイアウトを眺めると、サイトのモバイルビューそのものと同じように機能することがわかります。</p>
+
+<p>ブラウザーで<a href="https://mdn.github.io/css-examples/learn/media-queries/step1.html">ステップ1を開く</a>か、<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step1.html">ソースを表示</a>します。</p>
+
+<p><strong>この例をフォローして実装してみたい場合は、コンピューターに <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step1.html">step1.html</a> のローカルコピーを作成します。</strong></p>
+
+<p>このポイントから、行の長さが非常に長くなり、ナビゲーションのためのスペースが水平線で表示されるまで、レスポンシブデザインモードのビューのドラッグを始めます。 これが、最初のメディアクエリーを追加する場所です。 <code>em</code> を使用すると、ユーザーがテキストのサイズを大きくした場合、テキストのサイズが小さいユーザーよりも、同様の行長で広いビューポートでブレークポイントが発生します。</p>
+
+<p><strong>step1.html の CSS の下部に以下のコードを追加します。</strong></p>
+
+<pre class="brush: css notranslate"><code>@media screen and (min-width: 40em) {
+    article {
+        display: grid;
+        grid-template-columns: 3fr 1fr;
+        column-gap: 20px;
+    }
+
+    nav ul {
+        display: flex;
+    }
+
+    nav li {
+        flex: 1;
+    }
+}
+</code></pre>
+
+<p>この CSS は、記事（<code>article</code>）内の2列のレイアウトで、記事のコンテンツ（<code>content</code>）および余談（<code>aside</code>）要素の関連（<code>related</code>）情報を提供します。 また、フレックスボックスを使用してナビゲーション（<code>nav</code>）を1行に配置します。</p>
+
+<p>ブラウザーで<a href="https://mdn.github.io/css-examples/learn/media-queries/step2.html">ステップ2を開く</a>か、<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step2.html">ソースを表示</a>します。</p>
+
+<p>サイドバー（<code>sidebar</code>）が新しい列を形成するのに十分なスペースがあると感じるまで、幅を拡張し続けます。 メディアクエリー内で、主要な（<code>main</code>）要素を2列のグリッドにします。 次に、2つのサイドバーが互いに揃うように <code>article</code> の {{cssxref("margin-bottom")}} を削除する必要があります。 フッター（<code>footer</code>）の上部に {{cssxref("border")}} を追加します。 通常、これらの小さな調整は、各ブレークポイントでデザインをきれいに見せるために行うことです。</p>
+
+<p><strong>再び、step1.html の CSS の下部に以下のコードを追加します。</strong></p>
+
+<pre class="brush: css notranslate"><code>@media screen and (min-width: 70em) {
+    main {
+        display: grid;
+        grid-template-columns: 3fr 1fr;
+        column-gap: 20px;
+    }
+
+    article {
+        margin-bottom: 0;
+    }
+
+    footer {
+        border-top: 1px solid #ccc;
+        margin-top: 2em;
+    }
+}</code>
+</pre>
+
+<p>ブラウザーで<a href="https://mdn.github.io/css-examples/learn/media-queries/step3.html">ステップ3を開く</a>か、<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step3.html">ソースを表示</a>します。</p>
+
+<p>さまざまな幅で最後の例を見ると、デザインがどのように反応し、利用可能な幅に応じて1列、2列、または3列として機能するかを確認できます。 これは、モバイルファースト レスポンシブデザインの非常に単純な例です。</p>
+
+<h2 id="The_viewport_meta_tag">The viewport meta tag</h2>
+
+<p>If you look at the HTML source in the above example, you'll see the following element included in the head of the document:</p>
+
+<pre class="brush: html notranslate">&lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;</pre>
+
+<p>This is the <a href="/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport meta tag</a> — it exists as a way control how mobile browsers render content. This is needed because by default, most mobile browsers lie about their viewport width. Non-responsive sites commonly look really bad when rendered in a narrow viewport, so mobile browsers usually render the site with a viewport width wider than the real device width by default (usually 960 pixels), and then shrink the rendered result so that it fits in the display.</p>
+
+<p>This is all well and good, but it means that responsive sites are not going to work as expected. If the viewport width is reported as 960 pixels, then mobile layouts (for example created using a media query of <code>@media screen and (max-width: 600px) { ... }</code>) are not going to render as expected.</p>
+
+<p>To remedy this, including a viewport meta tag like the one above on your page tells the browser "don't render the content with a 960 pixel viewport — render it using the real device width instead, and set a default initial scale level for better consistency." The media queries will then kick in as expected.</p>
+
+<p>There are a number of other options you can put inside the <code>content</code> attribute of the viewport meta tag — see <a href="/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">Using the viewport meta tag to control layout on mobile browsers</a> for more details.</p>
+
+<h2 id="Do_you_really_need_a_media_query" name="Do_you_really_need_a_media_query">メディアクエリーが本当に必要ですか？</h2>
+
+<p>フレックスボックス、グリッド、および段組みのレイアウトはすべて、メディアクエリーを必要とせずに、柔軟でレスポンシブなコンポーネントを作成する方法を提供します。 これらのレイアウト方法が、メディアクエリーを追加せずに目的を達成できるかどうかを常に検討する価値があります。 例えば、少なくとも 200 ピクセル幅のカードのセットが必要な場合があります。 これらの 200 ピクセルの多くは、<code>main</code> の <code>article</code> に収まります。 これは、メディアクエリーをまったく使用せずに、グリッドレイアウトで実現できます。</p>
+
+<p>これは、次を使用して実現できます。</p>
+
+<pre class="brush: html notranslate"><code>&lt;ul class="grid"&gt;
+    &lt;li&gt;
+        &lt;h2&gt;Card 1&lt;/h2&gt;
+        &lt;p&gt;...&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+        &lt;h2&gt;Card 2&lt;/h2&gt;
+        &lt;p&gt;...&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+        &lt;h2&gt;Card 3&lt;/h2&gt;
+        &lt;p&gt;...&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+        &lt;h2&gt;Card 4&lt;/h2&gt;
+        &lt;p&gt;...&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+        &lt;h2&gt;Card 5&lt;/h2&gt;
+        &lt;p&gt;...&lt;/p&gt;
+    &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+
+<pre class="brush: css notranslate"><code>.grid {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: 20px;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+
+.grid li {
+    border: 1px solid #666;
+    padding: 10px;
+}</code></pre>
+
+<p>ブラウザーで<a href="https://mdn.github.io/css-examples/learn/media-queries/grid.html">グリッドレイアウトの例を開く</a>か、<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/grid.html">ソースを表示</a>します。</p>
+
+<p>ブラウザーで例を開いた状態で、画面を拡大および縮小して、列トラック数の変更を確認します。 このメソッドの良い点は、グリッドがビューポートの幅ではなく、このコンポーネントで使用可能な幅を見ていることです。 メディアクエリーに関するセクションに、それがまったく必要ないかもしれないという提案をまとめるのは奇妙に思えるかもしれません！ しかしながら、実際には、メディアクエリーで強化された最新のレイアウト方法を適切に使用すると、最良の結果が得られることがわかります。</p>
+
+<h2 id="Test_your_skills!">Test your skills!</h2>
+
+<p>You've reached the end of this article, but can you remember the most important information? You can find a test to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/CSS/CSS_layout/rwd_skills">Test your skills: Responsive Web Design</a>.</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>このレッスンでは、メディアクエリーについて学び、実際にそれらを使用してモバイルファースト レスポンシブデザインを作成する方法もみいだしました。</p>
+
+<p>作成した開始点を使用して、さらにメディアクエリーをテストできます。 例えば、<code>pointer</code> メディア特性を使用して、訪問者が粗いポインターを持つことを検出した場合、ナビゲーションのサイズを変更できます。</p>
+
+<p>また、さまざまなコンポーネントを追加して、メディアクエリーを追加するか、フレックスボックスやグリッドなどのレイアウト方法を使用するのがコンポーネントをレスポンシブにするのに最も適切な方法かどうかを試すこともできます。 多くの場合、正しい方法も間違った方法もありません。 あなたのデザインとコンテンツに最適な方法を試してみてください。</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li>
+</ul>
diff --git a/files/ja/learn/css/css_layout/multiple-column_layout/index.html b/files/ja/learn/css/css_layout/multiple-column_layout/index.html
new file mode 100644
index 0000000000..036bb7daf6
--- /dev/null
+++ b/files/ja/learn/css/css_layout/multiple-column_layout/index.html
@@ -0,0 +1,417 @@
+---
+title: 段組みレイアウト
+slug: Learn/CSS/CSS_layout/Multiple-column_Layout
+tags:
+  - Beginner
+  - CSS
+  - Guide
+  - Layout
+  - Learn
+  - Learning
+  - Multi-col
+  - Multiple columns
+translation_of: Learn/CSS/CSS_layout/Multiple-column_Layout
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary"><span class="seoSummary">段組みレイアウトの仕様では、新聞に見られるような、コンテンツを段にレイアウトする方法が提供されています。 この記事では、この機能の使い方について説明します。</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提知識:</th>
+   <td>HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、および CSS の機能の考え方（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>を学ぶ）。</td>
+  </tr>
+  <tr>
+   <th scope="row">学習目標:</th>
+   <td>ウェブページ上で、新聞に見られるような、段組みレイアウトを作成する方法を学ぶこと。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="A_basic_example" name="A_basic_example">基本的な例</h2>
+
+<p>ここでは、しばしば <em>multicol</em> と呼ばれる、段組みレイアウトの使用方法を探ります。 あなたは、<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/multicol/0-starting-point.html">multicol の出発点ファイルをダウンロード</a>して、適切な場所に CSS を追加することによって、従うことができます。 このセクションの一番下には、最終的なコードがどのようになっているかの実例があります。</p>
+
+<p>出発点にはいくつかの非常に単純な HTML を含んでいます。 <code>container</code> のクラスを持つラッパーに見出しといくつかの段落が入っています 。</p>
+
+<p><code>container</code> のクラスを持つ {{htmlelement("div")}} を、 multicol コンテナとします。 2つのプロパティ {{cssxref("column-count")}} または {{cssxref("column-width")}} のいずれかを使用して、multicol をオンにします。 <code>column-count</code> プロパティは与えた値と同じ数の段（column）を作成するので、スタイルシートに次の CSS を加えて、ページをリロードすれば、あなたは3つの段を得るでしょう。</p>
+
+<pre class="brush: css">.container {
+  column-count: 3;
+}
+</pre>
+
+<p>作成した段の幅は可変です — ブラウザーは各段に割り当てるためのスペースを計算します。</p>
+
+<div id="Multicol_1">
+<div class="hidden">
+<h6 id="column-count_example">column-count example</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+    </pre>
+</div>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;h1&gt;Simple multicol example&lt;/h1&gt;
+
+  &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
+  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+  Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
+  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
+  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+  &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
+  elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
+  cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
+  dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.container {
+  column-count: 3;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Multicol_1', '100%', 400) }}</p>
+
+<p>次のように CSS を変更して <code>column-width</code> を使用します。</p>
+
+<pre class="brush: css">.container {
+  column-width: 200px;
+}
+</pre>
+
+<p>ブラウザーは指定したサイズでできる数の段を与えます。 残りのスペースは既存の段間で共有されます。 これは、コンテナがその幅で正確に割り切れない限り、指定した幅と正確には一致しないことを意味します。</p>
+
+<div id="Multicol_2">
+<div class="hidden">
+<h6 id="column-width_example">column-width example</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}</pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;h1&gt;Simple multicol example&lt;/h1&gt;
+
+  &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
+  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+  Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
+  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
+  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+  &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
+  elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
+  cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
+  dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+&lt;/div&gt;</pre>
+</div>
+
+<pre class="brush: css">.container {
+  column-width: 200px;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Multicol_2', '100%', 400) }}</p>
+
+<h2 id="Styling_the_columns" name="Styling_the_columns">段をスタイリングする</h2>
+
+<p>multicol によって作成された段を個別にスタイリングすることはできません。 1つの段を他の段より大きくしたり、単一の段の背景色やテキストの色を変更したりする方法はありません。 段の表示方法を変更する機会は次の2つがあります。</p>
+
+<ul>
+ <li>{{cssxref("column-gap")}} を使用して段間のギャップのサイズを変更します。</li>
+ <li>{{cssxref("column-rule")}} を使用して段間に線を追加します。</li>
+</ul>
+
+<p>上記の例を使用して、次のように <code>column-gap</code> プロパティを追加してギャップのサイズを変更します。</p>
+
+<pre class="brush: css">.container {
+  column-width: 200px;
+  column-gap: 20px;
+}</pre>
+
+<p>さまざまな値で遊ぶことができます — このプロパティは任意の長さの単位を受け入れます。 今度は <code>column-rule</code> で、段の間に線（rule、罫線）を追加します。 前のレッスンで遭遇した {{cssxref("border")}} プロパティと同様に、<code>column-rule</code> は {{cssxref("column-rule-color")}}、{{cssxref("column-rule-style")}}、{{cssxref("column-rule-width")}} の一括指定で、<code>border</code> と同じ値を受け入れます。</p>
+
+<pre class="brush: css">.container {
+  column-count: 3;
+  column-gap: 20px;
+  column-rule: 4px dotted rgb(79, 185, 227);
+}</pre>
+
+<p>さまざまなスタイルや色の線を追加してみてください。</p>
+
+<div id="Multicol_3">
+<div class="hidden">
+<h6 id="Styling_the_columns_2">Styling the columns</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+.container {
+ column-count: 3;
+ column-gap: 20px;
+ column-rule: 4px dotted rgb(79, 185, 227);
+}</pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;h1&gt;Simple multicol example&lt;/h1&gt;
+
+  &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
+  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+  Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
+  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
+  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+  &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
+  elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
+  cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
+  dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+&lt;/div&gt;</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Multicol_3', '100%', 400) }}</p>
+
+<p>注意すべきことは、線がそれ自体の幅を占めることはないということです。 それは <code>column-gap</code> で作ったギャップの向こう側にあります。 線の両側にスペースを増やすには、<code>column-gap</code> のサイズを増やす必要があります。</p>
+
+<h2 id="Columns_and_fragmentation" name="Columns_and_fragmentation">段と断片化</h2>
+
+<p>段組みレイアウトのコンテンツは断片化されています。 ウェブページを印刷するときなど、ページ付きメディアでコンテンツがふるまうのと基本的に同じようにふるまいます。 コンテンツを multicol コンテナに入れるとき、それは段に断片化されます。 そして、コンテンツはこれを可能にするために分割されます。</p>
+
+<p>時々、この分割は良くない読書体験をもたらす場所で起こるでしょう。 以下の実例では、multicol を使用して一連のボックスをレイアウトしました。 各ボックスの中には見出しとテキストがあります。 段がその2つの間で断片化すると、見出しはテキストから分離されます。</p>
+
+<div id="Multicol_4">
+<div class="hidden">
+<h6 id="Cards_example">Cards example</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}            </pre>
+</div>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.container {
+  column-width: 250px;
+  column-gap: 20px;
+}
+
+.card {
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
+  padding: 10px;
+  margin: 0 0 1em 0;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Multicol_4', '100%', 600) }}</p>
+
+<p>このふるまいを制御するために、<a href="/ja/docs/Web/CSS/CSS_Fragmentation">CSS 分割</a>の仕様のプロパティを使用できます。 この仕様は、multicol とページ付きメディアでのコンテンツの分割を制御するためのプロパティを提供します。 例えば、<code>.card</code> の規則には、プロパティ {{cssxref("break-inside")}} を <code>avoid</code> の値で追加します。 これは見出しとテキストのコンテナなので、このボックスを断片化したくありません。</p>
+
+<p>現時点では、ブラウザーを最大限にサポートするために、古いプロパティ <code>page-break-inside: avoid</code> を追加することも価値があります。</p>
+
+<pre class="brush: css">.card {
+  break-inside: avoid;
+  page-break-inside: avoid;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+  padding: 10px;
+  margin: 0 0 1em 0;
+}
+</pre>
+
+<p>ページをリロードすると、ボックスは一体になっているはずです。</p>
+
+<div id="Multicol_5">
+<div class="hidden">
+<h6 id="Multicol_Fragmentation">Multicol Fragmentation</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}              </pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: css">.container {
+  column-width: 250px;
+  column-gap: 20px;
+}
+
+.card {
+  break-inside: avoid;
+  page-break-inside: avoid;
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
+  padding: 10px;
+  margin: 0 0 1em 0;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Multicol_5', '100%', 600) }}</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>これで、構築中のデザインのレイアウト方法を選択するときに、意のままにできるもう一つのツールである段組みレイアウトの基本機能の使用方法がわかりました。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Fragmentation">CSS 分割</a></li>
+ <li><a href="/ja/docs/Web/Guide/CSS/Using_multi-column_layouts">段組みレイアウトの使用</a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li>
+</ul>
diff --git a/files/ja/learn/css/css_layout/normal_flow/index.html b/files/ja/learn/css/css_layout/normal_flow/index.html
new file mode 100644
index 0000000000..3e9965ce6f
--- /dev/null
+++ b/files/ja/learn/css/css_layout/normal_flow/index.html
@@ -0,0 +1,103 @@
+---
+title: 通常フロー
+slug: Learn/CSS/CSS_layout/Normal_Flow
+tags:
+  - Beginner
+  - CSS
+  - Layout
+  - Learn
+  - float
+  - grid
+  - normal flow
+translation_of: Learn/CSS/CSS_layout/Normal_Flow
+---
+<div>{{LearnSidebar}}</div>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p>
+
+<p class="summary"><span class="seoSummary">この記事では、通常フロー、つまりレイアウトを変更していない場合のウェブページの要素のレイアウト方法について説明します。</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提知識:</th>
+   <td>HTML の基礎 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ)、および CSS の機能の考え方 (<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>を学ぶ)。</td>
+  </tr>
+  <tr>
+   <th scope="row">学習目標:</th>
+   <td>変更を加える前に、ブラウザーがデフォルトでウェブページをどのようにレイアウトするかを説明します。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>レイアウトを紹介した前回のレッスンで詳しく説明したように、CSS を適用してふるまいを変更していない場合、ウェブページ上の要素は通常フローでレイアウトされます。そして、理解を深め始めるにつれ、その通常フローの中で要素の位置を調整したり、要素を完全に取り除くたりして、要素のふるまいを変更できます。通常フローで読み取り可能な、しっかりとよく構造化された文書から始めることは、どんなウェブページでも始めるための最良の方法です。それは、ユーザーが非常に制限されたブラウザーを使用している場合や、ページのコンテンツを読み上げるスクリーンリーダーなどのデバイスを使用している場合でも、コンテンツを読みやすくすることができます。さらに、通常フローは読み取り可能な文書を作成するように設計されているので、この方法で始めることで、レイアウトを変更するときに文書と戦うのではなく文書とともに作業します。</p>
+
+<p>さまざまなレイアウト方法を深く掘り下げる前に、以前のモジュールで通常のドキュメントフローに関して検討したことのいくつかを再検討する価値があります。</p>
+
+<h2 id="How_are_elements_laid_out_by_default" name="How_are_elements_laid_out_by_default">要素はデフォルトでどのようにレイアウトされますか？</h2>
+
+<p>まず初めに、個々の要素ボックスは要素のコンテンツを取り、それからそれらの周りにパディング (padding、詰め物)、ボーダー (border、境界線) そしてマージン (margin、余白) を追加することによってレイアウトされます — これはまた以前に見たことがある<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">ボックスモデル</a>のことです。</p>
+
+<p>デフォルトでは、<a href="/ja/docs/Web/HTML/Block-level_elements">ブロックレベル要素</a>のコンテンツは、その親要素の幅の 100% で、そのコンテンツと同じ高さです <a href="/ja/docs/Web/HTML/Inline_elements">インライン要素</a>は、コンテンツと同じ高さで、コンテンツと同じ幅です。インライン要素に幅や高さを設定することはできません — それらはブロックレベル要素のコンテンツの中にあるだけです。この方法でインライン要素のサイズを制御したい場合は、<code>display: block;</code> を使用してブロックレベル要素のようにふるまうように設定する必要があります (あるいは、<code>display: inline-block;</code> で、両方の特性を混在させます)。</p>
+
+<p>それは個々の要素を説明していますが、要素がどのように相互作用するかについてはどうでしょうか？ 通常のレイアウトフロー (レイアウト入門の記事に記載) は、ブラウザーのビューポート内に要素を配置するシステムです デフォルトでは、ブロックレベル要素は、親の<a href="/ja/docs/Web/CSS/writing-mode">書字方向モード</a> (writing mode、<em>初期</em> は horizontal-tb) に基づいて<em>ブロックのフロー方向</em> にレイアウトされます — 各要素は、最後の要素の下の新しい行に表示され、それらに設定されたマージンで区切られます したがって英語やその他の横書きで、上から下へ改行する書字方向モードでは、ブロックレベル要素は垂直にレイアウトされます。</p>
+
+<p>インライン要素は異なるふるまいをします — 新しい行に現れません。代わりに、親ブロックレベル要素の幅の内側にマージンがある限り、それらは互いに同じ行に配置され、隣接する (または折り返された) テキストコンテンツに配置されます。スペースがなければ、あふれているテキストや要素は新しい行に移動します。</p>
+
+<p>隣接する 2 つの要素の両方にマージンが設定されていて、2 つのマージンが接触している場合、2 つのうち大きい方が残り、小さい方が消えます — これは<a href="/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">マージンの相殺</a> (margin collapsing) と呼ばれます。</p>
+
+<p>これらすべてを説明する簡単な例を見てみましょう。</p>
+
+<div id="Normal_Flow">
+<pre class="brush: html notranslate">&lt;h1&gt;基本的なドキュメントフロー&lt;/h1&gt;
+
+&lt;p&gt;これは基本的なブロックレベル要素です。隣接するブロックレベル要素は下の新しい行に配置されています。&lt;/p&gt;
+
+&lt;p&gt;デフォルトでは、親要素の幅の 100% にまたがり、子コンテンツと同じ高さになります。幅と高さの合計は、コンテンツ + パディング + ボーダーの幅/高さです。&lt;/p&gt;
+
+&lt;p&gt;マージンによって分けられています。マージンの相殺のため、両方ではなく、1 つのマージンの幅で区切られます。&lt;/p&gt;
+
+&lt;p&gt;&lt;span&gt;これ&lt;/span&gt;および&lt;span&gt;これのような&lt;/span&gt;インライン要素は、同じ行に配置され、同じ行にスペースがある場合は隣接するテキストノードに配置されます。オーバーフローするインライン要素は&lt;span&gt;可能であれば新しいラインに折り返され (これのようにテキストを含む)&lt;/span&gt;、そうでなければ次の画像のように単に新しい行に進むでしょう。&lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: rgba(255,84,104,0.3);
+  border: 2px solid rgb(255,84,104);
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: white;
+  border: 1px solid black;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>通常フロー、およびブラウザーがデフォルトでどのようにレイアウトするかを理解したので、次にこのデフォルトの <code>display</code> を変更してデザインに必要なレイアウトを作成する方法を理解することに進みます。</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li>
+</ul>
diff --git a/files/ja/learn/css/css_layout/positioning/index.html b/files/ja/learn/css/css_layout/positioning/index.html
new file mode 100644
index 0000000000..085dce0054
--- /dev/null
+++ b/files/ja/learn/css/css_layout/positioning/index.html
@@ -0,0 +1,588 @@
+---
+title: 位置指定
+slug: Learn/CSS/CSS_layout/Positioning
+tags:
+  - Article
+  - Beginner
+  - CSS
+  - CodingScripting
+  - Guide
+  - Layout
+  - Positioning
+  - absolute
+  - fixed
+  - relative
+translation_of: Learn/CSS/CSS_layout/Positioning
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary"><span class="seoSummary">位置指定を使用すると、通常のドキュメントレイアウトフローから要素を取り出して異なるふるまいをさせることができます。 例えば、互いの上に重なったり、常にブラウザーのビューポート内の同じ場所に留まったりします。 この記事では、さまざまな {{cssxref("position")}} の値とその使い方について説明します。</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提知識:</th>
+   <td>HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、および CSS の機能の考え方（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>を学ぶ）。</td>
+  </tr>
+  <tr>
+   <th scope="row">学習目標:</th>
+   <td>CSS 位置指定がどのように機能するのかを学ぶこと。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>可能であれば、あなたのローカルコンピュータでの演習をお願いします — GitHub リポジトリから <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/0_basic-flow.html">0_basic-flow.html</a></code> のコピーを入手し（<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/0_basic-flow.html">ソースコードはここ</a>）、それを出発点として使用します。</p>
+
+<h2 id="Introducing_positioning" name="Introducing_positioning">位置指定の紹介</h2>
+
+<p>位置指定（Positioning、ポジショニング）の本来の趣旨は、興味深い効果を生み出すために、上記の基本的なドキュメントフローのふるまいを上書きできるようにすることです。 レイアウト内のいくつかのボックスの位置をデフォルトのレイアウトフローの位置からわずかに変更して、ちょっと風変わりでアンティーク調の感じにしたらどうでしょうか？ 位置指定はあなたのツールです。 あるいは、ページの他の部分の上に浮かぶ UI 要素を作成したり、ページをいくらスクロールしても常にブラウザーウィンドウ内の同じ場所に配置したいですか？ 位置指定はそのようなレイアウト作業を可能にします。</p>
+
+<p>HTML 要素に適用できるさまざまな種類の位置指定があります。 特定の種類の位置指定を要素でアクティブにするには、{{cssxref("position")}} プロパティを使用します。</p>
+
+<h3 id="Static_positioning" name="Static_positioning">静的位置指定</h3>
+
+<p>静的位置指定（Static positioning）は、すべての要素が取得するデフォルトです。 これは、「要素をドキュメントレイアウトフロー内の通常の位置に配置する — ここで見るべき特別なことは何もありません」を意味します。</p>
+
+<p>これを実演し、例をこれからのセクションのために準備するために、最初に HTML の2番目の {{htmlelement("p")}} に <code>positioned</code> の <code>class</code> を次のように追加します。</p>
+
+<pre class="brush: html notranslate">&lt;p class="positioned"&gt; ... &lt;/p&gt;</pre>
+
+<p>それでは、CSS の最後に次の規則を追加してください。</p>
+
+<pre class="brush: css notranslate">.positioned {
+  position: static;
+  background: yellow;
+}</pre>
+
+<p>保存してリフレッシュしても、2段落目の背景色が更新されていることを除けば、まったく違いはありません。 これは問題ありません。 前にも述べたように、静的位置指定はデフォルトのふるまいです！</p>
+
+<div class="note">
+<p><strong>注</strong>: この時点でのライブの例は <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html">1_static-positioning.html</a></code> にあります（<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html">ソースコードを見る</a>）。</p>
+</div>
+
+<h3 id="Relative_positioning" name="Relative_positioning">相対位置指定</h3>
+
+<p>相対位置指定（Relative positioning）は、最初に見ていく <code>position</code> の種類です。 これは静的位置指定と非常によく似ていますが、位置指定要素（positioned element）が通常のレイアウトフローで配置されたら、ページ上の他の要素と重なることも含んで最終的な位置を変更できるという点が異なります。 先に進んで、次のようにコード内の <code>position</code> の宣言を更新してください。</p>
+
+<pre class="brush: css notranslate">position: relative;</pre>
+
+<p>この段階で保存してリフレッシュしても、結果にまったく変化はありません。 それでは、どうやって要素の位置を変更するのでしょうか？ {{cssxref("top")}}、{{cssxref("bottom")}}、{{cssxref("left")}}、{{cssxref("right")}} の各プロパティを使用する必要があります。 これについては次のセクションで説明します。</p>
+
+<h3 id="Introducing_top_bottom_left_and_right" name="Introducing_top_bottom_left_and_right">top、bottom、left、right の紹介</h3>
+
+<p>{{cssxref("top")}}（上）、{{cssxref("bottom")}}（下）、{{cssxref("left")}}（左）、{{cssxref("right")}}（右）は {{cssxref("position")}} と一緒に使用され、位置指定要素の移動先を正確に指定します。 これを試すには、CSS の <code>.positioned</code> 規則に次の宣言を追加してください。</p>
+
+<pre class="brush: css notranslate">top: 30px;
+left: 30px;</pre>
+
+<div class="note">
+<p><strong>注</strong>: これらのプロパティの値は、論理的に想定される任意の<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">単位</a>（ピクセル、mm、rem、% など）をとることができます。</p>
+</div>
+
+<p>保存してリフレッシュすると、次のような結果になります。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Relative positioning&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;
+
+&lt;p class="positioned"&gt;By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.&lt;/p&gt;
+
+&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;
+
+&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+.positioned {
+  position: relative;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Introducing_top_bottom_left_and_right', '100%', 500) }}</p>
+
+<p>クールだよね？ Ok、おそらくこれはあなたが期待していたものではなかったでしょう — 上と左を指定したのに、なぜ下と右に移動したのでしょうか？ 最初は非論理的に聞こえるかもしれませんが、これは相対的位置指定が機能する方法です — 位置指定したボックスの指定した側を反対方向に押す見えない力を考える必要があります。 例えば、<code>top: 30px;</code> と指定した場合、力がボックスの上側を押して、箱の上側が 30px 下向きに移動します。</p>
+
+<div class="note">
+<p><strong>注</strong>: この時点でのライブの例は <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html">2_relative-positioning.html</a></code> にあります（<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html">ソースコードを見る</a>）。</p>
+</div>
+
+<h3 id="Absolute_positioning" name="Absolute_positioning">絶対位置指定</h3>
+
+<p>絶対位置指定（Absolute positioning）はとても異なる結果をもたらします。 次のようにコード内の <code>position</code> 宣言を変更してみましょう。</p>
+
+<pre class="brush: css notranslate">position: absolute;</pre>
+
+<p>保存してリフレッシュすると、次のようになります。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Absolute positioning&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;
+
+&lt;p class="positioned"&gt;By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.&lt;/p&gt;
+
+&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;
+
+&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+.positioned {
+  position: absolute;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Absolute_positioning', '100%', 420) }}</p>
+
+<p>まず最初に、ドキュメントフロー内にあるべき位置指定要素のギャップが存在しないことに注意してください。 1番目と3番目の要素はそれが存在しないので一緒になっています！ ある意味、これは事実です。 絶対位置指定要素は、通常のドキュメントレイアウトフローには存在しません。 その代わりに、それは他のすべてのものとは別のそれ自身の層の上にあります。 これは非常に便利です。 つまり、ページ上の他の要素のレイアウトを妨げない独立した UI 機能を作成できるということです。 例えば、ポップアップ情報ボックスやコントロールメニュー、ロールオーバーパネル、ページ上の任意の場所にドラッグアンドドロップできる UI 機能、等々です。</p>
+
+<p>次に、要素の位置が変更されたことに注意してください。 これは、{{cssxref("top")}}、{{cssxref("bottom")}}、{{cssxref("left")}}、{{cssxref("right")}} の絶対位置指定でのふるまいが異なるためです。 通常のドキュメントレイアウトフロー内での相対的な位置に基づいて要素を配置するのではなく, 要素がそれぞれの包含要素の側からあるべき距離を指定します。 したがって、この場合は、絶対位置指定要素は「包含要素」の上側から30ピクセル、左側から30ピクセルとなるようにします。 (この場合、「包含要素」とは、<strong>最初の包含ブロック</strong>（initial containing block）のことです。詳細については、以下のセクションを参照してください。)</p>
+
+<div class="note">
+<p><strong>注</strong>: 必要に応じて、要素のサイズを変更するために {{cssxref("top")}}、{{cssxref("bottom")}}、{{cssxref("left")}}、{{cssxref("right")}} を使用できます。 位置指定要素に <code>top: 0; bottom: 0; left: 0; right: 0; margin: 0;</code> を設定して、何が起こるか見てください！ 後で元に戻します。</p>
+</div>
+
+<div class="note">
+<p><strong>注</strong>: はい、マージンはまだ位置指定要素に影響します。 しかしながら、マージンの相殺はそうではありません。</p>
+</div>
+
+<div class="note">
+<p><strong>注</strong>: この時点でのライブの例は <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html">3_absolute-positioning.html</a></code> にあります（<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html">ソースコードを見る</a>）。</p>
+</div>
+
+<h3 id="Positioning_contexts" name="Positioning_contexts">位置指定コンテキスト</h3>
+
+<p>絶対位置指定要素の「包含要素」はどの要素でしょうか？ これは、位置指定要素の先祖の <code>position</code> プロパティに大きく依存します（<a href="/ja/docs/Web/CSS/Containing_block#Identifying_the_containing_block">包含ブロックの識別</a>を参照）。</p>
+
+<p>明示的に定義された <code>position</code> プロパティを持つ祖先要素がない場合、デフォルトではすべての祖先要素は静的位置を持ちます。 この結果、絶対位置指定要素は<strong>最初の包含ブロック</strong>（initial containing block）に含まれます。 最初の包含ブロックはビューポートの大きさを持ち、{{htmlelement("html")}} 要素を含むブロックでもあります。 簡単に言うと、絶対位置指定要素は {{htmlelement("html")}} 要素の外側に表示され、最初のビューポートを基準にして配置されます。</p>
+
+<p>位置指定要素は HTML ソースの {{htmlelement("body")}} 内にネストされていますが、最終的なレイアウトでは、ページの端の左上から30ピクセル離れています。 <strong>位置指定コンテキスト</strong>（positioning context） — 絶対位置指定要素がどの要素を基準にして配置されているか — を変更することができます。 これは、要素の先祖の1つに位置指定を設定することによって行われます — それを内部にネストしている要素の1つにです（内部にネストしていない要素を基準にしての配置はできません）。 これを実証するために、次の宣言を <code>body</code> 規則に追加してください。</p>
+
+<pre class="brush: css notranslate">position: relative;</pre>
+
+<p>これにより、次の結果が得られます。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Positioning context&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;
+
+&lt;p class="positioned"&gt;Now I'm absolutely positioned relative to the &lt;code&gt;&amp;lt;body&amp;gt;&lt;/code&gt; element, not the &lt;code&gt;&amp;lt;html&amp;gt;&lt;/code&gt; element!&lt;/p&gt;
+
+&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;
+
+&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+  position: relative;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+.positioned {
+  position: absolute;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Positioning_contexts', '100%', 420) }}</p>
+
+<p>位置指定要素は、{{htmlelement("body")}} 要素を基準にして配置されます。</p>
+
+<div class="note">
+<p><strong>注</strong>: この時点でのライブの例は <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html">4_positioning-context.html</a></code> にあります（<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html">ソースコードを見る</a>）。</p>
+</div>
+
+<h3 id="Introducing_z-index" name="Introducing_z-index">z-index の紹介</h3>
+
+<p>この絶対位置指定はすべて楽しいですが、まだ検討していないことがもう1つあります。 要素が重なり合ったときに、どの要素が他のどの要素の上に表われるかを決定するのは何でしょうか？ これまで見てきた例では、位置指定コンテキスト内には位置指定要素が1つしかなく、位置指定要素は位置指定されていない要素よりも優先されるため、一番上に表われます。 複数あるときはどうでしょうか？</p>
+
+<p>最初の段落も絶対位置指定にするために、CSS に次を追加してみてください。</p>
+
+<pre class="brush: css notranslate">p:nth-of-type(1) {
+  position: absolute;
+  background: lime;
+  top: 10px;
+  right: 30px;
+}</pre>
+
+<p>この時点で、最初の段落がライム色に着色され、ドキュメントフローの外に移動し、元の位置よりも少し上に配置されていることがわかります。 また、2つが重なったところでは、元の <code>.positioned</code> 段落の下にも重なっています。 これは、<code>.positioned</code> 段落がソース順の2番目の段落であり、ソース順の後ろに配置された要素がソース順の前に配置された要素よりも優先されるためです。</p>
+
+<p>重ね順を変更できますか？ はい、できます。 {{cssxref("z-index")}} プロパティを使うことで可能です。 「z-index」はz軸への参照です。 背景画像やドロップシャドウのオフセットなどを位置指定するために、水平（x軸）座標と垂直（y軸）座標を使用してウェブページについて説明したコースの前のポイントから思い出すことができます。 (0,0) はページ（または要素）の左上にあり、x軸とy軸はページの右下を横切っています（左から右の言語ならば）。</p>
+
+<p>ウェブページには、z軸もあります。 画面の表面から自分の顔に向かって走る想像上の線（または、画面の前に持ってきたい他の何か）です。 {{cssxref("z-index")}} の値は、位置指定要素がその軸のどこにあるかに影響します。 正の値はそれらを積み重ねの上に移動し、負の値はそれらを積み重ねの下に移動します。 デフォルトでは、位置指定要素はすべて <code>auto</code> の <code>z-index</code> を持ち、これは事実上 0 です。</p>
+
+<p>積み重ね順を変更するには、<code>p:nth-of-type(1)</code> 規則に次の宣言を追加してみてください。</p>
+
+<pre class="brush: css notranslate">z-index: 1;</pre>
+
+<p>これで完成した例が表示され、ライム色の段落が一番上になります。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;z-index&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;
+
+&lt;p class="positioned"&gt;Now I'm absolutely positioned relative to the &lt;code&gt;&amp;lt;body&amp;gt;&lt;/code&gt; element, not the &lt;code&gt;&amp;lt;html&amp;gt;&lt;/code&gt; element!&lt;/p&gt;
+
+&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;
+
+&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+  position: relative;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+.positioned {
+  position: absolute;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}
+
+p:nth-of-type(1) {
+  position: absolute;
+  background: lime;
+  top: 10px;
+  right: 30px;
+  z-index: 1;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Introducing_z-index', '100%', 400) }}</p>
+
+<p><code>z-index</code> は、無単位のインデックス値のみを受け入れることに注意してください。 1つの要素をz軸の 23 ピクセル上に配置するように指定することはできません — そのようには機能しません。 より大きい値はより小さい値より上になり、どんな値を使うかはあなた次第です。 2 と 3 を使用するのと、300 と 40000 では同じ効果が得られます。</p>
+
+<div class="note">
+<p><strong>注</strong>: この時点でのライブの例は <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html">5_z-index.html</a></code> にあります（<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html">ソースコードを見る</a>）。</p>
+</div>
+
+<h3 id="Fixed_positioning" name="Fixed_positioning">固定位置指定</h3>
+
+<p>固定位置指定（Fixed positioning）を見てみましょう。 これは絶対位置指定とまったく同じように機能しますが、1つの重要な違いがあります。 絶対位置指定では、要素をその最も近くで位置指定された祖先 (the initial containing block if there isn't one) に対して固定しますが、<strong>固定位置指定</strong>では、ビューポートの見えている部分に対して<em>常に</em>固定します。 つまり、ページのスクロール量に関係なく常に表示される永続的なナビゲーションメニューのような、固定された便利な UI アイテムを作成できることを意味します。</p>
+
+<p>簡単な例をまとめて、意味を説明しましょう。 まず最初に、CSS から既存の <code>p:nth-of-type(1)</code> 規則と <code>.positioned</code> 規則を削除します。</p>
+
+<p>それでは、次のように <code>body</code> 規則を更新して <code>position: relative;</code> 宣言を削除して、固定の高さを追加します。</p>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  height: 1400px;
+  margin: 0 auto;
+}</pre>
+
+<p>それでは、{{htmlelement("h1")}} 要素に <code>position: fixed;</code> を与え、ビューポートの中央上部に配置します。 CSS に次の規則を追加してください。</p>
+
+<pre class="brush: css notranslate">h1 {
+  position: fixed;
+  top: 0;
+  width: 500px;
+  margin-top: 0;
+  background: white;
+  padding: 10px;
+}</pre>
+
+<p><code>top: 0;</code> は、画面の上部に貼り付けるために必要です。 見出しにコンテンツ列と同じ幅を指定し、それからそれに白い背景といくらかのパディングとマージンを与えるので、コンテンツはその下に見えないでしょう。</p>
+
+<p>保存してリフレッシュすると、見出しが固定されたままで、コンテンツはスクロールアップすると見出しの下に消えるように見える、ちょっとした効果があります。 しかし、これをもっと改善することができます — 現時点では、コンテンツの一部は見出しの下から動き始めます。 これは、位置指定された見出しがドキュメントフローに表われなくなり、残りのコンテンツが最上部に移動するためです。 それを少しだけ下げる必要があります。 これを行うには、最初の段落に上部マージンを設定します。 次を追加します。</p>
+
+<pre class="brush: css notranslate">p:nth-of-type(1) {
+  margin-top: 60px;
+}</pre>
+
+<p>完成した例を見てください。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Fixed positioning&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;
+
+&lt;p class="positioned"&gt;I'm not positioned any more...&lt;/p&gt;
+
+&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;
+
+&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  height: 1400px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+h1 {
+  position: fixed;
+  top: 0px;
+  width: 500px;
+  background: white;
+  padding: 10px;
+}
+
+p:nth-of-type(1) {
+  margin-top: 60px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Fixed_positioning', '100%', 400) }}</p>
+
+<div class="note">
+<p><strong>注</strong>: この時点でのライブの例は <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html">6_fixed-positioning.html</a></code> にあります（<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html">ソースコードを見る</a>）。</p>
+</div>
+
+<h3 id="position_sticky" name="position_sticky">position: sticky</h3>
+
+<p><code>position: sticky</code> と呼ばれる利用可能な別の <code>position</code> の値があります。 これは他よりもやや新しいです。 これは基本的に相対位置と固定位置のハイブリッドであり、位置指定要素は、特定のしきい値の位置（例えば、ビューポートの上部から 10px）までスクロールされるまで相対位置指定されたように動作し、その後固定されます。 これは、ナビゲーションバーを特定の位置までページと共にスクロールさせ、その後ページの上部に固定するなどの目的で使用できます。</p>
+
+<div id="Sticky_1">
+<div class="hidden">
+<h6 id="Sticky_positioning_example">Sticky positioning example</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Sticky positioning&lt;/h1&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;div class="positioned"&gt;Sticky&lt;/div&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;       </pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+.positioned {
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  padding: 10px;
+  margin: 10px;
+  border-radius: 5px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.positioned {
+  position: sticky;
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Sticky_1', '100%', 200) }}</p>
+
+<p>おもしろくて一般的な <code>position: sticky</code> の使い方はスクロールするインデックスページを作成することです。 そこに到達すると異なる見出しがページの上部に固定されます。 そのような例のマークアップは次のようになります。</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Sticky positioning&lt;/h1&gt;
+
+&lt;dl&gt;
+    &lt;dt&gt;A&lt;/dt&gt;
+    &lt;dd&gt;Apple&lt;/dd&gt;
+    &lt;dd&gt;Ant&lt;/dd&gt;
+    &lt;dd&gt;Altimeter&lt;/dd&gt;
+    &lt;dd&gt;Airplane&lt;/dd&gt;
+    &lt;dt&gt;B&lt;/dt&gt;
+    &lt;dd&gt;Bird&lt;/dd&gt;
+    &lt;dd&gt;Buzzard&lt;/dd&gt;
+    &lt;dd&gt;Bee&lt;/dd&gt;
+    &lt;dd&gt;Banana&lt;/dd&gt;
+    &lt;dd&gt;Beanstalk&lt;/dd&gt;
+    &lt;dt&gt;C&lt;/dt&gt;
+    &lt;dd&gt;Calculator&lt;/dd&gt;
+    &lt;dd&gt;Cane&lt;/dd&gt;
+    &lt;dd&gt;Camera&lt;/dd&gt;
+    &lt;dd&gt;Camel&lt;/dd&gt;
+    &lt;dt&gt;D&lt;/dt&gt;
+    &lt;dd&gt;Duck&lt;/dd&gt;
+    &lt;dd&gt;Dime&lt;/dd&gt;
+    &lt;dd&gt;Dipstick&lt;/dd&gt;
+    &lt;dd&gt;Drone&lt;/dd&gt;
+    &lt;dt&gt;E&lt;/dt&gt;
+    &lt;dd&gt;Egg&lt;/dd&gt;
+    &lt;dd&gt;Elephant&lt;/dd&gt;
+    &lt;dd&gt;Egret&lt;/dd&gt;
+&lt;/dl&gt;
+</pre>
+
+<p>CSS は次のようになります。 通常フローでは、{{htmlelement("dt")}} 要素はコンテンツとともにスクロールします。 {{htmlelement("dt")}} 要素に <code>position: sticky</code> を 0 の {{cssxref("top")}} の値と共に追加すると、サポートするブラウザーでは、その位置に達すると、見出しをビューポートの一番上に固定します。 それ以降の各見出しは、その位置までスクロールアップするときに、前の見出しを置き換えます。</p>
+
+<pre class="brush: css notranslate">dt {
+  background-color: black;
+  color: white;
+  padding: 10px;
+  position: sticky;
+  top: 0;
+  left: 0;
+  margin: 1em 0;
+}
+</pre>
+
+<div id="Sticky_2">
+<div class="hidden">
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  height: 1400px;
+  margin: 0 auto;
+}
+
+dt {
+  background-color: black;
+  color: white;
+  padding: 10px;
+  position: sticky;
+  top: 0;
+  left: 0;
+  margin: 1em 0;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Sticky positioning&lt;/h1&gt;
+
+&lt;dl&gt;
+    &lt;dt&gt;A&lt;/dt&gt;
+    &lt;dd&gt;Apple&lt;/dd&gt;
+    &lt;dd&gt;Ant&lt;/dd&gt;
+    &lt;dd&gt;Altimeter&lt;/dd&gt;
+    &lt;dd&gt;Airplane&lt;/dd&gt;
+    &lt;dt&gt;B&lt;/dt&gt;
+    &lt;dd&gt;Bird&lt;/dd&gt;
+    &lt;dd&gt;Buzzard&lt;/dd&gt;
+    &lt;dd&gt;Bee&lt;/dd&gt;
+    &lt;dd&gt;Banana&lt;/dd&gt;
+    &lt;dd&gt;Beanstalk&lt;/dd&gt;
+    &lt;dt&gt;C&lt;/dt&gt;
+    &lt;dd&gt;Calculator&lt;/dd&gt;
+    &lt;dd&gt;Cane&lt;/dd&gt;
+    &lt;dd&gt;Camera&lt;/dd&gt;
+    &lt;dd&gt;Camel&lt;/dd&gt;
+    &lt;dt&gt;D&lt;/dt&gt;
+    &lt;dd&gt;Duck&lt;/dd&gt;
+    &lt;dd&gt;Dime&lt;/dd&gt;
+    &lt;dd&gt;Dipstick&lt;/dd&gt;
+    &lt;dd&gt;Drone&lt;/dd&gt;
+    &lt;dt&gt;E&lt;/dt&gt;
+    &lt;dd&gt;Egg&lt;/dd&gt;
+    &lt;dd&gt;Elephant&lt;/dd&gt;
+    &lt;dd&gt;Egret&lt;/dd&gt;
+&lt;/dl&gt;
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Sticky_2', '100%', 200) }}</p>
+
+<div class="note">
+<p><strong>注</strong>: このライブの例は <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/7_sticky-positioning.html">7_sticky-positioning.html</a></code> にあります（<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html">ソースコードを見る</a>）。</p>
+</div>
+
+<h2 id="スキルをテストしましょう!">スキルをテストしましょう!</h2>
+
+<p>この記事の最後に到達しましたが、最も大事な情報を覚えていますか？次に移動する前に、この情報を保持しているか検証するテストがあります — <a href="/ja/docs/Learn/CSS/CSS_layout/Position_skills">Test your skills: Positioning</a> を見てください。</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>私はあなたが基本的な位置指定と一緒に遊ぶことができて楽しかったと確信しています。 これは、レイアウト全体に使用する方法ではありませんが、ご覧のとおり、それが適しているタスクはたくさんあります。</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("position")}} プロパティのリファレンス。</li>
+ <li>いくつかのより有用なアイデアのための<a href="/ja/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">実用的な位置指定の例</a>。</li>
+</ul>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li>
+</ul>
diff --git a/files/ja/learn/css/css_layout/practical_positioning_examples/index.html b/files/ja/learn/css/css_layout/practical_positioning_examples/index.html
new file mode 100644
index 0000000000..d7c5601202
--- /dev/null
+++ b/files/ja/learn/css/css_layout/practical_positioning_examples/index.html
@@ -0,0 +1,421 @@
+---
+title: 実用的な位置指定の例
+slug: Learn/CSS/CSS_layout/Practical_positioning_examples
+tags:
+  - Article
+  - Beginner
+  - CSS
+  - CodingScripting
+  - Guide
+  - Layout
+  - Learn
+  - absolute
+  - fixed
+  - relative
+translation_of: Learn/CSS/CSS_layout/Practical_positioning_examples
+---
+<div>{{LearnSidebar}}</div>
+
+<div></div>
+
+<p class="summary"><span class="seoSummary">この記事では、位置指定でどのようなことができるかを説明するために、実際に使用されるいくつかの例を作成する方法を示します。</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提知識:</th>
+   <td>HTML の基礎（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、および CSS の機能の考え方（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>を学ぶ）。</td>
+  </tr>
+  <tr>
+   <th scope="row">学習目標:</th>
+   <td>位置指定の実用性を理解すること。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="A_tabbed_info-box" name="A_tabbed_info-box">タブ付き情報ボックス</h2>
+
+<p>最初の例は、古典的なタブ付きの情報ボックスです — これは、たくさんの情報を小さな領域にまとめたいときによく使われる機能です。 これには、戦略/戦争ゲームのような情報量の多いアプリ、画面が狭くスペースが限られているモバイル版のウェブサイト、および UI 全体を埋め尽くさずに多くの情報を利用できるようにしたいコンパクトな情報ボックスが含まれます。 これらを単純化した例は、完成すると次のようになります。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13368/tabbed-info-box.png" style="display: block; height: 400px; margin: 0px auto; width: 450px;"></p>
+
+<div class="note">
+<p><strong>注</strong>: 完成した例は、<a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">info-box.html</a> でライブで確認できます（<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">ソースコード</a>）。 記事のこのセクションで何を構築するのかを理解するために、ぜひチェックしてください。</p>
+</div>
+
+<p>「別々のタブを別々のウェブページとして作成し、タブをクリックして別々のページに移動させて同様の効果を生み出すだけでよいのではないでしょうか？」と考えるかもしれません。 このコードならもっと簡単なものになりますが、実際には個々の「ページ」ビューは実際には新しくロードされたウェブページになるため、ビュー間で情報を保存し、この機能をより大きな UI デザインに統合するのは難しくなります。 さらに、いわゆる「シングルページアプリ」は、特にモバイルウェブ UI の場合、非常に人気が高まっています。 なぜなら、すべてのコンテンツを表示するために必要な HTTP リクエストの数が減り、パフォーマンスが向上するからです。</p>
+
+<div class="note">
+<p><strong>注</strong>: ウェブ開発者の中には、一度に1ページの情報だけをロードし、<a href="/ja/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a> などの JavaScript 機能を使用して表示される情報を動的に変更することで、さらに問題を解決するものもあります。 しかし、学習の現時点では、物事をできるだけシンプルに保ちたいと思います。 後で JavaScript がいくつかありますが、ほんの少しだけです。</p>
+</div>
+
+<p>まず始めに、出発点の HTML ファイル <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box-start.html">info-box-start.html</a> のローカルコピーを作成してください。 これをローカルコンピュータの適当な場所に保存して、テキストエディタで開きます。 <code>body</code> に含まれる HTML を見てみましょう。</p>
+
+<pre class="brush: html">&lt;section class="info-box"&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a href="#" class="active"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#"&gt;Tab 3&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+  &lt;div class="panels"&gt;
+    &lt;article class="active-panel"&gt;
+      &lt;h2&gt;The first tab&lt;/h2&gt;
+
+      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.&lt;/p&gt;
+    &lt;/article&gt;
+    &lt;article&gt;
+      &lt;h2&gt;The second tab&lt;/h2&gt;
+
+      &lt;p&gt;This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.&lt;/p&gt;
+    &lt;/article&gt;
+    &lt;article&gt;
+      &lt;h2&gt;The third tab&lt;/h2&gt;
+
+      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!&lt;/p&gt;
+
+      &lt;ol&gt;
+        &lt;li&gt;dui neque eleifend lorem, a auctor libero turpis at sem.&lt;/li&gt;
+        &lt;li&gt;Aliquam ut porttitor urna.&lt;/li&gt;
+        &lt;li&gt;Nulla facilisi&lt;/li&gt;
+      &lt;/ol&gt;
+    &lt;/article&gt;
+  &lt;/div&gt;
+&lt;/section&gt;</pre>
+
+<p>それで、ここに {{htmlelement("ul")}} と {{htmlelement("div")}} を含む <code>info-box</code> のクラス（<code>class</code>）を持つ {{htmlelement("section")}} 要素があります。 番号なしリストには3つのリスト項目があり、その中にリンクがあります。 これは、コンテンツパネルを表示するためにクリックする実際のタブになります。 <code>&lt;div&gt;</code> には、各タブに対応するコンテンツパネルを構成する3つの {{htmlelement("article")}} 要素が含まれています。 各パネルにはいくつかのサンプルのコンテンツが含まれています。</p>
+
+<p>ここでの考え方は、標準の水平ナビゲーションメニューのようにタブをスタイルし、絶対位置指定を使用して互いの上に重なるようにパネルをスタイルするということです。 また、タブが押されたときに対応するパネルを表示し、タブ自体をスタイルするためにページに含める JavaScript も少し用意します。 現段階では JavaScript 自体を理解する必要はありませんが、基本的な <a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript</a> をできるだけ早く学習することを検討するべきです — UI 機能が複雑になるほど、欲しい機能を実装するために JavaScript が必要になるでしょう。</p>
+
+<h3 id="General_setup" name="General_setup">一般的な設定</h3>
+
+<p>まず、{{htmlelement("style")}} の開始タグと終了タグの間に次を追加します。</p>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}</pre>
+
+<p>これは、ページに サンセリフ（<code>sans-serif</code>）フォントを設定し、<code>border-box</code> の {{cssxref("box-sizing")}} モデルを使い、{{htmlelement("body")}} からデフォルトのマージンを取り除くための一般的な設定です。</p>
+
+<p>次に、前の CSS のすぐ下に次を追加します。</p>
+
+<pre class="brush: css">.info-box {
+  width: 450px;
+  height: 400px;
+  margin: 0 auto;
+}</pre>
+
+<p>これはコンテンツに特定の幅と高さを設定し、古い <code>margin: 0 auto</code> トリックを使用して画面の中央に配置します。 以前のコースでは、可能であればコンテンツのコンテナに固定の高さを設定しないことをお勧めしました。 タブのコンテンツは固定されているので、この状況では問題ありません。 また、異なる高さで異なるタブを表示するのも少々不快です。</p>
+
+<h3 id="Styling_our_tabs" name="Styling_our_tabs">タブのスタイリング</h3>
+
+<p>今度はタブをタブのようにスタイルします — 基本的にこれらは水平ナビゲーションメニューですが、コースで以前見たようにクリックされたときに異なるウェブページをロードする代わりに異なるパネルを同じページに表示します。 まず、CSS の一番下に次の規則を追加して、番号なしリストからデフォルトの {{cssxref("padding-left")}} と {{cssxref("margin-top")}} を削除します。</p>
+
+<pre class="brush: css">.info-box ul {
+  padding-left: 0;
+  margin-top: 0;
+}</pre>
+
+<div class="note">
+<p><strong>注</strong>: この例では、チェーンの先頭に <code>.info-box</code> を持つ子孫セレクタを使用しています。 これは、他のコンテンツがすでに含まれているページに、ページの他の部分に適用されているスタイルを妨げることなく、この機能を挿入できるようにするためです。</p>
+</div>
+
+<p>次に、水平方向のタブのスタイルを設定します。 リスト項目は、一列に並ぶようにすべて左にフロートさせ、行頭記号（bullet）を取り除くために {{cssxref("list-style-type")}} を <code>none</code> に設定し、{{cssxref("width")}} を <code>150px</code> に設定しているので、それらは情報ボックス全体にうまく収まります。 {{htmlelement("a")}} 要素は {{cssxref("display")}}<code>: inline-block</code> に設定されているので、一列に並んでいてもスタイル可能で、他のさまざまなプロパティを使用して、タブボタンに適したスタイルになっています。</p>
+
+<p>次の CSS を追加してください。</p>
+
+<pre class="brush: css">.info-box li {
+  float: left;
+  list-style-type: none;
+  width: 150px;
+}
+
+.info-box li a {
+  display: inline-block;
+  text-decoration: none;
+  width: 100%;
+  line-height: 3;
+  background-color: red;
+  color: black;
+  text-align: center;
+}</pre>
+
+<p>最後に、このセクションでは、リンク状態にいくつかのスタイルを設定します。 最初に、フォーカス時やホバー時にタブの状態が異なるように {{cssxref(":focus")}} と {{cssxref(":hover")}} の状態を設定し、ユーザーに視覚的なフィードバックを提供します。 次に、タブの1つに <code>active</code> のクラスが存在する場合、それに同じスタイルを設定する規則を設定します。 これをタブがクリックされたときに JavaScript を使用して設定します。 次の CSS を他のスタイルの下に配置します。</p>
+
+<pre class="brush: css">.info-box li a:focus, .info-box li a:hover {
+  background-color: #a60000;
+  color: white;
+}
+
+.info-box li a.active {
+  background-color: #a60000;
+  color: white;
+}</pre>
+
+<h3 id="Styling_the_panels" name="Styling_the_panels">パネルのスタイリング</h3>
+
+<p>次の仕事はパネルをスタイルすることです。 さあ行きましょう！</p>
+
+<p>まず最初に、<code>.panels</code> の {{htmlelement("div")}} コンテナをスタイルするために次の規則を追加します。 ここでは、パネルが情報ボックスの内側にぴったり収まるように固定の {{cssxref("height")}} を設定し、{{htmlelement("html")}} ではなくそれに対して相対的に位置指定子要素を配置できるように {{cssxref("position")}}<code>: relative</code> で {{htmlelement("div")}} を位置指定コンテキストとして設定します。 最後にレイアウトに影響を与えないように、最後に上記 CSS で設定したフロートを {{cssxref("clear")}} します。</p>
+
+<pre class="brush: css">.info-box .panels {
+  height: 352px;
+  position: relative;
+  clear: both;
+}</pre>
+
+<p>このセクションの最後に、パネルを構成する個々の {{htmlelement("article")}} 要素をスタイルします。 最初に追加する規則は、パネルを絶対位置指定して、それらがすべて {{htmlelement("div")}} コンテナの {{cssxref("top")}} と {{cssxref("left")}} にぴったり合うように配置することです — これは、パネルを互いの上に重ねて配置するという、このレイアウト機能全体にとって絶対に重要な部分です。 この規則はまた、パネルにコンテナと同じ設定の高さを与え、コンテンツにいくつかの {{cssxref("padding")}}、テキストの {{cssxref("color")}}、および {{cssxref("background-color")}} を与えます。</p>
+
+<p>ここで追加する2番目の規則は、<code>active-panel</code> のクラスが設定されているパネルに 1 の <code>{{cssxref("z-index")}}</code> が適用されるようにすることです。 これにより、他のパネルの上に重ねて置かれます（位置指定要素はデフォルトで 0 の <code>z-index</code> を持ち、これは他のパネルを下に置きます）。 繰り返しますが、適切なタイミングで JavaScript を使用してこのクラスを追加します。</p>
+
+<pre class="brush: css">.info-box article {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 352px;
+  padding: 10px;
+  color: white;
+  background-color: #a60000;
+}
+
+.info-box .active-panel {
+  z-index: 1;
+}</pre>
+
+<h3 id="Adding_our_JavaScript" name="Adding_our_JavaScript">JavaScript を追加する</h3>
+
+<p>この機能を動作させるための最後のステップは、JavaScript を追加することです。 {{htmlelement("script")}} の開始タグと終了タグの間に記述されているとおりに、次のコードブロックを挿入します（これらは HTML コンテンツの下方にあります）。</p>
+
+<pre>var tabs = document.querySelectorAll('.info-box li a');
+var panels = document.querySelectorAll('.info-box article');
+
+for(i = 0; i &lt; tabs.length; i++) {
+  var tab = tabs[i];
+  setTabHandler(tab, i);
+}
+
+function setTabHandler(tab, tabPos) {
+  tab.onclick = function() {
+    for(i = 0; i &lt; tabs.length; i++) {
+      tabs[i].className = '';
+    }
+
+    tab.className = 'active';
+
+    for(i = 0; i &lt; panels.length; i++) {
+      panels[i].className = '';
+    }
+
+    panels[tabPos].className = 'active-panel';
+  }
+}</pre>
+
+<p>このコードは次のことを行います。</p>
+
+<ul>
+ <li>最初に、すべてのタブとすべてのパネルへの参照を <code>tabs</code> と <code>panels</code> と呼ばれる2つの変数に保存するので、後で簡単に使うことができます。</li>
+ <li>次に、<code>for</code> ループを使用してすべてのタブを巡回し、それぞれに対して <code>setTabHandler()</code> という関数を実行します。 これにより、各タブをクリックしたときに発生するべき機能が設定されます。 実行されると、関数はそれが実行されている特定のタブへの参照と、<code>tabs</code> 配列内のタブの位置を識別するインデックス番号 <code>i</code> が渡されます。</li>
+ <li><code>setTabHandler()</code> 関数では、タブに <code>onclick</code> イベントハンドラを設定していて、タブをクリックすると次のことが起こります。
+  <ul>
+   <li><code>for</code> ループで、すべてのタブを巡回し、それらに存在するクラスをすべて削除します。</li>
+   <li>クリックされたタブに <code>active</code> のクラスが設定されます。 このクラスには、パネルのスタイル設定と同じ {{cssxref("color")}} と {{cssxref("background-color")}} をタブに設定する CSS の規則が関連付けられていることを以前にも説明しました。</li>
+   <li><code>for</code> ループは、すべてのパネルを巡回し、それらに存在するクラスをすべて削除します。</li>
+   <li>クリックされたタブに対応するパネルに <code>active-panel</code> のクラスが設定されます。 このクラスには、{{cssxref("z-index")}} を 1 に設定して他のパネルの上に表示させる CSS の規則が関連付けられていることを以前にも説明しました。</li>
+  </ul>
+ </li>
+</ul>
+
+<p>最初の例はこれで終わりです。 2番目の例で追加しますので、コードを開いたままにしてください。</p>
+
+<h2 id="A_fixed_position_tabbed_info-box" name="A_fixed_position_tabbed_info-box">固定位置のタブ付き情報ボックス</h2>
+
+<p>2番目の例では、最初の例（情報ボックス）を取り上げて、それをフルウェブページのコンテキストに追加します。 それだけではありません — ブラウザーウィンドウ内で同じ位置に留まるように固定位置を指定します。 メインコンテンツがスクロールしても、情報ボックスは画面上の同じ位置に留まります。 完成した例は次のようになります。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13364/fixed-info-box.png" style="border-style: solid; border-width: 1px; display: block; height: 585px; margin: 0px auto; width: 1118px;"></p>
+
+<div class="note">
+<p><strong>注</strong>: 完成した例は、<a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/fixed-info-box.html">fixed-info-box.html</a> でライブで確認できます（<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/fixed-info-box.html">ソースコード</a>）。 記事のこのセクションで何を構築するのかを理解するために、ぜひチェックしてください。</p>
+</div>
+
+<p>出発点として、記事の最初のセクションで完成させた例を使用するか、Github リポジトリから <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">info-box.html</a> のローカルコピーを作成することができます。</p>
+
+<h3 id="HTML_additions" name="HTML_additions">HTML の追加</h3>
+
+<p>まず第一に、ウェブサイトのメインコンテンツを表すために追加の HTML が必要です。 既存のセクションの直前で、開始 {{htmlelement("body")}} タグのすぐ下に次の {{htmlelement("section")}} を追加します。</p>
+
+<pre class="brush: html">&lt;section class="fake-content"&gt;
+  &lt;h1&gt;Fake content&lt;/h1&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+&lt;/section&gt;</pre>
+
+<div class="note">
+<p><strong>注</strong>: お好みにより、本物のコンテンツで偽のコンテンツを自由に変更してもかまいません。</p>
+</div>
+
+<h3 id="Changes_to_the_existing_CSS" name="Changes_to_the_existing_CSS">既存の CSS への変更</h3>
+
+<p>次に、情報ボックスを配置して位置指定するために、既存の CSS に若干の変更を加える必要があります。 <code>.info-box</code> の規則を変更して、<code>margin: 0 auto;</code> を取り除き（情報ボックスを中央に配置する必要はもうありません）、{{cssxref("position")}}<code>: fixed;</code> を追加して、ブラウザーのビューポートの {{cssxref("top")}} に貼り付けます。</p>
+
+<p>これは今、次のようになるはずです。</p>
+
+<pre class="brush: css">.info-box {
+  width: 450px;
+  height: 400px;
+  position: fixed;
+  top: 0;
+}</pre>
+
+<h3 id="Styling_the_main_content" name="Styling_the_main_content">メインコンテンツのスタイリング</h3>
+
+<p>この例に残された唯一のことは、メインコンテンツに何らかのスタイルを提供することです。 CSS の残りの部分の下に次の規則を追加します。</p>
+
+<pre class="brush: css">.fake-content {
+  background-color: #a60000;
+  color: white;
+  padding: 10px;
+  height: 2000px;
+  margin-left: 470px;
+}</pre>
+
+<p>まず、情報ボックスパネルと同じ {{cssxref("background-color")}}、{{cssxref("color")}}、および {{cssxref("padding")}} をコンテンツに与えます。 それから、それを右に動かすために大きな {{cssxref("margin-left")}} を与えて、情報ボックスが収まるスペースを作り、他に何も重ならないようにします。</p>
+
+<p>これで2番目の例は終わりです。 3つ目も同じように面白いと思います。</p>
+
+<h2 id="A_sliding_hidden_panel" name="A_sliding_hidden_panel">スライド式隠しパネル</h2>
+
+<p>ここで紹介する最後の例は、アイコンを押すだけで画面にスライドして現れたり消えたりするパネルです。 これは、前述のように、モバイルレイアウトのような、有用なコンテンツの代わりにメニューや情報パネルを表示して、画面の大部分を使い果たしたくない、使用可能な画面スペースが小さい状況では一般的です。</p>
+
+<p>完成した例は次のようになります。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13366/hidden-sliding-panel.png" style="border-style: solid; border-width: 1px; display: block; height: 521px; margin: 0px auto; width: 950px;"></p>
+
+<div class="note">
+<p><strong>注</strong>: 完成した例は、<a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel.html">hidden-info-panel.html</a> でライブで確認できます（<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel.html">ソースコード</a>）。 記事のこのセクションで何を構築するのかを理解するために、ぜひチェックしてください。</p>
+</div>
+
+<p>まず始めに、Github リポジトリから <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel-start.html">hidden-info-panel-start.html</a> のローカルコピーを作成します。 これは前の例から続いていないので、新鮮な出発点ファイルが必要です。 ファイル内の HTML を見てみましょう。</p>
+
+<pre class="brush: css">&lt;label for="toggle"&gt;❔&lt;/label&gt;
+&lt;input type="checkbox" id="toggle"&gt;
+&lt;aside&gt;
+
+  ...
+
+&lt;/aside&gt;</pre>
+
+<p>{{htmlelement("label")}} 要素と {{htmlelement("input")}} 要素から始めましょう — <code>&lt;label&gt;</code> 要素は通常、アクセシビリティの目的でテキストラベルをフォーム要素に関連付けるために使用します（スクリーンリーダーのユーザーが、どの説明がどのフォーム要素に対応しているかを確認できるようにします）。 ここでは、<code>for</code> 属性と <code>id</code> 属性を使用して <code>&lt;input&gt;</code> チェックボックスに関連付けられています。</p>
+
+<div class="note">
+<p><strong>注</strong>: 情報アイコンとして機能するために、HTML に特別な疑問符文字を入れました。 これは、パネルを表示/非表示にするために押されるボタンを表します。</p>
+</div>
+
+<p>ここでは、これらの要素を少し異なる目的で使用します — <code>&lt;label&gt;</code> 要素のもう1つの便利な副作用は、チェックボックス自体だけでなく、チェックボックスのラベルをクリックしてチェックボックスをチェックできることです。 これはよく知られた<a href="https://css-tricks.com/the-checkbox-hack/">チェックボックスハック</a>（英語）をもたらしました。 それはボタンを切り替えることによって要素を制御する JavaScript フリーの方法を提供します。 制御する要素は、他の2つに続く {{htmlelement("aside")}} 要素です（簡潔にするために、上記のコードリストからそのコンテンツを省略しました）。</p>
+
+<p>以下のセクションでは、これがどのように機能するのかを説明します。</p>
+
+<h3 id="Styling_the_form_elements" name="Styling_the_form_elements">フォーム要素のスタイリング</h3>
+
+<p>まずフォーム要素を扱いましょう — {{htmlelement("style")}} タグの間に次の CSS を追加します。</p>
+
+<pre class="brush: css">label[for="toggle"] {
+  font-size: 3rem;
+  position: absolute;
+  top: 4px;
+  right: 5px;
+  z-index: 1;
+  cursor: pointer;
+}
+
+input[type="checkbox"] {
+  position: absolute;
+  top: -100px;
+}</pre>
+
+<p>最初の規則は <code>&lt;label&gt;</code> をスタイルします。 ここでは、次のことをしています。</p>
+
+<ul>
+ <li>アイコンを見やすく大きくするには、大きい {{cssxref("font-size")}} を設定します。</li>
+ <li>それに {{cssxref("position")}}<code>: absolute</code> を設定し、それを右上隅にうまく配置するために {{cssxref("top")}} と {{cssxref("right")}} を使用しました。</li>
+ <li>それに 1 の {{cssxref("z-index")}} を設定します — これは、情報パネルがスタイル設定されて表示されるときに、アイコンが隠れないようにし、アイコンがその上に表示されるので、もう一度押すと情報パネルを非表示にできます。</li>
+ <li>アイコンが何か面白いことをしていることをユーザーに視覚的に知らせるために、{{cssxref("cursor")}} のプロパティを使用して、マウスポインタをアイコン上に移動したときにマウスポインタをハンドポインタに変更します（リンク上にあるときに表示されるもののように）。</li>
+</ul>
+
+<p>2番目の規則は、実際のチェックボックスの <code>&lt;input&gt;</code> 要素に {{cssxref("position")}}<code>: absolute</code> を設定し、それを画面上部の範囲外に離すことで隠します。 実際の UI でこれを見たくありません。</p>
+
+<h3 id="Styling_the_panel" name="Styling_the_panel">パネルのスタイリング</h3>
+
+<p>今度は実際のスライド式パネル自体をスタイルする時が来ました。 CSS の最後に次の規則を追加してください。</p>
+
+<pre class="brush: css">aside {
+  background-color: #a60000;
+  color: white;
+
+  width: 340px;
+  height: 100%;
+  padding: 0 20px;
+
+  position: fixed;
+  top: 0;
+  right: -370px;
+
+  transition: 0.6s all;
+}</pre>
+
+<p>ここではたくさんのことが起こっています — 少しずつ説明しましょう。</p>
+
+<ul>
+ <li>まず、情報ボックスに簡単な {{cssxref("background-color")}} と {{cssxref("color")}} を設定します。</li>
+ <li>次に、パネルに固定の {{cssxref("width")}} を設定し、その {{cssxref("height")}} をブラウザーのビューポート全体の高さにします。</li>
+ <li>少し間隔を空けるために水平方向の {{cssxref("padding")}} も含まれています。</li>
+ <li>次に、パネルに {{cssxref("position")}}<code>: fixed;</code> を設定して、ページにスクロールするコンテンツがある場合でも、パネル上では常に同じ場所に表示されるようにします。 それをビューポートの {{cssxref("top")}} に接着し、デフォルトで {{cssxref("right")}} が画面外になるように設定します。</li>
+ <li>最後に、要素に {{cssxref("transition")}} を設定します。 遷移は、単に突然「オン」、「オフ」になるのではなく、状態間の変化を滑らかに行わせることを可能にする興味深い機能です。 この場合、チェックボックスがオンになったときにパネルを画面上で滑らかにスライドさせることを目的としています。 （言い換えれば、疑問符のアイコンをクリックすると — <code>&lt;label&gt;</code> をクリックすると、関連するチェックボックスがオンになることを忘れないでください！ これは、ハックです。） あなたはもっと多くを学ぶでしょう...</li>
+</ul>
+
+<h3 id="Setting_the_checked_state" name="Setting_the_checked_state">チェック状態を設定する</h3>
+
+<p>追加する CSS の最後の部分がもう1つあります。 CSS の下部に次のコードを追加してください。</p>
+
+<pre class="brush: css">input[type=checkbox]:checked + aside {
+  right: 0px;
+}</pre>
+
+<p>セレクタはここではかなり複雑です — 私たちは <code>&lt;input&gt;</code> 要素に隣接する <code>&lt;aside&gt;</code> 要素を選択していますが、それがチェックされているときだけです（これを達成するための {{cssxref(":checked")}} 擬似クラスの使用に注意してください）。 この場合、<code>&lt;aside&gt;</code> の {{cssxref("right")}} プロパティを <code>0px</code> に設定しています。 これにより、パネルが再び画面に表示されるようになります（遷移により滑らかに）。 ラベルをもう一度クリックすると、チェックボックスがオフになり、パネルを再び隠します。</p>
+
+<p>切り替えボタン効果を作成するためのかなり賢い JavaScript フリーの方法は、これで終りです。 これは、IE9 以降で機能します（滑らかな遷移は、IE10 以降で機能します）。 この効果には、いくつかの懸念があります — フォーム要素はこの目的のために意図されていないので、少し乱用です。 さらに、その効果はアクセシビリティの観点からはあまり良くありません。 ラベルはデフォルトではフォーカスできず、フォーム要素を意味論的でない方法で使用するとスクリーンリーダーに問題が生じる可能性があります。 JavaScript とリンクまたはボタンのほうが適切かもしれませんが、それを試してみるのも楽しいでしょう。</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>それでは、位置指定の見方を締めくくります — これまでのところ、基本的な仕組みがどのように機能するのか、またこれらを適用して興味深い UI 機能を構築する方法を理解しているはずです。 これをすぐに理解できなくても心配しないでください — 位置指定はかなり高度なトピックであり、理解を助けるために記事をいつでも再び参照することができます。 次の話題はフレックスボックスです。</p>
+
+
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li>
+</ul>
diff --git a/files/ja/learn/css/css_layout/responsive_design/index.html b/files/ja/learn/css/css_layout/responsive_design/index.html
new file mode 100644
index 0000000000..0629613548
--- /dev/null
+++ b/files/ja/learn/css/css_layout/responsive_design/index.html
@@ -0,0 +1,334 @@
+---
+title: レスポンシブデザイン
+slug: Learn/CSS/CSS_layout/Responsive_Design
+tags:
+  - Images
+  - Media Queries
+  - RWD
+  - Responsive web design
+  - flexbox
+  - fluid grids
+  - grid
+  - multicol
+  - typography
+translation_of: Learn/CSS/CSS_layout/Responsive_Design
+---
+<div>{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}</div>
+
+<p>Web デザインの初期には、特定の画面サイズを対象とするページが作成されていました。 ユーザーの画面がデザイナーの予想よりも大きかったり小さかったりした場合、結果は望ましくないスクロールバーから、過度に長い行長、そして中途半端なスペースにまで及びました。 より多様な画面サイズが利用可能になると、<em>レスポンシブ Web デザイン</em>（responsive web design、RWD）の概念が登場しました。 これは、さまざまな画面幅、解像度などに合わせて Web ページがレイアウトと外観を変更できるようにする一連の実践です。 これは、マルチデバイス Web のデザイン方法を変えたアイデアであり、この記事は、それをマスターするために知っておくべき主なテクニックを理解するのに役立ちます。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提知識:</th>
+   <td>HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、および CSS の機能の考え方（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>と <a href="/ja/docs/Learn/CSS/Building_blocks">CSS の構成要素</a>を学ぶ）</td>
+  </tr>
+  <tr>
+   <th scope="row">学習目標:</th>
+   <td>レスポンシブデザインの基本概念と歴史を理解する。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Historic_website_layouts" name="Historic_website_layouts">歴史的な Web サイトのレイアウト</h2>
+
+<p>歴史のある時点で、Web サイトを設計するときに次の2つの選択肢がありました。</p>
+
+<ul>
+ <li>ブラウザーのウィンドウに合わせて伸縮する<em>リキッド（液状）のサイト</em></li>
+ <li>または、ピクセル単位の固定サイズによる<em>固定幅のサイト</em>を作成できます。</li>
+</ul>
+
+<p>これらの2つのアプローチは、サイトを設計する人の画面上では最も見栄えの良い Web サイトをもたらす傾向がありました！ リキッドのサイトは、小さな画面では押しつぶされたデザインになり（下図参照）、大きな画面では読みにくいほど長い行長になります。</p>
+
+<figure><img alt="モバイルサイズのビューポートに押しつぶされた2列のレイアウト。" src="https://mdn.mozillademos.org/files/16834/mdn-rwd-liquid.png" style="display: block; height: 406px; width: 300px;">
+<figcaption></figcaption>
+</figure>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: このシンプルなリキッドレイアウトを見てください: <a href="https://mdn.github.io/css-examples/learn/rwd/liquid-width.html">例</a>、<a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/liquid-width.html">ソースコード</a>。 例を表示しているときに、ブラウザーのウィンドウを内側または外側にドラッグして、さまざまなサイズでどのように見えるかを確認します。</p>
+</div>
+
+<p>固定幅のサイトでは、画面の幅がサイトの幅よりも小さいと水平スクロールバーが発生するリスクがあり（下図参照）、大きな画面ではデザインの端に多くの空白ができます。</p>
+
+<figure><img alt="モバイルのビューポートに水平スクロールバーを備えたレイアウト。" src="https://mdn.mozillademos.org/files/16835/mdn-rwd-fixed.png" style="display: block; height: 411px; width: 300px;">
+<figcaption></figcaption>
+</figure>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: この単純な固定幅レイアウトを見てください: <a href="https://mdn.github.io/css-examples/learn/rwd/fixed-width.html">例</a>、<a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html">ソースコード</a>。 繰り返しますが、ブラウザーのウィンドウのサイズを変更したときの結果を確認してください。</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: 上記のスクリーンショットは、Firefox 開発ツールの<a href="/ja/docs/Tools/Responsive_Design_Mode">レスポンシブデザインモード</a>を使用して撮影したものです。</p>
+</div>
+
+<p>モバイル Web が最初の多機能携帯電話で現実のものになり始めたため、モバイルを採用したい企業は通常、異なる URL（多くの場合 <code>m.example.com</code> や <code>example.mobi</code> など）を使用して、サイトの特別なモバイルバージョンを作成しました。 これは、サイトの2つの異なるバージョンを開発し、最新の状態に保つ必要があることを意味しました。</p>
+
+<p>さらに、これらのモバイルサイトは、しばしば非常に切り詰められたエクスペリエンスを提供しました。 モバイルデバイスがより強力になり、完全な Web サイトを表示できるようになったため、サイトのモバイルバージョンに閉じ込められ、フル機能のデスクトップバージョンのサイトにあることがわかっている情報にアクセスできないモバイルユーザーにとって、これはいらだたしいことでした。</p>
+
+<h2 id="Flexible_layout_before_responsive_design" name="Flexible_layout_before_responsive_design">レスポンシブデザインより前のフレキシブルレイアウト</h2>
+
+<p>Web サイトを構築する際のリキッドまたは固定幅の方法の欠点を解決するために、多くのアプローチが開発されました。 2004年に Cameron Adams は、<a href="http://www.themaninblue.com/writing/perspective/2004/09/21/">解像度依存レイアウト</a>（英語）という題名の投稿を書き、さまざまな画面解像度に適応できるデザインを作成する方法を説明しました。 このアプローチでは、画面解像度を検出して正しい CSS をロードするために JavaScript が必要でした。</p>
+
+<p>Zoe Mickley Gillenwater は、フレキシブル（柔軟な）サイトを作成するさまざまな方法の説明と形式化をし、画面を埋めるか、サイズを完全に固定するかの間で妥協点を見つけるために<a href="http://zomigi.com/blog/voices-that-matter-slides-available/">尽力しました</a>。</p>
+
+<h2 id="Responsive_design" name="Responsive_design">レスポンシブデザイン</h2>
+
+<p>レスポンシブデザインという用語は、<a href="https://alistapart.com/article/responsive-web-design/">2010年に Ethan Marcotte によって初めて作られ</a>、3つのテクニックを組み合わせて使用​​することを説明しています。</p>
+
+<ol>
+ <li>1つ目は、Gillenwater が既に検討したフルード（流動的な）グリッドのアイデアであり、Marcotte の記事 <a href="https://alistapart.com/article/fluidgrids/">Fluid Grids</a>（2009年に A List Apart で公開）で読むことができます。</li>
+ <li>2番目のテクニックは、<a href="http://unstoppablerobotninja.com/entry/fluid-images">フルード画像</a>のアイデアです。 <code>max-width</code> プロパティを <code>100%</code> に設定する非常に簡単なテクニックを使用すると、画像が含まれる列が画像の本来のサイズより狭くなった場合、画像は小さく縮小されますが、大きくなることはありません。 これにより、画像はオーバーフローするのではなく、柔軟なサイズの列に収まるように縮小できますが、列が画像よりも広くなった場合には大きくならず、ピクセル化もされません。</li>
+ <li>3番目の重要なコンポーネントは<a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリー</a>です。 メディアクエリーにより、CSS のみを使用して、Cameron Adams が JavaScript を使用して以前に検討したタイプのレイアウトの切り替えができるようになります。 すべての画面サイズに対して1つのレイアウトを使用するのではなく、レイアウトを変更できます。 サイドバーは小さな画面に合わせて位置を変更したり、別のナビゲーションを表示したりできます。</li>
+</ol>
+
+<p><strong>レスポンシブ Web デザインは独立した技術ではない</strong>ことを理解することが重要です。 レスポンシブ Web デザインは、コンテンツの表示に使用されているデバイスに<em>対応</em>できるレイアウトを作成するために使用される、Web デザインへのアプローチまたはベストプラクティスのセットを説明する用語です。 Marcotte の最初の検討では、これは柔軟なグリッド（フロートを使用）とメディアクエリーを意味していましたが、その記事が書かれてからほぼ10年で、レスポンシブに動作することがデフォルトになりました。 最新の CSS レイアウトの方法は本質的にレスポンシブであり、レスポンシブサイトの設計を容易にするために Web プラットフォームに新しいものが組み込まれています。</p>
+
+<p>この記事の残りの部分では、レスポンシブサイトを作成するときに使用できるさまざまな Web プラットフォーム機能について説明します。</p>
+
+<h2 id="Media_Queries" name="Media_Queries">メディアクエリー</h2>
+
+<p>レスポンシブデザインは、メディアクエリー（media query）によってのみ出現できました。 Media Queries Level 3 仕様は2009年に勧告候補になりました。 つまり、ブラウザーでの実装の準備が整ったとみなされました。 メディアクエリーを使用すると、一連のテスト（例えば、ユーザーの画面が特定の幅または特定の解像度より大きいかどうか）を実行し、CSS を選択的に適用して、ユーザーのニーズに合わせて適切にページをスタイルできます。</p>
+
+<p>例えば、次のメディアクエリーは、現在の Web ページが画面メディア（したがって印刷ドキュメントではない）として表示され、ビューポートの幅が少なくとも 800 ピクセルであるかどうかをテストします。 <code>.container</code> セレクターの CSS は、これら2つのことが当てはまる場合にのみ適用されます。</p>
+
+<pre class="brush: css notranslate"><code>@media screen and (min-width: 800px) {
+  .container {
+    margin: 1em 2em;
+  }
+} </code>
+</pre>
+
+<p>スタイルシート内に複数のメディアクエリーを追加して、レイアウト全体またはその一部をさまざまな画面サイズに最適に調整できます。 メディアクエリーが導入され、レイアウトが変更されるポイントは、<em>ブレークポイント</em>（breakpoints）と呼ばれます。</p>
+
+<p>メディアクエリーを使用する場合の一般的なアプローチは、狭い画面のデバイス（携帯電話など）用に単純な単一列レイアウトを作成し、次に、より大きな画面かチェックして複数列レイアウトを処理するのに十分な画面幅があることがわかったら、複数列レイアウトを実装することです。 これは多くの場合、<strong>モバイルファースト</strong>デザインと呼ばれます。</p>
+
+<p>詳細については、<a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリー</a>の MDN ドキュメントをご覧ください。</p>
+
+<h2 id="Flexible_grids" name="Flexible_grids">柔軟なグリッド</h2>
+
+<p>レスポンシブサイトは、ブレークポイント間でレイアウトを変更するだけでなく、柔軟なグリッド上に構築されます。 柔軟なグリッドは、存在する可能性のあるすべてのデバイスサイズを対象にする必要がなく、ピクセルパーフェクトレイアウトを構築する必要がないことを意味します。 膨大な数の異なるサイズのデバイスが存在し、少なくともデスクトップでは常にブラウザーのウィンドウが最大化されているわけではないという事実を考えると、ピクセルパーフェクトレイアウトのアプローチは不可能です。</p>
+
+<p>柔軟なグリッドを使用することで、ブレークポイントを追加し、コンテンツの見た目が悪くなり始めた時点でデザインを変更するだけで済みます。 例えば、画面サイズが大きくなると行長が読みにくい長さになり、ボックスが狭くなるにつれて各行に2つの単語が押しつぶされるようになります。</p>
+
+<p>レスポンシブデザインの初期には、レイアウトを実行するための唯一の選択肢は<a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a>を使用することでした。 柔軟なフロートレイアウトは、各要素に幅をパーセントで指定し、レイアウト全体で合計が 100% を超えないようにすることで実現します。 フルードグリッドに関する元の作品で、Marcotte はピクセルを使用して設計されたレイアウトを取得し、それをパーセントに変換するための公式を詳しく説明しました。</p>
+
+<pre class="notranslate"><code>対象 / コンテキスト = 結果</code>
+</pre>
+
+<p>例えば、対象の列のサイズが 60 ピクセルで、コンテキスト（またはコンテナ）が 960 ピクセルの場合、60 を 960 で割って、小数点を右に2桁移動した後、CSS で使用できる値を得られます。</p>
+
+<pre class="brush: css notranslate"><code>.col {
+  width: 6.25%; /* 60 / 960 = 0.0625 */
+} </code>
+</pre>
+
+<p>このアプローチは、今日の Web の多くの場所で見られます。 これについては、<a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a>の記事のレイアウトセクションで説明しています。 仕事でこのアプローチを使用している Web サイトに出くわす可能性が高いため、フロートベースの柔軟なグリッドを使用して最新のサイトを構築しなくても、理解する価値があります。</p>
+
+<p>次の例は、メディアクエリーと柔軟なグリッドを使用した簡単なレスポンシブデザインを示しています。 狭い画面では、レイアウトは次のように上下に積み重ねられたボックスを表示します。</p>
+
+<figure><img alt="ボックスが上下に積み上げられたレイアウトのモバイルビュー。" src="https://mdn.mozillademos.org/files/16836/mdn-rwd-mobile.png" style="display: block; height: 407px; width: 300px;">
+<figcaption></figcaption>
+</figure>
+
+<p>より広い画面では、次のように2つの列に移動します。</p>
+
+<figure><img alt="2列のレイアウトのデスクトップビュー。" src="https://mdn.mozillademos.org/files/16837/mdn-rwd-desktop.png" style="display: block; height: 217px; width: 600px;">
+<figcaption></figcaption>
+</figure>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: この例の<a href="https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html">ライブ例</a>と<a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html">ソースコード</a>は GitHub にあります。</p>
+</div>
+
+<h2 id="Modern_layout_technologies" name="Modern_layout_technologies">最新のレイアウト技術</h2>
+
+<p><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a>、<a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a>、<a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a>などの最新のレイアウト方法は、デフォルトでレスポンシブです。 それらはすべて、あなたが柔軟なグリッドを作成しようとしていると仮定し、それを行う簡単な方法を提供します。</p>
+
+<h3 id="Multicol" name="Multicol">段組み</h3>
+
+<p>これらのレイアウトメソッドの中で最も古いものは段組み（multicol）です。 <code>column-count</code> の指定で、コンテンツを分割する列の数を指定します。 ブラウザーはこれらのサイズを計算し、サイズは画面サイズに応じて変化します。</p>
+
+<pre class="brush: css notranslate"><code>.container {
+  column-count: 3;
+} </code>
+</pre>
+
+<p>代わりに <code>column-width</code> の指定で、<em>最小</em>幅を指定します。 ブラウザーは、その幅の列をコンテナに収まるだけ作成し、すべての列の間で残りのスペースを分配します。 したがって、列の数は、どのくらいのスペースがあるかに応じて変化します。</p>
+
+<pre class="brush: css notranslate"><code>.container {
+  column-width: 10em;
+} </code>
+</pre>
+
+<h3 id="Flexbox" name="Flexbox">フレックスボックス</h3>
+
+<p>フレックスボックス（Flexbox）では、フレックス項目は初期の振る舞いとして、コンテナ内のスペースに従って、項目間のスペースを縮小および分散します。 <code>flex-grow</code> と <code>flex-shrink</code> の値を変更することにより、項目の周囲に多少のスペースがあった場合の振る舞いを指定できます。</p>
+
+<p>次の例では、CSS レイアウトのフレックスボックスのトピックの<a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox#Flexible_sizing_of_flex_items">フレックス項目の柔軟なサイズ変更</a>で説明されているように、<code>flex: 1</code> の一括指定を使用して、それぞれのフレックス項目はフレックスコンテナ内に同じ量のスペースを取ります。</p>
+
+<pre class="brush: css notranslate"><code>.container {
+  display: flex;
+}
+
+.item {
+  flex: 1;
+} </code>
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: 例として、今度はフレックスボックスを使用して、上記のシンプルなレスポンシブレイアウトを再構築しました。 列のサイズを計算するために奇妙なパーセント値を使用する必要がなくなったことがわかります: <a href="https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html">例</a>、<a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html">ソースコード</a>。</p>
+</div>
+
+<h3 id="CSS_grid" name="CSS_grid">CSS グリッド</h3>
+
+<p>CSS グリッドレイアウトでは、<code>fr</code> 単位を使用して、グリッドトラック全体に利用可能なスペースを分散できます。 次の例では、サイズが <code>1fr</code> の3つのトラックを持つグリッドコンテナを作成します。 これにより、3つの列トラックが作成され、それぞれがコンテナ内の使用可能なスペースの一部を取得します。 グリッドを作成するこのアプローチの詳細については、CSS レイアウトのグリッドのトピックの<a href="/ja/docs/Learn/CSS/CSS_layout/Grids#Flexible_grids_with_the_fr_unit"> fr 単位での柔軟なグリッド</a>を参照してください。</p>
+
+<pre class="brush: css notranslate"><code>.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+} </code>
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: <code>.wrapper</code> に列を定義できるため、グリッドレイアウトのバージョンはさらに単純です: <a href="https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html">例</a>、<a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html">ソースコード</a>。</p>
+</div>
+
+<h2 id="Responsive_images" name="Responsive_images">レスポンシブ画像</h2>
+
+<p>レスポンシブ画像に対する最も簡単なアプローチは、レスポンシブデザインに関する Marcotte の初期の記事で説明されているとおりです。 基本的に、必要な最大サイズの画像を取得し、縮小します。 これは現在でも使用されているアプローチであり、ほとんどのスタイルシートでは次の CSS がどこかにあります。</p>
+
+<pre class="brush: css notranslate"><code>img {
+  max-width: 100%;
+} </code>
+</pre>
+
+<p>このアプローチには明らかな欠点があります。 画像は本来のサイズよりもはるかに小さく表示される可能性があり、これは帯域幅の浪費です — モバイルユーザーは、ブラウザーのウィンドウに実際に表示されるサイズの数倍の画像をダウンロードすることになる場合があります。 さらに、モバイルとデスクトップで同じ画像アスペクト比を使用したくない場合があります。 例えば、モバイル用に正方形の画像を用意して、デスクトップのランドスケープ画像と同じシーンを表示するとよいかもしれません。 または、モバイルでの画像のサイズが小さいことを認めながら、小さな画面サイズでもより簡単に理解できるまったく別の画像を表示したい場合があります。 これらのことは、単に画像を縮小するだけでは達成できません。</p>
+
+<p>{{htmlelement("picture")}} 要素と {{htmlelement("img")}} の <code>srcset</code> 属性と <code>size</code> 属性を使用したレスポンシブ画像は、これらの両方の問題を解決します。 「ヒント」（画像に最適な画面サイズと解像度を記述するメタデータ）とともに複数のサイズを提供でき、ブラウザーは各デバイスに最適な画像を選択し、ユーザーが使用しているデバイスに適した画像サイズをダウンロードできるようにします。</p>
+
+<p>さまざまなサイズで使用される<em>アートディレクション</em>画像は、さまざまな画面サイズに対して、さまざまな切り抜きまたはまったく異なる画像を提供します。</p>
+
+<p>MDN の HTML の学習セクションで、<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">レスポンシブ画像の詳細なガイド</a>を見つけることができます。</p>
+
+<h2 id="Responsive_typography" name="Responsive_typography">レスポンシブタイポグラフィ</h2>
+
+<p>以前の研究ではカバーされていなかったレスポンシブデザインの要素は、レスポンシブタイポグラフィ（responsive typography）のアイデアでした。 基本的に、これは、メディアクエリー内のフォントサイズを変更して、画面を占める量を増減させることを表します。</p>
+
+<p>この例では、レベル1の見出しを <code>4rem</code> に設定します。 つまり、基本フォントサイズの4倍になります。 それは本当に大きな見出しです！ このジャンボ見出しは大きな画面サイズでのみ必要です。 したがって、まず小さな見出しを作成し、ユーザーが少なくとも <code>1200px</code> の画面サイズを持っていることがわかった場合は、メディアクエリーを使用して大きな見出しで上書きします。</p>
+
+<pre class="brush: css notranslate"><code>html {
+  font-size: 1em;
+}
+
+h1 {
+  font-size: 2rem;
+}
+
+@media (min-width: 1200px) {
+  h1 {
+    font-size: 4rem;
+  }
+} </code>
+</pre>
+
+<p>上記のレスポンシブグリッドの例を編集して、説明した方法を使用してレスポンシブタイポグラフィも含めました。 レイアウトが2列バージョンになると、見出しのサイズがどのように切り替わるかを確認できます。</p>
+
+<p>モバイルでは、次のように見出しが小さくなります。</p>
+
+<figure><img alt="見出しサイズが小さいスタックレイアウト。" src="https://mdn.mozillademos.org/files/16838/mdn-rwd-font-mobile.png" style="display: block; height: 407px; width: 300px;">
+<figcaption></figcaption>
+</figure>
+
+<p>ただし、デスクトップでは、次のようにより大きな見出しサイズで表示されます。</p>
+
+<figure><img alt="見出しが大きい2列レイアウト。" src="https://mdn.mozillademos.org/files/16839/mdn-rwd-font-desktop.png" style="display: block; height: 169px; width: 600px;">
+<figcaption></figcaption>
+</figure>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: この例を実際に見てください: <a href="https://mdn.github.io/css-examples/learn/rwd/type-rwd.html">例</a>、<a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html">ソースコード</a>。</p>
+</div>
+
+<p>このタイポグラフィへのアプローチが示すように、メディアクエリーをページのレイアウトの変更のみに制限する必要はありません。 これらを使用して任意の要素を微調整し、代わりとなる画面サイズでより使いやすく魅力的にすることができます。</p>
+
+<h3 id="Using_viewport_units_for_responsive_typography" name="Using_viewport_units_for_responsive_typography">レスポンシブタイポグラフィにビューポート単位を使用</h3>
+
+<p>興味深いアプローチは、ビューポート単位 <code>vw</code> を使用してレスポンシブタイポグラフィを有効にすることです。 <code>1vw</code> はビューポートの幅の 1% に等しいため、<code>vw</code> を使用してフォントサイズを設定すると、常にビューポートのサイズに関連付けられます。</p>
+
+<pre class="brush: css notranslate">h1 {
+  font-size: 6vw;
+}</pre>
+
+<p>上記の問題は、<code>vw</code> 単位を使用するとユーザーがテキストをズームする機能を失うことです。 そのテキストは常にビューポートのサイズに関連しているためです。 <strong>したがって、ビューポート単位を単独で使用してテキストを設定しないでください</strong>。</p>
+
+<p>解決策があり、<code><a href="/ja/docs/Web/CSS/calc">calc()</a></code> を使用する必要があります。 <code>em</code> や <code>rem</code> などの固定サイズを使用した値に <code>vw</code> 単位を足しても、テキストはズーム可能です。 次のように基本的に、<code>vw</code> 単位はズームした値に足します。</p>
+
+<pre class="brush: css notranslate">h1 {
+  font-size: calc(1.5rem + 3vw);
+}</pre>
+
+<p>これは、見出しのフォントサイズを指定する必要があるのは一度だけで、モバイル用にメディアクエリーで再定義せずともよいことを意味します。ビューポートのサイズを大きくするにつれて、フォントは徐々に大きくなります。</p>
+
+<div class="blockIndicator note">
+<p>実際のこの例を見てください: <a href="https://mdn.github.io/css-examples/learn/rwd/type-vw.html">例</a>、<a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html">ソースコード</a>。</p>
+</div>
+
+<h2 id="The_viewport_meta_tag" name="The_viewport_meta_tag">ビューポートメタタグ</h2>
+
+<p>レスポンシブなページの HTML ソースを見ると、通常、ドキュメントの <code>&lt;head&gt;</code> に次の {{htmlelement("meta")}} タグがあります。</p>
+
+<pre class="brush: html notranslate"><code>&lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;</code>
+</pre>
+
+<p>このメタタグは、モバイルブラウザーに、ビューポートの幅をデバイスの幅に設定し、ドキュメントを意図したサイズの 100% にスケーリングするよう指示します。 これにより、ドキュメントはモバイル向けに最適化されたサイズで表示されます。</p>
+
+<p>なぜこれが必要でしょうか？ モバイルブラウザーは、ビューポートの幅について嘘をつく傾向があるためです。</p>
+
+<p>このメタタグが存在するのは、最初の iPhone が出て、人々が小さな電話画面で Web サイトを表示し始めたとき、ほとんどのサイトがモバイル向けに最適化されていなかったためです。 したがって、モバイルブラウザーはビューポートの幅を 960 ピクセルに設定し、その幅でページをレンダリングし、デスクトップレイアウトの縮小版として結果を表示します。 他のモバイルブラウザー（Google Android など）も同じことを行いました。 ユーザーは Web サイトをズームインして画面内を移動し、興味のある部分を見ることができましたが、見た目は悪かったです。 レスポンシブデザインのないサイトに出くわす不幸がある場合、今日でもこれを見ることができます。</p>
+
+<p>問題は、モバイルブラウザーでは、ブレークポイントとメディアクエリーを使用したレスポンシブデザインが意図したとおりに機能しないことです。 ビューポートの幅が <code>480px</code> 以下で作動する狭い画面レイアウトがあり、ビューポートが <code>960px</code> に設定されている場合、モバイルで狭い画面のレイアウトが表示されることはありません。 <code>width=device-width</code> を設定すると、Apple のデフォルトの <code>width=960px</code> がデバイスの実際の幅で上書きされるため、メディアクエリーは意図したとおりに機能します。</p>
+
+<p><strong>したがって、ドキュメントの先頭に上記の HTML 行を<em>常に</em>含める必要があります</strong>。</p>
+
+<p>ビューポートメタタグで使用できる設定は次のように他にもありますが、一般的には上記の行を使用します。</p>
+
+<ul>
+ <li><code>initial-scale</code>: ページの初期ズームを設定します。 これには 1 を設定します。</li>
+ <li><code>height</code>: ビューポートに特定の高さを設定します。</li>
+ <li><code>minimum-scale</code>: 最小ズームレベルを設定します。</li>
+ <li><code>maximum-scale</code>: 最大ズームレベルを設定します。</li>
+ <li><code>user-scalable</code>: <code>no</code> に設定すると、ズームを禁止します。</li>
+</ul>
+
+<p><code>minimum-scale</code>、<code>maximum-scale</code>、特に <code>user-scalable</code> を <code>no</code> に設定することは避けてください。 ユーザーには必要なだけズームを許可する必要があります。 これを禁止すると、アクセシビリティの問題が発生します。</p>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: <code><a href="/ja/docs/Web/CSS/@viewport">@viewport</a></code> というビューポートメタタグを置き換えるように設計された CSS の @ 規則がありますが、ブラウザーのサポートが不十分です。 両方が使用されたときは、メタタグが @viewport を上書きします。</p>
+</div>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>レスポンシブデザインとは、表示される環境に対応するサイトまたはアプリのデザインを指します。 これには多くの CSS および HTML の機能とテクニックが含まれており、現在では基本的に Web サイトをデフォルトで構築する方法になっています。 サイトを携帯電話でアクセスするところを考えてください — デスクトップバージョンを縮小したサイトや、物事を見つけるために横にスクロールする必要があるサイトに出くわすことは、おそらくかなり珍しいことです。 これは、Web がレスポンシブデザインのこのアプローチに移行したためです。</p>
+
+<p>また、これらのレッスンで学んだレイアウト方法の助けを借りて、レスポンシブデザインを実現することがはるかに容易になりました。 今日の Web 開発が初めてでも、レスポンシブデザインの初期よりも多くのツールを意のままに使用できます。 したがって、参照している資料の年齢を確認する価値があります。 歴史的な記事はまだ有用ですが、CSS と HTML の現代的な用法により、訪問者がどのデバイスを使用してサイトを表示しても、エレガントで便利なデザインをはるかに簡単に作成できます。</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li>
+</ul>
diff --git a/files/ja/learn/css/css_layout/supporting_older_browsers/index.html b/files/ja/learn/css/css_layout/supporting_older_browsers/index.html
new file mode 100644
index 0000000000..93feda2cf0
--- /dev/null
+++ b/files/ja/learn/css/css_layout/supporting_older_browsers/index.html
@@ -0,0 +1,248 @@
+---
+title: 古いブラウザーのサポート
+slug: Learn/CSS/CSS_layout/Supporting_Older_Browsers
+tags:
+  - Beginner
+  - CSS
+  - Guide
+  - Layout
+  - Learn
+  - feature queries
+  - flexbox
+  - float
+  - grid
+  - legacy
+translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers
+---
+<div>{{LearnSidebar}}</div>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}</p>
+
+<p class="summary"><span class="seoSummary">このモジュールでは、フレックスボックスとグリッドをデザインの主なレイアウト方法として使用することをお勧めしています。 しかしながら、サイトへの訪問者には、古いブラウザーや、使用している方法をサポートしていないブラウザーを使用している人がいます。 これはウェブ上で常に当てはまります — 新しい機能が開発されると、ブラウザーによって異なるものが優先されます。 この記事では、古い技術のユーザーを締め出すことなく最新のウェブテクニックを使用する方法について説明します。</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提知識:</th>
+   <td>HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、および CSS の機能の考え方（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>と<a href="/ja/docs/Learn/CSS/Styling_boxes">ボックスの装飾</a>を学ぶ）。</td>
+  </tr>
+  <tr>
+   <th scope="row">学習目標:</th>
+   <td>使用したい機能をサポートしていない可能性がある、古いブラウザーでレイアウトのサポートを提供する方法を理解すること。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="What_is_the_browser_landscape_for_your_site" name="What_is_the_browser_landscape_for_your_site">あなたのサイトのブラウザー利用状況はどうですか？</h2>
+
+<p>すべてのウェブサイトは、対象視聴者という点で異なります。 取るべきアプローチを決める前に、古いブラウザーでサイトにやってくる訪問者の数を調べてください。 あなたが追加したり置き換えたりしている既存のウェブサイトを持っているなら、人々が使用している技術を伝えることができる分析機能（analytics）を利用できるので、これは簡単です。 分析機能を持っていないか、真新しいサイトであるならば、場所によってフィルターをかけた統計（statistics）を提供することができる <a href="http://gs.statcounter.com/">Statcounter</a> のようなサイトがあります。</p>
+
+<p>また、デバイスの種類やサイトの利用方法についても検討する必要があります。 例えば、モバイルデバイスの平均数よりも多いと予想される場合があります。 アクセシビリティと支援技術を使用している人々は常に考慮されるべきですが、いくつかのサイトではさらに重要になるかもしれません。 私の経験では、開発者は多くの場合、古いバージョンの Internet Explorer でのユーザーの 1% の体験を非常に心配していますが、はるかに多い数のアクセシビリティが必要な人々は考慮していません。</p>
+
+<h2 id="What_is_the_support_for_the_features_you_want_to_use" name="What_is_the_support_for_the_features_you_want_to_use">使用したい機能に対するサポートはどうですか？</h2>
+
+<p>サイトにやってくるブラウザーを知ったら、それがどのような技術をサポートしているかや、その技術を利用できない訪問者にどれだけ簡単に代替手段を提供できるかについて、使用したい技術を評価できます。 MDN では、CSS プロパティを詳述した各ページにブラウザーの互換性情報を提供することで、これを簡単にできるようにしています。 例えば、{{cssxref("grid-template-columns")}} のページを見てください。 このページの下部には、主要なブラウザーと、このプロパティのサポートを開始したバージョンの一覧をまとめた表があります。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16047/browser-table.png" style="height: 1178px; width: 2102px;"></p>
+
+<p>機能がどの程度サポートされているかを調べるもう1つの一般的な方法は、<a href="https://caniuse.com/">Can I Use</a> ウェブサイトです。 このサイトには、ウェブプラットフォームの機能の大部分と、それらのブラウザーのサポート状況に関する情報が記載されています。 あなたは場所によって使用統計を見ることができます — あなたが主に世界の特定の地域のためにユーザーを持っているサイトで働いているなら有用です。 Google Analytics アカウントをリンクして、あなたのユーザーデータに基づいて分析することもできます。</p>
+
+<p>ユーザーが持っている技術、そしてあなたが使いたいと思うかもしれないことへのサポートを理解することは、すべての決断を下し、すべてのユーザーをサポートするための最善の方法を知るための良い場所にあなたを置きます。</p>
+
+<h2 id="Support_doesnt_mean_looks_the_same" name="Support_doesnt_mean_looks_the_same">サポートは「同じに見える」という意味ではありません</h2>
+
+<p>一部のユーザーはサイトを携帯電話で見たり、他のユーザーは大きなデスクトップ画面を見たりするため、ウェブサイトはすべてのブラウザーで同じように見えるとは限りません。 同様に、一部のユーザは古いブラウザーのバージョンを持ち、他のユーザは最新のブラウザーを持ちます。 一部のユーザーは、コンテンツがスクリーンリーダーによって読み上げられているのを聞いているかもしれないし、それを読むことができるようにページにズームインしているかもしれません。 全員をサポートするということは、防御的に設計されたバージョンのコンテンツを提供することを意味します。 その結果、最新のブラウザーでは見栄えがよくなりますが、それでも古いブラウザーのユーザにとっては基本レベルで使用できます。</p>
+
+<p>基本レベルのサポートは、ページの通常フローが意味をなすように、コンテンツを適切に構成することによります。 非常に限られた機能の携帯電話を持っているユーザーは CSS の多くを得ないかもしれません、しかし内容は読みやすくする方法で流れます。 したがって、よく構造化された HTML 文書を常に出発点にする必要があります。 <em>スタイルシートを削除した場合、コンテンツは意味をなしますか？</em></p>
+
+<p>1つの選択肢は、非常に古いブラウザーや限られたブラウザーを使用している人々のための代替手段として、サイトのこのプレーンなビューを残すことです。 これらのブラウザーでこのサイトにアクセスしている人の数が非常に少ない場合は、最新のブラウザーと同様の経験をそれらの人に与えようとして時間を注いでも意味がありません。 サイトをよりアクセスしやすくするために時間をかけて、はるかに多くのユーザーにサービスを提供することをお勧めします。 プレーンな HTML ページと何から何までいろいろなものとの間には妥協点があり、CSS は実際にこれらの代替手段の作成をかなり簡単にしました。</p>
+
+<h2 id="Creating_fallbacks_in_CSS" name="Creating_fallbacks_in_CSS">CSS で代替手段を作成する</h2>
+
+<p>CSS の仕様には、2つのレイアウト方法が同じ項目に適用されたときにブラウザーが何をするのかを説明する情報が含まれています。 これは、例えばフロート項目が CSS グリッドレイアウトを使用しているグリッド項目でもある場合に何が起こるかの定義があることを意味します。 ブラウザーが理解できない CSS を無視するという知識とこの情報を組み合わせると、すでに説明した<a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のテクニック</a>を使用して単純なレイアウトを作成し、それをグリッドレイアウトを理解している最新のブラウザーではグリッドレイアウトで上書きする方法があります。</p>
+
+<p>以下の例では、3つの <code>&lt;div&gt;</code> をフロートさせて、それらが一行に表示されるようにしました。 <a href="/ja/docs/Learn/CSS/CSS_layout/Grids">CSS グリッドレイアウト</a>をサポートしていないブラウザーでは、ボックスの行はフロートレイアウトとして表示されます。 グリッド項目になったフロート項目はフロートのふるまいを失います。 つまり、<code>wrapper</code> をグリッドコンテナに変えることによって、フロート項目はグリッド項目になります。 ブラウザーがグリッドレイアウトをサポートしていればグリッドビューを表示し、そうでなければ <code>display: grid</code> と関連のプロパティを無視してフロートレイアウトが使用されます。</p>
+
+<div id="Example1">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="item"&gt;Item One&lt;/div&gt;
+  &lt;div class="item"&gt;Item Two&lt;/div&gt;
+  &lt;div class="item"&gt;Item Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Example1', '100%', '200') }}</p>
+</div>
+
+<div class="note">
+<p><strong>注</strong>: クリアされた項目がグリッド項目になると、{{cssxref("clear")}} プロパティも無効になります。 そのため、フッターがクリアされたレイアウトを作成し、それをグリッドレイアウトにすることができます。</p>
+</div>
+
+<h3 id="Fallback_Methods" name="Fallback_Methods">代替手段の方法</h3>
+
+<p>このフロートの例と同様の方法で使用できるレイアウト方法はいくつかあります。 作成するレイアウトパターンに最も適したものを選択できます。</p>
+
+<dl>
+ <dt>フロートと<em>クリア</em></dt>
+ <dd>上記のように、フロート項目またはクリアされた項目がフレックス項目またはグリッド項目になると、<code>float</code> プロパティや <code>clear</code> プロパティはレイアウトに影響しなくなります。</dd>
+ <dt>display: inline-block</dt>
+ <dd>この方法を使用して列レイアウトを作成できます。 項目に <code>display: inline-block</code> が設定されていて、それからフレックス項目またはグリッド項目になる場合、<code>inline-block</code> のふるまいは無視されます。</dd>
+ <dt>display: table</dt>
+ <dd>CSS レイアウト入門で説明した <a href="/ja/docs/Learn/CSS/CSS_layout/Introduction#Table_layout">CSS 表の作成方法</a>は、代替手段として使用できます。 CSS 表レイアウトが設定されている項目は、それらがフレックス項目またはグリッド項目になると、このふるまいを失います。 重要なことに、表構造を修正するために作成された匿名ボックスは作成されません。</dd>
+ <dt>段組みレイアウト</dt>
+ <dd>特定のレイアウトでは、代替手段として<a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a>を使用できます。 コンテナに定義された <code>column-*</code> プロパティのいずれかがあり、その後グリッドコンテナになると、段組みレイアウトのふるまいは起こりません。</dd>
+ <dt>グリッドの代替手段としてのフレックスボックス</dt>
+ <dd><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a>は、IE10 と IE11 でサポートされているため、グリッドよりもブラウザーのサポートが優れています。 ただし、このレッスンの後半で、古いブラウザーでのフレックスボックスのかなり曖昧でわかりにくいサポートについて説明します。 フレックスコンテナをグリッドコンテナにした場合、子に適用されている <code>flex</code> プロパティはすべて無視されます。</dd>
+</dl>
+
+<p>古いブラウザーでの多くのレイアウトの調整では、このように CSS を使用することでまともな体験を与えることができるかもしれません。 古くてよくサポートされているテクニックに基づいた、より単純なレイアウトを追加してから、新しい CSS を使用して、視聴者の 90% 以上が見るレイアウトを作成します。 ただし、代替手段のコードに新しいブラウザーでも解釈されるものを含める必要がある場合があります。 この良い例は、列をグリッド表示に近づけるためにフロート項目にパーセント幅を追加し、コンテナを埋めるように伸縮する場合です。</p>
+
+<p>フロートレイアウトでは、パーセントはコンテナから計算されます — 33.333% はコンテナ幅の3分の1です。 ただしグリッドでは、 33.333% は項目が配置されているグリッド領域から計算されるため、グリッドレイアウトが導入されると、実際に必要なサイズのさらに3分の1になってしまいます。</p>
+
+<div id="Example2">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+  width: 33.333%;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="item"&gt;Item One&lt;/div&gt;
+  &lt;div class="item"&gt;Item Two&lt;/div&gt;
+  &lt;div class="item"&gt;Item Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Example2', '100%', '200') }}</p>
+</div>
+
+<p>この問題に対処するには、グリッドがサポートされているかどうか、したがってグリッドが幅を上書きするかどうかを検出する方法が必要です。 CSS は下記の解決策を持っています。</p>
+
+<h2 id="Feature_queries" name="Feature_queries">機能クエリ</h2>
+
+<p>機能クエリを使用すると、ブラウザーが特定の CSS 機能をサポートしているかどうかをテストできます。 つまり、特定の機能をサポートしていないブラウザー用の CSS を作成してから、そのブラウザーがサポートしているかどうかを確認し、サポートしている場合は素敵なレイアウトを追加することができます。</p>
+
+<p>上記の例に機能クエリを追加すると、グリッドをサポートしている場合、項目の幅を <code>auto</code> に戻すことができます。</p>
+
+<div id="Example3">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+  width: 33.333%;
+}
+
+@supports (display: grid) {
+  .item {
+      width: auto;
+  }
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="item"&gt;Item One&lt;/div&gt;
+  &lt;div class="item"&gt;Item Two&lt;/div&gt;
+  &lt;div class="item"&gt;Item Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Example3', '100%', '200') }}</p>
+</div>
+
+<p>機能クエリのサポートは最近のブラウザーでは非常に優れていますが、CSS グリッドをサポートしていないブラウザーでも機能クエリをサポートしていないことに注意してください。 これは、上で詳述されたアプローチがそれらのブラウザーで働くということを意味します。 していることは、すべての機能クエリの外側で、古い CSS を最初に書くことです。 グリッドをサポートせず、機能クエリもサポートしないブラウザーは、理解できるレイアウト情報を使用し、それ以外はすべて無視します。 機能クエリをサポートするブラウザーは CSS グリッドもサポートするため、グリッドのコードと機能クエリ内のコードを実行します。</p>
+
+<p>機能クエリの仕様には、ブラウザーが機能をサポートしていないことをテストする機能も含まれています — これは、ブラウザーが機能クエリをサポートしている場合にのみ役立ちます。 将来的には、機能クエリをサポートしていないブラウザーはなくなるため、サポートの欠如を確認するアプローチが有効になります。 ただし現時点では、最善のサポートのために古い CSS を使用してから上書きするというアプローチを使用してください。</p>
+
+<h2 id="Older_versions_of_Flexbox" name="Older_versions_of_Flexbox">古いバージョンのフレックスボックス</h2>
+
+<p>古いバージョンのブラウザーでは、以前のフレックスボックス仕様の繰り返しを見つけることができます。 これを書いている時点で、これはほとんどフレックスボックスのために <code>-ms-</code> 接頭辞を使う Internet Explorer 10 の問題です。 これはまた、いくつかの古い記事やチュートリアルが存在することを意味します。 <a href="https://css-tricks.com/old-flexbox-and-new-flexbox/">この便利なガイド</a>（英語）は何を見ているのかを確認するのに役立ちますし、非常に古いブラウザーでフレックスのサポートが必要な場合にも役立ちます。</p>
+
+<h2 id="The_IE10_and_11_prefixed_version_of_Grid" name="The_IE10_and_11_prefixed_version_of_Grid">IE10 と IE11 の接頭辞版のグリッド</h2>
+
+<p>CSS グリッド仕様は、当初 Internet Explorer 10 で試作されました。 つまり、IE10 と IE11 は<em>最新</em>のグリッドをサポートしていませんが、このサイトに記載されている最新の仕様とは異なり、非常に使いやすいバージョンのグリッドレイアウトを使用しています。 IE10 および IE11 の実装は、前に <code>-ms-</code> が付いています。 つまり、これらのブラウザーに使用でき、マイクロソフト以外のブラウザーでは無視されます。 Edge はまだ古い構文を理解しているので、最新のグリッド CSS ではすべてが安全に上書きされるように注意してください。</p>
+
+<p><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">グリッドレイアウトのプログレッシブエンハンスメント</a>のガイドはグリッドの IE バージョンを理解するのを助けることができ、このレッスンの最後にいくつかの追加の役に立つリンクを含めました。 ただし、以前のバージョンの IE に非常に多くの訪問者がいない限り、サポートされていないすべてのブラウザーで機能する代替手段の作成に集中することをお勧めします。</p>
+
+<h2 id="Testing_older_browsers" name="Testing_older_browsers">古いブラウザーをテストする</h2>
+
+<p>フレックスボックスとグリッドをサポートしているブラウザーの大多数では、古いブラウザーをテストするのはかなり難しいかもしれません。 1つの方法は、<a href="https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Cross_browser_testing">クロスブラウザーテスト</a>のモジュールに詳述されているように、Sauce Labs のようなオンラインテストツールを使うことです。</p>
+
+<p>また、仮想マシンをダウンロードしてインストールし、自分のコンピュータ上の封じ込められた環境で古いバージョンのブラウザーを実行することもできます。 古いバージョンの Internet Explorer にアクセスできることは特に便利で、そのために、マイクロソフトは<a href="https://developer.microsoft.com/ja/microsoft-edge/tools/vms/">さまざまな仮想マシンを無料でダウンロード</a>（英語）できるようにしました。 これらは、Mac、Windows、Linux の各オペレーティングシステムで利用可能で、Windows コンピュータを使用していなくても、古い Windows ブラウザーや最新の Windows ブラウザーでテストするのに最適な方法です。</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>今やあなたは自信を持ってグリッドやフレックスボックスのようなテクニックを使い、古いブラウザーのための代替手段を作り、そして将来現れるであろう新しいテクニックを利用する知識を持っています。</p>
+
+<h2 id="See_Also" name="See_Also">関連情報</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">CSS での機能クエリの使用</a>（英語）</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">フレックスボックスの後方互換性</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS グリッドレイアウトとプログレッシブエンハンスメント</a></li>
+ <li><a href="https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/">CSS グリッドを使用する: グリッドなしでブラウザーをサポートする</a>（英語）</li>
+ <li><a href="https://24ways.org/2012/css3-grid-layout/">IE10 および IE11 バージョンのグリッドを使用するチュートリアル</a>（英語）</li>
+ <li><a href="https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/">IE10 のグリッドレイアウトの実装を使おうとするべきですか？</a>（英語）</li>
+ <li><a href="https://24ways.org/2017/cascading-web-design/">機能クエリによるカスケードウェブデザイン</a>（英語）</li>
+ <li><a href="https://gridbyexample.com/learn/2016/12/24/learning-grid-day24/">機能クエリの使用</a>（動画、英語）</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li>
+</ul>