Web/CSS/Guides/Grid_layout 他11件を更新

files/ja/web/css/guides/grid_layout/accessibility/index.md

@@ -1,9 +1,8 @@
 ---
 title: グリッドレイアウトとアクセシビリティ
 slug: Web/CSS/Guides/Grid_layout/Accessibility
-original_slug: Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility
 l10n:
-  sourceCommit: 0cc9980e3b21c83d1800a428bc402ae1865326b2
+  sourceCommit: 85fccefc8066bd49af4ddafc12c77f35265c7e2d
 ---
 
 HTML は、意味づけが明確で、よく構造化された文書を作成する、ウェブサイトのコンテンツ層です。CSS はプレゼンテーション層であり、CSS を適用して、コンテンツのレイアウトなどを作成します。2 次元グリッド構造は、[CSS グリッドレイアウト](/ja/docs/Web/CSS/Guides/Grid_layout) を使用して定義されます。

files/ja/web/css/guides/grid_layout/auto-placement/index.md

@@ -2,9 +2,8 @@
 title: グリッドレイアウトでの自動配置
 short-title: 自動配置
 slug: Web/CSS/Guides/Grid_layout/Auto-placement
-original_slug: Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout
 l10n:
-  sourceCommit: 0cc9980e3b21c83d1800a428bc402ae1865326b2
+  sourceCommit: 85fccefc8066bd49af4ddafc12c77f35265c7e2d
 ---
 
 [CSS グリッドレイアウト](/ja/docs/Web/CSS/Guides/Grid_layout)には、グリッドを作成し、そのグリッド内に子アイテムの一部またはすべてを明示的に配置しない場合に、その動作を制御するルールが含まれています。コンテンツの配置を明示的に制御する必要がない場合、この「自動配置」は、一連のアイテムのグリッドを作成する最も簡単な方法です。
@@ -547,7 +546,7 @@ body {
   max-width: 800px;
 }
 .wrapper li {
-  border: 1px solid #ccc;
+  border: 1px solid #cccccc;
 }
 
 .wrapper li img {

files/ja/web/css/guides/grid_layout/basic_concepts/index.md

@@ -2,9 +2,8 @@
 title: グリッドレイアウトの基本概念
 short-title: 基本概念
 slug: Web/CSS/Guides/Grid_layout/Basic_concepts
-original_slug: Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout
 l10n:
-  sourceCommit: 0cc9980e3b21c83d1800a428bc402ae1865326b2
+  sourceCommit: 85fccefc8066bd49af4ddafc12c77f35265c7e2d
 ---
 
 [CSS グリッドレイアウト](/ja/docs/Web/CSS/Guides/Grid_layout)は、 2 次元グリッドシステムを CSS にもたらします。グリッドは、主要なページ領域や小さなユーザーインターフェイス要素のレイアウトに利用できます。このガイドでは、CSS グリッドレイアウトと、CSS グリッドレイアウト仕様の一部である用語について紹介します。この概要で示した機能については、このシリーズの他のガイドで詳しく説明します。
@@ -33,7 +32,7 @@ CSS グリッドレイアウトと [CSS ボックス配置](/ja/docs/Web/CSS/Gui
 
 グリッドセルやグリッド領域内には複数のアイテムも配置でき、それらはお互いに部分的に重複できます。この階層は、 {{cssxref("z-index")}} プロパティで制御できます。
 
-グリッドは強力なレイアウト手法であり、[フレックスボックス](/ja/docs/Web/CSS/Guides/Flexible_box_layout) などの CSS の他の機能と組み合わせることで、レスポンシブで柔軟性があり、アクセシビリティに優れたレイアウトを作成することができます。まず、 **{{glossary("grid container", "グリッドコンテナー")}}**にグリッドを作成することから始めます。
+グリッドは強力なレイアウト手法であり、[フレックスボックス](/ja/docs/Web/CSS/Guides/Flexible_box_layout)などの CSS の他の機能と組み合わせることで、レスポンシブで柔軟性があり、アクセシビリティに優れたレイアウトを作成することができます。まず、**{{glossary("grid container", "グリッドコンテナー")}}** にグリッドを作成することから始めます。
 
 ## グリッドコンテナー
 
@@ -315,11 +314,11 @@ CSS グリッドレイアウトについて学び、使っていく中で、こ
 
 明示的グリッド は、{{cssxref("grid-template-columns")}} または {{cssxref("grid-template-rows")}} で定義された行と列の数で構成されます。暗黙的グリッド は、コンテンツがグリッドの外側（行など）に配置された場合に、新しいグリッド行を描画して、定義された明示的グリッドを拡張します。
 
-定義されたグリッドの外側に何かを配置した場合 (またはコンテンツの量のために、より多くのグリッドトラックが必要な場合)、グリッドは暗黙的なグリッドに行と列を作成します。これらのトラックは、既定で自動サイズ調整されるため、サイズはトラック内のコンテンツに基づいて決まります。
+定義されたグリッドの外側に何かを配置した場合、またはコンテンツ量が多いために追加のグリッドトラックが必要な場合、グリッドは暗黙のグリッド内で行と列を生成します。これらの暗黙のトラックはデフォルトで自動サイズ調整され、生成される行や列のサイズは、そのコンテンツとグリッドコンテナー内の空き空間の両方に影響されます。`auto` キーワードを使用すると、生成されたトラックはコンテンツを収容すると同時に、残りの空間を共有します。
 
 {{cssxref("grid-auto-rows")}} と {{cssxref("grid-auto-columns")}} プロパティで、暗黙的なグリッドに作成されたトラックのセットサイズを定義することもできます。
 
-この例では、 `grid-auto-rows: 200px` を設定して、この暗黙のグリッドで作成される予定の高さが `200px` になることを保証して います。
+この例では、 `grid-auto-rows: 200px` を設定して、この暗黙のグリッドで作成される予定の高さが `200px` になることを保証しています。
 
 ```html
 <div class="wrapper">
@@ -365,7 +364,7 @@ CSS グリッドレイアウトについて学び、使っていく中で、こ
 
 明示的なグリッドのセットアップ時または自動生成された行や列のサイズを定義する時、最小サイズのトラックを与えておき、追加されたコンテンツに合わせて広げられるようにしたいでしょう。例えば、行を 100 ピクセルより小さくしたくないが、コンテンツの高さが 300 ピクセルに引き伸ばされた場合は行の高さをそのサイズに引き伸ばしたい場合です。これは、{{cssxref("minmax", "minmax()")}} 関数で解決できます。
 
-この例では、 `minmax()` を `grid-auto-rows` プロパティの値内で使用しています。 `grid-auto-rows: minmax(100px, auto);` を設定すると、自動的に作成される行の高さは最小で `100px`、最大で `auto` になります。最大値に `auto` を設定すると、コンテンツに合わせてサイズが伸縮し、最も高いコンテンツを含むセルに基づいて行のサイズが決定されます。
+この例では、 `minmax()` を `grid-auto-rows` プロパティの値内で使用しています。 `grid-auto-rows: minmax(100px, auto);` を設定すると、自動的に作成される行の高さは最小で `100px`、最大で `auto` になります。最大値を `auto` に設定すると、トラックはコンテンツに合わせて（`max-content` のサイズまで）拡大しつつ、グリッドコンテナー内の空き空間も共有できるようになります。
 
 ```css
 .wrapper {

files/ja/web/css/guides/grid_layout/box_alignment/index.md

@@ -2,9 +2,8 @@
 title: グリッドレイアウトのアイテムの配置
 short-title: アイテムの配置
 slug: Web/CSS/Guides/Grid_layout/Box_alignment
-original_slug: Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout
 l10n:
-  sourceCommit: f79a491594ebb5634949ed31b26155973a39166e
+  sourceCommit: 85fccefc8066bd49af4ddafc12c77f35265c7e2d
 ---
 
 [CSS グリッドレイアウト](/ja/docs/Web/CSS/Guides/Grid_layout)は、[CSS ボックス配置](/ja/docs/Web/CSS/Guides/Box_alignment)を実装しています。これは、フレックスコンテナー内のアイテムの配置に使用される[フレックスボックス](/ja/docs/Web/CSS/Guides/Flexible_box_layout)と同じ標準です。配置モジュールでは、すべてのレイアウトメソッドで配置がどのように動作すべきかを詳しく説明しています。

files/ja/web/css/guides/grid_layout/common_grid_layouts/index.md

@@ -2,9 +2,8 @@
 title: グリッドを使用したよくあるレイアウトの実現
 short-title: よくあるグリッドレイアウト
 slug: Web/CSS/Guides/Grid_layout/Common_grid_layouts
-original_slug: Web/CSS/CSS_grid_layout/Realizing_common_layouts_using_grids
 l10n:
-  sourceCommit: 0cc9980e3b21c83d1800a428bc402ae1865326b2
+  sourceCommit: 85fccefc8066bd49af4ddafc12c77f35265c7e2d
 ---
 
 [一連の CSS グリッドレイアウトガイド](/ja/docs/Web/CSS/Guides/Grid_layout#ガイド)の締めくくりとして、グリッドレイアウトを使ったデザインのテクニックをいくつか紹介します。ここでは、 {{cssxref("grid-template-areas")}} を使った例と、 12 列の可変グリッドシステム、そして自動配置を使ったアイテムリストを見ていきます。これらの例からわかるように、多くの場合、グリッドレイアウトで望む結果を得るためには複数の方法があります。自分が解決しようとしている問題や、実現しようとしているデザインに合わせて、最も参考になる方法を選んでください。
@@ -27,8 +26,8 @@ l10n:
   max-width: 1024px;
   margin: 0 auto;
   font:
-    1.2em Helvetica,
-    arial,
+    1.2em "Helvetica",
+    "Arial",
     sans-serif;
 }
 
@@ -165,8 +164,8 @@ CSS フレームワークやグリッドシステムでは、通常 12 列また
   max-width: 1024px;
   margin: 0 auto;
   font:
-    1.2em Helvetica,
-    arial,
+    1.2em "Helvetica",
+    "Arial",
     sans-serif;
 }
 .wrapper > * {
@@ -243,8 +242,8 @@ CSS フレームワークやグリッドシステムでは、通常 12 列また
   max-width: 1024px;
   margin: 0 auto;
   font:
-    1.2em Helvetica,
-    arial,
+    1.2em "Helvetica",
+    "Arial",
     sans-serif;
 }
 
@@ -437,8 +436,8 @@ img {
 }
 body {
   font:
-    1.2em Helvetica,
-    arial,
+    1.2em "Helvetica",
+    "Arial",
     sans-serif;
 }
 a:link,
@@ -500,7 +499,7 @@ h2 {
 
 ![2 トラックのアイテムをレイアウトする空間がないため、隙間のあるレイアウトになっています。](11-grid-auto-flow-sparse.png)
 
-グリッドコンテナーに {{cssxref("grid-auto-flow", "grid-auto-flow: dense")}} を設定することで、グリッドにこれらのギャップを埋め戻すことができます。この操作を行う場合は、アイテムが論理的なソースの順序から外れてしまう可能性があるため、注意してください。この操作は、アイテムに設定された順序がない場合にのみ実行してください。さらに、ソースの順序に従ってタブの順序が設定され、再配置した表示順序とは異なるため、[アクセシビリティと再配置に関する問題](/ja/docs/Web/CSS/Guides/Grid_layout/Accessibility#visual_not_logical_re-ordering)が発生する可能性があることに注意してください。
+グリッドコンテナーに {{cssxref("grid-auto-flow", "grid-auto-flow: dense")}} を設定することで、グリッドにこれらのギャップを埋め戻すことができます。この操作を行う場合は、アイテムが論理的なソースの順序から外れてしまう可能性があるため、注意してください。この操作は、アイテムに設定された順序がない場合にのみ実行してください。さらに、ソースの順序に従ってタブの順序が設定され、再配置した表示順序とは異なるため、[アクセシビリティと再配置に関する問題](/ja/docs/Web/CSS/Guides/Grid_layout/Accessibility#視覚的な、しかし論理的ではない並べ替え)が発生する可能性があることに注意してください。
 
 ```html hidden
 <ul class="listing">
@@ -547,8 +546,8 @@ img {
 }
 body {
   font:
-    1.2em Helvetica,
-    arial,
+    1.2em "Helvetica",
+    "Arial",
     sans-serif;
 }
 a:link,