conflicting/Learn/CSS 以下を削除 (#1474)

- 各記事を 2021/07/10 時点の英語版に同期
- conflicting 版の記事は古いため削除

1 files changed, 29 insertions, 19 deletions

diff --git a/files/ja/learn/css/css_layout/index.html b/files/ja/learn/css/css_layout/index.html
index 419de7d135..13f2cae2a8 100644
--- a/files/ja/learn/css/css_layout/index.html
+++ b/files/ja/learn/css/css_layout/index.html
@@ -21,23 +21,33 @@ translation_of: Learn/CSS/CSS_layout
 ---
 <div>{{LearnSidebar}}</div>
 
-<p class="summary">現段階で、すでに CSS の基本、テキストの装飾方法、コンテンツを格納するボックスの装飾方法と操作方法を見てきました。 今度は、ビューポートや互いを基準にしてボックスを適切な場所に配置する方法を検討します。 必要な前提知識をカバーしているので、さまざまな <code>display</code> の設定、フレックスボックス・CSS グリッド・位置指定などの最新のレイアウトツール、そしてまだ知っておきたいと思うかもしれない過去のテクニックのいくつかを見ながら、CSS レイアウトについて深く掘り下げることができます。</p>
+<p class="summary">現段階で、すでに CSS の基本、テキストの装飾方法、コンテンツを格納するボックスの装飾方法と操作方法を見てきました。 今度は、ビューポートや互いを基準にしてボックスを適切な場所に配置する方法を検討します。 必要な前提知識をカバーしているので、さまざまな <code>display</code> の設定、フレックスボックス・CSS グリッド・位置指定などの最新のレイアウトツール、そしてまだ知っておきたいと思うかもしれない過去のテクニックのいくつかを見ながら、 CSS レイアウトについて深く掘り下げることができます。</p>
 
-<h2 id="Prerequisites" name="Prerequisites">前提知識</h2>
+<div class="callout">
+  <h4 id="Looking_to_become_a_front-end_web_developer">フロントエンドのウェブ開発者を目指している方へ</h4>
+
+  <p>目標に向かって努力するために必要なすべての必須情報を含むコースをまとめました。</p>
+
+  <p><a href="/ja/docs/Learn/Front-end_web_developer"><strong>始めましょう</strong></a>
+  </p>
+
+</div>
+
+<h2 id="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>
+ <li><a href="/ja/docs/Learn/CSS/First_steps">CSS 入門</a>で説明したように、CSS の基本を容易にこなせること。</li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks">ボックスの装飾</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>
+<p><strong>注: </strong>使用しているコンピューター/タブレット/その他のデバイスで自分のファイルを作成できない場合は、<a href="https://jsbin.com/">JSBin</a> や <a href="https://glitch.com/">Glitch</a> などのオンラインコーディングプログラムで (ほとんどの) コードサンプルを試すことができます。</p>
 </div>
 
-<h2 id="Guides" name="Guides">ガイド</h2>
+<h2 id="Guides">ガイド</h2>
 
 <p>これらの記事では、CSS で利用可能な基本的なレイアウトのツールとテクニックについての教育を提供します。 レッスンの最後には、ウェブページをレイアウトすることによって、レイアウト方法の理解を確認するのに役立つ評価試験があります。</p>
 
@@ -48,31 +58,31 @@ translation_of: Learn/CSS/CSS_layout
  <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>
+ <p><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">フレックスボックス</a>は、項目を行または列にレイアウトするための1次元のレイアウト方法です。 項目は追加のスペースを埋めるためにたわみ、小さいスペースに収まるように縮小します。 この記事では、すべての基本事項について説明します。このガイドを学習した後は、<a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox_skills">フレックスボックスのスキルをテスト</a>して、理解度を確認してから次のステップに進むことができます。</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>
+ <dd>CSS グリッドレイアウトは、ウェブ用の2次元レイアウトシステムです。 これにより、コンテンツを行と列にレイアウトすることができ、複雑なレイアウトを簡単に構築できる多くの機能を備えています。 この記事では、ページレイアウトを始めるために必要な情報を提供し、次に進む前に<a href="/ja/docs/Learn/CSS/CSS_layout/Grid_skills">グリッドのスキルをテスト</a>しましょう。</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>
+ <dd>位置指定を使用すると、通常の文書のｐレイアウトフローから要素を取り出して異なるふるまいをさせることができます。 例えば、互いの上に重なったり、常にブラウザーのビューポート内の同じ場所に留まったりします。 この記事では、さまざまな {{cssxref("position")}} の値とその使い方について説明します。</dd>
  <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></dt>
- <dd>段組みレイアウトの仕様では、新聞に見られるような、コンテンツを段にレイアウトする方法が提供されています。 この記事では、この機能の使い方について説明します。</dd>
+ <dd>段組みレイアウトの仕様では、新聞に見られるような、コンテンツを複数の段にレイアウトする方法が提供されています。 この記事では、この機能の使い方について説明します。</dd>
  <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></dt>
- <dd>Web 対応デバイスでより多様な画面サイズが登場するにつれて、レスポンシブ Web デザイン（RWD）の概念が登場しました。 これは、さまざまな画面幅、解像度などに合わせて Web ページがレイアウトと外観を変更できるようにする一連の実践です。 これは、マルチデバイス Web 向けのデザイン方法を変更したアイデアであり、この記事では、それをマスターするために知っておくべき主なテクニックを理解するのに役立ちます。</dd>
+ <dd>ウェブ対応端末の画面サイズが多様化するにつれ、レスポンシブウェブデザイン (RWD) という概念が登場しました。これは、異なる画面幅や解像度などに合わせて、ウェブページのレイアウトや外観を変更できるようにする一連の手法です。この記事では、レスポンシブウェブデザインを使いこなすために必要な主なテクニックをご紹介します。</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><strong>CSS メディアクエリー</strong>は、ブラウザーや端末の環境が、「ビューポートの幅が 480 ピクセル以上」などの指定したルールに合致した場合にのみ、 CSS を適用する方法です。メディアクエリーは、ビューポートの大きさに応じて異なるレイアウトを作成することができるため、レスポンシブウェブデザインの重要な要素となっていますが、ユーザーがマウスではなくタッチパネルを使用しているかどうかなど、サイトが実行されている環境に関する他の事柄を検出するためにも使用できます。このレッスンでは、まずメディアクエリーで使用される構文について学び、次にメディアクエリーを使用して、シンプルなデザインをどのようにレスポンシブにするかを示す実例を見ていきます。</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>
+ <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>
+<h2 id="See_also">関連情報</h2>
 
 <dl>
  <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">実用的な位置指定の例</a></dt>