From 12f447440b4490d23587f80f8e7ac6273c8b9de1 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 25 Nov 2021 02:26:21 +0900 Subject: グリッドレイアウトの基本概念の文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/09/19 時点の英語版に同期 --- .../basic_concepts_of_grid_layout/index.md | 722 +++++++++++---------- 1 file changed, 375 insertions(+), 347 deletions(-) (limited to 'files/ja') diff --git a/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md b/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md index 667917d069..fa14cab091 100644 --- a/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md +++ b/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md @@ -3,65 +3,67 @@ title: グリッドレイアウトの基本概念 slug: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout tags: - CSS - - CSS Grids - - Guide - - Layout + - CSS グリッド + - ガイド + - レイアウト translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout --- -
{{CSSRef}}
+{{CSSRef}} -

CSS グリッドレイアウトは、二次元グリッドシステムを CSS にもたらします。グリッドは、主要なページ領域や小さなユーザーインターフェース要素のレイアウトに利用できます。この記事では、 CSS グリッドレイアウトと、 CSS Grid Layout Level 1 仕様の一部の用語について紹介します。この記事では、その概要を紹介し、この一連のガイドの残りで詳細を説明します。

+[CSS グリッドレイアウト](/ja/docs/Web/CSS/CSS_Grid_Layout)は、二次元グリッドシステムを CSS にもたらします。グリッドは、主要なページ領域や小さなユーザーインターフェイス要素のレイアウトに利用できます。この記事では、 CSS グリッドレイアウトと、 CSS Grid Layout Level 1 仕様の一部の用語について紹介します。この記事では、その概要を紹介し、この一連のガイドの残りで詳細を説明します。 -

グリッドとは何か？

+## グリッドとは何か？ -

グリッドは、列と行を定義する水平線と垂直線の集合が交差したものです。要素をグリッド上の行と列の中に配置することができます。 CSS グリッドレイアウトには次のような特徴があります。

+グリッドは、列と行を定義する水平線と垂直線の集合が交差したものです。要素をグリッド上の行と列の中に配置することができます。 CSS グリッドレイアウトには次のような特徴があります。 -

固定と可変のトラックサイズ

+### 固定のトラックサイズと可変のトラックサイズ -

例えばピクセル単位を使って固定トラックサイズのグリッドを作成することができます。これであるグリッドに所望のレイアウトに合うようなピクセルを設定できます。また、可変サイズのグリッドを作成する為にパーセントやこの目的で新たに制定された fr 単位を使用することができます。

+例えばピクセル単位を使って、固定トラックサイズのグリッドを作成することができます。これであるグリッドに好きなレイアウトに合うようなピクセルを設定できます。また、可変サイズのグリッドを作成するためにパーセントやこの目的で新たに制定された `fr` 単位を使用することができます。 -

アイテムの配置

+### アイテムの配置 -

グリッドの線の番号や名前を使ってグリッドのある位置を指定してアイテムを配置することができます。グリッドには、位置が明示されていないアイテムの配置を制御するアルゴリズムも含まれています。

+グリッドの線番号や名前を使って、グリッドのある位置を指定してアイテムを配置することができます。グリッドには、位置が明示されていないアイテムの配置を制御するアルゴリズムも含まれています。 -

コンテンツを保持する為の追加のトラックの作成

+### 内容物を保持するための追加のトラックの作成 -

グリッドレイアウトでは、明快にグリッドを定義することができます。グリッドレイアウトの仕様では必要に応じて柔軟に行や列を追加できるようになっています。「コンテナーに収まるだけ多い数の列」を追加するような機能もあります。

+グリッドレイアウトでは、明確にグリッドを定義することができます。グリッドレイアウトの仕様では、必要に応じて柔軟に行や列を追加できるようになっています。「コンテナーに収まるだけ多い数の列」を追加するような機能もあります。 -

整列の制御

+### 配置の制御 -

グリッドには整列機能が含まれており、あるグリッドエリア内でアイテムがどのように整列するのかと、グリッド全体がどのように整列するかを制御できます。

+グリッドには配置機能が含まれており、あるグリッド領域内でアイテムがどのように配置されるのか、グリッド全体がどのように配置されるかを制御できます。 -

オーバーラップコンテンツの制御

+### 重複内容物の制御 -

グリッドセルやグリッドエリア内には複数のアイテムも配置でき、それらはお互いに部分的にオーバーラップできます。この階層化は、 {{cssxref("z-index")}} プロパティで制御できます。

+グリッドセルやグリッド領域内には複数のアイテムも配置でき、それらはお互いに部分的に重複できます。この階層化は、 {{cssxref("z-index")}} プロパティで制御できます。 -

グリッドは強力な仕様であり、フレックスボックスなど CSS の他の部品と組み合わせると、以前は CSS での構築が不可能であったレイアウトを作成できます。これはすべて、グリッドコンテナーにグリッドを作成することから始まります。

+グリッドは強力な仕様であり、[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout)など CSS の他の部品と組み合わせると、以前は CSS での構築が不可能であったレイアウトを作成することができます。これはすべて、**グリッドコンテナー**にグリッドを作成することから始まります。 -

グリッドコンテナー

+

グリッドコンテナー

-

グリッドコンテナーを作成するには、要素に対して display: grid か display: inline-grid を指定します。グリッドコンテナーを作成すると、すべての直接の子要素がグリッドアイテムへと変わります。

+*グリッドコンテナー*を作成するには、要素に対して `display: grid` か `display: inline-grid` を指定します。グリッドコンテナーを作成すると、*直接の*子要素がすべて*グリッドアイテム*へと変わります。 -

この例では、 wrapper クラスの div を親要素として、その内部には 5 個の子要素が含まれます。

+この例では、 wrapper クラスの div を親要素として、その内部には 5 個の子要素が含まれています。 -
<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 をグリッドコンテナー化します。

+`.wrapper` をグリッドコンテナー化します。 -
.wrapper {
+```css
+.wrapper {
   display: grid;
 }
-
+``` - +``` -

{{ EmbedLiveSample('The_Grid_container', '200', '330') }}

+{{ EmbedLiveSample('The_Grid_container', '200', '330') }} -

すべての直接の子要素がグリッド要素になりました。それらの要素をグリッドにする前とウェブブラウザー上での見た目に変化は無いでしょう。グリッドには単一列のグリッドが作成されただけだからです。この時点で、 Firefox の開発者ツールの一つである Grid Inspector 機能が便利であることを確認できます。上記の例を Firefox で表示してグリッドを調査すると、grid 値の隣に小さなアイコンが表示されているでしょう。これをクリックすると、その要素上のグリッドがブラウザーウィンドウ内にオーバーレイ表示されます。

+すべての直接の子要素がグリッド要素になりました。それらの要素をグリッドにする前とウェブブラウザー上での見た目に変化は無いでしょう。グリッドには単一列のグリッドが作成されただけだからです。この時点で、 Firefox の開発者ツールの一つである[グリッドインスペクター](/ja/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts)機能が便利であることを確認できます。上記の例を Firefox で表示してグリッドを調査すると、`grid` 値の隣に小さなアイコンが表示されているでしょう。これをクリックすると、その要素上のグリッドがブラウザーウィンドウ内にオーバーレイ表示されます。 -

Using the Grid Highlighter in DevTools to view a grid

+![Using the Grid Highlighter in DevTools to view a grid](1-grid-inspector.png) -

CSS グリッドレイアウトについて学び、使っていく中で、このツールは、グリッドに何が起こっているかを視覚的に理解する助けになるでしょう。

+CSS グリッドレイアウトについて学び、使っていく中で、このツールは、グリッドに何が起こっているかを視覚的に理解する助けになるでしょう。 -

この例をさらにグリッドらしくする為には、列トラックを追加する必要があります。

+この例をさらにグリッドらしくするためには、列トラックを追加する必要があります。 -

グリッドトラック

+## グリッドトラック -

ここでは、{{cssxref("grid-template-columns")}} および {{cssxref("grid-template-rows")}} プロパティを使用してグリッド上に行と列を定義します。これらはグリッドトラックを定義します。グリッドトラックは、グリッド上の任意の2本の線の間にあるスペースです。下の画像で、グリッド内の最初の行トラックががハイライトされているのを確認できるでしょう。

+ここでは、{{cssxref("grid-template-columns")}} および {{cssxref("grid-template-rows")}} プロパティを使用してグリッド上に行と列を定義します。これらはグリッドトラックを定義します。*グリッドトラック*は、グリッド上の任意の 2 本の線の間にある空間です。下の画像で、グリッド内の最初の行トラックが強調表示されているのが確認できるでしょう。 -

+![](1_grid_track.png) -

先述の例に対して grid-template-columns プロパティを追加すると、列トラックのサイズが定義できます。

+

基本的な例

-

3本の200ピクセル幅の列トラックを持つグリッドを作成しましょう。子要素はこのグリッドの各グリッドセルに 1 個ずつ配置されます。

+先述の例に対して `grid-template-columns` プロパティを追加すると、列トラックのサイズが定義できます。 -
-
<div class="wrapper">
-  <div>One</div>
-  <div>Two</div>
-  <div>Three</div>
-  <div>Four</div>
-  <div>Five</div>
-</div>
-
+3 本の 200 ピクセル幅の列トラックを持つグリッドを作成しましょう。子要素はこのグリッドの各グリッドセルに 1 個ずつ配置されます。 -
.wrapper {
+```html
+

+  
One

+  
Two

+  
Three

+  
Four

+  
Five

+

+```
+
+```css
+.wrapper {
   display: grid;
   grid-template-columns: 200px 200px 200px;
 }
-
+``` - +``` -

{{ EmbedLiveSample('grid_first', '610', '140') }}

-
+{{ EmbedLiveSample('Basic_example', '610', '140') }} -

fr 単位

+

単位 fr

-

トラックは、どの長さの単位でも定義できます。グリッドには、柔軟なグリッドトラックを作成できるようにするため、追加の長さの単位が導入されています。新しい fr 単位は、グリッドコンテナー内の利用可能な空間の分数 (a fraction) を表します。次のグリッド定義は、利用可能なスペースに応じて伸縮する、幅が 3 等分されたトラックを作成します。

+トラックは、どの長さの単位でも定義できます。グリッドには、柔軟なグリッドトラックを作成できるようにするため、追加の長さの単位が導入されています。新しい単位 `fr` は、グリッドコンテナー内の利用可能な空間の比を表します。次のグリッド定義は、利用可能なスペースに応じて伸縮する、幅が 3 等分されたトラックを作成します。 -
-
<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: 1fr 1fr 1fr;
 }
-
+``` - +{{ EmbedLiveSample('The_fr_unit', '220', '140') }} -

{{ EmbedLiveSample('fr_unit_ls', '220', '140') }}

-
+

等しくない大きさ

-

この次の例では、1 つの 2fr トラックと 2 つの 1fr トラックの定義を作成します。利用可能な空間は、4 つに分割されます。そのうち 2 つが最初のトラックに与えられ、残りはそれぞれ次の 2 トラックに与えられます。

+この次の例では、1 つの `2fr` のトラックと 2 つの `1fr` のトラックの定義を作成します。利用可能な空間は、4 つに分割されます。そのうち 2 つが最初のトラックに与えられ、残りはそれぞれ次の 2 つのトラックに与えられます。 -
.wrapper {
+```html
+

+  
One

+  
Two

+  
Three

+  
Four

+  
Five

+

+```
+
+```css
+.wrapper {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr;
 }
-
+``` + +```css hidden +* {box-sizing: border-box;} -

最後の例では、絶対サイズのトラックを分数単位と混ぜて使用します。最初のトラックは 500px なので、この固定幅は利用可能な空間から除外されます。残りの領域は 3 つに分割され、比率に応じて 2 つの変動幅のトラックに割り当てられます。

+.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} -
.wrapper {
+.wrapper > div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+```
+
+{{ EmbedLiveSample('Unequal_sizes', '220', '140') }}
+
+
変動する大きさと絶対的な大きさの混合

+
+最後の例では、絶対サイズのトラックを `fr` 単位と混ぜて使用します。最初のトラックは 500px なので、この固定幅は利用可能な空間から除外されます。残りの領域は 3 つに分割され、比率に応じて 2 つの変動幅のトラックに割り当てられます。
+
+```html
+

+  
One

+  
Two

+  
Three

+  
Four

+  
Five

+

+```
+
+```css
+.wrapper {
   display: grid;
   grid-template-columns: 500px 1fr 2fr;
 }
-
+``` + +```css hidden +* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +``` + +{{ EmbedLiveSample('Mixing_flexible_and_absolute_sizes', '220', '140') }} -

repeat() 記法によるトラック列挙

+

repeat() 記法によるトラック列挙

-

多くのトラックを持つ大きなグリッドのため、repeat() 記法を使用して、トラック列挙のすべてまたは一部を繰り返すことができます。例えば、以下のグリッド定義は:

+多くのトラックを持つ大きなグリッドのため、`repeat()` 記法を使用して、トラック列挙のすべてまたは一部を繰り返すことができます。例えば、以下のグリッド定義を参照してください。 -
.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
 }
-
+``` -

次のように書くこともできます。

+次のように書くこともできます。 -
.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
 }
-
+``` -

繰り返し記法は、トラック列挙の一部にも使えます。この次の例では、はじめに 20px のトラックを持ち、続けて 6 つの 1fr トラックのセクション、最後に 20px のトラックを持つグリッドを作成します。

+反復記法は、トラック列挙の一部にも使えます。この次の例では、はじめに 20px のトラックを持ち、続けて 6 つの `1fr` のトラックのセクション、最後に 20px のトラックを持つグリッドを作成します。 -
.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: 20px repeat(6, 1fr) 20px;
 }
-
+``` -

繰り返し記法はトラック列挙も取るので、トラック列挙の繰り返しパターンの作成にも利用できます。この次の例で、グリッドは10 のトラックで構成されており、それは1fr トラックに 2fr トラックが続くパターンを5回繰り返したものです。

+反復記法はトラック列挙も取るので、トラック列挙の反復パターンの作成にも利用できます。この次の例で、グリッドは 10 本のトラックで構成されており、それは `1fr` のトラックに `2fr` のトラックが続くパターンを 5 回反復したものです。 -
.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(5, 1fr 2fr);
 }
-
+``` -

暗黙的と明示的なグリッド

+

暗黙的と明示的なグリッド

-

上でグリッドの例を作成した時、私達は列トラックを {{cssxref("grid-template-columns")}} プロパティで具体的に定義しましたが、グリッドは勝手に行も作っていました。これらの行は暗黙的のグリッドの一部です。一方、明示的なグリッドは、{{cssxref("grid-template-columns")}} または {{cssxref("grid-template-rows")}} で定義された行と列から構成されます。

+上でグリッドの例を作成した時、列トラックを {{cssxref("grid-template-columns")}} プロパティで具体的に定義しましたが、グリッドは勝手に行も作っていました。これらの行は暗黙的のグリッドの一部です。一方、明示的なグリッドは、{{cssxref("grid-template-columns")}} または {{cssxref("grid-template-rows")}} で定義された行と列から構成されます。 -

定義されたグリッドの外側に何かを配置した場合（またはコンテンツの量のために、より多くのグリッドトラックが必要な場合）、グリッドは暗黙的なグリッドに行と列を作成します。これらのトラックは、デフォルトで自動サイズ調整されるため、サイズはトラック内のコンテンツに基づいて決まります。

+定義されたグリッドの外側に何かを配置した場合 (または内容物の量のために、より多くのグリッドトラックが必要な場合)、グリッドは暗黙的なグリッドに行と列を作成します。これらのトラックは、デフォルトで自動サイズ調整されるため、サイズはトラック内の内容物に基づいて決まります。 -

{{cssxref("grid-auto-rows")}} と {{cssxref("grid-auto-columns")}} プロパティで、暗黙的なグリッドに作成されたトラックのセットサイズを定義することもできます。

+{{cssxref("grid-auto-rows")}} と {{cssxref("grid-auto-columns")}} プロパティで、暗黙的なグリッドに作成されたトラックのセットサイズを定義することもできます。 -

下の例では、grid-auto-rows を使用して、暗黙的なグリッド内に作成されたトラックが 200px の高さになることを保証しています。

+下の例では、`grid-auto-rows` を使用して、暗黙的なグリッド内に作成されたトラックが 200px の高さになることを保証しています。 -
<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);
   grid-auto-rows: 200px;
 }
-
+``` - +``` -

{{ EmbedLiveSample('The_implicit_and_explicit_grid', '230', '420') }}

+{{ EmbedLiveSample('The_implicit_and_explicit_grid', '230', '450') }} -

トラックのサイズ指定と minmax()

+

トラックのサイズ指定と minmax()

-

明示的なグリッドのセットアップ時または自動生成された行や列のサイズを定義する時、最小サイズのトラックを与えておき、追加されたコンテンツに合わせて広げられるようにしたいでしょう。例えば、行を 100 px より小さくしたくないが、コンテンツの高さが 300 px に引き伸ばされた場合は行の高さをそのサイズに引き伸ばしたい場合です。

+明示的なグリッドのセットアップ時または自動生成された行や列のサイズを定義する時、最小サイズのトラックを与えておき、追加された内容物に合わせて広げられるようにしたいでしょう。例えば、行を 100 ピクセルより小さくしたくないが、内容物の高さが 300 ピクセルに引き伸ばされた場合は行の高さをそのサイズに引き伸ばしたい場合です。 -

グリッドでは、それを {{cssxref("minmax", "minmax()")}} 関数で解決できます。この次の例では、{{cssxref("grid-auto-rows")}} の値に minmax() を使用しています。自動生成された行の高さの最小値は 100px、最大値は auto になります。値に auto を使うと、この行のセルがコンテンツのサイズに応じて空間が引き伸ばされ、その高さに合わせられます。

+グリッドでは、それを {{cssxref("minmax()")}} 関数で解決できます。この次の例では、{{cssxref("grid-auto-rows")}} の値に `minmax()` を使用しています。自動生成された行の高さの最小値は 100 ピクセル、最大値は `auto` になります。値に `auto` を使うと、この行のセルが内容物のサイズに応じて空間が引き伸ばされ、その高さに合わせられます。 -
.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: minmax(100px, auto);
 }
-
+``` -