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

グリッドレイアウトのボックス配置
================

CSS グリッドレイアウトは Box Alignment Level 3 仕様を実装しています。これは標準のフレックスボックスがフレックスコンテナーの中でアイテム配置を行うのと同じです。この仕様書には、様々なレイアウト方式すべてにおける配置の動作を詳述されています。どのレイアウト方式も、可能な限り仕様に準拠し、その違い (特徴と制約) に基づいて個々の動作を実装します。現在、仕様書にはすべてのレイアウト方式の詳細がありますが、ブラウザーの実装は完全ではありません。しかしながら、CSS グリッドレイアウト方式は広く実装されています。

このガイドでは、グリッドレイアウトにおけるボックス配置がどのように機能するのか説明します。フレックスボックスのプロパティと値の機能と多くの類似点があります。しかし、グリッドは二次元、フレックスボックスは一次元であるため、いくつか小さな違いがあることに気をつけてください。それではグリッド内のものを配置するときに使う 2 つの軸について見ていきましょう。

グリッドレイアウトの 2 つの軸
----------------

グリッドレイアウトでは、*ブロック軸*と*インライン軸*という 2 つの軸が利用できます。ブロック軸は、ブロックレイアウトでブロックが配置される軸です。ページ内に 2 つの段落がある場合、上から下に向かって並べられますので、この方向がブロック軸となります。

![ブロック軸は垂直方向](/ja/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout/block_axis.png)

*インライン軸*はブロック軸に交差する軸です。通常、テキストはインライン方向に向かって並べられます。

![インライン／行軸は水平方向](/ja/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout/7_inline_axis.png)

中身はグリッド領域の中に並べることができ、グリッドトラック自体が 2 つの軸の上にあります。

ブロック軸上でのアイテムの配置
---------------

`align-self` と `align-items` プロパティは、ブロック軸上の配置を制御します。これらのプロパティを使用すると、配置したグリッド領域内でアイテムの配置を変更することができます。

### align-items の使用

以下の例には、4 つのグリッド領域があります。グリッドコンテナー上で `align-items` プロパティと次の値の一つを使い、アイテムを配置しています。

* `auto`
* `normal`
* `start`
* `end`
* `center`
* `stretch`
* `baseline`
* `first baseline`
* `last baseline`
```

\* {
  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(8, 1fr);
  gap: 10px;
  grid-auto-rows: 100px;
  grid-template-areas:
    "a a a a b b b b"
    "a a a a b b b b"
    "c c c c d d d d"
    "c c c c d d d d";
  align-items: start;
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}
```

```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>
```

`align-items: start` を設定すると、それぞれの子である `<div>` の高さはコンテンツの `<div>` によって決定されることを覚えておいてください。また、`align-items` を完全に省略すると、それぞれの子である `<div>` の高さはグリッド領域を満たすように広がります。

`align-items` プロパティはすべての子グリッドアイテムに `align-self` プロパティを設定します。これは、グリッドアイテム上で `align-self` を使えばプロパティを個別に設定できるということです。

### align-self の使用

次の例では、`align-self` プロパティを使い、様々な配置の値を実験します。最初の領域で見られるのは `align-self` の既定の動作で、引き伸ばされています。2 つ目のアイテムは `align-self` が `start` 値を持っており、3 つ目は `end` 、4 つ目は `center` です。
```

\* {
  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(8, 1fr);
  gap: 10px;
  grid-auto-rows: 100px;
  grid-template-areas:
    "a a a a b b b b"
    "a a a a b b b b"
    "c c c c d d d d"
    "c c c c d d d d";
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
  align-self: start;
}
.item3 {
  grid-area: c;
  align-self: end;
}
.item4 {
  grid-area: d;
  align-self: center;
}
```

```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>
```

### アイテムと固有のアスペクト比

既定では、`align-self` の動作はアイテムを広げます。しかし、固有のアスペクト比を持つアイテムの動作は `start` になります。固有のアスペクト比を持つアイテムに既定で `stretch` を設定するとアイテムを歪めるからです。

この動作は現在、仕様で明確になっていますが、ブラウザーはまだ正しく実装していません。その間、`align-self` と `justify-self` を `start` に設定することによって、画像などのアイテムがグリッドの直接の子のように既定で広がらないことを保証できます。これにより、実装後の正しい動作を模倣することができます。

インライン軸上のアイテムの位置揃え
-----------------

`align-items` と `align-self` がブロック軸上でアイテムの配置を処理するように、`justify-items` と `justify-self` は、インライン軸上で同じ動作をします。選べる値は `align-self` と同じです。

* `auto`
* `normal`
* `start`
* `end`
* `center`
* `stretch`
* `baseline`
* `first baseline`
* `last baseline`

以下では、`align-items` と同様の例を見ることができます。今回は `justify-self` を適用しています。

ここでも既定は、固有のアスペクト比を持つアイテム以外、`stretch` です。配置の設定を変更しない場合、グリッドアイテムはグリッド領域をカバーします。例の最初のアイテムは既定の配置を表しています。
```

\* {
  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(8, 1fr);
  gap: 10px;
  grid-auto-rows: 100px;
  grid-template-areas:
    "a a a a b b b b"
    "a a a a b b b b"
    "c c c c d d d d"
    "c c c c d d d d";
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
  justify-self: start;
}
.item3 {
  grid-area: c;
  justify-self: end;
}
.item4 {
  grid-area: d;
  justify-self: center;
}
```

```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>
```

`align-self` と `align-items` と同様に、グリッドコンテナーに `justify-items` を適用することで、すべてのアイテムに `justify-self` の値を設定できます。

`justify-self` と `justify-items` プロパティはフレックスボックスに実装されていません。これはフレックスボックスが一次元であること、軸にそって複数のアイテムがあるかもしれず単一のアイテムを揃えることができないことによります。フレックスボックスの主軸・インライン軸に沿って配置するには、`justify-content` プロパティを使用します。

### 一括指定プロパティ

`place-items` プロパティは `align-items` と `justify-items` の一括指定です。

`place-self` は `align-self` と `justify-self` の一括指定です。

領域内のアイテムを中央に揃える
---------------

align プロパティと justify プロパティを組み合わせると、グリッド領域の中でアイテムを簡単に中央揃えすることができます。
```

\* {
  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(4, 1fr);
  gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas:
    ". a a ."
    ". a a .";
}
.item1 {
  grid-area: a;
  align-self: center;
  justify-self: center;
}
```

```html
<div class="wrapper">
  <div class="item1">Item 1</div>
</div>
```

ブロック軸上のグリッドトラックの配置
------------------

グリッドトラックが使う領域がグリッドコンテナーより小さければ、コンテナー内にグリッドトラック自体を配置できます。繰り返しますが、これはブロック軸とインライン軸上で行われます。`align-content` はブロック軸方向でトラックを配置し、`justify-content` はインライン軸方向の配置を行います。`place-content` プロパティは `align-content` と `justify-content` のショートハンドです。`align-content` と `justify-content` と `place-content` の値は次の通りです。

* `normal`
* `start`
* `end`
* `center`
* `stretch`
* `space-around`
* `space-between`
* `space-evenly`
* `baseline`
* `first baseline`
* `last baseline`

以下の例では 500 ピクセル × 500 ピクセルのグリッドコンテナーがあります。3 つの行トラックと列トラックがあり、それぞれ、幅 100 ピクセル、溝 10 ピクセルです。これはグリッドコンテナー内でブロックとインラインどちらの方向にも隙間があることを意味します。

`align-content` プロパティはグリッドコンテナーに適用され、グリッド全体に作用します。

### 既定の配置

グリッドレイアウトの既定の動作は `start` です。そのため、グリッドトラックはグリッドの左上にあり、開始グリッド線に対して整列しています。

```css
\* {
  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(3, 100px);
  height: 500px;
  width: 500px;
  gap: 10px;
  grid-template-areas:
    "a a b"
    "a a b"
    "c d d";
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}
```

```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>
```

### align-content: end を設定

コンテナーに `align-content` を追加し、値を `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 {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  height: 500px;
  width: 500px;
  gap: 10px;
  grid-template-areas:
    "a a b"
    "a a b"
    "c d d";
  align-content: end;
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}
```

```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>
```

### align-content: space-between の設定

このプロパティには、フレックスボックスでおなじみの値を使うこともできます。スペース配分の値は、 `space-between`、`space-around`、`space-evenly` です。 `align-content` を `space-between` に更新すると、グリッド上の要素がどのように配置されるかが分かります。
```

\* {
  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(3, 100px);
  height: 500px;
  width: 500px;
  gap: 10px;
  grid-template-areas:
    "a a b"
    "a a b"
    "c d d";
  align-content: space-between;
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}
```

```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>
```

スペース配分の値を使用すると、グリッド上のアイテムが大きくなる可能性があることに注意してください。アイテムが複数のグリッドトラックにまたがる場合、トラック間にさらにスペースを追加すると、アイテムはその分大きくなる必要があります。グリッドは常に厳密です。したがって、これらの値を使用する場合は、トラックの内容が追加のスペースに対応できるようにするか、整列プロパティを使用して引き伸ばさず始点に置くようにします。

下の図では、`align-content` を `start` にして配置したグリッドの隣に、`align-content` を `space-between` に設定して配置したグリッドがあります。2 つのトラックの間にスペースを取るとき、2 つの行トラックにまたがる Item 1 と 2 が どのように余分な高さを確保しているか見てください。

![space-between を使用したときアイテムがどのように大きくなるかのデモ。](/ja/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout/7_space-between.png)

インライン軸上のグリッドトラックの位置揃え
---------------------

ブロック軸で `align-content` を使うのと同様に、インライン軸では `justify-content` を使うことができます。

同じ例を使って、`justify-content` に `space-around` を設定してみましょう。やはり、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, 100px);
  grid-template-rows: repeat(3, 100px);
  height: 500px;
  width: 500px;
  gap: 10px;
  grid-template-areas:
    "a a b"
    "a a b"
    "c d d";
  align-content: space-between;
  justify-content: space-around;
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}
```

```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>
```

配置と auto マージン
-------------

領域の中でアイテムを配置するもう一つの方法は、自動マージンを使用することです。コンテナーブロックの左右のマージンを `auto` に設定すると、ビューポート内でレイアウトを中央に配置できます。既に知っているように、自動マージンは空きスペースのすべてを吸収します。両側のマージンを `auto` に設定すると、両マージンはスペースのすべてを取るよう試みるため、ブロックは中央に押し込まれます。

次の例では、 item 1 に `auto` の左マージンを与えます。自動マージンは、そのアイテムのコンテンツ用の空間が割り当てられた後に残りのスペースを取るため、コンテンツが領域の右側に押し出されます。どのように押し出されるか見てみましょう。
```

\* {
  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(3, 100px);
  height: 500px;
  width: 500px;
  gap: 10px;
  grid-template-areas:
    "a a b"
    "a a b"
    "c d d";
}
.item1 {
  grid-area: a;
  margin-left: auto;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}
```

```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>
```

Firefox グリッドハイライター を使って、どのようにアイテムが整列されるか見てみましょう。

![グリッドハイライターを使って自動マージンを表している画像。](/ja/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout/7_auto_margins.png)

整列と書字方向
-------

ここまでのすべての例は英語を使ったものであり、これは左から右へ書く言語です。物理方向で考えるとき、行の始点はグリッドの左上になります。

CSS グリッドレイアウトとボックス配置の仕様は、CSS の書字方向と共に機能するよう設計されています。アラビア語などの右から左へ書く言語で作業する場合、グリッドの始点は右上になり、`justify-content: start` の既定はグリッドトラックがグリッドの右手側から始まるようになるでしょう。

`margin-right` または `margin-left` で自動マージンを使用した場合、および `top`、`right`、`bottom`、`left` を使って位置を絶対指定した場合、書字方向が尊重されません。次のガイドでは、CSS グリッドレイアウトのボックス配置と書字方向の間における相互作用を見ていきます。これは、複数の言語で表示されるサイトを開発する場合、またはデザインの中で言語や書字方向を混在させたい場合に、理解することが重要になります。


グリッドテンプレート領域 - CSS: カスケーディングスタイルシート

グリッドテンプレート領域
============

前回のガイドでは、グリッド線と、その線に対してアイテムを位置指定する方法をご紹介しました。CSS グリッドレイアウトでは、常に線が存在しており、グリッド上にアイテムを位置指定することを簡単にしています。しかし、グリッド上のアイテムを位置指定する別の方法があります。この方法は、単独で使用することも、線を使った位置指定と組み合わせて使用することもできます。この方法では、名前の付いたテンプレート領域を使ってアイテムを位置指定しますが、その方法を具体的に説明します。この方法を「アスキーアート方式のグリッドレイアウト」と呼んでいるのも、すぐにお分かりいただけるでしょう。

グリッド領域に名前を付ける
-------------

すでに `grid-area` プロパティをご覧になったことがあると思います。これは、グリッド領域を配置するための 4 本の線をすべて値として取ることができるプロパティです。

```css
.box1 {
  grid-area: 1 / 1 / 4 / 2;
}
```

ここで 4 本の線を定義する際に行っているのは、領域を定義し、その領域を囲む線を指定することです。

![線で定義されたグリッド領域](/ja/docs/Web/CSS/CSS_grid_layout/Grid_template_areas/4_area.png)

領域を名前を付けて定義し、`grid-template-areas` プロパティの値でその領域の位置を指定することもできます。領域の名前は自由に決めることができます。例えば、以下のようなレイアウトを作りたい場合、 4 つの主要な領域を特定することができます。

* ヘッダー
* フッター
* サイドバー
* メインコンテンツ

![ヘッダーとフッターの付いた単純な 2 列のレイアウトを表す図](/ja/docs/Web/CSS/CSS_grid_layout/Grid_template_areas/4_layout.png)

`grid-area` プロパティにより、これらの領域にそれぞれ名前を付けることができます。これはまだレイアウトを生成していませんが、レイアウトで使用する名前付き領域になりました。

```css
.header {
  grid-area: hd;
}
.footer {
  grid-area: ft;
}
.content {
  grid-area: main;
}
.sidebar {
  grid-area: sd;
}
```

これらの名前を定義した後で、レイアウトを作成します。今回は、アイテム自体に指定された線番号を使ってアイテムを配置するのではなく、グリッドコンテナー上にレイアウト全体を作成します。

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-template-areas:
    "hd hd hd hd hd hd hd hd hd"
    "sd sd sd main main main main main main"
    "ft ft ft ft ft ft ft ft ft";
}
```

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

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

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

```html
<div class="wrapper">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>
```

この方法を使えば、個々のグリッドアイテムには何も指定する必要がなく、すべてはグリッドコンテナー上で行えます。レイアウトは `grid-template-areas` プロパティの値で表示されます。

グリッドセルを空欄のままにする
---------------

この例では、グリッドを完全に領域で埋め尽くし、空欄をなくしています。しかし、このレイアウト方法では、グリッドのセルを空欄にすることができます。セルを空欄にするには、フルストップ文字「`.`」を使用します。メインコンテンツの直下にフッターのみを表示したい場合は、サイドバーの下にある 3 つのセルを空にする必要があります。

```css
.header {
  grid-area: hd;
}
.footer {
  grid-area: ft;
}
.content {
  grid-area: main;
}
.sidebar {
  grid-area: sd;
}
```

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

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

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

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-template-areas:
    "hd hd hd hd hd hd hd hd hd"
    "sd sd sd main main main main main main"
    ". . . ft ft ft ft ft ft";
}
```

```html
<div class="wrapper">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>
```

レイアウトをきれいにするために、複数の `.` 文字を使うことができます。ピリオドの間に 1 つ以上のホワイトスペースがない限り、1 つのセルとしてカウントされます。複雑なレイアウトの場合、行と列をきれいに整列させることにはメリットがあります。つまり、このレイアウトがどのようなものであるかを、CSS の中で実際に確認することができるのです。

複数のセルにまたがらせる
------------

この例では、それぞれの領域が複数のグリッドセルにまたがっており、グリッド領域の名前を空白を挟んで複数回繰り返すことでこれを実現しています。`grid-template-areas` の値には、列をきれいに並べるための空白を追加することができます。ここでは、`hd` と `ft` が `main` と並ぶようにしていることがわかります。

領域名を連結して作成する領域は長方形でなければならず、現時点では L 字型の領域を作成する方法はありません。仕様書には、将来のレベルでこの機能が提供されるかもしれないと書かれています。しかし、列と同じように簡単に行にまたがらせることができます。例えば、`.` を `sd` に置き換えることで、サイドバーがフッターの端まで広がるようにすることができます。

```css
.header {
  grid-area: hd;
}
.footer {
  grid-area: ft;
}
.content {
  grid-area: main;
}
.sidebar {
  grid-area: sd;
}
```

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

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

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

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-template-areas:
    "hd hd hd hd hd hd hd hd hd"
    "sd sd sd main main main main main main"
    "sd sd sd ft ft ft ft ft ft";
}
```

```
<div class="wrapper">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>
```

`grid-template-areas` の値は、完全なグリッドを示すものでなければならず、そうでない場合は無効となります（また、このプロパティは無視されます）。つまり、各行に同じ数のセルを用意し、空の場合はピリオド文字でそのセルを空欄にすることを示す必要があります。また、領域が長方形でない場合は、無効なグリッドが作成されます。

メディアクエリーによるグリッドの再定義
-------------------

レイアウトが CSS の一部分に収まったことで、さまざまなブレークポイントでの変更がとても容易になりました。これは、グリッドの再定義、グリッド上のアイテムの位置の再定義、またはその両方を一度に行うことができます。

その際、メディアクエリーの外側で領域の名前を定義します。これにより、コンテンツ領域は、グリッド上のどの位置に配置されても、常に `main` と呼ばれることになります。

上のレイアウトでは、狭い幅で 1 列のグリッドを定義し、アイテムを積み重ねていくというとてもシンプルなレイアウトにしたいと考えています。
```

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

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

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

```css
.header {
  grid-area: hd;
}
.footer {
  grid-area: ft;
}
.content {
  grid-area: main;
}
.sidebar {
  grid-area: sd;
}

.wrapper {
  display: grid;
  grid-auto-rows: minmax(100px, auto);
  grid-template-columns: 1fr;
  grid-template-areas:
    "hd"
    "main"
    "sd"
    "ft";
}
```

その後、メディアクエリーの中でレイアウトを再定義して、2 列のレイアウトにしたり、さらに広い空間が必要な場合は 3 列のレイアウトにすることもできます。広いレイアウトでは、9 列のトラックグリッドを維持し、 `grid-template-areas` を使用してアイテムを配置する場所を再定義します。

```css
@media (min-width: 500px) {
  .wrapper {
    grid-template-columns: repeat(9, 1fr);
    grid-template-areas:
      "hd hd hd hd hd hd hd hd hd"
      "sd sd sd main main main main main main"
      "sd sd sd ft ft ft ft ft ft";
  }
}
@media (min-width: 700px) {
  .wrapper {
    grid-template-areas:
      "hd hd hd hd hd hd hd hd hd"
      "sd sd main main main main main ft ft";
  }
}
```

```
<div class="wrapper">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>
```

UI 要素への `grid-template-areas` の使用
---------------------------------

ネット上にあるグリッドの例の多くは、ページのメインレイアウトにグリッドを使うことを前提としていますが、グリッドは小さな要素にも大きな要素と同じように使うことができます。特に `grid-template-areas` を使うと、コード上で要素がどのように見えるかを簡単に確認することができます。

### メディアオブジェクトの例

とても簡単な例として、「メディアオブジェクト」を作成することができます。これは、片側に画像などのメディアを置く空間があり、もう片側にコンテンツを置く空間がある部品です。画像は、ボックスの右または左に表示されます。

![メディアオブジェクトのデザインを表す図](/ja/docs/Web/CSS/CSS_grid_layout/Grid_template_areas/4_media_objects.png)

今回のグリッドは、2 列のトラックグリッドで、画像の列は `1fr` 、テキストは `3fr` の大きさになっています。固定幅の画像領域が必要な場合は、画像の列をピクセル幅に設定して、テキスト領域を `1fr` に割り当てることができます。そうすると、`1fr` の 1 列のトラックが残りの空間を占めることになります。

画像領域にはグリッド領域名として `img` を、テキスト領域には `content` を与え、`grid-template-areas` プロパティを使って、これらをレイアウトします。

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

.media {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  max-width: 400px;
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-areas: "img content";
  margin-bottom: 1em;
}

.media .image {
  grid-area: img;
  background-color: #ffd8a8;
}

.media .text {
  grid-area: content;
  padding: 10px;
}
```

```html
<div class="media">
  <div class="image"></div>
  <div class="text">
    これはメディアオブジェクトの例です。
    grid-template-areas を使って、メディアオブジェクトの画像部分とテキスト部分を切り替えることができます。
  </div>
</div>
```

### ボックスの反対側に画像を表示する

画像付きのボックスを逆に表示させたい場合もあるでしょう。そのためには、グリッドを再定義して `1fr` トラックを最後に置き、 `grid-template-areas` の値を反転させます。

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

.media {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  max-width: 400px;
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-areas: "img content";
  margin-bottom: 1em;
}

.media.flipped {
  grid-template-columns: 3fr 1fr;
  grid-template-areas: "content img";
}

.media .image {
  grid-area: img;
  background-color: #ffd8a8;
}

.media .text {
  grid-area: content;
  padding: 10px;
}
```

```html
<div class="media flipped">
  <div class="image"></div>
  <div class="text">
    これはメディアオブジェクトの例です。
    grid-template-areas を使って、メディアオブジェクトの画像部分とテキスト部分を切り替えることができます。
  </div>
</div>
```

グリッド定義の一括指定
-----------

グリッドにアイテムを配置するさまざまな方法や、グリッドを定義するための多くのプロパティを見てきましたが、今回は、グリッドを定義するためのいくつかの一括指定と、それに関するさまざまなことを 1 行の CSS で定義する方法を見てみましょう。

これらは、他の開発者や将来の自分にとって、すぐに読みにくいものになってしまうかもしれません。しかし、これらは仕様の一部であり、たとえあなたが使用しなくても、サンプルや他の開発者が使用しているのを目にすることになるでしょう。

一括指定を使用する前に、一括指定は多くのプロパティを一度に設定できるだけでなく、一括指定で設定しなかった、または設定できなかったものを初期値に**リセット**する働きがあることを覚えておくとよいでしょう。したがって、一括指定を使用する場合は、他の場所で適用したものがリセットされる可能性があることに注意してください。

グリッドコンテナーの 2 つの一括指定は、明示的グリッド一括指定 `grid-template` と、グリッド定義一括指定 `grid` です。

### `grid-template`

`grid-template` プロパティは次のプロパティを設定します。

* `grid-template-rows`
* `grid-template-columns`
* `grid-template-areas`

このプロパティは、明示的なグリッドを定義する際に制御するものであり、作成される暗黙的な行や列のトラックに影響を与えるものではないことから、明示的なグリッドの一括指定と呼ばれています。

次のコードでは、`grid-template`を使用して、このガイドで以前に作成したレイアウトと同じレイアウトを作成しています。

```css
.wrapper {
  display: grid;
  grid-template:
    "hd hd hd hd hd hd hd hd hd" minmax(100px, auto)
    "sd sd sd main main main main main main" minmax(100px, auto)
    "ft ft ft ft ft ft ft ft ft" minmax(100px, auto)
    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
```

最初の値は `grid-template-areas` の値ですが、各行の最後に行のサイズも宣言しています。これを行っているのは `minmax(100px, auto)` の部分です。

そして、 `grid-template-areas` の後にはスラッシュがあり、その後には列トラックの明示的なトラックリストがあります。

### `grid`

`grid` 一括指定は、さらに一歩進んで、暗黙のグリッドが使用するプロパティも設定します。つまり、設定するのは次のものです。

* `grid-template-rows`
* `grid-template-columns`
* `grid-template-areas`
* `grid-auto-rows`
* `grid-auto-columns`
* `grid-auto-flow`

この構文は、`grid-template` の一括指定とまったく同じ方法で使用できますが、プロパティで設定されている他の値がリセットされることに注意してください。

```css
.wrapper {
  display: grid;
  grid:
    "hd hd hd hd hd hd hd hd hd" minmax(100px, auto)
    "sd sd sd main main main main main main" minmax(100px, auto)
    "ft ft ft ft ft ft ft ft ft" minmax(100px, auto)
    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
```

この一括指定が提供する他の機能については、後ほど自動配置と grid-auto-flow プロパティを見てみることにします。

ここまでの説明で、線ベースの配置や名前の付いた領域を使ったグリッドレイアウトを作成できるようになったと思います。時間をかけて、グリッドを使った一般的なレイアウトパターンを作ってみましょう。新しい用語がたくさん出てきますが、構文は比較的簡単です。例題を作成していくうちに、まだ説明していない疑問や使用例が出てくるかもしれません。このガイドの残りの部分では、グリッドを使って高度なレイアウトを作成できるように、仕様に含まれる詳細な情報を見ていきます。


メイソンリーレイアウト - CSS: カスケーディングスタイルシート

メイソンリーレイアウト
===========

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

CSS グリッドレイアウト仕様書の Level 3 では、 `masonry` の値が `grid-template-columns` と `grid-template-rows` に含まれています。このガイドでは、メイソンリー（組積）レイアウトとは何か、どのように使用するかについて詳しく説明します。

メイソンリーレイアウトとは、一方の軸（多くの場合は列）が一般的な厳格なグリッドレイアウトを使用し、もう一方の軸がメイソンリーレイアウトを使用するレイアウト方法です。メイソンリーレイアウトでは、短いアイテムの後に隙間ができるような厳密なグリッドではなく、次の行のアイテムが隙間を完全に埋めるように立ち上がっていきます。

メイソンリーレイアウトの作成
--------------

最も一般的なメイソンリーレイアウトを作成するには、列がグリッドの軸、行が組積の軸になります。このレイアウトは `grid-template-columns` と `grid-template-rows` で定義します。

```css
.container {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-template-rows: masonry;
}
```

このコンテナーの子要素は、通常のグリッドレイアウトの自動配置と同じように、アイテムごとに行に沿って配置されます。しかし、新しい行に移動すると、アイテムは組積アルゴリズムに従って表示されます。アイテムは最も余裕のある列に配置されるため、厳密な行のトラックがなくてもぎっしりとしたレイアウトになります。

また、アイテムを列にして読み込むメイソンリーレイアウトも可能です。

グリッド軸の制御
--------

グリッド軸では、グリッドレイアウトで期待した通りに動作します。キーワード `span` を使えば、自動配置を維持したまま、アイテムを複数のトラックにまたがって配置することができます。また、線ベースの位置指定を使ってアイテムを配置することもできます。

### アイテムをまたがらせるメイソンリーレイアウト

この例では、 2 つのアイテムが 2 本のトラックにまたがり、組積アイテムがそれを取り囲むように配置されています。

この例では、柱の位置が決まっているアイテムが含まれています。配置が確定しているアイテムは、メイソンリーレイアウトが行われる前に配置されます。

組積軸の制御
------

組積軸は、通常のグリッドの自動配置ルールではなく、組積のレイアウトルールに従っているため、異なるルールで動作します。この軸を制御するために、グリッド Level 3 仕様で定義されている 3 つの追加プロパティ `align-tracks`、`justify-tracks`、`masonry-auto-flow` があります。

### masonry-auto-flow

`masonry-auto-flow` プロパティでは、組積アルゴリズムの動作を変更することができます。`next` という値を与えると、アイテムは空きスペースのあるトラックに入るのではなく、グリッド軸上に順番に表示されます。また、`positioned` という値を与えると、配置が確定しているアイテムを無視して、order で変更した文書順でアイテムを配置します。

### align-tracks

`align-tracks` プロパティは、グリッドコンテナー内のアイテムをブロック軸の組積で整列させることができます。このプロパティは、フレックスレイアウトの動作と同じように、トラック内のアイテムを整列させます。このプロパティは `align-content` と同じ値を取りますが、複数の値を指定して、グリッド軸のトラックごとに異なる整列値を設定することができます。

トラックよりも多くの値を指定すると、追加の値は無視されます。値よりもトラックの数が多い場合、追加のトラックは最後に指定した値を使用します。

### justify-tracks

`justify-tracks` プロパティは、 align-tracks と同じように動作しますが、組積の軸がインライン軸の場合に使用されます。

代替
--

組積に対応していないブラウザーでは、代わりに通常のグリッドの自動配置が使用されます。

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

### css.properties.grid-template-columns.masonry

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

### css.properties.grid-template-rows.masonry

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

関連情報
----

* Native CSS Masonry Layout In CSS Grid


グリッドレイアウトと他のレイアウト方法との関係 - CSS: カスケーディングスタイルシート

グリッドレイアウトと他のレイアウト方法との関係
=======================

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

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

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

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

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

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

`flex-wrap` プロパティを `wrap` に設定し、コンテナーの大きさが狭くなりすぎて flex basis を維持することができなくなったら、アイテムが次の行へ折り返されるようにしています。
```

\* {
  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 {
  width: 500px;
  display: flex;
  flex-wrap: wrap;
}
.wrapper > div {
  flex: 1 1 150px;
}
```

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

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

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

次の例では、グリッドを使って同様のレイアウトを構築します。今回は 3 つの `1fr` の列トラックがあります。アイテム自体には何も設定する必要はりません。構築されたグリッドのセルそれぞれにアイテムを一つずつ配置していきます。厳格なグリッドにアイテムが配置されているため、行と列は整列しています。アイテムは 5 つなので、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>
```

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

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

* 行*または*列のみによってレイアウトを制御する必要がありますか。 – フレックスボックスを使いましょう
* 行*および*列によりレイアウトを制御する必要がありますか。 - グリッドを使いましょう
### 内容物の外か、レイアウトの中か

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

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

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

### ボックス配置

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

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

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

最初の例では、フレックスボックスを使用しており、3 つの要素を持つコンテナーがあります。コンテナーである `wrapper` には `min-height` が設定され、フレックスコンテナーの高さを決めています。コンテナーには `align-items` を `flex-end` に設定してコンテナーの末尾に要素が並ぶようにしています。また、`box1` の `align-self` プロパティをコンテナーの高さに合わせるよう `streach` へ上書きし、`box2` もコンテナーの始まりから整列するにように上書きしています。
```

\* {
  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 class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
</div>
```

```css
.wrapper {
  display: flex;
  align-items: flex-end;
  min-height: 200px;
}
.box1 {
  align-self: stretch;
}
.box2 {
  align-self: flex-start;
}
```

### CSS グリッド上での配置

2 つ目の例ではグリッドを使って同じレイアウトを作りましょう。今回はグリッドレイアウトを使うため、ボックス配置プロパティを使います。従って、 `start` と `end` を `flex-start` と `flex-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;
}
```

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

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  grid-auto-rows: 200px;
}
.box1 {
  align-self: stretch;
}
.box2 {
  align-self: start;
}
```

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

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

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

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

#### グリッドトラックの自動充填

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

次の例では、反復記法で整数の代わりに `auto-fill` キーワードを使用し、トラックリストを 200 ピクセルに設定しています。これにより、グリッドはコンテナーに収まるだけの 200 ピクセルの列トラックを作成します。
```

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

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
}
```

### 柔軟なトラック数

これはフレックスボックスとは全く同じではありません。フレックスボックスの例では、アイテムは折り返す前では 200 ピクセルの基準よりも大きくなっています。グリッドでも `auto-fit` と `minmax()` 関数を組み合わせることで、同じことが実現できます。次の例では、 `minmax` を使って自動的に大きさを合わせるトラックを作成します。トラックの大きさは最低でも 200 ピクセルにしたいので、最大値を `1fr` に設定しています。ブラウザーは、 200 ピクセルがコンテナーにいくつ収まるかを計算し、グリッドの隙間も考慮した上で、最大値の `1fr` を、アイテム間の残りの空間を共有する指示として扱います。
```

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

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
```

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

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

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

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

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

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

\* {
  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 class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">
    このブロックは絶対位置指定されます。この例では、グリッドコンテナーが包含ブロックとなっているため、絶対位置指定のオフセット値は、配置された領域の外縁から計算されます。
  </div>
  <div class="box4">Four</div>
</div>
```

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 20px;
  position: relative;
}
.box3 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
  position: absolute;
  top: 40px;
  left: 40px;
}
```

アイテムがグリッド列の 2 本目から 4 本目までの領域を取り、1 本目の後に始まっているのがわかります。そして、 top と left のプロパティを使用して、その領域内に配置されています。しかし、絶対的に位置指定されたアイテムでは、通常のようにフローから外されているため、自動配置ルールによってアイテムが同じスペースに配置されています。また、このアイテムは、 3 本目にまたがるように追加の線を作成する原因にもなりません。

`.box3` のルールから `position: absolute` を削除すると、位置指定なしでどのように表示されるかがわかります。

### 親としてのグリッドコンテナー

絶対位置指定された子がグリッドコンテナーを親に持つが、そのコンテナーが新たな位置指定コンテキストを作成しない場合は、前述の例のようにフローから外されます。位置指定コンテキストは、他のレイアウト方式と共通するように、位置指定コンテキストを作成する要素であれば何でも構いません。今回の例では、上記のラッパーから `position: relative` を削除すると、この画像のように、ビューポートからの位置指定コンテキストになります。

![グリッドコンテナを親とするイメージ](/ja/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods/2_abspos_example.png)

この場合も、サイズ調整や他のアイテムが自動配置される際に、アイテムはグリッドレイアウトに参加しなくなります。

### グリッド領域を親にする

絶対的に位置指定されたアイテムがグリッド領域内で入れ子になっている場合、その領域に位置指定コンテキストを作成することができます。以下の例では、先ほどと同じようにグリッドを作成していますが、今回はグリッドの `.box3` 内にアイテムを入れ子にしています。

`.box3` に相対位置を与え、オフセットプロパティを使ってサブアイテムを配置しています。この場合、位置指定コンテキストはグリッド領域です。
```

\* {
  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 class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">
    Three
    <div class="abspos">
      このブロックは絶対的に位置指定されます。この例では、グリッド領域が包含ブロックとなっているため、絶対位置指定のオフセット値はグリッド領域の外縁から計算されます。
    </div>
  </div>
  <div class="box4">Four</div>
</div>
```

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 20px;
}
.box3 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
  position: relative;
}
.abspos {
  position: absolute;
  top: 40px;
  left: 40px;
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.5);
  color: #000;
  padding: 10px;
}
```

グリッドと display: contents
-----------------------

最後に、他のレイアウト仕様との相互作用として、CSS グリッドレイアウトと `display: contents` との相互作用をご紹介します。 display プロパティの `contents` の値は、Display 仕様書に以下のように記述されている新しい値です。

>
> 「その要素自体はボックスを生成しませんが、その子や擬似要素は通常通りボックスを生成します。ボックスの生成とレイアウトのために、その要素は文書ツリー内でその子や擬似要素と置き換えられたかのように扱われなければなりません。」
>
>
>

アイテムを `display: contents` にすると、通常は作成されるはずのボックスが消え、子要素のボックスが一段上がったように見えます。つまり、グリッドアイテムの子がグリッドアイテムになることができるのです。変だと思いませんか？簡単な例を見てみよう。

### 子要素を入れ子にしたグリッドレイアウト

次のマークアップでは、グリッドがあり、グリッド上の最初のアイテムが 3 つの列トラックすべてにまたがるように設定されています。その中には 3 つの入れ子になったアイテムが含まれています。これらのアイテムは直接の子ではないので、グリッドレイアウトの一部にはならず、通常のブロックレイアウトで表示されます。
```

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

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

.box {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
.nested {
  border: 2px solid #ffec99;
  border-radius: 5px;
  background-color: #fff9db;
  padding: 1em;
}
```

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

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

### display: contents の使用

次に、`box1` のルールに `display: contents` を追加すると、そのアイテムのボックスは消え、サブアイテムはグリッドアイテムとなり、自動配置ルールを使ってレイアウトされるようになりました。
```

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

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

.box {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
.nested {
  border: 2px solid #ffec99;
  border-radius: 5px;
  background-color: #fff9db;
  padding: 1em;
}
```

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

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}
.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  display: contents;
}
```

これは、グリッドに入れ子になったアイテムをグリッドの一部のように動作させる方法で、サブグリッドが実装された場合に解決されるであろう問題のいくつかを回避する方法でもあります。また、フレックスボックスと同様の方法で、 `display: contents` を使用して、入れ子になったアイテムをフレックスアイテムにすることもできます。

このガイドからわかるように、CSS グリッドレイアウトはツールキットの一部に過ぎません。必要な効果を得るために、他のレイアウト方法と組み合わせることを恐れないでください。

関連情報
----

* フレックスボックスガイド
* 段組みレイアウトガイド


グリッドレイアウトの基本概念 - CSS: カスケーディングスタイルシート

グリッドレイアウトの基本概念
==============

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

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

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

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

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

### アイテムの配置

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

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

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

### 配置の制御

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

### 重複する内容物の制御

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

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

グリッドコンテナー
---------

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

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

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

`.wrapper` をグリッドコンテナー化します。

```css
.wrapper {
  display: grid;
}
```

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

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

![開発ツールのグリッドハイライターを使用したグリッドの表示](/ja/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout/1-grid-inspector.png)

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

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

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

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

![3 つのグリッドアイテムがあるボックス。 3 つのアイテムの上には、トラックである薄緑色の領域があります。](/ja/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout/1_grid_track.png)

グリッドトラックは `grid-template-columns` プロパティと `grid-template-rows` プロパティ、または省略形の `grid` プロパティと `grid-template` プロパティで定義します。トラックは、明示的グリッドで作成されたトラックの外側にグリッドアイテムを配置することで、暗黙的グリッドでも作成されます。

### 基本的な例

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

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

```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: 200px 200px 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;
}
```

### 単位 fr

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

```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: 1fr 1fr 1fr;
}
```

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

### 等しくない大きさ

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

```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: 2fr 1fr 1fr;
}
```

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

### 変動する大きさと絶対的な大きさの混合

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

```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: 500px 1fr 2fr;
}
```

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

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

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

```css
.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
```

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

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

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

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

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

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr 2fr);
}
```

### 暗黙的および明示的なグリッド

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

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

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

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

```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);
  grid-auto-rows: 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;
}
```

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

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

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

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

```
\* {
  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
    <p>より多くのコンテンツがあります。</p>
    <p>これによって、高さが 100 ピクセルよりも高くなります。</p>
  </div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>
```

グリッド線
-----

私たちがグリッドを定義する時、グリッドトラックを定義するのであり、グリッド線ではないことに注意しなければなりません。グリッドには、アイテムの配置時に使用する番号の付いた線が与えられます。3 列 2 行のグリッドには、4 本の縦線があります。

![番号付きのグリッド行を示した図。](/ja/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout/1_diagram_numbered_grid_lines.png)

グリッド線の番号は、文書の書字方向に従って付けられます。左書き (left-to-right) の言語では、線 1 はグリッドの左手側にあり、右書き (right-to-left) の言語では、グリッドの右手側にあります。グリッド線には名前を付けることもできます。この方法については後のガイドで解説します。

### グリッド線に対するアイテムの配置

グリッド線を基にした配置の詳細は、後の記事で解説します。次の例は、その簡単な方法のデモンストレーションです。アイテムを配置するとき、私たちはトラックではなくグリッド線を対象にします。

以下の例では、最初の 2 つのアイテムを、`grid-column-start`, `grid-column-end`, `grid-row-start` および `grid-row-end` の各プロパティを使用して 3 列トラックのグリッド上に配置します。左から右へ向かって、最初のアイテムは列の線 1 から列の線 4 に対して、右端のグリッド線まで配置されます。また、行の線 1 から始まり、行の線 3 で終わる 2 行のトラックに及びます。

2 番目のアイテムは、グリッド列の線 1 から始まり、1 トラックの幅になります。これはデフォルトであるため、終わりの線を指定する必要がありません。また、行の線 3 から 5 まで、2 行トラックに及びます。他のアイテムは、それぞれグリッド上の空スペースに配置されます。

```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 class="box5">Five</div>
</div>
```

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

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

.box2 {
  grid-column-start: 1;
  grid-row-start: 3;
  grid-row-end: 5;
}
```

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

**メモ:** Firefox の開発者ツールでグリッドインスペクターが使えることを忘れないでください。アイテムがグリッド線に対してどのように配置されるか知ることができます。

### 線による配置の一括指定

上記で使用した個別指定の値は、列の場合は `grid-column` で 1 行に、行の場合は `grid-row` で 1 行に圧縮できます。次の例では、先ほどのコードと同じ位置関係を、はるかに少ない CSS で実現しています。フォワードスラッシュ文字 (`/`) の前の値が開始行、後の値が終了行となります。

領域が 1 つのトラックにしか及ばない場合は、終了値を省略することができます。

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

.box1 {
  grid-column: 1 / 4;
  grid-row: 1 / 3;
}

.box2 {
  grid-column: 1;
  grid-row: 3 / 5;
}
```

グリッドセル
------

*グリッドセル* は、グリッド上の最も小さな単位です。コンセプトとしては、表のセルのようなものです。先述の例で、親要素のグリッドが定義されると、子アイテムが定義されたグリッドの各セルにレイアウトされる様を見てきました。下の画像では、グリッドの最初のセルをハイライトしています。

![グリッドの最初のセルをハイライト表示](/ja/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout/1_grid_cell.png)

グリッド領域
------

アイテムは、行と列の複数のセルにまたがって配置でき、*グリッド領域* を作ることができます。グリッド領域は四角形でなければなりません。例えば L 字型の領域は作れません。ハイライトされた領域は、2 行と 2 列にまたがるトラックです。

![グリッド領域](/ja/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout/1_grid_area.png)

溝
-

グリッドセル間の *溝* (Gutters) または *路地* (alleys) は、 `column-gap` および `row-gap` プロパティを使用するか、一括指定の `gap` で作成できます。下の例では、列間 10 ピクセル、行間 `1em` の隙間を作っています。

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

**メモ:** グリッドが最初にブラウザーに実装されたとき、 `column-gap`, `row-gap`, `gap` に `grid-` の接頭辞がつき、それぞれ `grid-column-gap`, `grid-row-gap`, `grid-gap` のようになっていました。

ブラウザーはすべて接頭辞なしの値に対応しましたが、接頭辞付きの版も安全に利用できるよう保守されるでしょう。

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

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

.wrapper {
  column-gap: 10px;
  row-gap: 1em;
  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;
}
```

領域の前に占める溝による空間は、柔軟な長さの `fr` トラックに割り当てられ、通常のグリッドトラックのようにサイズ設定のために用いられます。しかしながら、溝の内側に何かを配置することはできません。グリッド線を基準にした配置では、溝は太線のように扱われます。

入れ子状のグリッド
---------

グリッドアイテムはグリッドコンテナーにもなります。次の例は以前作成したもので、2 個のアイテムが配置指定された 3 列のグリッドです。この例では、最初のアイテムにサブアイテムが含まれています。これらのアイテムはグリッドの直接の子ではないので、グリッドレイアウトに関係しない通常の文書フローで表示されています。

![フロー中の入れ子上のグリッド](/ja/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout/1_nested_grids_in_flow.png)

サブグリッドのない入れ子
------------

この `box1` に `display: grid` を設定すると、トラック定義を与えてグリッドにすることができます。これらは新しいグリッド上にレイアウトされます。

```css
.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
```

```
<div class="wrapper">
  <div class="box box1">
    <div class="nested">a</div>
    <div class="nested">b</div>
    <div class="nested">c</div>
  </div>
  <div class="box box2">Two</div>
  <div class="box box3">Three</div>
  <div class="box box4">Four</div>
  <div class="box box5">Five</div>
</div>
```

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

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

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

.box1 {
  grid-column: 1 / 4;
}

.nested {
  border: 2px solid #ffec99;
  border-radius: 5px;
  background-color: #fff9db;
  padding: 1em;
}
```

この場合の入れ子状のグリッドは、親グリッドと関係しません。例で表示されているように、親グリッドの `gap` を継承せず、入れ子状のグリッド内の線は親グリッドの線に沿いません。

### サブグリッド

通常のグリッドに加えて、サブグリッドでは、親グリッドのトラック定義を使用するネストされたグリッドを作成することができます。

使用するには、入れ子上のグリッドの例を編集して、 `grid-template-columns: repeat(3, 1fr)` のトラック定義を `grid-template-columns: subgrid` へ変更しましょう。入れ子状のグリッドは親グリッドのトラックを利用してアイテムをレイアウトします。

```css
.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
  display: grid;
  grid-template-columns: subgrid;
}
```

z-index によるアイテムのレイヤー化
---------------------

グリッドアイテムは、同じセルを占有することがあり、この場合は `z-index` を使用してアイテムの重ね合わせの順序を制御することができます。

### z-index のない重ね合わせ

先ほどの行番号順にアイテムを配置する例に戻ると、これを変更して 2 つのアイテムを重ねることができます。

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

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

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

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

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

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

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

アイテム `box2` が `box1` に重なり、ソースコードに書かれた順に、後のものが先のものの上に表示されます。

### 順序の制御

アイテムを上に積む順序は、配置が指定されたアイテムと同様に、`z-index` プロパティを使用して制御できます。`box2` の `z-index` を `box1` より小さくすると、`box1` の奥に表示されるようになります。

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

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
  z-index: 2;
}

.box2 {
  grid-column-start: 1;
  grid-row-start: 2;
  grid-row-end: 4;
  z-index: 1;
}
```

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

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

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

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

次のステップ
------

この記事では、グリッドレイアウト仕様の要点だけを見てきました。コード例を試してみてから、このガイドの次の部分に進みましょう。ここで本当に CSS グリッドレイアウトの詳細を掘り下げ始めます。


名前付きグリッド線を使用したレイアウト - CSS: カスケーディングスタイルシート

名前付きグリッド線を使用したレイアウト
===================

前のガイドでは、グリッドトラックを定義することによって作られた線に沿ってアイテムを配置する様子と、名前の付いたテンプレート領域を使用してアイテムを配置する方法を見てきました。このガイドでは、名前付きの線を使用したときにこれら 2 つが共にどのように動作するかを見てみます。線に名前をつけるととても便利ですが、名前とトラックの寸法の組み合わせではもっと難解なグリッドの構文になります。いくつかの例を使ってみることで、動作がより明確かつ易しくなるでしょう。

グリッド定義の際の線の命名
-------------

グリッドを定義する際に、`grid-template-rows` と `grid-template-columns` のプロパティを使って、グリッド内の一部または全部の線に名前を割り当てることができます。ここでは、線ベースの配置のガイドで作成したシンプルなレイアウトを使って説明します。今回は、名前付きの線を使ってグリッドを作成します。
```

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

グリッドを定義する際、角括弧の中に線の名前を付けます。この名前は何でもかまいません。ここでは、コンテナーの先頭と末尾の名前を、行と列の両方で定義しました。また、グリッドの中心となるブロックには、列と行の両方に対して `content-start` と `content-end` という名前を定義しましたが、グリッド上のすべての線に名前を付ける必要はありません。しかし、グリッド上のすべての線に名前を付ける必要はありません。レイアウト上で重要な線だけに名前を付けることもできます。

```css
.wrapper {
  display: grid;
  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
}
```

線に名前を付けたら、線番号ではなく、名前を使ってアイテムを配置することができます。

```css
.box1 {
  grid-column-start: main-start;
  grid-row-start: main-start;
  grid-row-end: main-end;
}

.box2 {
  grid-column-start: content-end;
  grid-row-start: main-start;
  grid-row-end: content-end;
}

.box3 {
  grid-column-start: content-start;
  grid-row-start: main-start;
}

.box4 {
  grid-column-start: content-start;
  grid-column-end: main-end;
  grid-row-start: content-end;
}
```

```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>
```

線ベースの配置に関する他のすべての機能は同じように動作し、名前付きの線と線番号を混在させることができます。名前付きの線は、レスポンシブデザインでグリッドを再定義する際に便利です。メディアクエリーで線番号を変更して内容物の位置を再定義するのではなく、定義の中で線の名前が常に同じになるようにすることができます。

### 線に複数の名前をつける

例えば、sidebar-end と main-start を表すために、1 つの線に複数の名前を付けたい場合があります。そのためには、 `[sidebar-end main-start]` のように角括弧の中に名前を入れて、その間に空白を入れます。これで、どちらの名前でもその行を参照することができます。

名前付きの線による暗黙のグリッド領域
------------------

線に名前を付けるとき、好きな名前を付けて良いと言いました。この名前はカスタム識別子といって、作者が定義した名前です。名前を決める際には、`span` のような、仕様書に出てきて混乱を招くような言葉は避ける必要があります。識別子には引用符を付けません。

どのような名前でも良いのですが、上の例のように、領域を囲む行に `-start` と `-end` を追加すると、グリッドは主要部分で使用される名前の領域を作成します。上の例では、行と列の両方に `content-start` と `content-end` を付けています。つまり、`content`という名前のグリッド領域ができ、その領域に何かを配置することができるのです。
```

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

上記と同じグリッド定義を使用していますが、今回は `content` という名前の領域に 1 つのアイテムを配置することにします。

```css
.wrapper {
  display: grid;
  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
}
.thing {
  grid-area: content;
}
```

```html
<div class="wrapper">
  <div class="thing">content と名付けられた領域に配置されています。</div>
</div>
```

名前の付いた線が領域を作ってくれるので、 `grid-template-areas` で領域の位置を定義する必要はありません。

名前付き領域による暗黙のグリッド線
-----------------

名前付きの線が名前付きの領域を作る方法を見てきましたが、これは逆に機能します。名前付きテンプレート領域を定義すると、アイテムを配置するのに使用できる名前付きの線が作成されます。グリッドテンプレート領域のガイドで作成されたレイアウトを使用すると、領域によって作成された線を使用して、これがどのように機能するかを確認することができます。

この例では、クラスを `overlay` に設定した div を追加しています。そして、`grid-area` プロパティで作成した名前付きの領域と、`grid-template-areas` で作成したレイアウトを用意しました。領域の名前は次の通りです。

* `hd`
* `ft`
* `main`
* `sd`

これによって、以下の行と列の線が得られます。

* `hd-start`
* `hd-end`
* `sd-start`
* `sd-end`
* `main-start`
* `main-end`
* `ft-start`
* `ft-end`

画像の中で名前付きの線を確認することができます。なお、線によっては 2 つの名前が付いています。例えば、 `sd-end` と `main-start` は同じ列の線を参照しています。

![グリッド領域で作成された暗黙の線名を示す画像](/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines/5_multiple_lines_from_areas.png)

これらの暗黙に名づけられた線を使って `overlay` を配置することは、名づけた線を使ってアイテムを配置することと同じです。
```

\* {
  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(9, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-template-areas:
    "hd hd hd hd hd hd hd hd hd"
    "sd sd sd main main main main main main"
    "ft ft ft ft ft ft ft ft ft";
}

.header {
  grid-area: hd;
}

.footer {
  grid-area: ft;
}

.content {
  grid-area: main;
}

.sidebar {
  grid-area: sd;
}

.wrapper > div.overlay {
  z-index: 10;
  grid-column: main-start / main-end;
  grid-row: hd-start / ft-end;
  border: 4px solid rgb(92, 148, 13);
  background-color: rgba(92, 148, 13, 0.4);
  color: rgb(92, 148, 13);
  font-size: 150%;
}
```

```html
<div class="wrapper">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
  <div class="overlay">Overlay</div>
</div>
```

名前のついた領域からは線を、名前のついた線からは領域を作ることができるので、グリッドレイアウトの作成を始める際には、少し時間をかけて名前の付け方を計画するといいでしょう。自分や自分のチームにとって意味のある名前を選ぶことで、作成したレイアウトを誰もが簡単に使えるようになります。

repeat() による複数の同一名の線の表示
-----------------------

グリッド内のすべての線に固有の名前を付けたい場合は、トラックを定義する際に角括弧内に名前を追加する必要があるため、反復構文を使わずにトラック定義を手書きする必要があります。反復構文を使用すると、同じ名前の線が複数できてしまいますが、これもとても便利です。

### repeat() を使用した 12 列のグリッド

次の例では、同じ幅の 12 列のグリッドを作成しています。 1fr の列トラックを定義する前に、線の名前を `[col-start]` と定義しています。つまり、幅が 1fr の列の前に、12 本の列の線名がすべて `col-start` となっているグリッドができあがるということです。
```

\* {
  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(12, [col-start] 1fr);
}
```

グリッドを作成したら、そこにアイテムを配置します。 `col-start` という名前の複数の線があるので、 `col-start` という線の後にアイテムを配置すると、グリッドは `col-start` という名前の最初の線を使用します。この例では左端の線です。別の行を指定するには、名前とその線の番号を使用します。col-start という最初の行から 5 番目の行までアイテムを配置するには、次のようにします。

```css
.item1 {
  grid-column: col-start / col-start 5;
}
```

ここでは、`span` キーワードを使うこともできます。次のアイテムは `col-start` という名前の 7 行目から、 3 行に渡って配置されます。

```css
.item2 {
  grid-column: col-start 7 / span 3;
}
```

```html
<div class="wrapper">
  <div class="item1">
    col-start の線 1 から col-start の線 5 に配置されています
  </div>
  <div class="item2">
    col-start の線 7 から線 3 本にまたがって配置されています
  </div>
</div>
```

このレイアウトを Firefox グリッドハイライターで見てみると、列の線がどのように表示されているか、そしてその線に対してアイテムがどのように配置されているかがわかります。

![アイテムが配置された 12 列のグリッド。グリッドハイライターで線の位置を表示している。](/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines/5_named_lines1.png)

### トラックリストで名前付きの線を定義

repeat 構文には、トラックリストを指定することもでき、繰り返されるのはトラックサイズが 1 つである必要はありません。以下のコードでは、 8 トラックのグリッドを作成し、幅の狭い `1fr` の列を `col1-start` とし、幅の広い `3fr` の列を `col2-start` としています。

```css
.wrapper {
  grid-template-columns: repeat(4, [col1-start] 1fr [col2-start] 3fr);
}
```

反復構文で 2 つの線が隣り合っていると統合され、反復のないトラック定義で 1 つの線に複数の名前を付けたのと同じ結果になります。次の定義では、 4 つの `1fr` トラックを作成し、それぞれに先頭と末尾の線を設定しています。

```css
.wrapper {
  grid-template-columns: repeat(4, [col-start] 1fr [col-end]);
}
```

この定義を反復記法を使わずに書き出すと、次のようになります。

```css
.wrapper {
  grid-template-columns: [col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr [col-end];
}
```

トラックリストを使用している場合は、`span` キーワードを使用して、複数の行にまたがるだけでなく、特定の名前の複数の行にまたがることもできます。
```

\* {
  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(6, [col1-start] 1fr [col2-start] 3fr);
}

.item1 {
  grid-column: col1-start / col2-start 2;
}

.item2 {
  grid-row: 2;
  grid-column: col1-start 2 / span 2 col1-start;
}
```

```html
<div class="wrapper">
  <div class="item1">
    col1-start の線 1 から col2-start の線 2 に配置されています
  </div>
  <div class="item2">
    col1-start の線 2 から col1-start と名付けられた線 2 本にまたがって配置されています
  </div>
</div>
```

### 12 列のグリッドフレームワーク

これまでの 3 つのガイドで、グリッドを使ってアイテムを配置するには、さまざまな方法があることがわかりました。最初は少し複雑に感じるかもしれませんが、すべての方法を使う必要はありません。実際には、単純なレイアウトの場合は、名前の付いたテンプレート領域を使用するとうまくいきます。これにより、レイアウトがどのように見えるかを視覚的に表現することができ、グリッド上でのアイテムの移動も簡単です。

例えば、厳密な複数列のレイアウトを行う場合は、このガイドの最後の部分で紹介した名前付きの線の実行例がとても有効です。また、 Foundation や Bootstrap などのフレームワークに搭載されているグリッドシステムは、12 列のグリッドをベースにしています。フレームワークは、列の合計が 100% になるようにすべての計算を行うコードをインポートします。グリッドレイアウトでは、グリッドの「フレームワーク」に必要なコードは次のものだけです。

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

そして、そのフレームワークを使って、ページをレイアウトすることができます。例えば、ヘッダーとフッターを持つ 3 列のレイアウトを作るには、次のようなマークアップが必要です。
```

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

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

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

```html
<div class="wrapper">
  <header class="main-header">ヘッダー</header>
  <aside class="side1">サイドバー 1</aside>
  <article class="content">メイン記事</article>
  <aside class="side2">サイドバー 2</aside>
  <footer class="main-footer">フッター</footer>
</div>
```

これをグリッドレイアウトフレームワークに配置すると、次のようになります。

```css
.main-header,
.main-footer {
  grid-column: col-start / span 12;
}

.side1 {
  grid-column: col-start / span 3;
  grid-row: 2;
}

.content {
  grid-column: col-start 4 / span 6;
  grid-row: 2;
}

.side2 {
  grid-column: col-start 10 / span 3;
  grid-row: 2;
}
```

ここでも、グリッドハイライターはアイテムを配置したグリッドがどのように機能するかを示すのに役立ちます。

![グリッドが強調されたレイアウト](/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines/5_named_lines2.png)

必要なのはこれだけです。グリッドが自動的に 10 ピクセルの溝トラックを削除し、 `1fr` の列トラックに空間を割り当ててくれるので、計算する必要はありません。自分でレイアウトを作り始めると、構文がより身近なものになり、自分や作りたいプロジェクトの種類に合わせて最適な方法を選ぶことができるようになります。これらの様々な方法で共通のパターンを作ってみると、自分にとって最も生産的な作業方法がすぐに見つかるでしょう。次のガイドでは、配置プロパティを使わなくても、グリッドがアイテムを配置する方法を紹介します。


image-set() - CSS: カスケーディングスタイルシート

image-set()
===========

**`image-set()`** は CSS の関数表記で、主に高解像度の画面において、指定されたセットから最も適切な CSS 画像をブラウザーに選択させる方法です。

解像度や帯域幅は、端末や ネットワークのアクセスによって異なります。`image-set()` 関数は、ユーザーの端末に最も適した画像解像度を提供します。画像オプションの集合を提供し、それぞれに関連する解像度宣言を付けて、そこからブラウザーが端末や設定に最も適したものを選び出します。解像度はファイルサイズのプロキシーとして使用することができます。高解像度の画面を持つ遅いモバイル接続のユーザーエージェントは、高解像度の画像を読み込むのを待つよりも、低解像度の画像を受信することを好むかもしれません。

`image-set()` はそれぞれのユーザーが必要なことを判断するのではなく、オプションを提供することができます。

構文
--

```css
/\* 解像度に基づいて画像を選択 \*/
image-set(
  "image1.jpg" 1x,
  "image2.jpg" 2x
);

image-set(
  url("image1.jpg") 1x,
  url("image2.jpg") 2x
);

/\* 解像度に基づいてグラデーションを選択 \*/
image-set(
  linear-gradient(blue, white) 1x,
  linear-gradient(blue, green) 2x
);

/\* 対応しているファイル形式に基づいて画像を選択 \*/
image-set(
  url("image1.avif") type("image/avif"),
  url("image2.jpg") type("image/jpeg")
);
```

### 値

`<image>`

`<image>` は画像セット以外のあらゆる画像を指定できます。 `image-set()` 関数は他の `image-set()` 関数の中に入れ子にすることはできません。

`<string>`

画像への URL です。

`<resolution>` 省略可

`<resolution>` の単位には、`x` や `dppx` (dots per pixel 単位)、dpi (dots per inch)、dpcm (dots per centimeter) があります。 `image-set()` 内の画像はすべて、解像度が固有でなければなりません。

`type(<string>)`省略可

有効な MIME タイプの文字列、例えば "image/jpeg" です。

### 形式文法
```

<image-set()> =
  image-set( <image-set-option># )

<image-set-option> =
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?

<image> =
  <url>       |
  <gradient>

<url> =
  <url()>  |
  <src()>

<url()> =
  url( <string> <url-modifier>\* )  |
  <url-token>

<src()> =
  src( <string> <url-modifier>\* )

```

例
-

### image-set() を使用して代替の background-image オプションの提供

この例は `image-set()` を使用して 2 つの代替 `background-image` オプションを提供する方法を示しています。解像度の必要性に応じて、通常版と高解像度版から選択します。

**メモ:** 上記の例では、 `-webkit` の接頭辞が付いた版を Chrome および Safari に対応させるために併用しています。 Firefox 90 では（標準のプロパティを追加していない開発者の互換性を確保するために） `-webkit-image-set()` を `image-set()` の別名として使用する対応が追加されました。

### image-set() を使用して別な画像形式を提供

次の例では `type()` 関数を使用して画像を AVIF および JPEG 形式で提供しています。ブラウザーが avif に対応している場合は、このバージョンが選択されます。それ以外の場合は jpeg バージョンを使用します。

#### 代替画像の提供

`image-set()` には内蔵のフォールバックはありません。したがって、この関数に対応していないブラウザーのための背景画像を設定するには、`image-set()` を使用する行の前に別の宣言が必要です。

```css
.box {
  background-image: url("large-balloons.jpg");
  background-image: image-set(
    "large-balloons.avif" type("image/avif"),
    "large-balloons.jpg" type("image/jpeg")
  );
}
```

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

ブラウザーは支援技術に対して、背景画像についての特別な情報を何も提供しません。これは主に読み上げソフトにとって重要であり、読み上げソフトは背景画像が存在することをアナウンスせず、したがってユーザーには何も伝えられません。もし画像がページ全体の目的を理解するのに重要な情報を含んでいる場合は、文書中に意味的に記述するようにしてください。

* MDN WCAG を理解する, ガイドライン 1.1 の解説
* Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0
仕様書
---

| Specification |
| --- |
| CSS Images Module Level 4 # image-set-notation |

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

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

関連情報
----

* `<image>`
* `image()`
* `element()`
* `url()`
* `<gradient>`
* `cross-fade()`


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

paint()
=======

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

**`paint()`** は CSS の関数で、 PaintWorklet で生成された `<image>` の値を定義します。

構文
--

```css
paint(workletName, parameters)
```

凡例

*workletName*

登録された Worklet の名前です。

*parameters*

PaintWorklet へ渡される省略可能な追加の引数です。

例
-

### 基本的な使用例

CSS の paint() 関数で追加の引数を渡すことができます。この例では、 2 つの引数を渡しています。リストアイテムのグループの背景画像が塗りつぶしか輪郭線だけかと、輪郭線の太さです。
```

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
  <li>item 8</li>
  <li>item 9</li>
  <li>item 10</li>
  <li>item 11</li>
  <li>item 12</li>
  <li>item 13</li>
  <li>item 14</li>
  <li>item 15</li>
  <li>item 16</li>
  <li>item 17</li>
  <li>item 18</li>
  <li>item 19</li>
  <li>item 20</li>
</ul>
```

```
CSS.paintWorklet.addModule(
  "https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js",
);
```

```css
li {
  --boxColor: hsla(55, 90%, 60%, 1);
  background-image: paint(hollowHighlights, stroke, 2px);
}

li:nth-of-type(3n) {
  --boxColor: hsla(155, 90%, 60%, 1);
  background-image: paint(hollowHighlights, filled, 3px);
}

li:nth-of-type(3n + 1) {
  --boxColor: hsla(255, 90%, 60%, 1);
  background-image: paint(hollowHighlights, stroke, 1px);
}
```

boxColor を定義しているセレクターブロックにカスタムプロパティを設定しました。カスタムプロパティは PaintWorklet にアクセスすることができます。

仕様書
---

| Specification |
| --- |
| CSS Painting API Level 1 # paint-notation |

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

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

関連情報
----

* `PaintWorklet` (en-US)
* `CSS Painting API`
* CSS Painting API の使用
* `<image>`
* `canvas` (en-US)


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

image()
=======

**`image()`** は CSS の関数で、 `<image>` を `url()` 関数に似た様式で定義しますが、画像の書字方向を指定したり、メディアフラグメントで定義された画像の一部だけを表示したり、指定された画像がどれも描画できなかった場合の予備として単色を指定するなどの機能が追加されています。

**メモ:** CSS の `image()` 関数を `HTMLImageElement` のコンストラクターである `Image()` と混同しないでください。

構文
--
```

<image()> =
  image( <image-tags>? [ <image-src>? , <color>? ]! )

<image-tags> =
  ltr  |
  rtl

<image-src> =
  <url>     |
  <string>

<url> =
  <url()>  |
  <src()>

<url()> =
  url( <string> <url-modifier>\* )  |
  <url-token>

<src()> =
  src( <string> <url-modifier>\* )

```

ここで

`image-tags`省略可

画像の書字方向、左書きならば `ltr`、右書きならば `rtl` です。

`image-src` 省略可

0 個以上の `url()` または `<string>` で、画像のソースをオプションの画像フラグメント識別子と共に指定します。

`color` 省略可

色であり、`image-src` が見つからなかったり、対応していなかったり、宣言されていなかったりした場合の代替として使用される単色の背景色を指定します。

### 書字方向の認識

`image()` 表記の最初のオプション引数は、画像の書字方向です。この引数が含まれている場合、画像が反対の書字方向を持つ要素で使用されると、横書きモードでは画像が水平に反転します。書字方向を省略した場合は、言語の方向が変わっても画像は反転しません。

### 画像フラグメント

`url()` と `image()` の大きな違いは、メディアフラグメント識別子（開始点の x 軸と y 軸、幅と高さ）を画像ソースに追加することで、ソース画像の一部分のみを表示することができることです。引数で定義された画像の範囲は、独立した画像になります。構文は次のようになります。

```css
background-image: image("myimage.webp#xywh=0,20,40,60");
```

要素の背景画像は、画像 *myImage.webp* のうち、 0px, 20px の座標 (左上隅) から始まり、幅 40px、高さ 60px の部分になります。

`#xywh=#,#,#,#` というメディアフラグメントの構文は、カンマで区切られた 4 つの数値を取ります。最初の 2 つの値は、作成されるボックスの始点の X および Y 座標を表します。 3 つ目の値はボックスの幅、最後の値は高さです。既定では、これらはピクセル値です。メディア仕様書の spacial dimension definition によると、パーセント値にも対応しています。

```css
xywh=160,120,320,240        /\* 320x240 の画像を x=160 および y=120 の位置から使用 \*/
xywh=pixel:160,120,320,240 /\* 320x240 の画像を x=160 および y=120 の位置から使用 \*/
xywh=percent:25,25,50,50    /\* 50%x50% の画像を x=25% および y=25% の位置から使用 \*/
```

画像フラグメントは、 `url()` 記法でも使用できます。 `#xywh=#,#,#,#` というメディアフラグメントの構文は「後方互換」であり、メディアフラグメントが理解できない場合は無視され、 `url()` で使用してもソースの呼び出しが壊れることはありません。ブラウザーがメディアフラグメントの表記を理解していない場合、フラグメントを無視して画像全体を表示します。

`image()` を理解できるブラウザーはフラグメント表記も理解できます。したがって、フラグメントが `image()` の中で理解できない場合は、その画像は無効とみなされます。

### 色による代替

`image()` で画像ソースと一緒に色が指定されていると、画像が無効で表示されない場合の代替として機能します。このような場合、`image()` 関数は、画像が含まれていないかのように描画を行い、単一色の画像を生成します。例として、白いテキストの背景に暗い色の画像を使用する場合を考えてみましょう。画像が描画されない場合、前景のテキストを読みやすくするために暗い背景色が必要になることがあります。

画像ソースを省略して色を含めることは有効で、色見本を作成します。背景色を宣言すると、すべての背景画像の下や後ろに配置されるのとは異なり、これは他の画像の上に (通常は半透明の) 色を配置するために使用できます。

色見本の寸法は、 `background-size` プロパティで設定できます。これは、要素全体を覆うように色を設定する `background-color` とは異なります。 `image(color)` と `background-color` の両方を配置すると、 `background-clip` と `background-origin` プロパティの影響を受けます。

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

ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主にスクリーンリーダーにとって重要なことで、スクリーンリーダーはその存在を告知しないため、ユーザーに何も伝えません。画像に、ページ全体の目的を理解するために重要な情報が含まれている場合は、文書内で意味的に記述したほうがよいでしょう。

* MDN WCAG を理解する, ガイドライン 1.1 の説明
* Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0

この機能は、画像の読み込みに失敗したときに予備の色を提供することで、アクセシビリティの向上に役立ちます。この機能は、すべての背景画像に背景色を含めることで実現できますが、 CSS の `image()` 関数では、画像の読み込みに失敗したときに背景色のみを含めることができます。つまり、透過 PNG/GIF/WebP の読み込みに失敗したときに、予備の色を追加することができます。

例
-

### 書字方向を意識した画像

```html
  <li dir="ltr">行頭記号が左側で右向きの矢印になります。</li>
  <li dir="rtl">行頭記号は同じ矢印で、左を指します。</li>
</ul>
```

```css
ul {
  list-style-image: image(ltr "rightarrow.png");
}
```

左書きのリスト項目 (要素自体に `dir="ltr"` が設定されているもの、祖先から書字方向を継承しているもの、ページの既定値) では、画像がそのまま使用されます。 `<li>` に `dir="rtl"` が設定されているリスト項目や、祖先から右から左への指向性を受け継いでいるリスト項目 (アラビア語やヘブライ語に設定されている文書など) では、 `transform: scaleX(-1)` が設定されているかのように、箇条書きのテキストが水平方向に反転して右に表示されます。テキストも左書きで表示されます。

### 背景画像のある範囲の表示

```html
<div class="box">
  この上にカーソルを移動してください。どのように見えますか？
</div>
```

```css
.box:hover {
  cursor: image("sprite.png#xywh=32,64,16,16");
}
```

ユーザーがボックスの上にカーソルを移動させると、カーソルは x=32 と y=64 の位置から始まる 16x16 ピクセルの範囲のスプライト画像に変わります。

### 背景画像の上に色を配置
```

.quarterlogo {
  height: 200px;
  width: 200px;
  border: 1px solid;
}
```

```css
.quarterlogo {
  background-image: image(rgba(0, 0, 0, 0.25)), url("firefox.png");
  background-size: 25%;
  background-repeat: no-repeat;
}
```

```html
<div class="quarterlogo">
  対応している場合、この div の 4 分の 1 は、ロゴが暗くなります
</div>
```

上記の例は、 Firefox のロゴの背景画像に半透明の黒いマスクをかぶせています。 `background-color` プロパティを使用していた場合は、色はロゴ画像の上ではなく背後に表示されていたでしょう。また、コンテナー全体の背景色も同じになっていたでしょう。 `image()` と `background-size` プロパティを使用し、 `background-repeat` プロパティで画像が繰り返されないようにしたため、色見本はコンテナーの 4 分の 1 しか覆っていません。

仕様書
---

| Specification |
| --- |
| CSS Images Module Level 4 # image-notation |

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

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

関連情報
----

* `<image>`
* `element()`
* `url()`
* `clip-path`
* `-moz-image-rect()`
* `<gradient>`
* `image-set()`
* `cross-fade()`


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

polygon()
=========

**`polygon()`** は CSS の関数で、`<basic-shape>` データ型の一つです。

試してみましょう
--------

構文
--

```css
clip-path: polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%);
```

### 値

`<fill-rule>`

オプションで `nonzero` (省略時の既定値) または `evenodd` のどちらかであり、塗りつぶしルール (en-US)を指定します。

`[<length-percentage><length-percentage>]#`

3 組以上の値です (多角形は少なくとも三角形を描く必要があります)。これらの値は、リファレンスボックスを基準にして描かれる座標です。

例
-

### 基本的な polygon() の例

この例では、`polygon()` を使って、テキストを回り込ませるシェイプを作成しています。値を変更するとシェイプの変化を確認することができます。

仕様書
---

| Specification |
| --- |
| CSS Shapes Module Level 1 # funcdef-basic-shape-polygon |

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

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

関連情報
----

* このデータ型を使用するプロパティ: `clip-path`, `shape-outside`
* 基本シェイプのガイド


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

inset()
=======

**`inset()`** は CSS の関数で、`<basic-shape>` データ型の一つです。内部の矩形を定義します。

試してみましょう
--------

構文
--

```css
shape-outside: inset(20px 50px 10px 0 round 50px);
```

### 値

`<length-percentage>{1,4}`

4 つの引数がすべて与えられた場合、参照ボックスの内側に向けた上、右、下、左のオフセットを表し、内部の矩形の辺の位置を定義します。これらの引数は margin 一括指定の構文に従っており、4 つの内側の位置すべてに 1 つ、2 つ、または 4 つの値を設定することができます。

`<border-radius>`

オプションの `<border-radius>` 引数は、 border-radius 一括指定の構文を使用して内部の矩形の角の丸みを定義します。

例
-

### 基本的な内側の矩形の例

下記の例では、浮動要素の上にコンテンツを引き寄せるために、`inset()` のシェイプを使用しています。オフセット値を変更するとシェイプの変化を確認することができます。

仕様書
---

| Specification |
| --- |
| CSS Shapes Module Level 1 # funcdef-basic-shape-inset |

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

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

関連情報
----

* このデータ型を使用するプロパティ: `clip-path`, `shape-outside`
* 基本シェイプのガイド


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

circle()
========

**`circle()`** は CSS の関数で、`<basic-shape>` データ型の一つです。

試してみましょう
--------

構文
--

```css
shape-outside: circle(50%);
clip-path: circle(6rem at 12rem 8rem);
```

### 値

`<shape-radius>`

`<length>`、`<percentage>`、または `closest-side` および `farthest-side` の値の何れかです。

`closest-side`

シェイプの中心から参照ボックスの最も近い辺までの長さを使用します。円の場合は、あらゆる軸で最も近い辺となります。

`farthest-side`

シェイプの中心から参照ボックスの最も遠い辺までの長さを使用します。円の場合は、あらゆる軸で最も近い辺となります。

`<position>`

円の中心を移動します。`<length>`、`<percentage>`、または `left` のような値の何れかです。

例
-

### 基本的な円

下の例では、`shape-outside` プロパティの値が `circle(50%)` となっており、浮動要素に円を定義して、テキストが回り込むようになっています。

仕様書
---

| Specification |
| --- |
| CSS Shapes Module Level 1 # funcdef-basic-shape-circle |

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

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

関連情報
----

* このデータ型を使用するプロパティ: `clip-path`, `shape-outside`
* 基本シェイプのガイド


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

ellipse()
=========

**`ellipse()`** は CSS の関数で、`<basic-shape>` データ型の一つです。

試してみましょう
--------

構文
--

```css
shape-outside: ellipse(40% 50% at left);
shape-outside: ellipse(closest-side farthest-side at 30%);
```

楕円は基本的に円を潰したものなので、`ellipse()` は、2 つの半径 x と y を指定しなければならないことを除けば、 `circle()` とよく似た方法で動作します。

### 値

`<shape-radius>`

2 つの半径で、x および y をその順で指定します。`<length>`、`<percentage>`、または `closest-side` および `farthest-side` の値の何れかです。

`closest-side`

シェイプの中心から参照ボックスの最も近い辺までの長さを使用します。楕円の場合は、半径の軸で最も近い辺となります。

`farthest-side`

シェイプの中心から参照ボックスの最も遠い辺までの長さを使用します。楕円の場合は、半径の軸で最も遠い辺となります。

`<position>`

円の中心を移動します。`<length>`、`<percentage>`、または `left` のような値の何れかです。

例
-

### 基本的な ellipse() の例

この例では、x 半径が 40%、y 半径が 50%、位置が左の楕円を示しています。これは、楕円の中心がボックスの左端にあることを意味しており、テキストを回り込ませるための半楕円の形になります。これらの値を変更すると、楕円の変化を確認することができます。

### closest-side / farthest-side の値の使用

キーワード値の `closest-side` と `farthest-side` は、浮動要素の参照ボックスの大きさに基づいて、素早く楕円を作成するのに便利です。

仕様書
---

| Specification |
| --- |
| CSS Shapes Module Level 1 # funcdef-basic-shape-ellipse |

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

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

関連情報
----

* このデータ型を使用するプロパティ: `clip-path`, `shape-outside`
* 基本シェイプのガイド


段抜きと段の均衡 - CSS: カスケーディングスタイルシート

段抜きと段の均衡
========

このガイドでは、段組みコンテナー内で段抜きを作成する方法、段がどのように充足されるかを制御する方法を見てみます。

**メモ:** このガイドで紹介している段抜きや均衡を取る機能は、このガイドの前二章で紹介した機能ほどブラウザーの対応が進んでいないことに注意してください。

段抜き
---

あるアイテムを段抜きする場合は、 `column-span` プロパティの値を `all` に設定してください。これで、要素はすべての段にまたがります。

段組みコンテナーの子孫要素は、直接の子でも間接の子でも段抜き (spanner) になることができます。例えば、コンテナーの中に直接含まれる見出しは段抜きになることができますし、段組みコンテナーの中のセクションに含まれる見出しも同様です。

以下の例では、 h2 要素が `column-span: all` に設定され、すべての段に段抜きされます。

次の例では、見出しが `<article>` 要素の中にありますが、期待通りにコンテンツが段抜きになります。

段抜きが導入されると、段組みの流れが中断され、段抜きの後で実際に新しい一連の段ボックスを作成して段組みが再開します。内容物が段抜き要素をまたぐことはありません。

### column-span の制約

現在の Level 1 仕様書では、 `column-span` に許可されている値は二つしかありません。 `none` の値は初期値で、アイテムを段抜きせず、段の中に収めます。 `all` の値はアイテムがすべての段を段抜きすることを意味します。例えばアイテムを 3 段中 2 段に段抜きすることはできません。

### 注意すべきこと

段抜き要素がマージン、パディング、境界、背景色を持つ他の要素の中にあった場合、次の例に示すように、ボックスの上端が段抜きの上に現れ、残りの部分が段抜きの下に表示されることがあります。このため、要素を段抜きにするときにはいくらか注意が必要で、このシナリオに注意する必要があります。

加えて、コンテンツの後方に段抜き要素が現れる場合は、段組みをするのに十分なコンテンツが段抜きの後にないと、予期しない挙動または望まない挙動をすることがあります。段抜きは注意深く使用し、様々な分割点になったときに望み通りの結果が得られるかを検査してください。

段の充足と均衡
-------

均衡の取れた段組みは、すべての段のコンテンツの量がほぼ同じになっているものです。充足と均衡は、コンテンツの量が提供された空間の量に一致しない場合、例えばコンテナーの高さが宣言されている場合に発生します。

`column-fill` の段組みでの初期値は `balance` です。 balance の値は、可能な限りすべての段で均衡を取ることを意味します。ページ付きメディアのような断片化されたコンテキストにおいては、最後の断片のみで均衡が取られます。つまり、最後のページにおいて一連の段ボックスの均衡が取られます。

均衡を取るための第二の値は `balance-all` で、断片化されたコンテキストにおいて、最後の断片における段だけでなく、すべての段の均衡を取ろうとします。

この例には、画像とテキストを含む均衡の取れた段があります。画像は分割できないので最初の段に入り、他の段はテキストの量が同じになるように充足されます。

`column-fill` の他の値として `auto` があります。この場合、すべての段を同じ量で充足して高さの均衡を図るのではなく、段を順番に充足させます。以下の例では `column-fill` を `auto` に変更し、段を段組みコンテナーの高さまで順番に充足させ、最後のいくつかの段は空のままにします。

なお、段の均衡はすべてのブラウザーが対応しているわけではありません。対応させるブラウザーで期待通りの効果が得られるかをチェックしてください。

次のガイドでは、段組みがはみ出しをどう扱うかを、段の中とコンテナーに合う数よりも多くの段ができる場合の両方について学習します。


段のスタイル付け - CSS: カスケーディングスタイルシート

段のスタイル付け
========

段組みコンテナー内に作られた段ボックスは無名ボックスなので、スタイル付けできることはわずかです。しかし、できることは少数ながらあります。このガイドは、段同士の間隔および段間罫をスタイル付けする方法を説明します。

段ボックスにスタイル付けできるか
----------------

残念ながら、現在はできません。段を構成する無名ボックスはスタイル付けの対象にする方法がないため、ボックスの背景色を変更したり、一段だけを他よりも広くしたりすることはできません。おそらく将来の版の仕様書でできるようになるでしょう。しかし現時点で、段同士の間隔と段間罫を変更することはできます。

`column-gap` プロパティ
------------------

段同士の間隔 (段間) は、 `column-gap` プロパティで制御されます。このプロパティはもともと段組みレイアウト仕様書で定義されていました。しかし、現在はボックス配置仕様書で定義され、 CSS グリッドレイアウトなどの他の仕様書におけるボックス同士の間隔と統合されました。

段組みにおける `column-gap` の初期値は `1em` です。つまり、段同士は互いに接しません。他のレイアウト方法では、 `column-gap` の初期値は 0 です。キーワード値 "normal" を使用した場合、間隔は 1em に設定されます。

段間は `column-gap` の値として任意の単位を使用して変更することができます。以下の例では、 `column-gap` は 40px に設定されます。

`column-gap` に許されている値は `<length-percentage>` です。つまり、パーセント値を使用することができます。 `column-gap` のパーセント値は、段組みコンテナーの幅に対するパーセント値として計算されます。

段間罫
---

仕様書では `column-rule-width`, `column-rule-style` `column-rule-color` と、一括指定する `column-rule` を定義しています。これらのプロパティは、 `border` プロパティとまったく同じように動作します。 `border-style` で有効な値が `column-rule-style` で使用できます。

これらのプロパティは段組みコンテナーである要素に適用されるため、すべての段に同じ段間罫が引かれます。段間罫は段同士の間にのみ引かれ、外の辺には引かれません。段間罫は内容のある段の間にのみ引かれます。

次の例は、幅 5px の点線の段間罫を rebeccapurple の色で、個別指定を使用して作成しています。

なお、段間罫自体は空間を占有しません。段間罫が太くなっても、段間が広がることはありません。その代わりに、段間罫が段間と重なります。

次の例では、とても太い 40px の段間罫を 10px の段間に引いています。段間罫は段の内容の下に表示されます。段間罫の両側に間隔を作るには、 gap を 40px より大きくする必要があるでしょう。

まとめ
---

ここでは、現在段ボックスに対してスタイル付けすることができるすべての方法を説明しました。次のガイドでは、コンテナー内ですべての段をまたがる要素の作成を見てみましょう。


段組みにおける内容物の分割の扱い - CSS: カスケーディングスタイルシート

段組みにおける内容物の分割の扱い
================

段組みレイアウトでは、段ボックス間で、ページ付きメディアのページ間と同様に内容が分割されます。どちらのコンテキストでも、 CSS 断片化仕様書のプロパティを用いて、どのように内容を分割するかを制御します。このガイドでは、段組みで断片化がどのように動作するかを見てみます。

断片化の基本
------

CSS Fragmentation specification は、断片化コンテナー (*fragmentainer*) 間でどのように内容を分割するかを詳述しています。段組みでは、断片化コンテナーは段ボックスです。

段ボックスは他のマークアップを含むことができ、できれば分割したくない場所がたくさんあります。例えば、ふつうは画像のキャプションは参照する画像と別な段に分割されないほうが望ましく、見出しが段の最後にあるのも変です。断片化プロパティはこれをいくらか制御するための方法を提供します。

分割を制御する可能性がある場所には、様々なものがあります。

* ボックス内での分割。例えば、 figure 要素の内部など。
* ボックスの前後の分割。上記の見出しの例など。
* 行間の分割。
ボックス内での分割
---------

ボックス内での分割を制御するには、 `break-inside` プロパティを使用します。このプロパティは以下の値を取ります。

* `auto`
* `avoid`
* `avoid-page`
* `avoid-column`
* `avoid-region`

以下の例では、 break-inside を figure 要素に適用して、キャプションと画像が分割されることを防ぎます。

ボックスの前後の分割
----------

`break-before` および `break-after` プロパティを使用して、要素の前後の分割を制御します。段組みのコンテキストでは、以下の値を取ります。

* auto
* avoid
* avoid-column
* column

次の例では、 `h2` 要素の前で強制的に改段しています。

行間での分割
------

`orphans` および `widows` プロパティも便利です。 orphans プロパティは、断片の末尾に残る行数を制御します。 widows プロパティは、断片の先頭に残る行数を制御します。

`orphans` および `widows` プロパティは整数値を取り、断片のそれぞれ末尾および先頭の行数に残す行数を表します。なお、これらのプロパティは段落などのブロックコンテナー内でのみ動作します。ブロックの行数が値で指定された数より少なかった場合、すべての行が一緒に保持されます。

以下の例では、 `orphans` プロパティを用いて段の末尾に残す行数を制御しています。値を変更すると、内容を分割する効果を確認できます。

期待通りに動作しない場合
------------

内容の量が少なく、様々な方法で分割を制御しようとしている場合や、複数の要素があり、内容をどこかで分割する必要がある場合、常に意図する結果が得られるとは限りません。断片化の使用はある程度まで、常にブラウザーに対する提案であり、可能であればその方法で分割が制御されます。

上記に加えて、これらのプロパティーに対するブラウザーの対応は若干まばらです。ここ MDN の個別のプロパティページにおける互換性データ表は、どのブラウザーがどの機能に対応しているかを確認するのに便利かもしれません。多くの場合、分割が制御できない代替策により、美しくなく分割されることが次善の策であり、レイアウトが崩れるよりましです。


段組みの基本概念 - CSS: カスケーディングスタイルシート

段組みの基本概念
========

段組みレイアウト (Multiple-column Layout) は、新聞のように内容物を複数の段ボックスにレイアウトする仕様です。このガイドでは、この仕様がどのように働くかを、いくつかのよくある使用例と共に説明します。

主要概念と用語
-------

段組みは他のレイアウト方法とは異なり、 CSS でコンテンツを分割し、すべての子孫要素を段に含めます。これは、印刷スタイルシートを作成するのに使われる CSS ページ付きメディアがコンテンツをページに分割するのと同様のことを行います。

仕様書で定義されているプロパティは次の通りです。

* `column-width`
* `column-count`
* `columns`
* `column-rule-color`
* `column-rule-style`
* `column-rule-width`
* `column-rule`
* `column-span`
* `column-fill`
* `column-gap`

`column-count` または `column-width` を要素に追加することで、要素は*段組みコンテナー*になります。段は無名のボックスになり、仕様書上では段ボックスと呼ばれます。

段の定義
----

段組みコンテナーを作成するには、少なくとも一つの `column-*` プロパティ、つまり `column-count` か `column-width` を使用する必要があります。

### `column-count` プロパティ

`column-count` プロパティは、内容物を表示したい段数を指定します。ブラウザーは要求された数の段を生成するために、それぞれの段ボックスに適正な大きさの空間を割り当てます。

以下の例では、 `column-count` プロパティを使用して `.container` 要素に 3 つの段を生成します。その内容は、 `.container` の子も含めて 3 つの段に分割されます。

上記の例では、内容物は既定のスタイルの段落 `p` タグで囲まれています。従って、それぞれの段落の上にはマージンがあります。マージンが働いてテキストの最初の行を押し下げているのが分かるでしょう。これは、段組みコンテナーは新しいブロック整形文脈 (BFC) を作成するため、子要素のマージンはコンテナーのマージンと相殺されないからです。

### `column-width` プロパティ

`column-width` プロパティは、それぞれの段ボックスの最適な幅を設定するために使用されます。 column-width を宣言すると、ブラウザーは段組みコンテナー内にその幅の段と、段間の均等の空間が収まる数を計算します。従って、段の幅は最小幅として扱われ、段ボックスはふつう、追加の空間があるためにより広くなります。

段ボックスは、利用できる幅が `column-width` の値よりも狭い一段組みの場合に限り、宣言された段の幅よりも狭くなることがあります。

以下の例では、 `column-width` の値を 200px にして使用しています。コンテナーに合うように 200 ピクセルの段が確保され、残りの空間は均等に配分されます。

### `column-count` と `column-width` の併用

段組みコンテナーに両方のプロパティを指定すると、 `column-count` は最大の段数として動作します。従って、 `column-count` の段数に達するまでは、 `column-width` で宣言された通りに動作します。これを超えると、 `column-width` で指定された寸法の段を追加する余裕があっても、段は追加されず、余った空間は既存の段に均等に割り当てられます。

両方のプロパティを併用すると、 `column-count` の値で指定されたよりも少ない数の段数になることがあります。

次の例では、 `column-width` を 200px に、 `column-count` を 2 にして使用しています。 3 段以上の空間があっても 2 段になります。しかし、 200px の段を 2 つ設置する空間の余裕がなければ、 1 段になります。

### `columns` 一括指定

`columns` 一括指定で `column-count` と `column-width` を設定することができます。長さの単位を設定すると、 `column-width` に使用され、整数値を設定すると、 `column-count` に使用されます。２つの値を空白で区切って両方を設定することができます。

この CSS は例 1 と同じ結果で、 `column-count` を 3 に設定します。

```css
.container {
  columns: 3;
}
```

この CSS は例 2 と同じ結果で、 `column-width` を 200px に設定します。

```css
.container {
  columns: 200px;
}
```

この CSS は例 3 と同じ結果で、 `column-count` と `column-width` の両方に設定します。

```css
.container {
  columns: 2 200px;
}
```

次のステップ
------

このガイドでは、段組みレイアウトの基本的な利用を学びました。次のガイドでは、 段のスタイル付けがどれだけできるかを見てみます。


段組みでのはみ出しの扱い - CSS: カスケーディングスタイルシート

段組みでのはみ出しの扱い
============

このガイドでは、段ボックス内部と、コンテナーに収まらないほど多くの内容物がある場合の両方において、段組みがどのようにはみ出しを扱うかを見てみます。

段ボックス内でのはみ出し
------------

はみ出しは、アイテムの寸法が段ボックスよりも大きな場合に発生します。例えば、段内の画像が `column-width` の幅、または `column-count` で宣言された段数に基づく段の幅よりも広い場合に発生します。

この場合、内容物は段ボックスで切り取られるのではなく、次の列にはみ出します。以下の例と、ブラウザーが描画時に別な方法で処理する予定のレンダリングの画像を見てください。

![](/ja/docs/Web/CSS/CSS_multicol_layout/Handling_overflow_in_multicol_layout/image-overflow-multicol.png)

画像を段ボックスに合うよう縮小したい場合は、 `max-width: 100%` を設定する標準的なレスポンシブ画像の解決方法で実現することができます。

より多くの段が生成される場合
--------------

印刷のような断片化されたメディアコンテキスト内と、ウェブページのような連続メディアコンテキスト内とで、あふれた段がどのように扱われるかです。

断片化されたメディアでは、 1 つの断片（例えば 1 ページ）が段で埋まると、段は新しいページに移動し、それを段で埋めます。連続メディアでは、段はインライン方向にはみ出します。ウェブでは、ここでスクロールバーが出現します。

以下の例ではこのはみ出しの挙動を紹介します。段組みコンテナーには高さが設定されており、列を生成する空間よりも多くのテキストがありますので、列がコンテナーをはみ出して作成されます。

将来の版の仕様書では、連続メディアでブロック方向に段をあふれさせることができるため、読み手は次の一連の段を見るために下スクロールすることができるので、便利になるでしょう。

垂直メディアクエリーの使用
-------------

ウェブでの段組みの問題の一つに、段がビューポートより高い場合、読み手は読むのに上下にスクロールしなければならなくなるので使い勝手が悪くなるというものがあります。これを防ぐ一つの方法が、十分な高さがあると分かった時にだけ段組みプロパティを適用することです。

以下の例では、 `min-height` クエリーを使用して、段組みプロパティを適用する前に高さを検査します。

このシリーズの最後のガイドでは、段組みが断片化仕様でどのように動作するかを見て、段をまたいで内容が分割される方法を制御します。


段組みレイアウトの使用 - CSS: カスケーディングスタイルシート

段組みレイアウトの使用
===========

CSS の**段組みレイアウト** (Multi-column Layout) は、*ブロックレイアウトモード*を拡張して、文章の段組みを定義しやすくするものです。行が長すぎると、文章が読みづらくなるものです。行末から次の行の先頭まで目を移動する距離が長すぎると、どの行を読んでいたか見失ってしまうことがあります。したがって、大きな画面を最大限に活用するためには、新聞のように幅が狭い段を並べた方が適切です。

残念ながら、 CSS と HTML では位置を指定してで段を区切ったり、文章に許されるマークアップを厳重に制限したり、大げさなスクリプトを使用したりしなければ実現できません。この制限は、従来のブロックレイアウトモードを拡張する新しい CSS プロパティを追加することで解決します。

段組みの使用
------

### 段の数と幅

2 つの CSS プロパティ、 `column-count` と `column-width` で、段組みをするかどうか、段数をいくつにするかを制御します。

`column-count` プロパティで、段数を特定の数に設定します。例えば以下のようにします。

例 1
---

### HTML

```html
<div id="col">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
  </p>
  <p>
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
    aliquip ex ea commodo consequat.
  </p>
  <p>
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur.
  </p>
  <p>
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
    deserunt mollit anim id est laborum.
  </p>
</div>
```

### CSS

```css
#col {
  column-count: 2;
}
```

### 結果

内容が（段組み対応のブラウザーを使用していれば）2 段で表示されます。

`column-width` プロパティは最小限ほしい段の幅を設定します。 `column-count` の値が一緒に設定されていない場合は、ブラウザーは有効な幅に収まるできるだけ多くの段を自動的に作成します。

例 2
---

### HTML

```html
<div id="wid">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
```

### CSS

```css
#wid {
  column-width: 100px;
}
```

### 結果

より厳密な詳細については、 CSS3 仕様書で説明されています。

段組みをしたブロックでは、コンテンツは必要に応じてある段から次の段に流れます。 HTML、 CSS、 DOM 機能はすべて段組みでの編集や印刷に対応しています。

### 一括指定の columns

たいていの場合、ウェブデザイナーは `column-count` と `column-width` の 2 つのうち 1 つを使用します。これらのプロパティの値は重複しないので、一括指定の `columns` を使うのがふつうは便利です。例えば以下のようにします。

CSS 宣言の `column-width: 12em` は `columns: 12em` に置き換えることができます。

例 3
---

### HTML

```html
<div id="col\_short">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
```

### CSS

```css
#col\_short {
  columns: 12em;
}
```

### 結果

CSS 宣言 の `column-count: 4` は `columns: 4` に置き換えられます。

例 4
---

### HTML

```html
<div id="columns\_4">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
```

### CSS

```css
#columns\_4 {
  columns: 4;
}
```

### 結果

`column-width: 8em` と `column-count: 12` の 2 つの CSS 宣言は、 `columns: 12 8em` で置き換えることができます。

例 5
---

### HTML

```html
<div id="columns\_12">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
```

### CSS

```css
#columns\_12 {
  columns: 12 8em;
}
```

### 結果

### 高さの均衡

CSS の段組みでは、段の高さが揃っていなければならないとされています。つまり、ブラウザーは自動的に段の高さの最大値を設定し、各段のコンテンツの高さはおよそ同じになります。 Firefox はこれを行っています。

しかし、場合によっては段の高さの最大値を明示的に設定し、コンテンツを最初の段から配置して必要に応じていくつもの段を作成し、右に流れることができるようにすることが有用であることもあります。従って、段組みブロックに CSS の `height` または `max-height` プロパティを設定することで高さを制限すると、それぞれの段は新しい段を追加する前にその高さまで伸びていきます。このモードはレイアウトではるかに効率的です。

### 段間

段と段の間には隙間があります。推奨される既定値は `1em` です。この寸法は段組みブロックに `column-gap` プロパティを適用することで変更することができます。

例 6
---

### HTML

```html
<div id="column\_gap">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
```

### CSS

```css
#column\_gap {
  column-count: 5;
  column-gap: 2em;
}
```

### 結果

グレイスフルデグラデーション
--------------

段組みのプロパティは、段組みに対応していないブラウザーでは単に無視されます。従って、そのようなブラウザーでは一列で表示し、対応しているブラウザーでは段組みを行うというレイアウトが比較的簡単に作成できます。

まとめ
---

CSS の段組みは、ウェブ開発者が画面の資産を最大限に活用できるようにするためのレイアウト方法です。想像的な開発者は、特に自動的に高さを調整する機能を利用して、様々な利用方法を見つけるでしょう。


機能クエリーの使用 - CSS: カスケーディングスタイルシート

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

**機能クエリー**は、 CSS の @supports アットルールを使って作成され、ウェブ開発者がある機能に対応しているかどうかを検査し、その検査結果に基づいて実行する CSS を提供する方法として有益です。このガイドでは、機能クエリを使用してプログレッシブエンハンスメントを実装する方法を学びます。

構文
--

CSS の機能クエリーは CSS 条件付きルールモジュールの一部で、ここにはメディアクエリーの @media ルールも含まれてます。機能クエリーを使用すると、メディアクエリーと同様の動作をすることが分かると思います。違いは、メディアクエリーではウェブページが動作している環境について何かを検査するのに対し、機能クエリーでは CSS 機能に対するブラウザーの対応状況を検査する点です。

機能クエリは `@supports` ルールと、それに続く検査したいプロパティ名と値から構成されます。 `display` のようなプロパティ名だけでは検査できません。ルールにはプロパティ名と値が必要です。

```css
@supports (property: value) {
  適用する CSS ルール
}
```

例えば、あるブラウザーが `row-gap` プロパティに対応しているかどうかを確認したい場合、次のような機能クエリーを記述します。多くの場合は、どの値を使用しても問題ありません。ブラウザーがこのプロパティに対応しているかどうかを確認したいだけであれば、有効な値であればどのような値でもかまいません。

特定のプロパティの新しい値を検査する場合は、プロパティと値の組の値の部分がより重要になります。良い例は `display` プロパティでしょう。すべてのブラウザーは `display` に対応しており、`display: block` は CSS1 にまでさかのぼります。しかし、 `display: flex` と `display: grid` はもっと新しい値です。 CSS ではプロパティに追加の値を指定することがよくあるので、プロパティと値を検査するということは、これらの値に対応しているかどうかを検出することができることを意味します。

対応がないかどうかを検査
------------

ブラウザーが機能に対応しているかどうかを尋ねる場合のほか、 `not` キーワードを追加することで逆の検査を行うことができます。

```css
@supports not (property: value) {
  CSS rules to apply
}
```

以下の例の機能クエリー内の CSS は、ブラウザーが `row-gap` に対応していない場合に実行されます。

複数の機能を検査
--------

機能クエリーで、複数のプロパティに対応していることを検査必要がある場合があります。そのような場合は、`and` キーワードで区切って、検査する機能の一覧を記述します。

```css
@supports (property1: value) and (property2: value) {
  CSS rules to apply
}
```

例えば、実行したい CSS が、ブラウザーが CSS シェイプと CSS グリッドに対応していることを必要とする場合、この 2 つを検査するルールを作成することができます。次のルールは、ブラウザーが `shape-outside: circle()` と `display: grid` の両方に対応している場合にのみ true を返します。

`or` を使用することもできます。これは選択したもののうち 1 つが一致した場合に CSS を有効にすることができます。

```css
@supports (property1: value) or (property2: value) {
  CSS rules to apply
}
```

これは、ある機能がベンダー接頭辞付きである場合に特に有用で、標準のプロパティとベンダー接頭辞を加えたものを検査することができます。

機能クエリーの制限
---------

`@support` ルールは、ブラウザーが 1 つ以上のプロパティと値の組を解釈できるかどうか、つまり、その機能に対応していると主張するかどうかを確認するために使用します。もしブラウザーがそのプロパティと値のペアを理解できれば、肯定的な応答を返します。したがって、ブラウザーがある機能に正しく、バグなく対応しているかどうかを確認するために、機能クエリーを使用することはできないのです。

さらに、機能クエリーはは「部分的な実装」を検査することもできません。この良い例が `gap` プロパティです。CSS グリッドに対応しているすべてのブラウザーは、 CSS グリッドの `gap` に対応していますが、フレックスボックスの `gap` に対応しているのは Firefox だけです。フレックスボックスで使いたいからと `gap` プロパティを検査「すると、実装されていないにもかかわらず肯定的な回答を得ることになります。

プログレッシブエンハンスメントのための機能クエリーの使い方
-----------------------------

機能クエリーは、サイトを段階的に拡張していく際に非常に有効なツールです。すべてのブラウザーに対して適切なソリューションを提供し、より新しい機能に対応しているブラウザーにはより高度なソリューションを提供することができます。

しかし、機能クエリーに対応していないブラウザーもあれば、使いたい機能に対応していないブラウザーもあります。例えば、 IE11 で対応していない CSS グリッドを使いたいとします。 IE11 は機能クエリーにも対応していないので、未対応のブラウザーをチェックして代替策を作ることはできません。しかし、実際には、プログレッシブエンハンスメントに機能クエリーを使用する場合、これは重要ではありません。ただし、未対応ブラウザー用の CSS を記述し、それを機能クエリー内の CSS で上書きするようにするなど、一定の方法で CSS を構成する必要があります。

それでは、上記のような方法で機能クエリーを使用する、とても簡単な例を見ていきましょう。

例えば、 3 つのボックスが並んだレイアウトを作りたい場合、理想的にはCSS グリッドレイアウトを使いたいところです。しかし、古いブラウザーのためのレイアウトでは、浮動要素を使ったレイアウトにしたいとします。まずはその浮動レイアウトを以下のコードで作成しすると、 3 列にすることができます。

ブラウザーは CSS のプロパティや値を理解できない場合、それを無視します。そこで、 CSS グリッドを使ってレイアウトを強化することから始めるとよいでしょう。グリッドに対応していないブラウザーは、 `display` プロパティの `grid` の値を無視します。浮動アイテムがグリッドアイテムになると、浮動は取り除かれます。詳細は、古いブラウザーの対応を参照してください。そのため、グリッド版は浮動のものを上書きすればよいのです。

しかし、浮動されたアイテムを 3 列で表示するために使用した `width` プロパティが原因で問題が発生しました。これは、現在、浮動の場合のようにコンテナーの幅ではなく、カラムトラックの幅としてグリッドに解釈されます。

必要なのは、 `display: grid` に対応している場合に、 width を削除する方法です。これはまさに機能クエリーが解決する状況です。グリッドに対応している場合、 `width` を `auto` に戻すことができます。

上記のシナリオでは、 IE11 が機能クエリーや CSS グリッドに対応していなくても問題ありません。浮動版はどの場合でも適用され、グリッドに対応しているブラウザーではそれが上書きされm佐生。

上記のコードを記述する別の方法として、以下のようにグリッドのコードをすべて機能クエリーでラップすることができます。

この場合、コードが少し増えるかもしれませんが、プロパティ名や値名の綴りを故意に間違えることで、代替策をテストできるという利点があります。上記のライブサンプルでは、 `@supports` ルールの `display: grid` を `display: grip` などに変更すると試すことができます。

まとめ
---

機能クエリーは、古いブラウザーで使用されているサイトの表示をよりシンプルに強化することで、新しい機能の利用を開始するのに役立ちます。対応ブラウザー用の CSS をまとめることができるため、上記のグリッドの例のように、代替表示用のスタイルが漏れてしまうリスクもありません。

### 関連情報

* @supports ルール
* レイアウトの学習: 古いブラウザーの対応
* CSS グリッドレイアウトとプログレッシブエンハンスメント
* CSS での機能クエリーの使用


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

invert()
========

**`invert()`** は CSS の関数で、入力画像の色サンプルを反転します。結果は `<filter-function>` です。

試してみましょう
--------

構文
--

```css
invert(amount)
```

### 引数

`amount`

変換の度合いで、 `<number>` または `<percentage>` で指定します。 `100%` の値では完全に反転され、 `0%` の値では入力が変更されないままになります。 `0%` と `100%` の間の値は、効果の割合です。補間時の欠損値は `0` です。

例
-

### invert() の正しい値の例

```css
invert(0)     /\* 効果なし \*/
invert(.6)    /\* 60% 反転 \*/
invert(100%)  /\* 完全に反転 \*/
```

仕様書
---

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-invert |

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

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

関連情報
----

* `<filter-function>`
* `blur()`
* `brightness()`
* `contrast()`
* `drop-shadow()`
* `grayscale()`
* `hue-rotate()`
* `opacity()`
* `saturate()`
* `sepia()`


hue-rotate() - CSS: カスケーディングスタイルシート

hue-rotate()
============

**`hue-rotate()`** は CSS の関数で、要素およびその中身のコンテンツの色相環を回転させます。結果は `<filter-function>` です。

試してみましょう
--------

構文
--

```css
hue-rotate(angle)
```

### 引数

`angle`

入力サンプルの色相の相対的な変化量を、 `<angle>` で指定します。 `0deg` は入力を変更しないままにします。正の回転角は色相の値を増加させるのに対し、負の回転角は色相の値を減少させます。補間時の欠損値は `0` です。最小値または最大値はなく、 `hue-rotate(Ndeg)` は `N` を 360 で割った余りと等価です。

例
-

### hue-rotate の正しい値の例

```css
hue-rotate(-90deg)  /\* 270 度の回転と同じ \*/
hue-rotate(0deg)    /\* 効果なし \*/
hue-rotate(90deg)   /\* 90 度の回転 \*/
hue-rotate(.5turn)  /\* 180 度の回転 \*/
hue-rotate(405deg)  /\* 45 度の回転と同じ \*/
```

仕様書
---

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-hue-rotate |

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

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

関連情報
----

* `<filter-function>`
* `blur()`
* `brightness()`
* `contrast()`
* `drop-shadow()`
* `grayscale()`
* `invert()`
* `opacity()`
* `saturate()`
* `sepia()`


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

grayscale()
===========

**`grayscale()`** は CSS の関数は、入力画像をグレースケールに変換します。結果は `<filter-function>` です。

試してみましょう
--------

構文
--

```css
grayscale(amount)
```

### 引数

`amount`

変換の度合いで、 `<number>` または `<percentage>` で指定します。 `100%` の値では完全にグレースケールになり、 `0%` の値では入力が変更されないままになります。 `0%` と `100%` の間の値は、効果の割合です。省略時の既定値は `1` です。補間時の欠損値は `0` です。

例
-

### grayscale() の正しい値の例

```css
grayscale(0)     /\* 効果なし \*/
grayscale(.7)    /\* 70% グレースケール \*/
grayscale(100%)  /\* 完全なグレースケール \*/
```

仕様書
---

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-grayscale |

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

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

関連情報
----

* `<filter-function>`
* `blur()`
* `brightness()`
* `contrast()`
* `drop-shadow()`
* `hue-rotate()`
* `invert()`
* `opacity()`
* `saturate()`
* `sepia()`


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

brightness()
============

**`brightness()`** は CSS の関数で、入力画像に線形乗算を適用し、明るくしたり暗くしたりします。その結果は `<filter-function>` です。

試してみましょう
--------

構文
--

```css
brightness(amount)
```

### 引数

`amount`

結果の明るさで、 `<number>` または `<percentage>` で指定します。 `100%` 未満の値では画像が暗くなり、 `100%` を超える値では画像が明るくなります。 `0%` の値では画像が完全に黒くなり、 `100%` の値では入力が変更されないままになります。補間時の欠損値は `1` です。

例
-

### 数値とパーセント値を用いた brightness の設定

```css
>brightness(0%)   /\* 完全に黒 \*/
brightness(0.4)  /\* 明るさ 40% \*/
brightness(1)    /\* 効果なし \*/
brightness(200%) /\* 明るさ 2 倍 \*/
```

仕様書
---

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-brightness |

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

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

関連情報
----

* `<filter-function>`
* `blur()`
* `contrast()`
* `drop-shadow()`
* `grayscale()`
* `hue-rotate()`
* `invert()`
* `opacity()`
* `saturate()`
* `sepia()`