display の新しい 2 値構文への対応 - CSS: カスケーディングスタイルシート

display の新しい 2 値構文への対応
======================

CSS Display Module Level 3 では、`display` プロパティの 2 値構文について記述しています。このガイドでは、この構文の変更について、その理由も含めて説明します。また、 `display` プロパティに組み込まれた後方互換性についても詳しく説明します。

display プロパティの値を変更するとどうなるのか
---------------------------

CSS について最初に学ぶことのひとつに、ある要素はブロックレベル、ある要素はインラインレベルである、ということがあります。例えば `<h1>` や `<p>` は既定でブロックレベルであり、 `<span>` はインラインレベルです。 `display` プロパティを使用すると、ブロックとインラインを切り替えることができます。例えば、見出しをインラインにするには次のような CSS を使用します。

```css
h1 {
  display: inline;
}
```

最近では、CSS グリッドレイアウトとフレックスボックスが追加されました。これらにアクセスするためには、 `display` プロパティの値、つまり `display: grid` と `display: flex` も使用します。 `display` の値が変更されて初めて、子プロパティはフレックスやグリッドのアイテムとなり、グリッドやフレックスボックスの仕様にある他のプロパティに反応するようになります。要素の `display` の値を変更すると、その直接の子要素の整形コンテキストが変更されます。

しかし、グリッドとフレックスボックスが示すのは、要素には**外部**と**内部**の両方の表示型があるということです。外側の表示型は、その要素がブロックレベルかインラインレベルかを表します。内側の表示型は、そのボックスの子要素がどのように動作するかを記述します。

例として、 `display: flex` を使用すると、ブロックレベルのコンテナーを作成し、フレックスの子を持つことになります。子要素はフレックス整形コンテキストに参加するように記述されます。 これは、 `<span>` — 通常はインラインレベルの要素 — に `display: flex` を適用すると分かります。 `<span>` はブロックレベル要素になります。レイアウト内の他のボックスとの関係では、ブロックレベルのものと同じように動作します。あたかも span に `display: block` を適用したかのようですが、子要素の動作も変更されます。

以下のライブサンプルでは、`<span>` に `display: flex` を適用しています。これはブロックレベルのボックスとなり、インライン方向に利用可能なすべての空間を占有しています。ここで、 `justify-content: space-between;` を使用すると、 2 つのフレックスアイテムの間にこの空間を入れることができます。

インラインフレックスコンテナーを作成することができます。 `inline-flex` という単一の値を使ってフレックスコンテナーを作成すると、インラインレベルのボックスとフレックスの子が作成されます。この子はブロックレベルコンテナーのフレックスの子と同じように動作します。唯一変わったことは、親がインラインレベルボックスになったということです。したがって、他のインラインレベルのものと同様に動作し、ブロックレベルのボックスのように完全な幅（またはインライン軸のサイズ）を取りません。つまり、次のようなテキストがフレックスコンテナーと一緒に表示される可能性があります。

グリッドレイアウトで作業する場合も同様です。 `display: grid` を使用すると、ブロックレベルのボックスが表示され、直接の子にはグリッド整形コンテキストが作成されます。 `display: inline-grid` を使用すると、インラインレベルのボックスが作成され、子要素にグリッド整形コンテキストが作成されます。

2 値の構文
------

上記の説明からわかるように、 `display` プロパティはかなりの新しい力を手に入れました。ページ上の他のボックスとの関係でブロックレベルかインラインレベルかを示すだけでなく、それが適用されているボックス内の整形コンテキストも示すようになりました。この動作をよりよく説明するために、`display` プロパティは再構築され、これまで使われてきた単一の値だけでなく、外部と内部の 2 つの値を設定することができるようになりました。

つまり、 `display: flex` を設定して、フレックスの子を持つブロックレベルのボックスを作成する代わりに、 `display: block flex` を使用することになります。フレックスの子要素を持つインラインレベルのボックスを作成するには、 `display: inline-flex` の代わりに `display: inline flex` を使用します。以下の例は、 Firefox 70 以上で動作するもので、これらの値を示しています。

`display` の既存のすべての値に対応するものがあります。最も一般的なものを以下の表に示します。最も一般的なものを下の表に示します。完全なリストを見るには、 `display` property specification にある表を参照してください。

| 単一の値 | 新しい値 |
| --- | --- |
| `block` | `block flow` |
| `flow-root` | `block flow-root` |
| `inline` | `inline flow` |
| `inline-block` | `inline flow-root` |
| `flex` | `block flex` |
| `inline-flex` | `inline flex` |
| `grid` | `block grid` |
| `inline-grid` | `inline grid` |

display: block flow-root と display: inline flow-root
----------------------------------------------------

これらの新しい値が CSS レイアウトの明確化にどのように役立つかについて、表にあるあまり馴染みがないと思われる値について見てみましょう。 2 つの値 `display: block flow-root` は、かなり新しい 1 つの値 `display: flow-root` に対応します。この値の唯一の目的は、新しいブロック整形コンテキスト (BFC) を作成することです。BFC は、ボックスの中にあるものはボックスの中にとどまり、ボックスの外から入ってくるものはボックスの中に入り込めないようにします。新しい BFC を作成する最も明白な用途は、浮動要素を中に収め、clearfix のハックのしなくてもよくすることです。

以下の例では、コンテナーの中に浮動しているアイテムがあります。浮動要素は枠のついたボックスで囲まれており、その中に浮動要素とテキストが一緒に入っています。もし `display: flow-root` という行を削除すると、浮動要素はボックスの底面からはみ出るようになります。 Firefox を使用している場合は、より新しい `display: block flow-root` に置き換えることで、単一の `flow-root` 値と同じことが実現できます。

`flow-root` の値は、ブロックとインラインのレイアウトについて考えれば、理にかなっています。これは、通常フローと呼ばれることもあるようです。 HTML ページは新しい整形コンテキストを作成し（浮動要素やマージンが境界からはみ出さない）、コンテンツはブロックとインラインレイアウトを使用して、通常のフローで表示されます。グリッドやフレックスのコンテナーを作成すると、新しい整形コンテキスト（それぞれグリッド整形コンテキストとフレックス整形コンテキスト）も作成されます。しかし、浮動要素やマージンを含めてもブロックやインラインレイアウトを使い続けたい場合は、新しいフロールートを作成し、ブロックやインラインレイアウトでやり直すことができます。その位置から下方向は、すべて新しいフロールートの中に含まれます。

したがって、`display: flow-root` の 2 値構文が `display: block flow-root` であることは、非常に理にかなっていると言えます。ブロックレベルのボックスと通常のフローに参加する子オブジェクトを持つ、ブロック整形コンテキストを作成しているのです。対応する組である `display: inline flow-root` についてはどうでしょうか？これは `display: inline-block` を記述する新しい方法です。

`display: inline-block` という値は、 CSS の初期から存在しています。この値を使用する理由は、例えばナビゲーションアイテムを作成する際に、インラインアイテムを要素から離して距離を置くことができるようにするため、または以下の例のようにインライン要素にパディング付きの背景を追加したい場合です。

しかし、 `display: inline-block` を持つ要素は、浮動要素も含むことになります。それは、インラインレベルのボックスの中にあるすべてのものを含みます。したがって、 `display: inline-block` は `display: flow-root` と全く同じですが、ブロックレベルのボックスではなく、インラインレベルのボックスで行います。新しい構文は、この値で何が起こっているかを正確に表現しています。上記の例では、 Firefox で `display: inline-block` を `display: inline flow-root` に変更しても同じ結果になります。

display の古い値について
----------------

上の表で示したように、それぞれの 2 値版は旧来版に直接マッピングされているので、 2 値版を使用するメリットは今のところありません。

`display` の値が一つだけの場合、仕様書では、外側の値である `block` や `inline` のみを使用した場合にどうするかが説明されています。

>
> 「`<display-outside>` の値が指定されたものの、 `<display-inside>` が省略された場合、その要素の内側の表示型は既定で flow になります。」
>
>
>

つまり、単一の値の世界での動作と全く同じです。 `display: block` や `display: inline` を指定すると、ボックスの外側の表示値が変更されますが、子オブジェクトは通常のフローで続行されます。

もし、内側の値である `flex`, `grid`, `flow-root` のみを指定した場合、仕様書では、外側の値として `block` を指定するように説明されています。

>
> 「`<display-inside>` の値が指定されたものの、 `<display-outside>` が省略された場合、その要素の外側の表示型は既定で block になります。ただし、 ruby は例外で既定で inline になります。」
>
>
>

最後に、いくつか旧来の合成済みインラインレベル値があります。

* `inline-block`
* `inline-table`
* `inline-flex`
* `inline-grid`

対応しているブラウザーがこれらを単一の値として見つけた場合、以下の 2 値版と同じように扱われます。

* `inline flow-root`
* `inline table`
* `inline flex`
* `inline grid`

つまり、単一の値を使用する既存サイトと新規サイトの互換性を維持しつつ、仕様の進化を可能にすることで、現状の状況をすべてきちんとカバーしているのです。

2 値の構文を使い始めることはできるのか？
---------------------

上で示したように、今すぐ 2 値版を使うメリットはあまりありません。もし使ったとしても、そのページは Firefox でしか動かないでしょう 他のブラウザーはまだ 2 値版を実装していません。そのため、 `display: block flex` は Firefox でのみフレックスレイアウトを実現し 、Chrome では無効なものとして無視されます。 2 値構文に対する現在の対応状況は、互換性データで確認することができます。

{{Compat}}
* Chromium bug: https://bugs.chromium.org/p/chromium/issues/detail?id=804600

しかし、このように `display` の値を 2 値の方法で考えることには価値があります。 `display` の値を変更するときに、外側と内側の値を考慮すれば、その値がボックス自体にどのような影響を与えるか、レイアウトでの表示や動作、そして直接の子オブジェクトにどのように影響するかをすぐに理解することができます。


negative - CSS: カスケーディングスタイルシート

negative
========

カスタムカウンターのスタイルを定義する際、 **`negative`** 記述子により、値が負のときにカウンターの表現に付加または前置する記号を指定する方法を提供することで、負のカウンターの表現を変更することができます。

構文
--

```css
/\* <symbol> 値 \*/
negative: "-"; /\* 負の値の場合に先頭に '-' を付ける \*/
negative: "(" ")"; /\* 負の値の場合に '(' と ')' で囲む \*/
```

### Values

first `<symbol>`

カウンターが負の時に、この記号がその表現の前に付きます。

second `<symbol>`

存在する場合、カウンターが負の時に、この記号がその表現の後に追加されます。

解説
--

カウンターの値が負の場合、記述子の値として指定された記号がカウンター表現の前に置かれ、指定された場合は 2 番目の記号が表現の後に追加されます。 negative 記述子は、 `system` の値が `symbolic`, `alphabetic`, `numeric`, `additive`, `extends` の何れかで、拡張カウンタースタイル自体が負の符号を使用している場合のみ有効になります。負のカウンター値に対応していない他のシステムで negative 記述子が指定された場合、その記述子は無視されます。

公式定義
----

|  |  |
| --- | --- |
| 関連するアット規則 | `@counter-style` |
| 初期値 | `"-" hyphen-minus` |
| 計算値 | 指定通り |

形式文法
----
```

<symbol> <symbol>?

<symbol> =
  <string>       |
  <image>        |
  <custom-ident>
```

例
-

### 負のカウンターを描画する

#### HTML

```html
<ol class="list" start="-3">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ol>
```

#### CSS

```css
@counter-style neg {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  negative: "(-" ")";
}

.list {
  list-style: neg;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-system |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `list-style`, `list-style-image`, `list-style-position`
* `symbols()`, 無名のカウンタースタイルを生成する関数記法。


speak-as - CSS: カスケーディングスタイルシート

speak-as
========

**`speak-as`** 記述子は、与えられた `@counter-style` で構築されたカウンター記号が、どのように話し言葉で表現されるかを指定します。例えば、カウンター記号を数値として話すか、あるいは単にオーディオキューで表現するかを指定することができます。

構文
--

```css
/\* キーワード値 \*/
speak-as: auto;
speak-as: bullets;
speak-as: numbers;
speak-as: words;
speak-as: spell-out;

/\* @counter-style 名の値 \*/
speak-as: <counter-style-name>;
```

### 値

`auto`

もし `speak-as` の値が `auto` と指定された場合、`speak-as` の有効値は `system` 記述子の値に基づいて決定されます。

* `system` の値が `alphabetic` の場合、 `speak-as` の有効な値は `spell-out` になります。
* `system` が `cyclic` の場合、 `speak-as` の有効な値は `bullets` です。
* `system` が `extends` の場合、 `speak-as` の値は拡張スタイルで `speak-as: auto` が指定されている場合と同じになります。
* 他の場合はすべて、 `auto` を設定すると `speak-as: numbers` を設定するのと同じ効果になります。

`bullets`

順序なしリストの項目を表すためにユーザーエージェントで定義されたフレーズまたはオーディオキューが読み上げられます。

`numbers`

カウンターの数値が、文書の言語で読み上げられます。

`words`

ユーザーエージェントは、通常通りカウンター値を生成し、それを文書の言語の単語として読み上げます。

`spell-out`

ユーザーエージェントは通常通りカウンター表現を生成し、それを 1 文字ずつ読み上げます。ユーザーエージェントが特定のカウンター記号を読み上げる方法を知らない場合、ユーザーエージェントは `speak-as` の値が `numbers` であるかのように読み上げるかもしれません。

`<counter-style-name>`

別のカウンタースタイルの名前を `<custom-ident>` として指定します。もし含まれていれば、カウンターはそのカウンタースタイルで指定された形式で発声されます。これは、 `fallback` 記述子を指定するのと同じようなものです。指定されたスタイルが存在しない場合、 `speak-as` の既定値は `auto` です。

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

`speak-as` プロパティに対する支援技術は非常に限られています。ページの目的を理解するために重要な情報を伝えるためには、このプロパティに依存しないようにしてください。

Let's Talk About Speech CSS | CSS Tricks

公式定義
----

|  |  |
| --- | --- |
| 関連するアット規則 | `@counter-style` |
| 初期値 | `auto` |
| 計算値 | 指定通り |

形式文法
----
```

auto                 |
bullets              |
numbers              |
words                |
spell-out            |
<counter-style-name>

<counter-style-name> = <custom-ident>
```

例
-

### カウンターの読み上げ方を設定

#### HTML

```html
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>
```

#### CSS

```css
@counter-style speak-as-example {
  system: fixed;
  symbols:     ;
  suffix: " ";
  speak-as: numbers;
}

.list {
  list-style: speak-as-example;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-speak-as |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `list-style`, `list-style-image`, `list-style-position`
* `symbols()`、無名のカウンタースタイルを生成する関数記法


system - CSS: カスケーディングスタイルシート

system
======

**`system`** 記述子は、整数値のカウンターを文字列表現に変換するために使用するアルゴリズムを指定します。これは `@counter-style` で使用され、定義されたスタイルの動作を定義するために使用されます。

`system` 記述子で指定されたアルゴリズムが特定のカウンター値の表現を構築できない場合、その値の表現は提供された代替システムを使用して構築されます。

構文
--

```css
/\* キーワード値 \*/
system: cyclic;
system: numeric;
system: alphabetic;
system: symbolic;
system: additive;
system: fixed;

/\* 複合値 \*/
system: fixed 3;
system: extends decimal;
```

これは、 3 つの形式のうちの 1 つです。

* キーワード値 `cyclic`, `numeric`, `alphabetic`, `symbolic`, `additive`, `fixed` のいずれか。
* キーワード値 `fixed` と整数値。
* キーワード値 `extends` と `@counter-style` の名前。

`cyclic`

提供された記号のリストを循環します。記号のリストの最後に到達すると、最初に戻ってやり直します。このシステムは、ただ一つの記号を持つ単純な弾丸スタイルや、複数の記号を持つスタイルに便利です。 `symbols` 記述子には 1 つ以上の記号を指定する必要があります。そうでなければ、カウンタースタイルが有効になりません。

`fixed`

有限の記号セットを指定することを定義します。指定された記号をすべて循環したら、代替スタイルが使用されます。このシステムは、カウンターの値が有限である場合に有効です。 `symbols` 記述子には 1 つ以上の記号を指定しなければ、カウンタースタイルが有効にはなりません。また、オプションで `<integer>` をシステムの後に指定し、最初の記号の値として指定することができます。この整数が省略された場合、最初の整数の値は `1` として扱われます。

`symbolic`

指定された記号のリストを循環します。この循環を連続して回すたびに、カウンター表現に使用される記号が 2 倍、 3 倍と増えていきます。例えば、元の記号が "◽" と "◾" であった場合、循環するごとに "◽◽" と "◾◾" 、 "◽◽◽" と "◾◾◾" のように変化します。 `symbols` 記述子には 1 つ以上の記号を指定する必要があります。そうでなければ、カウンタースタイルが有効になりません。このカウンターシステムは正のカウンター値に対してのみ機能します。

`alphabetic`

指定された記号を桁として、アルファベット記数法に解釈します。 `"a"` から `"z"` までの文字が `alphabetic` 記数法のカウンタースタイルの記号として指定された場合、最初の 26 個のカウンター表現は `"a"`, `"b"` から `"z"` までとなります。この時点までは、上で説明した `symbolic` システムと同じ動作になります。しかし、`"z"` 以降は `"aa"`, `"ab"`, `"ac"`… のように続きます。

`symbols` 記述子には 2 つ以上の記号を指定する必要があります。そうでなければ、カウンタースタイルが有効になりません。 `symbols` 記述子で与えられた最初のカウンター記号は `1` として、次の記号は `2` として、以下同様に解釈されます。このシステムはまた、正のカウンター値に対してのみ定義されています。

`numeric`

カウンター記号を位取り記数法の桁として解釈します。この記数法は、上で説明した `alphabetic` システムと似ています。主な違いは、 `alphabetic` システムでは、 `symbols` 記述子で与えられた最初のカウンター記号が `1` 、次の記号は `2` 、以下同様に解釈されますが、この記数法では、最初のカウンター記号が 0、次は `1`、次は `2` というように解釈されることです。

`symbols` 記述子には 2 つ以上の記号を指定する必要があります。そうでなければ、カウンタースタイルが有効になりません。

`additive`

ローマ数字のように、異なる値を得るために異なる位置の数字を再利用するのではなく、より大きな値を得るために追加の記号を定義する「符号-値」の記数法を表すために使用されます。このようなシステムでは、数値の値は数値の桁を足すことで求められます。

`additive-symbols` と呼ばれる追加の記述子は、 1 つの*加算タプル*で指定しなければならず、そうでなければカウンタースタイルのルールが有効になりません。加算タプルは複合カウンター記号に似ており、通常のカウンター記号と負でない整数の重みの 2 つの部分から構成されます。加算タプルは重みの降順で指定しなければならず、そうでない場合は無効となります。

`extends`

他のカウンタースタイルのアルゴリズムを使用し、他の側面を変更することができます。カウンタースタイルのルールが `extends` システムを使用している場合、指定されていない記述子やその値は、指定された拡張カウンタースタイルから取得されます。 extends で指定されたカウンタースタイル名が現在定義されているカウンタースタイル名でない場合、代わりに 10 進カウンタースタイルから拡張されます。

extends では `symbols` または `additive-symbols` 記述子を指定してはならず、そうでなければカウンタースタイルのルールが有効になりません。 1 つまたは複数のカウンタースタイル定義が extends 値でサイクルを形成する場合、ブラウザーは関係しているすべてのカウンタースタイルを 10 進数スタイルから拡張したものとして扱います。

公式定義
----

|  |  |
| --- | --- |
| 関連するアット規則 | `@counter-style` |
| 初期値 | `symbolic` |
| 計算値 | 指定通り |

形式文法
----
```

cyclic                             |
numeric                            |
alphabetic                         |
symbolic                           |
additive                           |
[ fixed <integer>? ]               |
[ extends <counter-style-name> ]

<counter-style-name> = <custom-ident>
```

例
-

### cyclic カウンター

ブラウザーが対応していれば、この例は次のように描画されます。
```

◉ One
◉ Two
◉ Three
```

#### CSS
```

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>
```

```css
@counter-style fisheye {
  system: cyclic;
  symbols: ◉;
  suffix: " ";
}

ul {
  list-style: fisheye;
}
```

#### 結果

### fixed カウンター

ブラウザーが対応していれば、この例は次のように描画されます。
```

➀ One
➁ Two
➂ Three
4 Four
5 Five
```

#### CSS
```

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>
```

```css
@counter-style circled-digits {
  system: fixed;
  symbols: ➀ ➁ ➂;
  suffix: " ";
}

ul {
  list-style: circled-digits;
}
```

#### 結果

### symbolic カウンター

ブラウザーが対応していれば、この例は次のように描画されます。
```

  a. One
  b. Two
  c. Three
 aa. Four
 bb. Five
 cc. Six
aaa. Seven
bbb. Eight
```

#### CSS
```

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
</ul>
```

```css
@counter-style abc {
  system: symbolic;
  symbols: a b c;
  suffix: ". ";
}

ul {
  list-style: abc;
}
```

#### 結果

### alphabetic カウンター

ブラウザーが対応していれば、この例は次のように描画されます。
```

 a. One
 b. Two
 c. Three
aa. Four
ab. Five
ac. Six
ba. Seven
bb. Seven
```

#### CSS
```

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
</ul>
```

```css
@counter-style abc {
  system: alphabetic;
  symbols: a b c;
  suffix: ". ";
}

ul {
  list-style: abc;
}
```

#### 結果

### numeric カウンター

ブラウザーが対応していれば、この例は次のように描画されます。
```

 b. One
 c. Two
ba. Three
bb. Four
bc. Five
ca. Six
cb. Seven
cc. Eight
```

`symbols` 記述子で指定された最初の記号は、ここでは `0` と解釈されます。

#### CSS
```

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
</ul>
```

```css
@counter-style abc {
  system: numeric;
  symbols: a b c;
  suffix: ". ";
}

ul {
  list-style: abc;
}
```

#### 結果

### numeric カウンターに数字を使用

次の例のように、 `0` から `9` までの数字が記号として指定された場合、このカウンタースタイルは数字のカウンタースタイルと同様に描画されます。

#### CSS
```

<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
</ul>
```

```css
@counter-style numbers {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  suffix: ".";
}

ul {
  list-style: numbers;
}
```

#### 結果

### additive カウンター

この例では、ローマ数字を使ってリストを描画しています。 `range` が指定されていることに注意してください。これは、カウンターの値が `3999` になるまでの間、正しいローマ数字を表示するためです。範囲を超えると、残りのカウンター表現は `decimal` スタイル、すなわち代替となります。もし、カウンターの値をローマ数字で表現する必要がある場合には、自分でルールを作り直すのではなく、定義済みのカウンタースタイルである `upper-roman` または `lower-roman` のどちらかを使用するとよいでしょう。

#### HTML

```html
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>
```

#### CSS

```css
@counter-style upper-roman {
  system: additive;
  range: 1 3999;
  additive-symbols:
    1000 M,
    900 CM,
    500 D,
    400 CD,
    100 C,
    90 XC,
    50 L,
    40 XL,
    10 X,
    9 IX,
    5 V,
    4 IV,
    1 I;
}

ul {
  list-style: upper-roman;
}
```

#### 結果

### extends の例

この例では、 `lower-alpha` カウンタースタイルのアルゴリズム、記号、その他のプロパティを使用しますが、カウンター表現の後のピリオド (`'.'`) を削除し、文字を `(a)`, `(b)` などのように括弧で囲んで使用します。

#### HTML

```html
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>
```

#### CSS

```css
@counter-style alpha-modified {
  system: extends lower-alpha;
  prefix: "(";
  suffix: ") ";
}

ul {
  list-style: alpha-modified;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-system |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `list-style`, `list-style-image`, `list-style-position`
* `symbols()`、無名のカウンタースタイルを生成する関数記法


symbols - CSS: カスケーディングスタイルシート

symbols
=======

**`symbols`** は CSS の記述子で、指定されたカウンターシステムがカウンター表現を構築するために使用する記号を指定するために使用します。

構文
--

`symbols` 記述子は、 1 つ以上の `<symbol>` で指定します。

### 値

`<symbol>`

そのカウンターシステムで使用される記号を表します。これは以下のデータ型のうちの一つである必要があります。

* `<string>`
* `<image>` (注: この値は「リスクあり」であり、仕様書から削除されるかもしれません。これはまだ実装されていません。)
* `<custom-ident>`

解説
--

記号は文字列、画像、識別子の何れかで指定することができます。これは `@counter-style` アットルールの中で使用されます。

```css
symbols: A B C D E;
symbols: "\24B6" "\24B7" "\24B8" D E;
symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9";
symbols: url("first.svg") url("second.svg") url("third.svg");
symbols: indic-numbers;
```

`symbols` 記述子は、 `system` 記述子の値が `cyclic`, `numeric`, `alphabetic`, `symbolic`, `fixed` の何れかである場合に指定する必要があります。 `additive` システムを使用する場合は、 symbols を指定する代わりに `additive-symbols` を使用してください。

公式定義
----

|  |  |
| --- | --- |
| 関連するアット規則 | `@counter-style` |
| 初期値 | `n/a (required)` |
| 計算値 | 指定通り |

形式文法
----
```

<symbol>+

<symbol> =
  <string>       |
  <image>        |
  <custom-ident>
```

例
-

### カウンター記号の設定

#### HTML

```html
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>
```

#### CSS

```css
@counter-style symbols-example {
  system: fixed;
  symbols: A "1" "\24B7" D E;
}

.list {
  list-style: symbols-example;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-symbols |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `symbols` 記述子は `@counter-style` アットルールの中で使用されます。
* `list-style`, `list-style-image`, `list-style-position`
* `symbols()`, 無名のカウンタースタイルを生成する関数記法
* `url()` 関数


range - CSS: カスケーディングスタイルシート

range
=====

カスタムカウンターのスタイルを定義する際、 **`range`** 記述子により、スタイルが適用されるカウンター値の範囲を指定することができます。カウンターの値が指定された範囲の外にある場合、代替スタイルがそのマーカーの表現を構築するために使用されます。

構文
--

```css
/\* キーワード値 \*/
range: auto;

/\* 範囲の値 \*/
range: 2 5;
range: infinite 10;
range: 6 infinite;
range: infinite infinite;

/\* 複数の範囲の値 \*/
range:
  2 5,
  8 10;
range:
  infinite 6,
  10 infinite;
```

### 値

`auto`

範囲はカウンターシステムによって決まります。

* cyclic, numeric, fixed の各システムでは、範囲は負の無限大から正の無限大までです。
* alphabetic および symbolic システムでは、範囲は 1 から正の無限大までです。
* additive システムでは、範囲は 0 から正の無限大までです。
* extends システムでは、範囲は拡張されたシステムのために自動的に生成されます。 複雑な定義済みスタイル（§7 複雑な定義済みカウンタースタイル）を拡張する場合、範囲はスタイルの定義範囲になります。

`[ [ | infinite ]{2} ]#`

 カンマで区切られた範囲のリストを定義します。個々の範囲については、最初の値が下限、 2 番目の値が上限となります。範囲は包括的であり、常に下限と上限の両方の数値を含むことを意味します。範囲の最初の値として無限大が使用された場合は負の無限大を表し、 2 番目の値として使われた場合は正の無限大を表します。カウンタースタイルの範囲は，リストで定義されたすべての範囲を合わせたものとなります。
 いずれかの範囲の下限が上限より大きい場合は、その記述子全体は無効となり、無視されます。

解説
--

range 記述子の値は、 auto またはカンマで区切られた下限値と上限値を整数で指定することができます。

auto の場合、 cyclic, numeric, fixed システムでは、負の無限大から正の無限大までの範囲になります。 alphabetic および symbolic システムでは， 1 から正の無限大の範囲になります。 additive システムでは、 auto は 0 から正の無限大の範囲になります。 extends システムの場合，範囲は auto が拡張システムに対して生成するすべてのものになります。

range を整数で指定する場合、無限大を表す値として `infinite` を使用することができます。もし *infinite* が範囲の最初の値として指定された場合、負の無限大として解釈されます。上限値として使われた場合は、正の無限大とみなされます。

公式定義
----

|  |  |
| --- | --- |
| 関連するアット規則 | `@counter-style` |
| 初期値 | `auto` |
| 計算値 | 指定通り |

形式文法
----
```

[ [ <integer> | infinite ]{2} ]# |
auto
```

例
-

### 範囲を超えるカウンタースタイルを設定

```html
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
</ul>
```

```css
@counter-style range-multi-example {
  system: cyclic;
  symbols: "\25A0" "\25A1";
  range:
    2 4,
    7 9;
}

.list {
  list-style: range-multi-example;
}
```

上記のリストは次のように表示されます。

:仕様書
---

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-range |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `list-style`, `list-style-image`, `list-style-position`
* `symbols()`、無名のカウンタースタイルを生成する関数記法


suffix - CSS: カスケーディングスタイルシート

suffix
======

**`suffix`** は `@counter-style` ルールの記述子で、マーカーの表現に追加されるものを指定します。

構文
--

```css
/\* <symbol> values \*/
suffix: "";
suffix: ") ";
suffix: url(bullet.png);
```

### 値

`<symbol>`

マーカー表現に追加される記号を指定します。 `<string>`, `<image>`, `<custom-ident>` が指定できます。

公式定義
----

|  |  |
| --- | --- |
| 関連するアット規則 | `@counter-style` |
| 初期値 | ". " (ピリオドの後に空白) |
| 計算値 | 指定通り |

形式文法
----
```

<symbol>

<symbol> =
  <string>       |
  <image>        |
  <custom-ident>
```

例
-

### カウンターの接尾辞を設定

#### HTML

```html
<ul class="choices">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>None of the above</li>
</ul>
```

#### CSS

```css
@counter-style options {
  system: fixed;
  symbols: A B C D;
  suffix: ") ";
}

.choices {
  list-style: options;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-suffix |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `list-style`, `list-style-image`, `list-style-position`
* `symbols()`, 無名のカウンタースタイルを生成する関数記法


fallback - CSS: カスケーディングスタイルシート

fallback
========

**`fallback`** 記述子は、現在のカウンタースタイルが特定のカウンター値でマーカー表現を生成できなかった場合に、代替で使用されるカウンタースタイルを指定するために使用します。

構文
--

```css
/\* キーワード値 \*/
fallback: lower-alpha;
fallback: custom-gangnam-style;
```

解説
--

指定された代替スタイルも表現を構築できなかった場合、そのさらに代替スタイルが使用されます。有効な代替スタイルが指定されていなかった場合は、既定で `decimal` になります。

代替スタイルが使用される場面は 2 つあります。

* カウンタースタイルに `range` 記述子が指定されていた場合、その範囲を外れた値を表現するのに代替スタイルが使用されます。
* `fixed` が `system` で使用され、すべてのリスト項目に対応させる記号が不足した場合、残りのリスト項目に代替スタイルが使用されます。
公式定義
----

|  |  |
| --- | --- |
| 関連するアット規則 | `@counter-style` |
| 初期値 | `decimal` |
| 計算値 | 指定通り |

形式文法
----
```

<counter-style-name>

<counter-style-name> = <custom-ident>
```

例
-

### カウンターの代替スタイルの指定

#### HTML

```html
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>
```

#### CSS

```css
@counter-style fallback-example {
  system: fixed;
  symbols: "\24B6" "\24B7" "\24B8";
  fallback: upper-alpha;
}

.list {
  list-style: fallback-example;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-fallback |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `list-style`, `list-style-image`, `list-style-position`
* `symbols()`: 無名のカウンタースタイルを生成する関数記法


additive-symbols - CSS: カスケーディングスタイルシート

additive-symbols
================

**`additive-symbols`** 記述子は、カウンターの `system` (en-US) 記述子が加算的 (`additive`) な場合の記号を指定することができます。 `additive-symbols` 記述子では*加算的なタプル*を、それぞれ記号と非負数の整数による重みの組で定義します。加算的なシステムは、ローマ数字のような sign-value numbering を構築するために使われます。

構文
--

```css
additive-symbols: 3 "0";
additive-symbols:
  3 "0",
  2 "\2E\20";
additive-symbols:
  3 "0",
  2 url(symbol.png);
```

`system` 記述子が `cyclic`, `numeric`, `alphabetic`, `symbolic`, `fixed` の場合は、 `symbols()` 記述子を `additive-symbols` の代わりに使用してください。

公式定義
----

|  |  |
| --- | --- |
| 関連するアット規則 | `@counter-style` |
| 初期値 | `n/a (required)` |
| 計算値 | 指定通り |

形式文法
----
```

[ <integer [0,∞]> && <symbol> ]#

<symbol> = <string> | <image> | <custom-ident>
```

例
-

### 加算的シンボルの指定

#### HTML

```html
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>
```

#### CSS

```css
@counter-style additive-symbols-example {
  system: additive;
  additive-symbols:
    V 5,
    IV 4,
    I 1;
}
.list {
  list-style: additive-symbols-example;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-symbols |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `list-style`, `list-style-image`, `list-style-position`
* `symbols()`、無名のカウンタースタイルを作成する関数記法


pad - CSS: カスケーディングスタイルシート

pad
===

**`pad`** 記述子を使用すると、マーカー表現に最小限の長さが必要な場合に、カスタムカウンターのスタイル定義を行うことができます。

構文
--

```css
pad: 3 "0";
```

### 値

`<integer> && <symbol>`

`<integer>` で、すべてのカウンター表現が到達しなければならない最小の長さを指定します。負の値は使用できません。最小の長さに達しない場合は、指定した `<symbol>` で埋め尽くされます。

解説
--

マーカー表現が指定されたパッド長より短い場合、指定されたパッド記号で埋められます。パッド長より長いマーカ表現は、通常通り構築される。 pad 記述子では、最小マーカー長を整数で、パッドに使用する記号を第 2 引数として指定します。 pad 記述子の一般的な使用法は、リストが 1、2、3... ではなく、 01 から始まって 02、03... と続くような番号付けが必要な場合です。

公式定義
----

|  |  |
| --- | --- |
| 関連するアット規則 | `@counter-style` |
| 初期値 | `0 ""` |
| 計算値 | 指定通り |

形式文法
----
```

<integer> && <symbol>

<symbol> =
  <string>       |
  <image>        |
  <custom-ident>
```

例
-

### カウンターをゼロ埋めにする

#### HTML

```html
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>
```

#### CSS

```css
@counter-style pad-example {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5";
  pad: 2 "0";
}

.list {
  list-style: pad-example;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-pad |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `list-style`, `list-style-image`, `list-style-position`
* `symbols()`、無名のカウンタースタイルを生成する関数記法


prefix - CSS: カスケーディングスタイルシート

prefix
======

**`prefix`** は `@counter-style` ルールの記述子で、マーカーに先立って表示される内容を指定します。指定されていない場合、既定値は `""` (空文字列) になります。

構文
--

```css
/\* <symbol> 値 \*/
prefix: "»";
prefix: "Page ";
prefix: url(bullet.png);
```

### 値

`<symbol>`

マーカーに先立って表示される `<symbol>` を指定します。 `<string>`, `<image>`, `<custom-ident>` の何れかです。

公式定義
----

|  |  |
| --- | --- |
| 関連するアット規則 | `@counter-style` |
| 初期値 | "" (空文字列) |
| 計算値 | 指定通り |

形式文法
----
```

<symbol>

<symbol> =
  <string>       |
  <image>        |
  <custom-ident>
```

例
-

### カウンターに接頭辞を追加

#### HTML

```html
<ul class="index">
  <li>The Boy Who Lived</li>
  <li>The Vanishing Glass</li>
  <li>The Letters from No One</li>
  <li>The Keeper of the Keys</li>
  <li>Diagon Alley</li>
</ul>
```

#### CSS

```css
@counter-style chapters {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  prefix: "Chapter ";
}

.index {
  list-style: chapters;
  padding-left: 15ch;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-prefix |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `list-style`, `list-style-image`, `list-style-position`
* `symbols()`、無名のカウンタースタイルを作成する関数記法


size - CSS: カスケーディングスタイルシート

size
====

**Experimental:** **これは実験的な機能です。**
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

CSS の **`size`** アット規則記述子は、 `@page` アット規則で使用し、ページを表現するために使用するボックスの寸法と向きを定義します。多くの場合、この寸法は印刷ページの適用可能な対象の寸法に対応します。

寸法は「拡縮可能な」キーワード (この場合、ページの有効な大きさ全体を使用します) 又は絶対的な長さのどちらかで定義します。

構文
--

```css
/\* 拡縮可能な寸法のキーワード値 \*/
size: auto;
size: portrait;
size: landscape;

/\* <length> 値 \*/
/\* 1 値: 高さ = 幅 \*/
size: 6in;

/\* 2 値: 幅の後に高さ\*/
size: 4in 6in;

/\* 絶対寸法のキーワード値 \*/
size: A4;
size: B5;
size: JIS-B4;
size: letter;

/\* 寸法と方向の混合 \*/
size: A4 portrait;
```

### 値

`auto`

ユーザーエージェントがページの寸法を決定します。多くの場合、対象となる用紙の寸法と向きが使用されます。

`landscape`

ページのコンテンツは横向きモード (ボックスの長辺が水平) で表示されます。

`portrait`

ページのコンテンツは縦向きモード (ボックスの長辺が垂直) で表示されます。これが既定の向きです。

`<length>`

何らかの長さの値 (`<length>` を参照)。最初の値はページボックスの幅に対応し、二番目の値は高さに対応します。一つしか値が提供されない場合は、幅と高さの両方に使用されます。

`<page-size>`

A5

これは標準の ISO の寸法 148mm x 210mm に一致します。

A4

これは標準の ISO の寸法 210mm x 297mm に一致します。 (個人の印刷では最もよく使われる寸法です。)

A3

これは標準の ISO の寸法 297mm x 420mm に一致します。

B5

これは標準の ISO の寸法 176mm x 250mm に一致します。

B4

これは標準の ISO の寸法 250mm x 353mm に一致します。

JIS-B5

これは JIS 標準の寸法 182mm x 257mm に対応します。

JIS-B4

これは JIS 標準の寸法 257mm x 364mm に対応します。

letter

このキーワードは北米のレター用紙の寸法、すなわち 8.5in x 11in と同等です。

legal

このキーワードは北米のリーガル用紙の寸法、すなわち 8.5in x 14in と同等です。

ledger

このキーワードは北米の ledger 用紙の寸法、すなわち 11in x 17in と同等です。

公式定義
----

|  |  |
| --- | --- |
| 関連するアット規則 | `@page` |
| 初期値 | `auto` |
| 計算値 | 指定通り。ただし相対的な長さはは絶対的な長さに変換される |

形式文法
----
```

size =
  <length [0,∞]>{1,2}                          |
  auto                                         |
  [ <page-size> || [ portrait | landscape ] ]

```

例
-

### 寸法と向きの指定

```css
@page {
  size: 4in 6in landscape;
}
```

### @media 規則内部の入れ子

```css
@media print {
  @page {
    size: 50mm 150mm;
  }
}
```

仕様書
---

| Specification |
| --- |
| CSS Paged Media Module Level 3 # page-size-prop |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `bleed`
* `marks`


グリッド、論理的な値、書字方向 - CSS: カスケーディングスタイルシート

グリッド、論理的な値、書字方向
===============

一連のガイドでは、グリッドレイアウトの重要な特徴である、仕様に組み込まれているさまざまな書字方向への対応についてすでに触れています。このガイドでは、グリッドやその他の最新のレイアウト方法のこの機能について、書字方向や論理的プロパティおよび物理的プロパティについて少しずつ学んでいきたいと思います。

論理的、物理的なプロパティと値
---------------

CSS には、 left、right、top、bottom といった**物理的**な位置指定キーワードがたくさんあります。絶対位置指定を使ってアイテムを配置する場合、これらの物理的なキーワードをオフセット値として使用し、アイテムを移動させます。以下のコードでは、アイテムはコンテナーの上から 20 ピクセル、左から 30 ピクセルの位置に配置されています。

```css
.container {
  position: relative;
}
.item {
  position: absolute;
  top: 20px;
  left: 30px;
}
```

```html
<div class="container">
  <div class="item">Item</div>
</div>
```

また、テキストを右寄せにするために、 `text-align: right` という物理的なキーワードが使われることがあります。また、 CSS には物理的な**プロパティ**があります。例えば、 `margin-left` や `padding-left` などの物理的なプロパティを使って、マージンやパディング、境界を追加します。

これらのキーワードやプロパティは、見ている画面に関係するため、「物理的」と呼んでいます。 left は、テキストがどの方向に走っていても、常に左です。

### 物理的なプロパティの問題

これは、テキストが左書きではなく右書きの言語など、複数の言語で動作するサイトを開発する際に問題となることがあります。ブラウザーはテキストの書字方向を良く扱うので、右書き言語で作業をしていなくても、見ることができます。以下の例には、2 つの段落があります。一つは `text-align` プロパティが設定されておらず、もう一つは `text-align` が左に設定されています。`html` 要素に `dir="rtl"` を追加し、英語の文書の既定値である `ltr` から書字方向を切り替えています。最初の段落は、`text-align` の値が `left` であるため、左書きのままになっているのがわかります。しかし、 2 番目の段落では方向が変わり、テキストは右書きになっています。
```

<p class="left">
  テキストを <code>text-align: left</code> に設定すると、この文書内のテキストの方向が右書きであっても常に左揃えにします。
</p>

<p>これは配置を設定しておらず、文書内に設定された書字方向を使用しています。</p>
```

```
body {
  direction: rtl;
}

p {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  margin: 1em;
  color: #d9480f;
}

.left {
  text-align: left;
}
```

これは、 CSS で使用される物理的な値やプロパティの問題点を示すとても単純な例です。これらのプロパティは、テキストが左から右、上から下に流れていると仮定しているため、ブラウザーが書字方向を切り替えるための作業が行いにくくなります。

### 論理的プロパティの値

論理的なプロパティや値は、テキストの方向を想定していません。そのため、グリッドレイアウトでは、コンテナーの先頭に何かを配置する際に、キーワード `start` を使用します。英語で仕事をしている私にとって、 `start` は左にあるかもしれませんが、そうである必要はありませんし、 `start` という言葉は物理的な位置を意味しません。

ブロックとインライン
----------

物理的なプロパティではなく論理的なプロパティを扱い始めると、世界を左から右へ、上から下へと見なくなります。新しい参照点が必要です。そこで、以前に*配置*のガイドで紹介した*ブロック軸*と*インライン軸*を理解することがとても有益になります。ブロックとインラインの観点からレイアウトを捉えられるようになると、グリッドでの作業方法がより理解できるようになります。

![ブロック軸とインライン軸の既定の方向を示す画像](/ja/docs/Web/CSS/CSS_grid_layout/Grids_logical_values_and_writing_modes/8-horizontal-tb.png)

CSS の書字方向
---------

ここでは、例題で使用するもうひとつの仕様、 CSS Writing Modes 仕様を紹介します。この仕様では、英語と異なる表記方法を持つ言語への対応だけでなく、クリエイティブな目的のために、 CSS で異なる表記方法を使用する方法を詳しく説明しています。ここでは、 `writing-mode` プロパティを使用して、グリッドに適用される書字方向を変更し、論理値がどのように機能するかを説明します。しかし、書字方向についてさらに詳しく知りたい場合は、Jen Simmons 氏の優れた記事である CSS Writing Modes を読むことをお勧めします。この記事では、ここで触れることができないほど、この仕様について深く掘り下げています。

### `writing-mode`

書字方向は、左書き、右書きのテキストだけではなく、 `writing-mode` プロパティを使用することで、他の方向に走るテキストを表示することができます。 `writing-mode` プロパティは、以下の値を持つことができます。

* `horizontal-tb`
* `vertical-rl`
* `vertical-lr`
* `sideways-rl`
* `sideways-lr`

`horizontal-tb` の値は、ウェブ上のテキストの既定値です。このガイドを読んでいるときの方向です。その他のプロパティは、世界中で見られるさまざまな書き方に合わせて、文書内のテキストの流れ方を変えます。簡単な例として、以下の 2 つの段落があります。1 つ目はデフォルトの `horizontal-tb` を使用し、 2 つ目は `vertical-rl` を使用しています。このモードでは、テキストは左書きですが、テキストの方向は垂直になり、インラインテキストはページの上から下に流れます。
```

.wrapper > p {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  margin: 1em;
  color: #d9480f;
  max-width: 300px;
}
```

```html
<div class="wrapper">
  <p style="writing-mode: horizontal-tb">
    書字方向が既定の <code>horizontal-tb</code> に設定されています
  </p>
  <p style="writing-mode: vertical-rl">
    書字方向が <code>vertical-rl</code> に設定されています
  </p>
</div>
```

グリッドレイアウトでの書字方向
---------------

次にグリッドレイアウトの例を見てみると、書字方向を変更することで、ブロック軸とインライン軸の位置の考え方が変わることがわかります。

### 既定の書字方向

この例のグリッドには、 3 つの列と 2 つの行のトラックがあります。つまり、ブロック軸に3つのトラックがあるということです。既定の書字方向では、グリッドは左上から右に向かってアイテムを自動配置し、インライン軸の 3 つのセルを埋めていきます。その後、次の行に移動して新しい行トラックを作成し、さらにアイテムを埋めていきます。
```

\* {
  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;
}
```

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
}
```

```html
<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
  <div class="item5">Item 5</div>
</div>
```

### 書字方向の設定

グリッドコンテナーに `writing-mode: vertical-lr` を追加すると、ブロック軸とインライン軸が異なる方向に動くことがわかります。ブロックまたは*列の*軸は、ページを左から右に横切るようになり、インラインはページを下って、上から下に行を作成するようになりました。
```

\* {
  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;
}
```

```css
.wrapper {
  writing-mode: vertical-lr;
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
}
```

```html
<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
  <div class="item5">Item 5</div>
</div>
```

配置における論理的な値
-----------

ブロック軸とインライン軸が方向転換できるようになったことで、配置プロパティの論理値がより意味を持つようになりました。

次の例では、 `writing-mode: vertical-lr` に設定されたグリッド内のアイテムを整列させるために配置を使用しています。 `start` と `end` のプロパティは、既定の書字方向の場合とまったく同じように動作し、左右や上下を使ってアイテムを揃えることができないように、論理的な値を維持しています。これは、次のようにグリッドを横に反転させたときに発生します。
```

\* {
  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;
}
```

```css
.wrapper {
  writing-mode: vertical-lr;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
}

.item1 {
  grid-column: 1 / 4;
  align-self: start;
}

.item2 {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
  align-self: start;
}

.item3 {
  grid-column: 3;
  grid-row: 2 / 4;
  align-self: end;
  justify-self: end;
}
```

```html
<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>
```

右書きだけでなく、縦書きの書字方向で、これらの動作を確認したい場合は、 `vertical-lr` を `vertical-rl` に切り替えてください。

自動配置と書字方向
---------

すでに示した例では、書字方向が、アイテムがグリッドに配置される方向をどのように変えるかを見ることができます。既定では、アイテムはインライン軸に沿って配置され、新しい行に移動します。しかし、そのインライン軸は、必ずしも左から右に向かっているとは限りません。

線ベースの配置と書字方向
------------

線番号でアイテムを配置する際に覚えておくべき重要なことは、どのような書字方向であっても、行 1 が先頭の線であるということです。また、どの書字方向であっても、行 -1 が末尾の線となります。

### 左書きのテキストにおける線ベースの配置

次の例では、既定の `ltr` 方向のグリッドを使用しています。3 つのアイテムを線ベースの配置で配置しています。

* アイテム 1 は、列の線 1 から始まり、1 トラック分の範囲になります。
* アイテム 2 は、列の線 -1 から始まり、-3 までの範囲をカバーします。
* アイテム 3 は、列の線 1 から始まり、列の線 3 までを含みます。
```

\* {
  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;
}
```

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
}
.item1 {
  grid-column: 1;
}
.item2 {
  grid-column: -1 / -3;
}
.item3 {
  grid-column: 1 / 3;
  grid-row: 2;
}
```

```html
<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>
```

### 右書きのテキストにおける線ベースの配置

ここで、 `direction` プロパティに `rtl` という値を入れてグリッドコンテナーに追加すると、線 1 グリッドの右側に、線 -1 が左側になります。
```

\* {
  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;
}
```

```css
.wrapper {
  direction: rtl;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
}
.item1 {
  grid-column: 1;
}
.item2 {
  grid-column: -1 / -3;
}
.item3 {
  grid-column: 1 / 3;
  grid-row: 2;
}
```

```html
<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>
```

これは、ページ全体またはページの一部でテキストの方向を切り替える場合に、線を使用していることを示しています。レイアウトの方向を完全に切り替えたくない場合は、線に名前を付けるとよいでしょう。例えば、グリッドにテキストコンテンツが含まれている場合には、この切り替えはまさに必要なことかもしれません。他の用途ではそうではないかもしれません。

### `grid-area` プロパティにおける奇妙な順序

`grid-area` プロパティを使用すると、グリッド領域の 4 行すべてを 1 つの値として指定できます。初めてこの機能を使う人は、値が margin の一括指定である時計回りの上、右、下、左と同じ順序ではないことに驚くことが多いようです。

`grid-area` の値の順序は次の通りです。

* `grid-row-start`
* `grid-column-start`
* `grid-row-end`
* `grid-column-end`

英語のような左書きの言語においては、この順序は次のようになります。

* `top`
* `left`
* `bottom`
* `right`

これは反時計回りです。つまり、マージンやパディングの場合とは逆です。ひとたび `grid-area` が世界を「ブロックとインライン」として見ていることを理解すれば、 2 つの先頭を設定し、次に 2 つの末尾を設定していると覚えることができます。これがわかれば、もっと論理的になりますね。

書字方向の混合とグリッドレイアウト
-----------------

言語に適した書字方向を使って文書を表示するだけでなく、 `ltr` 以外の書字方向を文書内でクリエイティブに使用することができます。次の例では、グリッドレイアウトの片側にリンクを配置していますが、書字方向を使用して、これらを列トラックの中で横向きにしています。

```css
.wrapper {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr auto;
  font:
    1em Helvetica,
    Arial,
    sans-serif;
}
.wrapper nav {
  writing-mode: vertical-lr;
}
.wrapper ul {
  list-style: none;
  margin: 0;
  padding: 1em;
  display: flex;
  justify-content: space-between;
}
.wrapper a {
  text-decoration: none;
}
```

```html
<div class="wrapper">
  <div class="content">
    <p>
      Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
      kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus
      winter purslane kale. Celery potato scallion desert raisin horseradish
      spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo
      shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.
      Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi
      beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki
      bean chickweed potato bell pepper artichoke.
    </p>
    <p>
      Nori grape silver beet broccoli kombu beet greens fava bean potato
      quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil
      turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter
      purslane fennel azuki bean earthnut pea sierra leone bologi leek soko
      chicory celtuce parsley jícama salsify.
    </p>
  </div>
  <nav>
    <ul>
      <li><a href="">Link 1</a></li>
      <li><a href="">Link 2</a></li>
      <li><a href="">Link 3</a></li>
    </ul>
  </nav>
</div>
```

物理的な値とグリッドレイアウト
---------------

ウェブサイトを構築する際には、物理的なプロパティに頻繁に遭遇します。グリッドの配置や整列のプロパティや値は、書字方向を尊重していますが、グリッドでやりたいことで物理的なプロパティや値を使用せざるを得ないことがあるかもしれません。グリッドレイアウトのボックス配置のガイドでは、グリッド領域での自動マージンの働きを紹介しました。自動マージンを使用して 1 つのアイテムを他のアイテムから遠ざけるのは、フレックスボックスの一般的なトリックでもありますが、これはレイアウトを物理的な空間に結びつけるものでもあります。

グリッド領域内で絶対配置を使用する場合は、グリッド領域内でアイテムを移動させるために物理的なオフセットを使用することになります。ここで注意しなければならないのは、物理的なプロパティと論理的なプロパティと値の間の緊張感です。例えば、`ltr` から `rtl` への切り替えに対応するために、 CSS を変更する必要があるかもしれないことに注意してください。

### すべてにおいて論理的プロパティを

新しいレイアウト方法では、これらの論理的な値を使用してアイテムを配置することができますが、マージンやパディングに使用される物理的なプロパティと組み合わせ始めるとすぐに、これらの物理的なプロパティは、書き込みモードによって変更されないことを覚えておく必要があります。

CSS Logical Properties 仕様書では、 `margin-left` や `margin-right` などのプロパティに対して、論理的な同等のものが CSS で使用できることを意味しています。これらのプロパティや値は、現在のブラウザーでは十分に対応されています。ブロックやインラインからグリッドまでを理解していると、これらの使い方も理解できるようになります。


グリッドを使用したよくあるレイアウトの実現 - CSS: カスケーディングスタイルシート

グリッドを使用したよくあるレイアウトの実現
=====================

今回の CSS グリッドレイアウトガイドの締めくくりとして、グリッドレイアウトを使ったデザインのテクニックをいくつか紹介します。ここでは、 grid-template-areas を使った例と、典型的な 12 列の可変グリッドシステム、そして自動配置を使ったアイテムリストを見ていきます。これらの例からわかるように、多くの場合、グリッドレイアウトで望む結果を得るためには複数の方法があります。自分が解決しようとしている問題や、実現しようとしているデザインに合わせて、最も参考になる方法を選んでください。

`grid-template-areas` を使用した、1 ～ 3 列の流動的なレスポンシブレイアウト
---------------------------------------------------

多くのウェブサイトはこの種のレイアウトのバリエーションで、コンテンツ、サイドバー、ヘッダー、フッターを備えています。レスポンシブデザインでは、1 列で表示し、特定のブレイクポイントでサイドバーを追加し、広い画面では 3 列のレイアウトを持ってくるという方法が考えられます。

![2 つのブレイクポイントでグリッドを再定義し、3 種類のレイアウトを作成した画像。](/ja/docs/Web/CSS/CSS_grid_layout/Realizing_common_layouts_using_grids/11-responsive-areas.png)

このレイアウトは、*グリッドテンプレート領域*のガイドで学んだ*名前付きテンプレート領域*を使って作成する予定です。

このマークアップは、ヘッダー、フッター、メインコンテンツ、ナビゲーション、サイドバー、そして広告を掲載するためのブロックの要素を内部に持つコンテナーです。
```

\* {
  box-sizing: border-box;
}
.wrapper {
  max-width: 1024px;
  margin: 0 auto;
  font:
    1.2em Helvetica,
    arial,
    sans-serif;
}

.wrapper > \* {
  border: 2px solid #f08c00;
  background-color: #ffec99;
  border-radius: 5px;
  padding: 10px;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
```

```html
<div class="wrapper">
  <header class="main-head">ヘッダー</header>
  <nav class="main-nav">
    <ul>
      <li><a href="">ナビ 1</a></li>
      <li><a href="">ナビ 2</a></li>
      <li><a href="">ナビ 3</a></li>
    </ul>
  </nav>
  <article class="content">
    <h1>メイン記事領域</h1>
    <p>
      このレイアウトでは、幅が 500
      ピクセル以下の画面では、領域をソース順に表示します。グリッドとグリッド上のアイテムの配置を再定義することで、2
      列レイアウト、3 列レイアウトへと変化していきます。
    </p>
  </article>
  <aside class="side">サイドバー</aside>
  <div class="ad">広告</div>
  <footer class="main-footer">フッター</footer>
</div>
```

レイアウトの作成に `grid-template-areas` を使用しています。メディアクエリーを使用せず、領域に名前を付ける必要があります。ここでは `grid-area` プロパティを使って領域に名前を付けます。

```css
.main-head {
  grid-area: header;
}
.content {
  grid-area: content;
}
.main-nav {
  grid-area: nav;
}
.side {
  grid-area: sidebar;
}
.ad {
  grid-area: ad;
}
.main-footer {
  grid-area: footer;
}
```

これでレイアウトは作成されませんが、アイテムに名前がついたので、それを使ってレイアウトを作成することができます。 メディアクエリーを使用せずに、これからモバイル幅用のレイアウトを設定します。ここでは、 *グリッドレイアウトとアクセシビリティ* のガイドに記載されているように、ソースと表示の間に断絶が生じないように、すべてをソース順にしています。列や行のトラックは定義していませんが、このレイアウトでは 1 つの列が指示されており、行は暗黙のグリッド内の各アイテムに必要に応じて作成されます。

```css
.wrapper {
  display: grid;
  gap: 20px;
  grid-template-areas:
    "header"
    "nav"
    "content"
    "sidebar"
    "ad"
    "footer";
}
```

モバイルレイアウトを設定すると、どの画面サイズでも 1 列になりますが、メディアクエリーを追加して、2 列表示できるだけの画面領域がある場合のレイアウトを再定義することができます。

```css
@media (min-width: 500px) {
  .wrapper {
    grid-template-columns: 1fr 3fr;
    grid-template-areas:
      "header header"
      "nav nav"
      "sidebar content"
      "ad footer";
  }
  nav ul {
    display: flex;
    justify-content: space-between;
  }
}
```

`grid-template-areas` の値で、レイアウトの形が見えてきます。`header` は、 `nav` と同様に 2 列のトラックに渡っています。3 列目のトラックには `sidebar` と `content` が一緒に配置されています。4 列目のトラックには、`ad` コンテンツを配置することにしました。サイドバーの下に表示され、コンテンツの下にはその隣の `footer` が表示されます。ナビゲーションにはフレックスボックスを使用して、間隔を空けて一列に表示しています。

最後のブレイクポイントを追加すると、3 列レイアウトに移行することができるようになります。

```css
@media (min-width: 700px) {
  .wrapper {
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-areas:
      "header header header"
      "nav content sidebar"
      "nav content ad"
      "footer footer footer";
  }
  nav ul {
    flex-direction: column;
  }
}
```

3 列レイアウトでは、`1fr` 単位の側方の列が 2 つと、トラックサイズが `4fr` の中央の列があります。つまり、コンテナー内の空き空間を 6 分割して、3 つのトラックに比例して割り当てています。

このレイアウトでは、左の列に `nav` を `content` と一緒に表示しています。右の列には `sidebar` があり、その下には広告 (`ad`) があります。`footer` は、レイアウトの下部に表示されています。そして、フレックスボックスを使ってナビゲーションを列として表示しています。

これは簡単な例ですが、グリッドレイアウトを使って、異なるブレイクポイントでレイアウトを再配置する方法を示しています。特に、 `ad` ブロックの位置を、異なる列設定で適切に変更しています。プロトタイプの段階では、要素の位置を簡単に変更できる、この名前付きエリアの方法がとても便利です。サイトにアクセスするブラウザーの関係上、本番環境では完全に信頼できないとしても、プロトタイピングのためにこの方法でグリッドを使い始めることは可能です。

柔軟な 12 列のレイアウト
--------------

多くのフレームワークやグリッドシステムを使用している場合、 12 列または 16 列の柔軟なグリッドでサイトをレイアウトすることに慣れているかもしれません。 CSS グリッドレイアウトを使えば、このようなシステムを作ることができます。簡単な例として、 12 列の柔軟なグリッドを作成します。このグリッドには 12 個の `1fr` 単位の列トラックがあり、それらはすべて `col-start` という名前の先頭の線を持っています。つまり、 `col-start` という名前の 12 本のグリッド線があることになります。
```

.wrapper {
  max-width: 1024px;
  margin: 0 auto;
  font:
    1.2em Helvetica,
    arial,
    sans-serif;
}
.wrapper > \* {
  border: 2px solid #f08c00;
  background-color: #ffec99;
  border-radius: 5px;
  padding: 10px;
}
```

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  gap: 20px;
}
```

このグリッドシステムがどのように機能するかを示すために、ラッパーの中に 4 つの子要素を入れています。

```html
<div class="wrapper">
  <div class="item1">
    列 1 の線を先頭として、 3 列のトラックにまたがります。
  </div>
  <div class="item2">
    列 6 の線を先頭として、 4 列、2 行のトラックにまたがります。
  </div>
  <div class="item3">
    列 2、行 2 の線を先頭として、 3 列のトラックにまたがります。
  </div>
  <div class="item4">
    列 3 の線を先頭として、グリッドの末尾までまたがります (-1)。
  </div>
</div>
```

これらをグリッド上に配置するには、名前付きの線や span キーワードを使います。

```css
.item1 {
  grid-column: col-start / span 3;
}
.item2 {
  grid-column: col-start 6 / span 4;
  grid-row: 1 / 3;
}
.item3 {
  grid-column: col-start 2 / span 2;
  grid-row: 2;
}
.item4 {
  grid-column: col-start 3 / -1;
  grid-row: 3;
}
```

名前付きグリッド線を使用したレイアウトで説明されているように、アイテムを配置するために名前付きの線を使用しています。同じ名前の行が 12 本あるので、名前、そして行のインデックスを使います。名前付きの線を使わずに、線のインデックスだけを使うこともできます。

最終の線の番号を設定するのではなく、 `span` キーワードを使って、この要素が何トラックにまたがるのかを指定することにしました。複数列のレイアウトシステムで作業をする場合、通常はブロックがまたがるグリッドのトラック数でブロックを考え、異なるブレイクポイントに合わせて調整するので、このアプローチが気に入っています。ブロックがトラックにどのように配置されているかを確認するには、Firefox グリッドインスペクターを使用してください。これは、アイテムがどのように配置されているかを明確に示します。

![グリッドに配置されたアイテムを、グリッドトラックを強調して表示しています。](/ja/docs/Web/CSS/CSS_grid_layout/Realizing_common_layouts_using_grids/11-grid-inspector-12col.png)

グリッドレイアウトの仕組みには、これまで使ってきたグリッドシステムとの主な違いがあります。ご覧のように、グリッドシステムでは要素が上の行に飛び出さないようにするために、行を作成するためのマークアップを追加する必要はありません。CSS グリッドレイアウトでは、何もない状態でも上の行に飛び出してくる心配がないので、物を行に配置することができます。この厳密な列と行の配置により、レイアウトの中に簡単に空間を設けることができます。また、グリッドの中で物を引いたり押したり、インデントしたりするための特別なクラスも必要ありません。必要なのは、アイテム先頭の線と末尾の線を指定することだけです。

12 列のシステムを使用してレイアウトを作る
----------------------

このレイアウト方法が実際にどのように機能するかを確認するために、 `grid-template-areas` で作成したのと同じレイアウトを、今度は 12 列のグリッドシステムを使って作成してみましょう。ここでは、グリッドテンプレート領域の例で使用したのと同じマークアップで始めます。
```

\* {
  box-sizing: border-box;
}
.wrapper {
  max-width: 1024px;
  margin: 0 auto;
  font:
    1.2em Helvetica,
    arial,
    sans-serif;
}

.wrapper > \* {
  border: 2px solid #f08c00;
  background-color: #ffec99;
  border-radius: 5px;
  padding: 10px;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
```

```html
<div class="wrapper">
  <header class="main-head">ヘッダー</header>
  <nav class="main-nav">
    <ul>
      <li><a href="">ナビ 1</a></li>
      <li><a href="">ナビ 2</a></li>
      <li><a href="">ナビ 3</a></li>
    </ul>
  </nav>
  <article class="content">
    <h1>メイン記事領域</h1>
    <p>
      このレイアウトでは、幅が 500 ピクセル以下の画面では、領域をソース順に表示します。グリッドとグリッド上のアイテムの配置を再定義することで、2 列レイアウト、3 列レイアウトへと変化していきます。
    </p>
  </article>
  <aside class="side">サイドバー</aside>
  <div class="ad">広告</div>
  <footer class="main-footer">フッター</footer>
</div>
```

そして、上記の 12 列レイアウトの例のように、グリッドを設定します。

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  gap: 20px;
}
```

今回もレスポンシブレイアウトを採用しますが、今回は名前付き線を使用します。すべてのブレイクポイントで 12 列のグリッドを使用しますが、アイテムがまたがるトラック数は、画面の大きさによって変わります。

まずはモバイルから始めますが、最も狭い画面では、アイテムがソース順に並び、すべてグリッドにまたがるようにしたいと考えています。

```css
.wrapper > \* {
  grid-column: col-start / span 12;
}
```

次のブレイクポイントでは、2 列のレイアウトに移行したいと思います。ヘッダーとナビゲーションはグリッド全体を使っているので、それらの位置を指定する必要はありません。サイドバーは、col-start という名前の最初の列の線から始まり、3 本に渡っています。ヘッダーとナビゲーションが最初の 2 つの行トラックにあるので、サイドバーは 3 行目以降になります。

広告パネルは、サイドバーの下にあるので、グリッドの行の4行目から始まります。そして、コンテンツとフッターは col-start 4 から始まり、9 トラックに渡ってグリッドの最後まで続きます。

```css
@media (min-width: 500px) {
  .side {
    grid-column: col-start / span 3;
    grid-row: 3;
  }
  .ad {
    grid-column: col-start / span 3;
    grid-row: 4;
  }
  .content,
 .main-footer {
    grid-column: col-start 4 / span 9;
  }
  nav ul {
    display: flex;
    justify-content: space-between;
  }
}
```

最後に、このレイアウトの 3 列バージョンを見てみましょう。ヘッダーは引き続きグリッド全体に広がっていますが、ナビゲーションが下に移動して最初のサイドバーとなり、その隣にコンテンツとサイドバーが配置されています。また、フッターもレイアウト全体に広がっています。

```css
@media (min-width: 700px) {
  .main-nav {
    grid-column: col-start / span 2;
    grid-row: 2 / 4;
  }
  .content {
    grid-column: col-start 3 / span 8;
    grid-row: 2 / 4;
  }
  .side {
    grid-column: col-start 11 / span 2;
    grid-row: 2;
  }
  .ad {
    grid-column: col-start 11 / span 2;
    grid-row: 3;
  }
  .main-footer {
    grid-column: col-start / span 12;
  }
  nav ul {
    flex-direction: column;
  }
}
```

今回も、レイアウトがどのような形になっているかを確認するために、グリッドインスペクターが役に立ちます。

![グリッドインスペクターでグリッドトラックをハイライトしたレイアウトを表示します。](/ja/docs/Web/CSS/CSS_grid_layout/Realizing_common_layouts_using_grids/11-grid-inspector-12col-layout.png)

このレイアウトを作成する際に注意すべき点は、各ブレイクポイントですべての要素をグリッド上に明示的に配置する必要がないことです。これは「モバイルファースト」の利点でもあります。また、グリッドの自動配置を利用することもできます。グリッドの自動配置は、要素を論理的な順序で配置することで、アイテムをグリッドに配置するための多くの作業を自動化してくれます。このガイドの最後の例では、自動配置に完全に依存したレイアウトを作成します。

自動配置される製品リスト
------------

多くのレイアウトは、アイテムリストやイメージギャラリーなど、基本的に「カード」のセットです。グリッドを使えば、レスポンシブ対応のためにメディアクエリーを追加しなくても、これらのリストを非常に簡単に作成することができます。次の例では、CSS グリッドとフレックスボックスレイアウトを組み合わせて、シンプルな製品リストのレイアウトを作成しています。

アイテムリストのマークアップは、順不同のアイテムリストです。各項目には、見出し、さまざまな高さのテキスト、コールトゥアクションのリンクが含まれています。

```html
<ul class="listing">
  <li>
    <h2>アイテム 1</h2>
    <div class="body">
      <p>このアイテムのコンテンツがここに来ます。</p>
    </div>
    <div class="cta">
      <a href="">コールトゥアクション</a>
    </div>
  </li>
  <li>
    <h2>アイテム 2</h2>
    <div class="body">
      <p>このアイテムのコンテンツがここに来ます。</p>
    </div>
    <div class="cta">
      <a href="">コールトゥアクション</a>
    </div>
  </li>
  <li class="wide">
    <h2>アイテム 3</h2>
    <div class="body">
      <p>このアイテムのコンテンツがここに来ます。</p>
      <p>こちらは他のアイテムよりも文字数が多いです。</p>
      <p>はるかにたくさん</p>
      <p>何か違うことができるのでは？</p>
    </div>
    <div class="cta">
      <a href="">コールトゥアクション</a>
    </div>
  </li>
  <li>
    <h2>アイテム 4</h2>
    <div class="body">
      <p>このアイテムのコンテンツがここに来ます。</p>
    </div>
    <div class="cta">
      <a href="">コールトゥアクション</a>
    </div>
  </li>
  <li>
    <h2>アイテム 5</h2>
    <div class="body">
      <p>このアイテムのコンテンツがここに来ます。</p>
    </div>
    <div class="cta">
      <a href="">コールトゥアクション</a>
    </div>
  </li>
</ul>
```

```
\* {
  box-sizing: border-box;
}
img {
  max-width: 100%;
  display: block;
}
body {
  font:
    1.2em Helvetica,
    arial,
    sans-serif;
}
a:link,
a:visited {
  text-decoration: none;
  color: #f08c00;
}

h2 {
  background-color: #f08c00;
  color: #fff;
  text-align: center;
  margin: 0;
  padding: 20px;
}
```

ここでは、列数の自由度が高いグリッドを作成します。 200 ピクセル以下にならないようにして、残った空間を均等に分け合うようにして、常に同じ幅の列トラックを得るようにします。これを実現するには、トラックのサイズ調整のための反復記法で、`minmax()` 関数を使用します。

```css
.listing {
  list-style: none;
  margin: 2em;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
```

この CSS を追加すると、すぐにアイテムがグリッド状に配置されるようになりました。ウィンドウを小さくしたり大きくしたりすると、列の数が変わりますが、メディアクエリーを使ってブレイクポイントを追加したり、グリッドを再定義したりする必要はありません。

その後、フレックスボックスを少し使ってボックスの内部を整理します。リストアイテムを `display: flex` に設定し、 `flex-direction` を `column` に設定します。そして、`.cta` に auto マージンを使用して、このバーをボックスの下まで押し込みます。

```css
.listing li {
  border: 1px solid #ffe066;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
}
.listing .cta {
  margin-top: auto;
  border-top: 1px solid #ffe066;
  padding: 10px;
  text-align: center;
}
.listing .body {
  padding: 10px;
}
```

これが、グリッドではなくフレックスボックスを使用する主な理由の 1 つです。単一の次元で何かを整列させたり配置したりする場合は、フレックスボックスの使用例になります。

dense キーワードで隙間を防ぐ
-----------------

これでもかなり完成度が高いのですが、時々、他のカードよりもはるかに多くのコンテンツを含むカードがあります。このようなカードは、 2 つのトラックにまたがるようにすれば、それほど高くならずに済むかもしれません。大きなアイテムはクラスを `wide` とし、ルールとして `grid-column-end` を `span 2` の値で追加しました。これで、グリッドがこのアイテムに遭遇すると、 2 つのトラックが割り当てられます。ブレークポイントによっては、2 トラックのアイテムを配置するスペースがないため、グリッドに隙間ができてしまうことになります。

![2 トラックのアイテムをレイアウトする空間がないため、隙間のあるレイアウトになっています。](/ja/docs/Web/CSS/CSS_grid_layout/Realizing_common_layouts_using_grids/11-grid-auto-flow-sparse.png)

グリッドコンテナーに `grid-auto-flow``: dense` を設定することで、グリッドがこれらの隙間を埋め合わせることができます。しかし、これを行うと、アイテムが論理的なソースの順序から外れてしまうので、注意が必要です。これは、アイテムの順序が決まっていない場合にのみ行うべきです。また、タブの順序がソースに従ったものになり、並び替えた表示にはならないという問題にも注意してください。
```

<ul class="listing">
  <li>
    <h2>アイテム 1</h2>
    <div class="body"><p>このアイテムのコンテンツがここに来ます。</p></div>
    <div class="cta"><a href="">コールトゥアクション</a></div>
  </li>
  <li>
    <h2>アイテム 2</h2>
    <div class="body"><p>このアイテムのコンテンツがここに来ます。</p></div>
    <div class="cta"><a href="">コールトゥアクション</a></div>
  </li>
  <li class="wide">
    <h2>アイテム 3</h2>
    <div class="body">
      <p>このアイテムのコンテンツがここに来ます。</p>
      <p>こちらは他のアイテムよりも文字数が多いです。</p>
      <p>はるかにたくさん</p>
      <p>何か違うことができるのでは？</p>
    </div>
    <div class="cta"><a href="">コールトゥアクション</a></div>
  </li>
  <li>
    <h2>アイテム 4</h2>
    <div class="body"><p>このアイテムのコンテンツがここに来ます。</p></div>
    <div class="cta"><a href="">コールトゥアクション</a></div>
  </li>
  <li>
    <h2>アイテム 5</h2>
    <div class="body"><p>このアイテムのコンテンツがここに来ます。</p></div>
    <div class="cta"><a href="">コールトゥアクション</a></div>
  </li>
</ul>
```

```
\* {
  box-sizing: border-box;
}
img {
  max-width: 100%;
  display: block;
}
body {
  font:
    1.2em Helvetica,
    arial,
    sans-serif;
}
a:link,
a:visited {
  text-decoration: none;
  color: #f08c00;
}

h2 {
  background-color: #f08c00;
  color: #fff;
  text-align: center;
  margin: 0;
  padding: 20px;
}

.listing li {
  border: 1px solid #ffe066;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
}
.listing .cta {
  margin-top: auto;
  border-top: 1px solid #ffe066;
  padding: 10px;
  text-align: center;
}
.listing .body {
  padding: 10px;
}
```

```css
.listing {
  list-style: none;
  margin: 2em;
  display: grid;
  gap: 20px;
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.listing .wide {
  grid-column-end: span 2;
}
```

このように、特定の項目にルールを適用して自動配置を行う手法は非常に便利で、例えば CMS で出力されたコンテンツに繰り返し項目がある場合、 HTML にレンダリングされる際に特定の項目にクラスを追加することができます。

さらなる探求
------

グリッドレイアウトを使いこなすには、ここで紹介したようなサンプルを作り続けるのが一番です。普段使っているフレームワークや浮動要素を使って作っているものを、グリッドを使って作れるかどうか試してみてください。また、現在の方法では作ることができない例を探すことも忘れてはいけません。雑誌やウェブ以外のものからインスピレーションを得るのもいいでしょう。グリッドレイアウトは、今までにない可能性を秘めています。古いレイアウトに縛られることなく、ぜひ活用してみてください。

* CSS グリッドレイアウト
* CSS レイアウト: グリッド
* A complete guide to CSS grid on CSS-Tricks (2023)
* Grid by example
* CSS grid website layout examples on quackit.com


CSS グリッドレイアウトとプログレッシブエンハンスメント - CSS: カスケーディングスタイルシート

CSS グリッドレイアウトとプログレッシブエンハンスメント
=============================

2017 年春、グリッドのようなメジャーな仕様がほぼ同時にブラウザーに搭載されるのを初めて目の当たりにし、現在までに Firefox、Chrome、Opera、Safari、Edge の公式バージョンが CSS グリッドレイアウトに対応しています。しかし、現役のブラウザー、すなわち多くのユーザーがとてもすばやくグリッドレイアウトの対応にあずかれる一方で、古い対応していないブラウザーもあります。このガイドでは、対応のためのさまざまな戦略を説明します。

対応しているブラウザー
-----------

Internet Explorer 以外の Safari、Chrome、Opera、Firefox、Edge では、CSS グリッドレイアウトはプリフィックスなしになっています。これらのガイドに記載されているすべてのプロパティと値は、ブラウザー間で相互運用可能です。つまり、Firefox でグリッドレイアウトのコードを書くと、 Chrome でも同じように動作するはずです。これはもはや実験的な仕様ではなく、本番環境でも安心して使用することができます。

CSS のグリッドを使ってレイアウトしても大丈夫か
-------------------------

はい。他のフロントエンド技術と同様に、 CSS グリッドレイアウトを使用するかどうかは、サイト訪問者が通常使用しているブラウザーによります。

本番でグリッドの使用を始める
--------------

もちろん、グリッドの使用は*すべてか無か*で使用する必要はありません。まず、従来の方法では表示できなかったデザイン要素を、グリッドで強化することから始めましょう。従来の方法をグリッドレイアウトで上書きすると、グリッドが他の方法と相互作用するため、驚くほどうまくいきます。

### 浮動要素

私たちは通常、段組みレイアウトを作成するために浮動要素を使用してきました。対応しているブラウザーでグリッドアイテムでもあるアイテムを浮動させた場合、そのアイテムには浮動が適用されなくなります。実際には、*グリッドアイテムが優先されます*。以下の例では、単純なメディアオブジェクトがあります。非対応のブラウザーでは `float` を使用していますが、CSS グリッドで実装されている配置プロパティを使用するために、コンテナーをグリッドコンテナーとして定義しています。

`float` は適用されなくなり、CSS ボックス配置のプロパティである `align-self` を使用して、コンテンツをコンテナーの末尾に配置することができます。

```css
\* {
  box-sizing: border-box;
}
img {
  max-width: 100%;
  display: block;
}
.media {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  max-width: 400px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-areas: "img content";
  margin-bottom: 1em;
}
.media::after {
  content: "";
  display: block;
  clear: both;
}
.media .text {
  padding: 10px;
  align-self: end;
}

/\* old code we can't remove \*/
.media .image {
  float: left;
  width: 150px;
  margin-right: 20px;
}
```

```html
<div class="media">
  <div class="image">
    <img src="https://via.placeholder.com/150x150" alt="placeholder" />
  </div>
  <div class="text">
    これは、メディアオブジェクトの例です。古いブラウザーには浮動、新しいブラウザーにはグリッドを使用しています。
  </div>
</div>
```

下の画像は、左が非対応のブラウザ、右が対応しているブラウザーでメディアオブジェクトを表示したものです。

![グリッドを使って浮動レイアウトを上書きする簡単な例です。どちらも画像は左に配置されています。テキストは、浮動要素の例では上部に、グリッドの例では下部に垂直に配置されています。](/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_progressive_enhancement/10-float-simple-override.png)

### 機能クエリーの使用

上の例は非常にシンプルで、グリッドに対応していないブラウザーでは、問題となるコードを書かなくても済むし、古いコードもグリッドに対応しているブラウザーでは問題になりません。しかし、物事はそれほど単純ではありません。

#### もっと複雑な例

次の例では、浮動させたカードを用意しました。カードに`width`を与え、`float`としています。カードの間に隙間を作るために、アイテムに`margin`を使用し、コンテナには負のマージンを使用しています。
```

\* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  max-width: 600px;
  margin: 0 auto;
}
.wrapper li {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```

```css
.wrapper ul {
  overflow: hidden;
  margin: 0 -10px;
  padding: 0;
  list-style: none;
}
.wrapper li {
  float: left;
  width: calc(33.333333% - 20px);
  margin: 0 10px 20px 10px;
}
```

```html
<div class="wrapper">
  <ul>
    <li class="card">
      <h2>One</h2>
      <p>CSS グリッドを使って古い方法を上書きできます。</p>
    </li>
    <li class="card">
      <h2>Two</h2>
      <p>CSS グリッドを使って古い方法を上書きできます。</p>
    </li>
    <li class="card">
      <h2>Three</h2>
      <p>CSS グリッドを使って古い方法を上書きできます。</p>
    </li>
    <li class="card">
      <h2>Four</h2>
      <p>CSS グリッドを使って古い方法を上書きできます。</p>
    </li>
    <li class="card">
      <h2>Five</h2>
      <p>CSS グリッドを使って古い方法を上書きできます。</p>
    </li>
    <li class="card">
      <h2>Six</h2>
      <p>CSS グリッドを使って古い方法を上書きできます。</p>
    </li>
  </ul>
</div>
```

この例では、浮動レイアウトの典型的な問題として、 1 枚のカードにコンテンツを追加すると、レイアウトが崩れてしまいます。

![浮動カードのレイアウトで、コンテンツの高さが不揃いになることによる問題を示しています。最上段には 3 枚のカードがあります。 4 枚目のカードは 3 つ目のカードの下に浮いています。そして、下段には 5 枚目と 6 枚目のカードが格納されています。 4 枚目のカードの下には大きく空いた空間があります。](/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_progressive_enhancement/10-floated-cards.png)

古いブラウザーへの配慮として、アイテムに `min-height` を設定し、コンテンツの編集者がコンテンツを追加しすぎてレイアウトを崩さないようにしています。

次に、グリッドを使ってレイアウトを強化します。 `<ul>` を 3 列のトラックを持つグリッドコンテナーにすることができます。しかし、リストアイテムに割り当てた幅がまだ適用されており、それらのアイテムはトラックの幅の 3 分の 1 になってしまいます。

![6 つのとても背の高い、とても幅の狭いグリッドアイテムがあり、テキストが右に溢れています。コンテナーにグリッドを適用した後、アイテムの幅はアイテムの幅の 3 つ目で表示され、これで間違っています。](/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_progressive_enhancement/10-float-width-problem.png)

幅を `auto` にリセットすると、古いブラウザーでは float の動作が行われなくなります。古いブラウザーでは幅を定義し、グリッドに対応しているブラウザーでは幅を削除できるようにする必要があります。CSS 機能クエリーのおかげで、CSS の中でこれを行うことができます。

#### 機能クエリーを用いた解決策

*機能クエリー*は、メディアクエリーを使ってレスポンシブレイアウトを作成したことがある方にはとても親しみやすい形でしょう。ここでは、 ビューポートの幅や、ブラウザーや端末の機能をチェックするのではなく、 `@supports` のルールを使って、CSS のプロパティと値の組に対応しているかどうかをチェックします。機能クエリーの中では、最新のレイアウトを適用するために必要な CSS を記述し、古いレイアウトに必要なものは削除します。

```css
@supports (display: grid) {
  .wrapper {
    /\* ここでグリッド対応ブラウザーのために何かをする。 \*/
  }
}
```

機能クエリーはブラウザーの対応が充実しており、更新されたグリッド仕様に対応しているブラウザーはすべて機能クエリーにも対応しています。機能クエリーを使って、浮動レイアウトを拡張することによる問題に対処することができます。

ここでは、 `@supports` ルールを使って、 `display: grid` に対応しているかどうかをチェックします。そして `<ul>` にグリッドコードを記述し、 width と `min-height` を `<li>` に設定して `auto` にしています。また、マージンと負のマージンを削除し、間隔を `gap` プロパティで置き換えています。これにより、ボックスの最後の行に最終マージンが発生しなくなりました。これで、 1 枚のカードに他のカードよりも多くのコンテンツがある場合でも、レイアウトが機能するようになりました。
```

\* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  max-width: 600px;
  margin: 0 auto;
}
.wrapper li {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```

```css
.wrapper ul {
  overflow: hidden;
  margin: 0 -10px;
  padding: 0;
  list-style: none;
}
.wrapper li {
  float: left;
  width: calc(33.333333% - 20px);
  margin: 0 10px 20px 10px;
}
@supports (display: grid) {
  .wrapper ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0;
  }
  .wrapper li {
    width: auto;
    min-height: auto;
    margin: 0;
  }
}
```

```html
<div class="wrapper">
  <ul>
    <li class="card">
      <h2>One</h2>
      <p>CSS グリッドを使って古い方法を上書きできます。</p>
    </li>
    <li class="card">
      <h2>Two</h2>
      <p>CSS グリッドを使って古い方法を上書きできます。</p>
      <p>CSS グリッドを使って古い方法を上書きできます。</p>
    </li>
    <li class="card">
      <h2>Three</h2>
      <p>CSS グリッドを使って古い方法を上書きできます。</p>
    </li>
    <li class="card">
      <h2>Four</h2>
      <p>CSS グリッドを使って古い方法を上書きできます。</p>
    </li>
    <li class="card">
      <h2>Five</h2>
      <p>CSS グリッドを使って古い方法を上書きできます。</p>
    </li>
    <li class="card">
      <h2>Six</h2>
      <p>CSS グリッドを使って古い方法を上書きできます。</p>
    </li>
  </ul>
</div>
```

`display` の他の値を上書きする
--------------------

浮動要素を使ってアイテムのグリッドを作成することには問題があるので、多くの人は一連のカードをレイアウトするために、上で示した浮動方式とは異なる方法を使うでしょう。`display: inline-block` を使うのがその代替方法です。

ここでも機能クエリーを使って `display: inline-block` を使ったレイアウトを上書きすることができますが、すべてを上書きする必要もありません。 `inline-block` に設定されたアイテムはグリッドアイテムになるので、 `inline-block` の動作は適用されなくなります。 `inline-block` の表示モードのときにアイテムに `vertical-align` プロパティを使っていましたが、このプロパティはグリッドアイテムには適用されないので、アイテムがグリッドアイテムになると無視されます。
```

\* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  max-width: 600px;
  margin: 0 auto;
}

.wrapper li {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```

```css
.wrapper ul {
  margin: 0 -10px;
  padding: 0;
  list-style: none;
}

.wrapper li {
  display: inline-block;
  vertical-align: top;
  width: calc(33.333333% - 20px);
  margin: 0 10px 20px 10px;
}
@supports (display: grid) {
  .wrapper ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0;
  }
  .wrapper li {
    width: auto;
    margin: 0;
  }
}
```

```html
<div class="wrapper">
  <ul>
    <li class="card">
      <h2>One</h2>
      <p>CSS グリッドを使って古い方法を上書きできます。</p>
    </li>
    <li class="card">
      <h2>Two</h2>
      <p>CSS グリッドを使って古い方法を上書きできます。</p>
      <p>CSS グリッドを使って古い方法を上書きできます。</p>
    </li>
    <li class="card">
      <h2>Three</h2>
      <p>CSS グリッドを使って古い方法を上書きできます。</p>
    </li>
    <li class="card">
      <h2>Four</h2>
      <p>CSS グリッドを使って古い方法を上書きできます。</p>
    </li>
    <li class="card">
      <h2>Five</h2>
      <p>CSS グリッドを使って古い方法を上書きできます。</p>
    </li>
    <li class="card">
      <h2>Six</h2>
      <p>CSS グリッドを使って古い方法を上書きできます。</p>
    </li>
  </ul>
</div>
```

ここでも必要なのはアイテムの幅であり、次に強化したいその他のプロパティです。この例では、マージンや負のマージンではなく、 `gap` を使用して溝を作成しています。

仕様書ではどのように上書きを定義しているか
---------------------

CSS グリッドレイアウト仕様書では、グリッドアイテムになったときに、特定のプロパティの動作を上書きできる理由を詳しく説明しています。仕様書の主な項目は以下の通りです。

* グリッドコンテナーの確立
* グリッドアイテム
* グリッドアイテムの表示

この動作は仕様に詳細が記載されているので、古いブラウザーに対応する際には、これらの上書きを使用するのが安全です。ここで説明していることは何も「ハック」ではなく、グリッドの仕様が異なるレイアウトメソッド間の相互作用を詳細に説明していることを利用しています。

### display のその他の値

要素の親が `display: grid` に設定されていると、 CSS Display 仕様書で定義されているように、*ブロック化*になります。アイテムが `inline-block` に設定されている場合、 `display: inline-block` が適用されなくなったのはこのためです。

古いレイアウトで `display: table` を使用している場合、 `display: table-cell` に設定されたアイテムは無名ボックスを生成します。そのため、親要素に `display-table` を設定せずに `display: table-cell` を使用すると、あたかも `display: table` を設定した div や他の要素でセルを囲んだかのように、隣接するセルの周りに無名の表のラッパーが生成されます。アイテムが `display: table-cell` に設定されていて、 機能クエリーでその親を `display: grid` に変更すると、 この無名ボックスの作成は行われません。つまり、`display: table` ベースのレイアウトを上書きしても、 無名ボックスが追加されることはありません。

### 浮動要素

すでに説明したように、 `float` や `clear` は、グリッドアイテムに影響を与えません。そのため、アイテムを明示的に `float: none` に設定する必要はありません。

### 垂直方向の配置

配置プロパティ `vertical-align` は、グリッドアイテムには影響を与えません。 `display: inline-block` や `display: table` を使ったレイアウトでは、 vertical-align プロパティを使って基本的な整列を行うことができます。グリッドレイアウトには、より強力なボックス配置プロパティがあります。

### 段組みレイアウト

`column-*` プロパティはグリッドコンテナーには適用されないので、古いブラウザーの計画通りに段組みレイアウトを使用することもできます。

参考資料
----

* 機能クエリーの優れた説明と、その上手な使い方については、 Using Feature Queries in CSS (2016) を参照してください。
* CSS Grid and the New Autoprefixer (2018)


グリッドレイアウトとアクセシビリティ - CSS: カスケーディングスタイルシート

グリッドレイアウトとアクセシビリティ
==================

ウェブ制作に長年携わってきた人なら、 CSS グリッドは「レイアウトのための表」と少し似ていると思うかもしれません。ウェブデザインの黎明期には、 HTML の表を使ってページのレイアウトを構築し、表のセルにデザインを分割してレイアウトを作成していました。この方法は、その後に登場した「CSS 位置指定」に比べて、表表示による位置合わせと一定の高さの列を利用できるという利点がありました。しかし、最大の欠点は、デザインとマークアップを結びつけてしまうことで、アクセシビリティの問題が発生しやすくなることでした。デザインを表にレイアウトするために、例えばスクリーンリーダーで読み上げたときに全く意味をなさない方法でコンテンツを分割することがよくありました。

CSS に移行する際に、 CSS についてはコンテンツとマークアップと表現を分離するレイアウトができることをよく話していました。最終的な目的は、意味的にしっかりと構造化された文書を作成し、CSS を適用して希望のレイアウトを作成することです。 CSS Zen Garden のようなサイトがこの能力を示しています。 CSS Zen Garden では、同一のマークアップを、 CSS を使って独自のデザインに仕上げることに挑戦しました。

CSS グリッドレイアウトでは、テーブルのような問題はなく、グリッド構造はマークアップではなく CSS で定義されます。要素を追加する必要があれば、意味的には何の意味もないものを使うことができます。グリッドは、マークアップからコンテンツを分離するという約束を適切に果たすのに役立つと考えられますが、この考えは行き過ぎではないのでしょうか。グリッドを使用することで、アクセシビリティの問題を引き起こす可能性はないのでしょうか。

CSS グリッドレイアウトにおける並べ替え
---------------------

このガイドでは、グリッドを使ってページのコンテンツをさまざまな方法で並べ替えることができることを説明してきました。 `order` プロパティを使用すると、アイテムの自動配置を変更することができます。また、 `grid-auto-flow: dense` を使用すると、DOM の順番から外れたアイテムを視覚的に表示することができます。また、ソース内の位置を考慮せずに、グリッドテンプレート領域の線ベースの配置を使ってアイテムを配置することもできます。

仕様書には、「並び替えとアクセシビリティ」を扱う章があります。その章の導入部には、グリッドレイアウトを使って内容物を視覚的に並べ替えたときに、仕様書がブラウザーに期待することの詳細が記載されています。

>
> グリッドレイアウトは、文書において並べ替えを行うための大きな力になります。しかし、これらは文書のソースの正しい順序付けの代用にはなりません。 order プロパティとグリッドの配置は、視覚的でないメディア（音声など）の順序には影響しません。同様に、グリッドアイテムを視覚的に再配置しても、直線的なナビゲーションモード（リンクの循環など、 HTML5 の tabindex などを参照）の既定の巡回順序には影響しません。
>
>
>

グリッドレイアウトを使用して視覚的に順序を変更しても、スクリーンリーダーなどの音声読み上げソフトでコンテンツを読み上げている場合は、項目の順序は変わりません。また、並べ替えてもタブの順番は変わりません。つまり、キーボードを使ってサイトを閲覧している人が、サイト内のリンクをタブで移動しているとき、並び替えた項目が次の項目になったために、突然文書の一番上から一番下に移動してしまう可能性があるということです。

仕様書では、作者（CSSWG の用語でウェブ開発者のこと）に対して、このような並び替えを行わないように警告しています。

>
> 作者は、 order と grid-placement プロパティを、コンテンツの論理的な並び替えではなく、視覚的な並び替えにのみ使用しなければなりません。これらの機能を使って論理的な並び替えを行うスタイルシートは不適合です。
>
>
>

実際にグリッドレイアウトを使ってデザインする場合、どのような意味があるのでしょうか。

### 視覚的な、しかし論理的ではない並べ替え

グリッドレイアウトやフレックスボックスで並び替えを行っても、それは「視覚的な並び替え」に過ぎません。根本的なソースは、音声合成や文書のタブ順などを制御するものです。これがどのように機能するか、非常に簡単な例で説明します。

この例では、グリッドを使用して、リンクを含む一連のボックスを配置しています。線ベースの配置プロパティを使って、ボックス 1 をグリッドの 2 列目に配置しました。視覚的には、リストの 4 番目の項目として表示されています。しかし、リンクからリンクへとタブで移動しても、ソースではボックス 1 が最初に来るので、タブの順序はボックス 1 から始まることになります。
```

\* {
  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;
}
```

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.box1 {
  grid-column: 1;
  grid-row: 2;
}
```

```html
<div class="wrapper">
  <div class="box box1"><a href="">One</a></div>
  <div class="box box2"><a href="">Two</a></div>
  <div class="box box3"><a href="">Three</a></div>
  <div class="box box4"><a href="">Four</a></div>
  <div class="box box5"><a href="">Five</a></div>
</div>
```

仕様書によると、このシナリオでは、ボックス 1 がその位置で本当に論理的に意味をなしているなら、グリッドレイアウトを使って並び替えるのではなく、ソースに戻ってそこで変更を加えるべきだとしています。これは、視覚的な並べ替えと論理的な並べ替えの違いを意味しています。論理的な並べ替えは、文書の意味と構造にとって重要であり、その構造を維持するようにしなければなりません。

グリッドレイアウトのアクセシビリティはどのように考えればよいのか
--------------------------------

仕様書によると、文書がコンテンツの論理的な順序を維持する必要があることがわかっています。さまざまなユーザーやページの操作方法に対してアクセシビリティを確保するためには、どのように開発に取り組めばよいのでしょうか。

構造化された、アクセシブルな文書から始める

グリッドレイアウトでは、希望のレイアウトを実現するために文書ソースを変更する必要がありません。したがって、ページの出発点は、構造化されたアクセス可能な文書でなければなりません。 CSS グリッドレイアウトの仕様にもあるように、グリッドレイアウトは*画面が最小の端末*にも適した構造を提供することができます。ユーザーがモバイルで長い文書をスクロールしている場合、そのユーザーにとっての優先順位は、ソースの中で何を優先すべきかによく対応します。

レスポンシブで応答するグリッドの作成

メディアクエリーを使って列を追加したり、異なる画面サイズや端末に合わせて変更を加えたりすることになるでしょう。グリッドはとても便利で、例えば、モバイルのソース順で優先度の低い要素を、デスクトップのレイアウトではサイドバーに移動させることができます。ここで重要なのは、テストを続けることです。非常に簡単なテストは、*文書を tab で巡回してみることです*。この順番はまだ意味があるでしょうか。奇妙な方法でレイアウトの一番上から一番下に飛び移っていないか確認してみてください。もしそうであれば、レイアウトについて何か対処する必要があるということです。

ソースに戻る

デザインプロセスの中で、グリッドを使って要素の位置を変更した場合は、文書に戻って論理的な順序を変更する必要があります。 CSS グリッドレイアウトの良いところは、レイアウトに大きな変更を加えなくても、ソース内のアイテムを論理的な順序に合わせて移動させることができることです。これは、例えば `float` ベースのレイアウトで、様々なブレイクポイントのレイアウトを得るために文書ソースが重要な意味を持つのに比べて、大きな改善です。しかし、論理的な順序を維持するためにソースに戻って更新することを忘れないようにするのは、開発者である私たちの責任です。

グリッドとマークアップの平坦化の危険性
-------------------

CSS グリッドレイアウトや CSS フレックスボックスで注意しなければならないもう一つの問題は、マークアップを平坦にしようとする誘惑です。これまで述べてきたように、アイテムがグリッドアイテムになるためには、グリッドコンテナの直接の子である必要があります。したがって、グリッドコンテナー内に `<ul>` 要素がある場合、子要素の `<li>` ではなく、その `ul` 要素がグリッドアイテムになります。

サブグリッド の `grid-template-columns` と `grid-template-rows` の値は、広く実装されればこの問題を解決します。これにより、グリッドがグリッドアイテムに継承され、ツリーに引き継がれるようになります。

サブグリッドの相互運用の対応が限られていることから、 CSS グリッドレイアウトを使用したサイトを開発する際には、レイアウトをより簡単に作成するために、マークアップを平坦にしたり、意味的な要素を削除したりしようとする誘惑に駆られることがあります。例えば、あるコンテンツが意味的にはリストとしてマークアップされていたが、代わりに `<div>` 要素のセットを使用すれば、 `display: grid` に設定されたコンテナの直接の子要素とすることができるからです。この誘惑に気をつけて、マークアップを削除することなくデザインを発展させる方法を見つけてください。実際に文書に入ってそうしなければならない場合、レイアウトを機能させるために意味的な要素を削除していることに気づくでしょうから、きちんと構造化された文書から始めることは、この問題を避けるとても良い方法です。

参考資料
----

アクセシビリティと CSS グリッドレイアウトに関する既存の資料はあまり多くありません。問題点の多くは CSS フレックスボックスに関するものと似ていますが、 CSS フレックスボックスでも `flex-direction` と `order` プロパティを使ってコンテンツを並べ替える方法があります。

文書ソースの順序に従った視覚的な表示の概念は、*WCAG Techniques for Success Criteria - Technique C27* に詳細が記載されています。

これらの問題について考え始める方法として、 CSS グリッドレイアウトを使用する際に、Léonie Watson 氏の *Flexbox & the Keyboard Navigation Disconnect* を読むことをお勧めします。また、ffconf での Léonie のプレゼンテーション動画は、スクリーンリーダーが CSS での視覚的表現をどのように扱うかについて理解を深めるのに役立ちます。 Adrian Roselli も tab order in various browsers を投稿していますが、これは Firefox にグリッドサポートが完全に実装される前のものです。


グリッドレイアウトでの自動配置 - CSS: カスケーディングスタイルシート

グリッドレイアウトでの自動配置
===============

作成したグリッドにアイテムを正確に配置する機能に加え、 CSS グリッドレイアウト仕様には、グリッドを作成して子アイテムの一部または全部を配置しなかった場合に何が起こるかを制御するルールが含まれています。最も簡単な方法として、アイテムのセットにグリッドを作成することで、自動配置の動作を確認することができます。

既定の配置
-----

アイテムに配置情報を与えない場合は、アイテムはグリッド上に配置され、各グリッドセルに 1 つずつ配置されます。
```

\* {
  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;
}
```

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
```

```html
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>
```

自動配置の既定のルール
-----------

上記の例でわかるように、グリッドを作成すると、すべての子アイテムが各グリッドセルに 1 つずつ配置されます。既定のフローでは、行ごとにアイテムを配置します。グリッドは、それぞれのアイテムを 1 行目のそれぞれのセルに配置します。 `grid-template-rows` プロパティを使用して追加の行を作成した場合は、グリッドはこれらの行にアイテムを配置し続けます。明示的なグリッドにすべてのアイテムを配置するのに十分な行がない場合は、新たに*暗黙の*行が作成されます。

### 暗黙のグリッド内での行の大きさ

暗黙のグリッドで自動的に作成される行の既定値は、大きさが自動になっています。これは、あふれることなく、それらに追加されたコンテンツを含むことを意味します。

しかし、`grid-auto-rows` プロパティを使用することで、これらの行の大きさを制御することができます。例えば、すべての作成された行を 100 ピクセルの高さにするには、次のように使います。
```

\* {
  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;
}
```

```html
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>
```

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: 100px;
}
```

### minmax() を使用した行の大きさの指定

`minmax()` を `grid-auto-rows` の値に使用すると、最小サイズでありながら、コンテンツの高さに合わせて成長する行を作成することができます。
```

\* {
  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;
}
```

```html
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>
    Four <br />This cell <br />Has extra <br />content. <br />Max is auto
    <br />so the row expands.
  </div>
  <div>Five</div>
</div>
```

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
```

### トラックリストを使用した行の高さの指定

また、トラックリストを渡すこともでき、これは繰り返されます。次のトラックリストでは、最初の暗黙の行トラックを 100 ピクセル、2 番目を `200px` として作成します。これは、暗黙のグリッドに内容物が追加される限り、継続されます。
```

\* {
  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;
}
```

```html
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
</div>
```

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: 100px 200px;
}
```

### 列ごとの自動配置

グリッドにアイテムを列ごとに自動配置させることもできます。 `grid-auto-flow` プロパティに `column` という値を指定します。この場合、グリッドは `grid-template-rows` を使って定義した行にアイテムを追加します。列が一杯になると、次の明示的な列に移動するか、暗黙的なグリッドに新しい列トラックを作成します。暗黙の行トラックと同様に、これらの列トラックのサイズは自動的に調整されます。暗黙の列トラックのサイズは `grid-auto-columns` で制御できますが、これは `grid-auto-rows` と同様に動作します。

次の例では、高さ 200 ピクセルの 3 列のトラックを持つグリッドを作成しています。列ごとに自動配置していますが、作成される列は、 300 ピクセルの列幅、 100 ピクセルの列幅となり、すべてのアイテムを配置するのに十分な列トラックができるまで続きます。

```css
.wrapper {
  display: grid;
  grid-template-rows: repeat(3, 200px);
  gap: 10px;
  grid-auto-flow: column;
  grid-auto-columns: 300px 100px;
}
```

```
\* {
  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;
}
```

```html
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
</div>
```

自動配置アイテムの順序
-----------

グリッドには複数のアイテムを混在させることができます。グリッド上の位置を指定できるアイテムもあれば、自動配置されるアイテムもあります。これは便利なことで、グリッド上のアイテムの配置順を文書の順序に反映させれば、すべてのアイテムを配置するために CSS ルールを記述する必要がなくなるかもしれません。仕様書には、グリッドアイテム配置アルゴリズムという長い節がありますが、ほとんどの場合、アイテムのためのいくつかの簡単なルールを覚えておくだけで十分です。

### order が文書順を変更

Gridは、グリッド位置が与えられていないアイテムを、仕様書では "order modified document order" と表現されている通りに配置します。これは、`order` プロパティを使用している場合、DOM の順序ではなく、その順序でアイテムが配置されることを意味します。それ以外の場合は、既定では文書のソースに入力された順に配置されます。

### 配置プロパティのあるアイテム

グリッドはまず、位置を指定したアイテムを配置します。以下の例では、 12 個のグリッドアイテムがあります。アイテム 2 とアイテム 5 は、グリッド上にラインベースで配置されています。これらのアイテムが配置されると、他のアイテムが自動的にスペースに配置されるのがわかります。自動配置されたアイテムは、 DOM順に配置されたアイテムの前に配置され、前に配置されたアイテムの位置より後に開始されることはありません。
```

\* {
  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;
}
```

```html
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
  <div>Nine</div>
  <div>Ten</div>
  <div>Eleven</div>
  <div>Twelve</div>
</div>
```

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  gap: 10px;
}
.wrapper div:nth-child(2) {
  grid-column: 3;
  grid-row: 2 / 4;
}
.wrapper div:nth-child(5) {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
```

### 複数のトラックにまたがるアイテムの扱い

自動配置を利用しながら、配置プロパティを使用することができます。次の例では、奇数のアイテムが行と列の両方で 2 つのトラックにまたがるように設定することで、レイアウトを追加しています。これには `grid-column-end` と `grid-row-end` プロパティを使用し、その値を `span 2` に設定しています。これにより、アイテムの先頭の線は自動配置で設定され、末尾の線は 2 つのトラックにまたがることになります。

グリッドに隙間ができると、自動配置されたアイテムがトラックに入らない場合、アイテムが入るスペースが見つかるまで次の行に移動するのがわかります。
```

\* {
  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;
}
```

```html
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
  <div>Nine</div>
  <div>Ten</div>
  <div>Eleven</div>
  <div>Twelve</div>
</div>
```

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  gap: 10px;
}
.wrapper div:nth-child(4n + 1) {
  grid-column-end: span 2;
  grid-row-end: span 2;
  background-color: #ffa94d;
}
.wrapper div:nth-child(2) {
  grid-column: 3;
  grid-row: 2 / 4;
}
.wrapper div:nth-child(5) {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
```

### 溝を埋める

これまでのところ、特別に配置したアイテムを除いて、グリッドは常に前進し、アイテムを DOM 順に並べています。これは一般的には望ましいことです。例えば、フォームをレイアウトする場合、隙間を埋めるためにラベルやフィールドがごちゃごちゃになってしまうのは避けたいものです。しかし、時には、論理的な順序ではないものをレイアウトすることがあり、隙間のないレイアウトを作成したいことがあります。

そのためには、コンテナーにプロパティ `grid-auto-flow` を `dense` の値で追加します。これは、フローの順番を `column` に変更するときに使用するプロパティと同じなので、列で作業する場合は、両方の値 `grid-auto-flow: column dense` を追加します。

こうしておくと、グリッドは隙間を埋め戻します。グリッド内を移動すると、以前と同じように隙間を残しますが、前の隙間に入るアイテムが見つかると、それをピックアップして DOM 順から外して隙間に入れます。グリッドの他の並べ替えと同様に、これは論理的な順序を変更するものではありません。例えば、タブの順序は文書の順序に従います。グリッドレイアウトのアクセシビリティの問題についてはグリッドレイアウトとアクセシビリティガイドを参照してください。
```

\* {
  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;
}
```

```html
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
  <div>Nine</div>
  <div>Ten</div>
  <div>Eleven</div>
  <div>Twelve</div>
</div>
```

```css
.wrapper div:nth-child(4n + 1) {
  grid-column-end: span 2;
  grid-row-end: span 2;
  background-color: #ffa94d;
}
.wrapper div:nth-child(2) {
  grid-column: 3;
  grid-row: 2 / 4;
}
.wrapper div:nth-child(5) {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  gap: 10px;
  grid-auto-flow: dense;
}
```

### 無名のグリッドアイテム

仕様書には、無名のグリッドアイテムについての記述があります。これは、グリッドコンテナーの中に、他の要素に包まれていない文字列がある場合に作成されます。下の例では、クラスが `grid` の親を `display: grid` に設定したと仮定して、 3 つのグリッドアイテムがあります。最初のアイテムは無名のアイテムで、周囲にマークアップがないため、常に自動配置のルールで処理されます。他の 2 つは、 div で囲まれたグリッドアイテムで、自動配置されるか、配置メソッドを使ってグリッドに配置することができます。

```html
<div class="grid">
  この文字列は無名のアイテムになります。
  <div>グリッドアイテムです</div>
  <div>グリッドアイテムです</div>
</div>
```

無名のアイテムは、ターゲットにする方法がないため、常に自動配置されます。そのため、何らかの理由で囲まれていないされていないテキストがグリッド内にある場合、自動配置ルールに従って自動配置されるため、予期せぬ場所に表示される可能性があります。

### auto-placement の用途

自動配置は、アイテムのコレクションがある場合に便利です。例えば、写真のギャラリーや製品リストなど、論理的な順序になっていないアイテムがあるかもしれません。そのような場合には、高密度パッキングモードを使ってグリッドの穴を埋めることができます。画像ギャラリーの例では、横向きの画像と縦向きの画像があります。横長の画像は、クラスを `landscape` に設定して、2 列のトラックにまたがるようにしています。そして、 `grid-auto-flow: dense` を使用して、密集したグリッドを作成しています。

この `grid-auto-flow: dense` の行を削除してみると、内容が並べなおされてレイアウトに隙間ができるのがわかります。

自動配置は、論理的な順序を持つインターフェイスアイテムを配置する際にも役立ちます。その例が次の例の定義リストです。定義リストはスタイル付けするのに興味深い課題です。平坦であり、 `dt` と `dd` のアイテムのグループを包むものが何もないためです。この例では、自動配置でアイテムを配置していますが、列 1 では `dt`、列 2 では `dd` で始まるクラスを用意しています。これにより、用語がいくつあっても、片方に用語、片方に定義を配置することができます。
```

\* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}
```

```html
<div class="wrapper">
  <dl>
    <dt>哺乳類</dt>
    <dd>猫</dd>
    <dd>犬</dd>
    <dd>鼠</dd>
    <dt>魚類</dt>
    <dd>グッピー</dd>
    <dt>鳥類</dt>
    <dd>ハクセキレイ</dd>
    <dd>フクロウ</dd>
  </dl>
</div>
```

```css
dl {
  display: grid;
  grid-template-columns: auto 1fr;
  max-width: 300px;
  margin: 1em;
  line-height: 1.4;
}
dt {
  grid-column: 1;
  font-weight: bold;
}
dd {
  grid-column: 2;
}
```

auto-placement では（まだ）できないこと
---------------------------

よく質問として出てくることがいくつかあります。現在のところ、グリッドのすべてのセルをアイテムでターゲットするようなことはできません。グリッド上の名前付きラインに関する前回のガイドに従った場合、関連する問題がすでに思い浮かぶかもしれません。それは、「"n" という名前の次の行に対してアイテムを自動配置し、グリッドは他の行をスキップする」というルールを定義することです。 CSSWG の GitHub リポジトリにこれに関する問題提起がありますので、自分の用途を追加してみてはいかがでしょうか。

自動配置やグリッドレイアウトの他の部分について、独自の用途を思いつくかもしれません。そのような場合には、用途を解決するための課題として提起するか、既存の課題に追加してください。これにより、将来のバージョンの仕様をより良いものにすることができます。


線に基づく配置を使用したグリッドレイアウト - CSS: カスケーディングスタイルシート

線に基づく配置を使用したグリッドレイアウト
=====================

グリッドレイアウトの基本概念の記事では、線番号を使ってグリッド上にアイテムを配置する方法をご紹介しました。今回は、この仕様の基本的な機能について詳しくご紹介します。

グリッドレイアウトを使用する際には、常に番号付きの線があるので、番号付きの線からグリッドの探求を始めるのが最も論理的な方法です。グリッドには列と行にそれぞれ番号が振られており、1 から順番に並んでいます。ただし、グリッドは文書の記述方法に応じて番号が振られます。英語のような左書きの言語では、行 1 はグリッドの左側にあります。アラビア語のように右書きの言語では、行 1 はグリッドの右端になります。書字方向とグリッドの相互作用については、後のガイドで詳しく説明します。

### 基本的な例

非常に簡単な例として、3 本の列トラックと 3 本の行トラックを持つグリッドを考えてみましょう。これにより、各次元に 4 本の線ができます。

グリッドコンテナーの中には、4 つの子要素があります。これらをグリッドに何も配置しなければ、自動配置ルールに従って、最初の 4 つのセルにそれぞれ 1 つのアイテムが配置されます。Firefox グリッドハイライターを使うと、グリッドの列と行がどのように定義されているかがわかります。

![開発ツールで強調表示されたグリッド](/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement/highlighted_grid.png)
```

\* {
  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;
}
```

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}
```

```html
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
</div>
```

線番号によるアイテムの配置
-------------

これらのアイテムをグリッド上のどこに配置するかは、線ベースの配置を使って制御できます。最初のアイテムは、グリッドの左端から始まり、1 列分のトラックに広がるようにしたいと思います。また、グリッドの一番上にある 1 行目の線から始まり、4 行目の線までの範囲に配置します。

```css
.box1 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 4;
}
```

一部のアイテムを配置すると、グリッド上の他のアイテムは自動配置ルールで配置され続けます。これがどのように機能するかは後のガイドで詳しく説明しますが、グリッドを操作していると、配置されていないアイテムがグリッドの空いているセルに配置されていくのがわかります。

それぞれのアイテムを個別に扱うことで、 4 つのアイテムすべてを行と列のトラックにまたがって配置することができます。必要であれば、セルを空のままにすることもできます。グリッドレイアウトのとても良い点の 1 つは、マージンを使って余白を確保しなくても、デザインに余白を確保できることです。
```

\* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```

```html
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
</div>
```

```css
.box1 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 4;
}
.box2 {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}
.box3 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}
.box4 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 4;
}
```

`grid-column` および `grid-row` の一括指定
----------------------------------

ここでは、各アイテムを配置するためにかなり多くのコードを使用しています。当然ながら一括指定プロパティがあります。`grid-column-start` と `grid-column-end` のプロパティは併せて `grid-column` となり、`grid-row-start` と `grid-row-end` は併せて `grid-row` となります。
```

\* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```

```html
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
</div>
```

```css
.box1 {
  grid-column: 1 / 2;
  grid-row: 1 / 4;
}
.box2 {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
}
.box3 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}
.box4 {
  grid-column: 2 / 4;
  grid-row: 3 / 4;
}
```

既定のスパン
------

上の例では、プロパティを実演するために、列と行のすべての端点を指定していますが、実際には、アイテムが 1 つのトラックにしか広がらない場合は、 `grid-column-end` や `grid-row-end` の値を省略することができます。グリッドの既定では、1 つのトラックにまたがるように設定されています。

### 既定のスパンに個別指定で配置

つまり、基本的な個別指定で例を表すと次のようになります。
```

\* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```

```html
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
</div>
```

```css
.box1 {
  grid-column-start: 1;
  grid-row-start: 1;
  grid-row-end: 4;
}
.box2 {
  grid-column-start: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}
.box3 {
  grid-column-start: 2;
  grid-row-start: 1;
}
.box4 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 3;
}
```

### 一括指定の配置における既定のスパン

一括指定は以下のコードのようになります。スラッシュはなく、2 番目の値は 1 つのトラックにまたがるアイテムのみになります。
```

\* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```

```html
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
</div>
```

```css
.box1 {
  grid-column: 1;
  grid-row: 1 / 4;
}
.box2 {
  grid-column: 3;
  grid-row: 1 / 3;
}
.box3 {
  grid-column: 2;
  grid-row: 1;
}
.box4 {
  grid-column: 2 / 4;
  grid-row: 3;
}
```

`grid-area` プロパティ
-----------------

さらに一歩進んで、各領域を単一のプロパティ `grid-area` で定義することができます。 grid-area の値の順番は以下の通りです。

* grid-row-start
* grid-column-start
* grid-row-end
* grid-column-end
```

\* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```

```html
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
</div>
```

```css
.box1 {
  grid-area: 1 / 1 / 4 / 2;
}
.box2 {
  grid-area: 1 / 3 / 3 / 4;
}
.box3 {
  grid-area: 1 / 2 / 2 / 3;
}
.box4 {
  grid-area: 3 / 2 / 4 / 4;
}
```

この `grid-area` の値の順序は、少し奇妙に思えるかもしれません。これは、例えば、マージンやパディングを一括指定として指定するときの順番とは逆です。これは、グリッドが CSS Writing Modes 仕様書で定義されているフローに関連した方向を使用しているためだと理解するとよいでしょう。グリッドと書字方向の連携については後述しますが、ここではフローに関連した方向の概念が 4 つあります。

* block-start
* block-end
* inline-start
* inline-end

ここでは、左書きの言語である英語で考えてみます。 block-start はグリッドコンテナーの先頭の行の線で、 block-end はコンテナーの末尾の行の線です。inline-start は左の列の線で、inline-start は常に現在の書字方向でテキストが書かれる位置であり、inline-end はグリッドの最終列の線です。

`grid-area` プロパティを使用してグリッド領域を指定する際には、まず、両方の先頭の線、 `block-start` と `inline-start` を定義し、次に両方の末尾の線、 `block-end` と `inline-end` を定義します。top、right、bottom、leftという物理的なプロパティに慣れていると、最初は変わっているように見えますが、ウェブサイトが書字方向によって多数の方向があると考えれば、より納得がいきます。

逆に数える
-----

また、グリッドのブロックやインラインの端から逆に数えることもできます。英語の場合は、右の列の線と最後の行の線になります。これらの線は `-1` として扱われ、そこから逆算することができます。つまり、最後から 2 行目は `-2` となります。最後の線は、*明示的グリッド* （`grid-template-columns` と `grid-template-rows` で定義されるグリッド）の最後の線であり、その外で追加された*暗黙的グリッド*である行や列は考慮されないことに注意しましょう。

次の例では、アイテムを配置する際に、グリッドの右と下から行うことで、それまでのレイアウトを反転させています。
```

\* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```

```html
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
</div>
```

```css
.box1 {
  grid-column-start: -1;
  grid-column-end: -2;
  grid-row-start: -1;
  grid-row-end: -4;
}
.box2 {
  grid-column-start: -3;
  grid-column-end: -4;
  grid-row-start: -1;
  grid-row-end: -3;
}
.box3 {
  grid-column-start: -2;
  grid-column-end: -3;
  grid-row-start: -1;
  grid-row-end: -2;
}
.box4 {
  grid-column-start: -2;
  grid-column-end: -4;
  grid-row-start: -3;
  grid-row-end: -4;
}
```

### グリッドをまたがってアイテムを伸ばす

グリッドの先頭と末尾の線を指定することができると、アイテムをグリッド全体に引き伸ばせるので便利です。

```css
.item {
  grid-column: 1 / -1;
}
```

溝または路地
------

CSS Grid 仕様書では、`column-gap` と `row-gap` プロパティを使って、列と行のトラックの間に溝を追加する機能があります。これらは、段組みレイアウトにおける `column-gap` プロパティと同様の働きをする間隔を指定します。

**メモ:** グリッドがブラウザーに初めて搭載されたとき、`column-gap`、`row-gap`、`gap` プロパティには、それぞれ `grid-` という接頭辞が付けられ、`grid-column-gap`、`grid-row-gap`、`grid-gap` となっていました。

ブラウザーのレンダリングエンジンはこの接頭辞を削除するように更新されていますが、接頭辞付きのバージョンは別名として維持されるため、安全に使用することができます。

間隔はグリッドのトラック間にのみ現れ、コンテナーの上下左右に余白を追加することはありません。これらのプロパティをグリッドコンテナーに使用することで、先ほどの例に間隔を追加することができます。
```

\* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```

```html
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
</div>
```

```css
.box1 {
  grid-column: 1;
  grid-row: 1 / 4;
}
.box2 {
  grid-column: 3;
  grid-row: 1 / 3;
}
.box3 {
  grid-column: 2;
  grid-row: 1;
}
.box4 {
  grid-column: 2 / 4;
  grid-row: 3;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  column-gap: 20px;
  row-gap: 1em;
}
```

### gap 一括指定

この 2 つのプロパティは、 `gap` という省略形で表すこともできます。`gap` に 1 つの値だけを指定すると、列と行の両方の間隔に適用されます。2 つの値を指定した場合は、1 つ目の値が `row-gap` に、2 つ目の値が `column-gap` に使用されます。

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 1em 20px;
}
```

線ベースのアイテムの配置において、間隔はあたかも線の幅が増えたかのように機能します。その線から始まるものは間隔の後に始まり、間隔を処理したり、間隔に何かを配置することはできません。通常のトラックのように動作するガッターが必要な場合は、もちろん、そのためのトラックを定義することができます。

`span` キーワードの使用
---------------

先頭の線と末尾の線を番号で指定するだけでなく、先頭の線を指定してから領域をまたぐトラックの数を指定することもできます。
```

\* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```

```html
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
</div>
```

```css
.box1 {
  grid-column: 1;
  grid-row: 1 / span 3;
}
.box2 {
  grid-column: 3;
  grid-row: 1 / span 2;
}
.box3 {
  grid-column: 2;
  grid-row: 1;
}
.box4 {
  grid-column: 2 / span 2;
  grid-row: 3;
}
```

また、`grid-row-start`/`grid-row-end` や `grid-column-start`/`grid-column-end` の値に `span` キーワードを使用することもできます。次の 2 つの例では、同じグリッド領域を作成します。最初の例では、先頭の行の線を設定し、次に末尾の行を設定し、3 本にまたがるようにしたいと説明しています。領域は 1 本目から始まり、3 本目から 4 本目までとなります。

```css
.box1 {
  grid-column-start: 1;
  grid-row-start: 1;
  grid-row-end: span 3;
}
```

2 つ目の例では、アイテムを終了させたい末尾の行の線を指定し、先頭の線を `span 3` と設定しています。これは、アイテムが指定された行の線から上方に広がる必要があることを意味しています。領域は 4 本目から始まり、 1 本目まで 3 本にまたがっています。

```css
.box1 {
  grid-column-start: 1;
  grid-row-start: span 3;
  grid-row-end: 4;
}
```

グリッドにおける線ベースの配置に慣れるために、列数の異なるグリッドにアイテムを配置して、一般的なレイアウトをいくつか作ってみましょう。すべてのアイテムを配置しなくても、残ったアイテムは自動配置のルールに従って配置されることを覚えておいてください。このようにして、思い通りのレイアウトになることもありますが、思いがけないところにアイテムが表示されている場合は、そのアイテムの位置が設定されているかどうかを確認してください。

また、このように明示的に配置すると、グリッド上のアイテム同士が重なってしまうことがあります。いい効果が得られることもありますが、先頭の線や末尾の線の指定を間違えると、間違って重なってしまうこともあります。Firefox グリッドハイライターは、特にグリッドが非常に複雑な場合、学習の際にとても役立ちます。


サブグリッド - CSS: カスケーディングスタイルシート

サブグリッド
======

Baseline 2023
-------------

Newly availableSince September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
CSS グリッドレイアウトの Level 2 は、 `subgrid` の値を `grid-template-columns` および `grid-template-rows` に追加しています。このガイドでは、サブグリッドでできること、いくつかの使用例と、この機能で解決されるデザインパターンを詳述します。

サブグリッドの導入
---------

グリッドコンテナーに `display: grid` を追加すると、その直下の子だけがグリッドアイテムになり、作成したグリッド上に置くことができます。これらグリッドアイテムの子要素は通常フローで表示されます。

グリッドアイテムをグリッドコンテナーにすることにより、グリッドを「入れ子」にすることができます。しかし、これらのグリッドは互いの親グリッドに依存し、親グリッドのサイズ変更に追従しません。これでは、入れ子のグリッドアイテムをメイングリッドで整列させることが難しくなります。

`subgrid` の値を `grid-template-columns` および `grid-template-rows` の両方またはどちらかに設定すると、新しいトラックリストを作成するのではなく、入れ子のグリッドが親要素上で定義されたトラックを利用します。

例えば、`grid-template-columns: subgrid` を使用し、入れ子のグリッドが親のトラック 3 列にまたがる場合、入れ子のグリッドは、親グリッドのサイズと同じトラック 3 列分になります。その列の間隔は継承されますが、異なる `gap` 値で上書きすることもできます。線名は親からサブグリッドへ渡されますが、サブグリッドが独自の線名を定義することもできます。

列のサブグリッド
--------

以下の例では、幅 `1fr` の 9 列のトラックで高さが最低 100px の 4 行のグリッドレイアウトを定義しています。

このグリッドの 2 から 7 番の列の線、2 から 4 番の行の線に `.item` を置き、これをグリッドアイテムからグリッドコンテナーにします。これをサブグリッドである列トラックに与え、通常の行を定義します。アイテムの幅が 5 列のトラックにまたがるので、サブグリッドも 5 列のトラックを持ちます。次に、このグリッド上に `.subitem` を置きます。

この例の行はサブグリッドではないため、通常の入れ子のグリッドとして振る舞います。親グリッド領域は、この入れ子のグリッドが十分入る大きさに拡張されます。

サブグリッド内の線番号は再び 1 番から始まるので注意してください。サブグリッド内の列線 1 番は、サブグリッドの最初の線です。サブグリッド化された要素は親グリッドの線番号を継承しません。これは、メイングリッド上の異なる位置に置かれるコンポーネントを安全に配置できることを意味し、このコンポーネント上の線番号が常に同じであることが分かります。

行のサブグリッド
--------

次の例は、上記と同じ設定で、`grid-template-rows` の値に `subgrid` を使用し、明示的に列トラックを定義しています。このため、列トラックが通常の入れ子のグリッドとして振る舞い、行が子スパンの 2 トラックに紐づけられます。

列と行のサブグリッド
----------

以下の例のように、行と列の両方をサブグリッドとして定義できます。これは、サブグリッドが親グリッドの行と列両方のトラックの数に紐づけられることを意味します。

### サブグリッド化された範囲に暗黙のグリッドはない

アイテムを自動配置する必要があり、アイテムの数がわからない場合は、サブグリッドを作成するときに、それらのアイテムを保持するために新しい行が作成されないように注意してください。

次の例を見てください。上の例と同じ親子グリッドを使用しています。しかし、サブグリッド内に 12 個のアイテムがあり、 10 個のグリッドセルに自動配置しようとしています。サブグリッドは両方の次元にあるので、余分な 2 つのアイテムの行き場がなく、仕様で定義されているように、それらはグリッドの最後のトラックに入ります。

`grid-template-rows` の値を削除すると、通常の明示的なトラックが作成できるようになります。とはいえ、これらは親のトラックに沿って並ばないため、その数に応じて作成する必要があります。

gap プロパティとサブグリッド
----------------

親グリッドに `gap`, `column-gap`, `row-gap` のいずれかが指定されている場合、これらはサブグリッドにも渡され、トラックの間隔が親と同じになります。状況によっては、サブグリッドのトラックの間隔を親と異なるものに設定したい場合があるでしょう。これは、サブグリッドのグリッドコンテナーに `gap-*` プロパティを使用することにより達成できます。

これは以下の例で確認できます。親グリッドは 20px の行間隔と列間隔を持ち、サブグリッドは `row-gap` の値に `0` を設定しています。

これを Firefox のグリッドインスペクターで調査すると、グリッドの線が gap の中央に正しく描かれていることが分るでしょう。gap の値を 0 に設定した場合、同様の動作で要素に負のマージンが適用され、gap からアイテムまでの空間が与えられます。

![サブグリッドの row-gap が 0 に設定されていると、小さい方のアイテムがギャップに表示されます。](/ja/docs/Web/CSS/CSS_grid_layout/Subgrid/gap.png)

名前付きグリッド線
---------

CSS のグリッドを利用する時、そのグリッドの線に名前を付けて、線番号ではなく、これらの名前でアイテムを配置することができます。親グリッドの線名がサブグリッドに渡されるので、それらを使用してアイテムを配置できます。以下の例では、親の線に `col-start` および `col-end` という名前を付けました。これらはサブアイテムの配置に使用されます。

また、サブグリッドにも線名を指定することができます。`subgrid` キーワードの後の線のリストに、角括弧で囲まれた線名を追加します。サブグリッドに 4 本の線がある場合、 `grid-template-columns: subgrid [line1] [line2] [line3] [line4]` という構文ですべての線に名前を付けることができます。

サブグリッドに指定された線は親で指定された任意の線に追加されるため、その線名を親とサブグリッドのどちらでも利用できます。デモンストレーションするため、以下の例で、アイテムの一つは親線を利用して配置し、もう一つはサブグリッドの線を利用しています。

サブグリッドの利用
---------

サブグリッド内にうまく収まらないアイテムを心配する必要なく、サブグリッドは入れ子のグリッドにとてもよく似た動作をします。ただ一つ違うところは、サブグリッドのトラックのサイズ変更が親グリッドで設定されることです。どの入れ子のグリッドでもそうであったように、サブグリッド内のコンテンツのサイズがトラックのサイズを変更することがあり、コンテンツがトラックのサイズ変更に影響することを許すメソッドが用いられることが想定されます。このような場合、例えばサイズが自動調整される行トラックは、コンテンツがメイングリッドとサブグリッド内に収まるように大きくなります。

subgrid 値は、通常の入れ子のグリッドとほとんど同じ方法で動作するため、これらを切り替えるのは簡単です。例えば、暗黙的な行のグリッドが必要になったときにすべきことは、`grid-template-rows` の `subgrid` 値を削除し、あるいは暗黙的なトラックのサイズ変更を制御するために `grid-auto-rows` に値を与えることだけです。

仕様書
---

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # subgrids |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* Mozilla Developer YouTube チャンネル上の動画、Laying out forms using subgrid と Don't Wait To Use Subgrid For Better Card Layouts をご覧ください。
* CSSConf.eu でのプレゼンテーション Hello Subgrid!