From f7d70067686fbcb6da94d343a9a127822aa30755 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 25 Nov 2021 02:27:26 +0900 Subject: グリッドレイアウトと他のレイアウト方法との関係を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/17 時点の英語版に同期 --- .../relationship_of_grid_layout/index.md | 543 +++++++++------------ 1 file changed, 244 insertions(+), 299 deletions(-) (limited to 'files/ja/web') diff --git a/files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.md b/files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.md index 476cf929bf..e4a0c34ec3 100644 --- a/files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.md +++ b/files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.md @@ -7,23 +7,24 @@ tags: - Guide translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout --- -

CSS グリッドレイアウトはレイアウトを行うための完全なシステムの一部として、 CSS の他の機能と一緒に動作するよう設計されました。このガイドでは、既に使われている他の技術と、どうのようにグリッドが適合するかを説明します。

+{{CSSRef}} -

グリッドとフレックスボックス

+CSS グリッドレイアウトはレイアウトを行うための完全なシステムの一部として、 CSS の他の機能と一緒に動作するよう設計されました。このガイドでは、既に使われている他の技術と、どうのようにグリッドが適合するかを説明します。 -

CSS グリッドレイアウトとCSS フレックスボックスレイアウトの基本的な違いは、フレックスボックスは一次元 - 一列又は一行 - のレイアウトのために設計されたという点です。グリッドは二次元 - 行と列が同時 - のレイアウトのために設計されました。しかし、２つの仕様書はいくつかの共通の機能を共有しており、すでにフレックスボックスの使い方を学んでいるのであれば、類似性がグリッドの手がかりを助けるでしょう。

+## グリッドとフレックスボックス -

一次元 vs. ニ次元レイアウト

+CSS グリッドレイアウトと[CSS フレックスボックスレイアウト](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout)の基本的な違いは、フレックスボックスは一次元 - 一列*または*一行 - のレイアウトのために設計されたという点です。一方、グリッドは、行と列を同時に扱う二次元のレイアウト用に設計されています。しかし、この 2 つの仕様には共通の機能がいくつかあり、フレックスボックスの使い方をすでに学んでいる場合は、その共通点を参考にしてグリッドを使いこなすことができます。 -

一次元と二次元のレイアウトの違いを示すことができる単純な例です。

+

一次元 vs. 二次元レイアウト

-

最初の例では、一連のボックスを配置するためにフレックスボックスを使用しています。コンテナーの中には五つの子項目があり、 flex プロパティ値を与えて150ピクセルの flex-basis から伸縮できるようにしています。

+一次元と二次元のレイアウトの違いを示すことができる単純な例です。 -

{{cssxref("flex-wrap")}} プロパティを wrap に設定して、コンテナーの大きさが細くなりすぎて flex basis を維持することができなくなったら、項目が次の行へ折り返されるようにしています。

+最初の例では、一連のボックスを配置するためにフレックスボックスを使用しています。コンテナーの中には 5 つの子項目があり、 flex プロパティ値を与えて 150 ピクセルの flex-basis から伸縮できるようにしています。 -
- +``` -
<div class="wrapper">
-  <div>One</div>
-  <div>Two</div>
-  <div>Three</div>
-  <div>Four</div>
-  <div>Five</div>
-</div>
-
+```html +
+
One
+
Two
+
Three
+
Four
+
Five
+
+``` -
.wrapper {
+```css
+.wrapper {
   width: 500px;
   display: flex;
   flex-wrap: wrap;
 }
-.wrapper > div {
+.wrapper > div {
   flex: 1 1 150px;
 }
-
-
+``` -

{{ EmbedLiveSample('onedtwod', '500', '230') }}

+{{ EmbedLiveSample('One-dimensional_versus_two-dimensional_layout', '500', '230') }} -

図では、2つの項目が新しい行へ折り返されているのがわかると思います。これらの項目は利用可能なスペースを共有していますが、上記の項目の下には整列してはいません。フレックスアイテムが折り返しをした時、新しい行（もしくは列として機能している時は列）のそれぞれがフレックスコンテナーになるからです。スペースの配分は行をまたがって起こります。

+図では、2 つのアイテムが新しい行へ折り返されているのがわかると思います。これらのアイテムは利用可能な空間を共有していますが、上のアイテムの下に整列されているわけではありません。フレックスアイテムが折り返しをした時、新しい行（もしくは列として機能している時は列）のそれぞれがフレックスコンテナーになるからです。空間の配分は行をまたがって起こります。 -

よくある質問はそれらのアイテムをどのようにして並べるかです。2次元レイアウトメソッドが必要な場所では、行またはカラムによるアラインメントのコントロールが必要で、グリッドが得意な場面です。

+そこでよく聞かれるのが、それらのアイテムをどうやって並べるかということです。そこで、二次元のレイアウト方式が必要になります。配置を行と列で制御したい、ここでグリッドの出番です。 -

CSS グリッドによる同様のレイアウト

+

CSS グリッドによる同様のレイアウト

-

次の例では、グリッドを使って同様のレイアウトを構築します。今回は3つの 1fr 列トラックを持ちます。項目自体には何もセットする必要はりません。構築されたグリッドのセルそれぞれに項目を一つずつ配置していきます。厳格なグリッドに項目が配置されているため、行と列は整列しています。5つの項目があるので、二つ目の行にある終わりには隙間があります。

+次の例では、グリッドを使って同様のレイアウトを構築します。今回は 3 つの `1fr` の列トラックがあります。アイテム自体には何も設定する必要はりません。構築されたグリッドのセルそれぞれにアイテムを一つずつ配置していきます。厳格なグリッドにアイテムが配置されているため、行と列は整列しています。アイテムは 5 つなので、2 行目の最後は空間になります。 -
- +``` -
<div class="wrapper">
-  <div>One</div>
-  <div>Two</div>
-  <div>Three</div>
-  <div>Four</div>
-  <div>Five</div>
-</div>
-
+```html +
+
One
+
Two
+
Three
+
Four
+
Five
+
+``` -
.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
 }
-
+``` -

{{ EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170') }}

-
+{{ EmbedLiveSample('The_same_layout_with_CSS_grids', '300', '170') }} -

グリッドとフレックスボックスのどちらを使うかを決めるシンプルな質問です。

+グリッドとフレックスボックスのどちらを使うかを決めるシンプルな質問です。 - +- 行*または*列のみによってレイアウトを制御する必要がありますか。 – フレックスボックスを使いましょう +- 行*および*列によりレイアウトを制御する必要がありますか。 - グリッドを使いましょう -

コンテンツ外かレイアウト内か？

+### 内容物の外か、レイアウトの中か -

1次元 vs 2次元の区別に加えて、レイアウトのためにフレックスボックス又はグリッドを使わなければならないかどうかを決める別の方法があります。フレックスボックスはコンテンツ外から機能します。フレックスボックスの理想的な使用例は、コンテナー内で項目に等しくスペースを設定したいような場合です。コンテンツのサイズはそれぞれの項目がどのくらい個々のスペースを占めるかにより決定されます。もし項目が新しい行へ折り返されたら、行のサイズと利用可能なスペースをもとに項目の間隔が算出されます。

+一次元と二次元の区別に加えて、レイアウトにフレックスボックスとグリッドのどちらを使うべきかを決めるには、もうひとつの方法があります。フレックスボックスは内容物の外側から動作します。フレックスボックスの理想的な使用例は、複数のアイテムをコンテナー内で均等に配置したい場合です。内容物の大きさに合わせて、それぞれのアイテムがどれだけの空間を占めるかを決定します。アイテムが新しい行に折り返された場合、そのサイズとその行で利用可能な空間に基づいて、空間が調整されます。 -

グリッドはレイアウトの外から機能します。 CSS グリッドレイアウトを使ってレイアウトを作った際、自動配置ルールでアイテムを厳格なグリッドによるセルへ配置させることができます。それらはコンテンツのサイズに応じたトラックを作ることができます。しかしながら、全体のトラックも変わるでしょう。

+グリッドはレイアウトの中で機能します。CSS グリッドレイアウトを使用する場合、レイアウトを作成し、そこにアイテムを配置するか、自動配置ルールによって厳密なグリッドに沿ってグリッドセルにアイテムを配置していきます。コンテンツのサイズに対応したトラックを作成することは可能ですが、トラック全体が変化してしまいます。 -

もしフレックスボックスを使っていていくつかの柔軟性が欠けていたら、おそらく CSS グリッドレイアウトを使う必要性を感じるでしょう。例えばフレックスアイテムの幅をパーセンテージで設定し、ある行へその他の項目とともに整列させていたら、その場合にはグリッドはより良い選択肢になるでしょう。

+もしフレックスボックスを使っていていくつかの柔軟性が欠けていたら、おそらく CSS グリッドレイアウトを使う必要があるでしょう。例えばフレックスアイテムの幅をパーセント値で設定し、ある行へその他のアイテムとともに整列させていた場合は、グリッドがより良い選択肢になるでしょう。 -

ボックス配置

+

ボックス配置

-

フレックスボックスの最も素晴らしい特徴は、我々に適切な配置制御を与えてくれる最初のものということでした。これによりページの真ん中にボックスを置くことが簡単になりました。フレックス要素はフレックスコンテナーの高さに引き伸ばすことができ、これはつまり、同じ高さの列が可能ということです。これらは私たちが長い間求めてきたもので、少なくとも視覚効果を実現するためのさまざまな種類のハックが考え出されてきました。

+フレックスボックスの最も素晴らしい特徴は、我々に適切な配置制御を与えてくれる最初のものということでした。これによりページの真ん中にボックスを置くことが簡単になりました。フレックス要素はフレックスコンテナーの高さに引き伸ばすことができ、これはつまり、同じ高さの列が可能ということです。これらは私たちが長い間求めてきたもので、少なくとも視覚効果を実現するためのさまざまな種類のハックが考え出されてきました。 -

フレックスボックスの仕様による配置プロパティは Box Alignment Level 3 と呼ばれる新しい仕様に追加されました。これはつまり、グリッドレイアウトを含む他の仕様でも使用できるということです。将来的には、他のレイアウト手法にも適用できるようになるでしょう。

+フレックスボックスの仕様による配置プロパティは [Box Alignment Level 3](https://drafts.csswg.org/css-align/) と呼ばれる新しい仕様に追加されました。これはつまり、グリッドレイアウトを含む他の仕様でも使用できるということです。将来的には、他のレイアウト手法にも適用できるようになるでしょう。 -

この一連のガイドの後、ボックス配置と、それがグリッドレイアウトの中でどのように動作するのかを見ていきます。今回の場合、フレックスボックスと grid の簡単な比較例を挙げます。

+この一連のガイドの後、ボックス配置と、それがグリッドレイアウトの中でどのように動作するのかを見ていきます。今回の場合、フレックスボックスと grid の簡単な比較例を挙げます。 -

一つ目のフレックスボックスを利用する例では、３つの要素を持つコンテナがあります。コンテナであるwrapperには{{cssxref("min-height")}}が設定され、これはフレックスコンテナーの高さを決めています。コンテナには {{cssxref("align-items")}} を flex-end に設定してコンテナの終端に要素が並ぶようにしました。また、box1の{{cssxref("align-self")}}プロパティをcontainerの高さに合わせるようstreachへ上書きし、box2もコンテナの始まりから整列するにように上書きしています。

+最初の例では、フレックスボックスを使用しており、3 つの要素を持つコンテナーがあります。コンテナーである `wrapper` には {{cssxref("min-height")}} が設定され、フレックスコンテナーの高さを決めています。コンテナーには {{cssxref("align-items")}} を `flex-end` に設定してコンテナーの末尾に要素が並ぶようにしています。また、`box1` の {{cssxref("align-self")}} プロパティをコンテナーの高さに合わせるよう `streach` へ上書きし、`box2` もコンテナーの始まりから整列するにように上書きしています。 - +``` -
<div class="wrapper">
-  <div class="box1">One</div>
-  <div class="box2">Two</div>
-  <div class="box3">Three</div>
-</div>
-
+```html +
+
One
+
Two
+
Three
+
+``` -
.wrapper {
+```css
+.wrapper {
   display: flex;
   align-items: flex-end;
   min-height: 200px;
@@ -171,16 +170,16 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 .box2 {
   align-self: flex-start;
 }
-
+``` -

{{ EmbedLiveSample('Box_alignment', '300', '230') }}

+{{ EmbedLiveSample('Box_alignment', '300', '230') }} -

CSSグリッド上でのアラインメント

+

CSS グリッド上での配置

-

二つ目の例ではグリッドを使って同じレイアウトを作りましょう。今回はグリッドレイアウトを使うため、ボックスアラインメントプロパティを使います。従って、flex-startとflex-endではなくstartとendを使ってアラインメントします。グリッドレイアウトのケースでは、グリッド領域の中にアイテムをアラインメントしていきます。今回のケースでは単一のグリッドセルを作成していますが、これは複数のグリッドセルで構成された領域にもなることが可能です。

+2 つ目の例ではグリッドを使って同じレイアウトを作りましょう。今回はグリッドレイアウトを使うため、ボックス配置プロパティを使います。従って、 `start` と `end` を `flex-start` と `flex-end` の代わりに使って配置します。グリッドレイアウトの場合は、グリッド領域の中にアイテムを配置していきます。今回のケースでは単一のグリッドセルを作成していますが、これは複数のグリッドセルで構成された領域にもなることが可能です。 - +``` -
<div class="wrapper">
-  <div class="box1">One</div>
-  <div class="box2">Two</div>
-  <div class="box3">Three</div>
-</div>
-
+```html +
+
One
+
Two
+
Three
+
+``` -
.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(3,1fr);
   align-items: end;
@@ -217,26 +217,26 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 .box2 {
   align-self: start;
 }
-
+``` -

{{ EmbedLiveSample('Alignment_in_CSS_Grids', '200', '310') }}

+{{ EmbedLiveSample('Alignment_in_CSS_Grids', '200', '310') }} -

fr 単位と flex-basis

+### `fr` 単位と `flex-basis` -

We have already seen how the fr unit works to assign a proportion of available space in the grid container to our grid tracks. The fr unit, when combined with the {{cssxref("minmax", "minmax()")}} function can give us very similar behavior to the flex properties in flexbox while still enabling the creation of a layout in two dimensions.

+すでに、`fr` の単位がグリッドコンテナー内の利用可能な空間の割合をグリッドトラックに割り当てる仕組みを見てきました。この `fr` の単位と {{cssxref("minmax()", "minmax()")}} 関数を組み合わせると、フレックスボックスの `flex` プロパティと非常によく似た動作をしながら、二次元のレイアウトを作成することができます。 -

If we look back at the example where I demonstrated the difference between one and two-dimensional layouts, you can see there is a difference between the way of the two layouts work responsively. With the flex layout, if we drag our window wider and smaller, the flexbox does a nice job of adjusting the number of items in each row according to the available space. If we have a lot of space all five items can fit on one row. If we have a very narrow container we may only have space for one.

+一次元と二次元のレイアウトの違いを示した例を振り返ると、この 2 つのレイアウトがレスポンシブに動作する方法に違いがあることがわかります。フレックスレイアウトでは、ウィンドウをドラッグして大きくしたり小さくしたりすると、フレックスボックスが利用可能な空間に応じて各行のアイテム数をうまく調整してくれます。空間に余裕がある場合は、 5 つのアイテムが 1 列に収まります。しかし、コンテナーが非常に狭い場合は、 1 つのアイテムしか置けないかもしれません。 -

In comparison, the grid version always has three column tracks. The tracks themselves will grow and shrink, but there are always three since we asked for three when defining our grid.

+それに比べてグリッド版では、常に 3 列のトラックがあります。トラック自体は大きくなったり小さくなったりしますが、グリッドを定義するときに 3 つとしたので、常に 3 つあります。 -

Auto-filling grid tracks

+

グリッドトラックの自動入力

-

We can create a similar effect to flexbox, while still keeping the content arranged in strict rows and columns, by creating our track listing using repeat notation and the auto-fill and auto-fit properties.

+反復記法と `auto-fill` および `auto-fit` プロパティを使用してトラックリストを作成することで、コンテンツを厳密な行と列に配置しながら、フレックスボックスと同様の効果を得ることができます。 -

In this next example, I have used the auto-fill keyword in place of an integer in the repeat notation and set the track listing to 200 pixels. This means that grid will create as many 200 pixels column tracks as will fit in the container.

+次の例では、反復記法で整数の代わりに `auto-fill` キーワードを使用し、トラックリストを 200 ピクセルに設定しています。これにより、 grid はコンテナーに収まるだけの 200 ピクセルの列トラックを作成します。 - +``` -
<div class="wrapper">
-  <div>One</div>
-  <div>Two</div>
-  <div>Three</div>
-</div>
-
+```html +
+
One
+
Two
+
Three
+
+``` -
.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(auto-fill, 200px);
 }
-
+``` -

{{ EmbedLiveSample('Auto-filling_grid_tracks', '500', '170') }}

+{{ EmbedLiveSample('Auto-filling_grid_tracks', '500', '170') }} -

柔軟なトラック数

+

柔軟なトラック数

-

This isn’t quite the same as flexbox. In the flexbox example, the items are larger than the 200 pixel basis before wrapping. We can achieve the same in grid by combining auto-fit and the {{cssxref("minmax", "minmax()")}} function. In this next example, I create auto filled tracks with minmax. I want my tracks to be a minimum of 200 pixels, so I set the maximum to be 1fr. Once the browser has worked out how many times 200 pixels will fit into the container–also taking account of grid gaps–it will treat the 1fr maximum as an instruction to share out the remaining space between the items.

+これはフレックスボックスとは全く同じではありません。フレックスボックスの例では、アイテムは折り返す前では 200 ピクセルの基準よりも大きくなっています。グリッドでも `auto-fit` と {{cssxref("minmax()", "minmax()")}} 関数を組み合わせることで、同じことが実現できます。次の例では、 `minmax` を使って自動フィットトラックを作成します。トラックの大きさは最低でも 200 ピクセルにしたいので、最大値を `1fr` に設定しています。ブラウザーは、 200 ピクセルがコンテナーにいくつ収まるかを計算し、グリッドの隙間も考慮した上で、最大値の `1fr` を、アイテム間の残りの空間を共有する指示として扱います。 - +``` -
<div class="wrapper">
-  <div>One</div>
-  <div>Two</div>
-  <div>Three</div>
-</div>
-
+```html +
+
One
+
Two
+
Three
+
+``` -
.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 }
-
+``` -

{{ EmbedLiveSample('A_flexible_number_of_tracks', '500', '170') }}

+{{ EmbedLiveSample('A_flexible_number_of_tracks', '500', '170') }} -

We now have the ability to create a grid with a flexible number of flexible tracks, but see items laid out on the grid aligned by rows and columns at the same time.

+自由度の高いトラック数のグリッドを作成しながら、グリッド上に並べられたアイテムを行と列で同時に確認することができるようになりました。 -

グリッドと絶対位置指定された要素

+## グリッドと絶対位置指定された要素 -

Grid interacts with absolutely positioned elements, which can be useful if you want to position an item inside a grid or grid area. The specification defines the behavior when a grid container is a containing block and a parent of the absolutely positioned item.

+グリッドは絶対位置指定要素と相互作用するので、グリッドやグリッド領域内にアイテムを配置したい場合に便利です。仕様では、グリッドコンテナーが包含ブロックであり、絶対配置されたアイテムの親である場合の動作を定義しています。 -

含有ブロックとしてのグリッドコンテナ

+

包含ブロックとしてのグリッドコンテナー

-

To make the grid container a containing block you need to add the position property to the container with a value of relative, just as you would make a containing block for any other absolutely positioned items. Once you have done this, if you give a grid item position: absolute it will take as its containing block the grid container or, if the item also has a grid position, the area of the grid it is placed into.

+グリッドコンテナーを包含ブロックにするには、他の絶対位置指定アイテムの包含ブロックを作るのと同じように、コンテナーに position プロパティを relative の値で追加する必要があります。こうすると、グリッドアイテムに `position: absolute` を与えると、グリッドコンテナーを包含ブロックとし、アイテムにグリッド位置がある場合には、アイテムが配置されたグリッドの領域を包含ブロックとします。 -

In the below example I have a wrapper containing four child items. Item three is absolutely positioned and also placed on the grid using line-based placement. The grid container has position: relative and so becomes the positioning context of this item.

+以下の例では、4 つの子アイテムを含むラッパーがあります。アイテム 3 は絶対的な位置が指定されており、線ベースの配置を用いてグリッドに配置されています。グリッドコンテナーには `position: relative` が設定されているので、このアイテムの位置指定コンテキストになります。 -