From 192daf98585e5c4f0df62d87c305b034927faaa0 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 25 Dec 2021 23:43:33 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/css/layout_cookbook/grid_wrapper/index.md | 82 +++++++++++----------- 1 file changed, 41 insertions(+), 41 deletions(-) (limited to 'files') diff --git a/files/ja/web/css/layout_cookbook/grid_wrapper/index.md b/files/ja/web/css/layout_cookbook/grid_wrapper/index.md index 9cd4bffcbd..61c88001d3 100644 --- a/files/ja/web/css/layout_cookbook/grid_wrapper/index.md +++ b/files/ja/web/css/layout_cookbook/grid_wrapper/index.md @@ -3,44 +3,45 @@ title: グリッドラッパー slug: Web/CSS/Layout_cookbook/Grid_wrapper tags: - CSS - - Guide - - Layout - - cookbook - - recipes + - ガイド + - レイアウト + - 料理帳 + - レシピ translation_of: Web/CSS/Layout_cookbook/Grid_wrapper --- -
{{CSSRef}}
+{{CSSRef}} -

このパターンは、中央のラッパー内でグリッドのコンテンツを整列させるのに便利ですが、必要に応じて項目を脱出させて親要素やページの端に整列させることもできます。

+このパターンは、中央のラッパー内でグリッドのコンテンツを整列させるのに便利ですが、必要に応じて項目を脱出させて親要素やページの端に整列させることもできます。 -

要件

+## 要件 -

グリッド上に配置された項目は、水平方向の中央に配置された最大幅のラッパーやグリッドの外側の端に揃えることができます。

+グリッド上に配置された項目は、水平方向の中央に配置された最大幅のラッパーやグリッドの外側の端に揃えることができます。 -

レシピ

+## レシピ -

{{EmbedGHLiveSample("css-examples/css-cookbook/grid-wrapper.html", '100%', 720)}}

+{{EmbedGHLiveSample("css-examples/css-cookbook/grid-wrapper.html", '100%', 720)}} -
-

この例をダウンロードする

-
+> **Callout:** +> +> [この例をダウンロードする](https://github.com/mdn/css-examples/blob/master/css-cookbook/grid-wrapper--download.html) -

行った選択

+## 行った選択 -

このレシピでは、CSS グリッドの {{cssxref("minmax")}} 関数を使用して、{{cssxref("grid-template-columns")}} プロパティでグリッドトラックのサイズを定義しています。 最大幅を持つ中央の（グリッドレイアウトに使う6つの）列には、0 以上の最小値と、列トラックが大きくなれる最大サイズを指定する最大値を設定できます。 数値の単位（ピクセル、em、rem）を使用すると、中央のラッパーの固定最大サイズが作成されますが、パーセント値またはビューポート単位を使用すると、このラッパーはそのコンテキストに応じて拡大または縮小します。

+このレシピでは、CSS グリッドの {{cssxref("minmax")}} 関数を使用して、{{cssxref("grid-template-columns")}} プロパティでグリッドトラックのサイズを定義しています。 最大幅を持つ中央の（グリッドレイアウトに使う 6 つの）列には、0 以上の最小値と、列トラックが大きくなれる最大サイズを指定する最大値を設定できます。 数値の単位（ピクセル、em、rem）を使用すると、中央のラッパーの固定最大サイズが作成されますが、パーセント値またはビューポート単位を使用すると、このラッパーはそのコンテキストに応じて拡大または縮小します。 -

外側の2つの列の最大サイズは 1fr です。 つまり、グリッドコンテナ内の残りの使用可能スペースを埋めるようにそれぞれが拡大されます。

+外側の2つの列の最大サイズは `1fr` です。 つまり、グリッドコンテナー内の残りの使用可能スペースを埋めるようにそれぞれが拡大されます。 -

便利な代替方法

+## 有用な代替策または代替方法 -

このレシピをページレベルで使用するときは、コンテンツを水平方向に中央揃えするために、次のように左右の auto の {{cssxref("margin")}} とともに max-width を設定すると便利です。

+このレシピをページレベルで使用するときは、コンテンツを水平方向に中央揃えするために、次のように左右の `auto` の {{cssxref("margin")}} とともに `max-width` を設定すると便利です。 -
.grid {
+```css
+.grid {
   max-width: 1200px;
-  margin: 0 auto; // コンテナを水平方向に中央揃え
+  margin: 0 auto; // コンテナーを水平方向に中央揃え
 }
 
-/* ブラウザーがグリッドをサポートしている場合は、max-width と margin を取り除く */
+/* ブラウザーがグリッドに対応している場合は、max-width と margin を取り除く */
 @supports (display: grid) {
   .grid {
     display: grid;
@@ -48,37 +49,36 @@ translation_of: Web/CSS/Layout_cookbook/Grid_wrapper
     max-width: none;
     margin: 0;
   }
-}
+} +``` -

full-width 項目をビューポートの端まで「脱出」させるには、次のトリックを使用できます（Una Kravets の好意による）。

+`full-width` 項目をビューポートの端まで「脱出」させるには、次のトリックを使用できます（[Una Kravets](https://una.im/) の好意による）。 -
.item {
+```css
+.item {
   width: 100vw;
   margin-left: 50%;
   transform: translate3d(-50%, 0, 0);
-}
- -

これは、正確なグリッド上で項目を簡単に整列させることができるという利点が必要ない場合に限り、レイアウトの適切な近似値を提供します。

+} +``` -

アクセシビリティへの懸念

+これは、正確なグリッド上で項目を簡単に整列させることができるという利点が必要ない場合に限り、レイアウトの適切な近似値を提供します。 -

グリッドを使用すると（理由の範囲内で）項目を適切な場所に配置できますが、CSS グリッドを使用して項目を配置する場合は、基になるマークアップが論理的な順序に従うことが重要です（詳細については、CSS グリッドのレイアウトとアクセシビリティを参照）。

+## アクセシビリティの考慮 -

ブラウザー実装状況

+グリッドを使用すると（理由の範囲内で）項目を適切な場所に配置できますが、CSS グリッドを使用して項目を配置する場合は、基になるマークアップが論理的な順序に従うことが重要です（詳細については、[CSS グリッドのレイアウトとアクセシビリティ](/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility)を参照）。 -

さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。

+## ブラウザーの互換性 -

grid-template-columns

+レイアウト方法によってブラウザーの対応状況が異なります。使用しているプロパティの基本的な対応の詳細については、以下の表を参照してください。 -

{{Compat("css.properties.grid-template-columns")}}

+#### grid-template-columns -

関連情報

+{{Compat("css.properties.grid-template-columns")}} - +## 関連情報 -

 

+- {{Cssxref("grid-template-columns")}} +- [MDN の CSS グリッドレイアウト](/ja/docs/Web/CSS/CSS_Grid_Layout) +- 記事: [CSS グリッド: minmax() によるさらなる柔軟性](https://css-irl.info/more-flexibility-with-minmax/)（英語） +- 記事: [CSS グリッドを使った脱出](https://rachelandrew.co.uk/archives/2017/06/01/breaking-out-with-css-grid-explained/)（英語） -- cgit v1.2.3-54-g00ecf