recursal/MDN huggingface dataset:
hsl()
=====

**`hsl()`** 関数記法は、 sRGB 色を *色相*、*彩度*、*明度* の成分によって表現します。オプションの *アルファ* 成分は、その色の透明度を表します。

**メモ:** 古い `hsla()` 構文は `hsl()` の別名です。同じ引数を受け付け、同じように動作します。

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

`hsl()` による *補色* の定義は、色相環の同じ直径に配置されるため、単一の式で計算することができます。ある色の色相角を `θ` とすれば、その補色の色相角は `180deg - θ` となります。

構文
--


```css
hsl(120deg 75% 25%)
hsl(120deg 75% 25% / 0.6)
```


この関数は、すべての値がカンマで区切られた古い構文も受け付けます。

### 値

関数表記: `hsl(H S L[ / A])`

`H`

`<number>`、`<angle>` またはキーワード `none` であり、色相角を表します。この型の詳細は `<hue>` のリファレンスを参照してください。

`S`

`<percentage>` またはキーワード `none` であり、彩度を表します。`100%` は色の濃さが最大で、 `0%` は完全に色がありません（グレー）。

`L`

`<percentage>` またはキーワード `none` であり、輝度を表します。`100%` は白で、`0%` は黒で、`50%` は「通常」です。

`A` 省略可

`<alpha-value>` またはキーワード `none` であり、数値 `1` が `100%` (完全に不透明) を意味します。


**メモ:** この関数記法は sRGB 値にシリアライズされ、赤、緑、青の成分の値はシリアライズの際に丸められる可能性があります。

**メモ:** `none` の効果については色成分の欠落を参照してください。

### 形式文法
```

<hsl()> =   
  <legacy-hsl-syntax>  |  
  <modern-hsl-syntax>    
  
<legacy-hsl-syntax> =   
  hsl( <hue> , <percentage> , <percentage> , <alpha-value>? )    
  
<modern-hsl-syntax> =   
  hsl( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )    
  
<hue> =   
  <number>  |  
  <angle>     
  
<alpha-value> =   
  <number>      |  
  <percentage>    
  
```

例
-

### hsl() を conic-gradient() と組み合わせて使う

`hsl()` 関数と `conic-gradient()` はどちらも角度を扱うので、相性がよいものです。
```

<div></div>
```


#### CSS


```css
div {
  width: 100px;
  height: 100px;
  background: conic-gradient(
    hsl(360 100% 50%),
    hsl(315 100% 50%),
    hsl(270 100% 50%),
    hsl(225 100% 50%),
    hsl(180 100% 50%),
    hsl(135 100% 50%),
    hsl(90 100% 50%),
    hsl(45 100% 50%),
    hsl(0 100% 50%)
  );
  clip-path: circle(closest-side);
}
```


#### 結果

### 古い構文: カンマ区切りの値

歴史的な理由から、`hsl()` 関数はすべての値がカンマにより区切られた形式を受け付けます。

#### HTML


```html
<div class="space-separated"></div>
<div class="comma-separated"></div>
```


#### CSS


```css
div {
  width: 100px;
  height: 50px;
  margin: 1rem;
}

div.space-separated {
  background-color: hsl(0 100% 50% / 50%);
}

div.comma-separated {
  background-color: hsl(0, 100%, 50%, 50%);
}
```


#### 結果

### 古い構文: hsla()

古い `hsla()` 構文は `hsl()` の別名です。

#### HTML


```html
<div class="hsl"></div>
<div class="hsla"></div>
```


#### CSS


```css
div {
  width: 100px;
  height: 50px;
  margin: 1rem;
}

div.hsl {
  background-color: hsl(0 100% 50% / 50%);
}

div.hsla {
  background-color: hsla(0, 100%, 50%, 50%);
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Color Module Level 4 # the-hsl-notation |

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

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

関連情報
----

* すべての色記法の一覧
* `<hue>` データ型
* 色選択ツール (MDN)
* Color picker (Lea Verou)
hwb()
=====

**`hwb()`** 関数記法は、指定された色を色相、白色度、黒色度による sRGB 色によって表現します。オプションのアルファ成分は、その色の透明度を表します。

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

構文
--


```css
hwb(194 0% 0%) /\* #00c3ff \*/
hwb(194 0% 0% / .5) /\* #00c3ff with 50% opacity \*/
```

### 値

* 関数記法: `hwb(H W B[ / A])`
* `H`
    + : 色相角を表す `<number>` または `<angle>`、またはキーワード `none`。この型の詳細は `<hue>` のリファレンスにあります。
* `W`, `B`
    + : `<percentage>` またはキーワード `none` であり、それぞれ白色度と黒色度を表します。これらは白と黒が混合される量を、 `0%` （白色度または黒色度なし）から `100%` （白色度または黒色度が最高）で指定します。
     `W + B = 100%` グレーの濃淡を定義します。 `W + B > 100%` である場合、 `W` および `B` はそれぞれ `W / (W + B)` および `B / (W + B)` で正規化されます。
* `A` 省略可
    + : `<alpha-value>` またはキーワード `none` です。 `1` は `100%` （完全に不透明）に対応します。

**メモ:** この関数記法は sRGB 値に直列化され、赤、緑、青の成分の値は直列化の際に丸められる可能性があります。

**メモ:** `none` の効果については色成分の欠落を参照してください。

### 形式文法
```

<hwb()> =   
  hwb( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )    
  
<hue> =   
  <number>  |  
  <angle>     
  
<alpha-value> =   
  <number>      |  
  <percentage>    
  
```

仕様書
---

| Specification |
| --- |
| CSS Color Module Level 4 # the-hwb-notation |

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

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

関連情報
----

* `<color>`: すべての色記法の一覧
* `<hue>`: 色の色相角を表すデータ型
oklch()
=======

**`oklch()`** 関数記法は、指定された色を Oklch 色空間で表現するものです。これは `oklab()` と同じ L 軸を持っていますが、極座標系の C （彩度）と H （色相）を使用します。

構文
--


```css
oklch(40.1% 0.123 21.57)
oklch(59.69% 0.156 49.77)
oklch(59.69% 0.156 49.77 / .5)
```

### 値

Functional notation: `oklch(L C H[ / A])`

`L`

`<number>` で `0` ～ `1` の範囲、 `<percentage>` で `0%` ～ `100%` の範囲、またはキーワード `none` であり、 CIE の明るさを指定します。ここで数値 `0` は `0%` （黒）に、数値 `1` は `100%` （白）に対応します。

`C`

`<number>`、`<percentage>`、またはキーワード値 `none` であり、ここで `0%` は `0` に、 `100%` は数値 `0.4` に対応します。これは彩度の指標です（おおよそ「色の量」を表します）。その有効な最小値は `0` で、最大値は理論的には無制限です（しかし実際には `0.5` を超えることはありません）。

`H`

`<number>`、`<angle>`、またはキーワード値 `none` であり、色相角を表します。この型の詳細は、 `<hue>` のリファレンスにあります。

`A` 省略可

`<alpha-value>` またはキーワード `none` です。 `1` は `100%` （完全に不透明）に対応します。


**メモ:** `none` の効果については色成分の欠落を参照してください。

### 形式文法
```

<oklch()> =   
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )    
  
<hue> =   
  <number>  |  
  <angle>     
  
<alpha-value> =   
  <number>      |  
  <percentage>    
  
```

例
-

### 明度、彩度、色相の調整

次の例は、関数記法 `oklch()` の `L`（明度）、`C`（彩度）、`H`（色相）の値を変化させたときの効果を示しています。

#### HTML


```html
<div data-color="blue"></div>
<div data-color="blue-light"></div>

<div data-color="red"></div>
<div data-color="red-chroma"></div>

<div data-color="green"></div>
<div data-color="green-hue"></div>
```


#### CSS
```

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}
```



```css
[data-color="blue"] {
  background-color: oklch(60% 0.4 240);
}
[data-color="blue-light"] {
  background-color: oklch(90% 0.4 240);
}

[data-color="red"] {
  background-color: oklch(100% 0.4 30);
}
[data-color="red-chroma"] {
  background-color: oklch(100% 0.3 40);
}

[data-color="green"] {
  background-color: oklch(60% 0.57 161);
}
[data-color="green-hue"] {
  background-color: oklch(60% 0.57 181);
}
```


#### 結果

### 色のアルファ値の調整

 次の例は `lab()` 関数記法の `A`（アルファ）値を変化させたときの効果を示しています。
 `red` と `red-alpha` 要素は `#background-div` 要素に重なり、透明度の効果を示しています。
 `A` に `0.4` の値を与えると、色は 40% の不透明度になります。

#### HTML


```html
<div id="background-div">
  <div data-color="red"></div>
  <div data-color="red-alpha"></div>
</div>
```


#### CSS
```

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}
#background-div {
  background-color: oklch(100% 0.57 217);
  width: 150px;
  height: 40px;
}
```



```css
[data-color="red"] {
  background-color: oklch(50% 0.5 20);
}
[data-color="red-alpha"] {
  background-color: oklch(50% 0.5 20 / 0.4);
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Color Module Level 4 # ok-lab |

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

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

関連情報
----

* すべての色記法の一覧
* `<hue>` データ型
* A perceptual color space for image processing
* OKLCH in CSS
lab()
=====

**`lab()`** 関数記法は、指定された色を CIE L\*a\*b\* 色空間で表現する。 Lab は人間が見ることのできる色の範囲をすべて表します。

構文
--


```css
lab(29.2345% 39.3825 20.0664);
lab(52.2345% 40.1645 59.9971);
lab(52.2345% 40.1645 59.9971 / .5);
```

### 値

* 関数記法: `lab(L a b[ / A])`
* `L`
    + : `<number>` で `0` ～ `100` の範囲、 `<percentage>` で `0%` ～ `100%` の範囲、またはキーワード `none` であり、 CIE の明るさを指定します。ここで数値 `0` は `0%` （黒）に、数値 `100` は `100%` （白）に対応します。
* `a`
    + : `<number>` で `-125` ～ `125` の範囲、 `<percentage>` で `-100%` ～ `100%` の範囲、またはキーワード `none` であり、 CIELAB 色空間における `a` 軸上の距離（緑と赤の色合い）を指定します。
* `b`
    + : `<number>` で `-125` ～ `125` の範囲、 `<percentage>` で `-100%` ～ `100%` の範囲、またはキーワード `none` であり、 CIELAB 色空間における `b` 軸上の距離（青と黄の色合い）を指定します。
* `A` 省略可
    + : `<alpha-value>` またはキーワード `none` です。 `1` は `100%` （完全に不透明）に対応します。

**メモ:** 通常、 CSS でパーセント値が数値と等価である場合、 `100%` が数値 `1` と等しくなります。
 この場合は特別で、 `100%` は `L` 値では `100`、 `a` 値と `b` 値では `125` となります。


**メモ:** `none` の効果については色成分の欠落を参照してください。

### 形式文法
```

<lab()> =   
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )    
  
<alpha-value> =   
  <number>      |  
  <percentage>    
  
```

例
-

### 明るさと色の軸を lab() で調整

次の例は、 `lab()` 関数の明度、 a 軸、 b 軸の値を変化させたときの効果を示しています。

#### HTML


```html
<div data-color="red"></div>
<div data-color="red-a"></div>

<div data-color="green"></div>
<div data-color="green-b"></div>

<div data-color="blue"></div>
<div data-color="blue-light"></div>
```


#### CSS
```

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}
```



```css
[data-color="red"] {
  background-color: lab(100 125 125);
}
[data-color="red-a"] {
  background-color: lab(100 110 125);
}

[data-color="green"] {
  background-color: lab(75% -120 125);
}
[data-color="green-b"] {
  background-color: lab(75% -120 10);
}

[data-color="blue"] {
  background-color: lab(0 -120 -120);
}
[data-color="blue-light"] {
  background-color: lab(70 -120 -120);
}
```


#### 結果

### 透明度を lab() で調整

 次の例は `lab()` 関数記法の `A`（アルファ）値を変化させたときの効果を示しています。
 `red` と `red-alpha` 要素は `#background-div` 要素に重なり、透明度の効果を示しています。
 `A` に `0.4` の値を与えると、色は 40% の不透明度になります。

#### HTML


```html
<div id="background-div">
  <div data-color="red"></div>
  <div data-color="red-alpha"></div>
</div>
```


#### CSS
```

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}
#background-div {
  background-color: lightblue;
  width: 150px;
  height: 40px;
}
```



```css
[data-color="red"] {
  background-color: lab(100 125 125);
}
[data-color="red-alpha"] {
  background-color: lab(100 125 125 / 0.4);
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Color Module Level 4 # lab-colors |

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

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

関連情報
----

* `<color>` データ型: すべての色記法の一覧
* LCH colors in CSS: what, why, and how?
* Safari Technology Preview 122 release notes: `lab()` および `lch()` 色を含む
device-cmyk()
=============

**`device-cmyk()`** 関数記法は、機器依存の形で CMYK 色を表現するために使用します。シアン、マゼンタ、黄色、黒の成分を指定します。

この色に対する手法は、特定のプリンターで出力する素材を作成する際、特定のインクの組み合わせでの出力が分かっている場合に有益なものです。 CSS プロセッサーは色を近似させることができますが、最終的な結果は表示されたものと異なる形になる可能性があります。

構文
--


```css
device-cmyk(0 81% 81% 30%);
device-cmyk(0 81% 81% 30% / .5);
device-cmyk(0 81% 81% 30% / .5, rgb(178 34 34));
```

### 値

関数記法: `device-cmyk(C M Y K[ / A][, color])`

`<cmyk-component>` は 4 つの `<number>` または `<percentage>` の値で、 CMYK 色のシアン、マゼンタ、黄、黒の成分を指定します。

`/ <alpha-value>` （アルファ）は `<number>` で `0` から `1` の間、または `<percentage>` で `1` から `100%` （完全に不透明）の間で、この色の透明度（またはアルファチャネル）を表します。

`<color>` は、ユーザーエージェントが CMYK 色を RGB に変換する方法を知らない場合に使用する、オプションの代替値の `<color>` です。

`C`, `M`, `Y`, `K`

`<number>` または `<percentage>` の値で、 CMYK 色の成分であるシアン、マゼンタ、黄、黒の成分を指定します。

`A` 省略可

`<alpha-value>` またはキーワード `none` で、 `1` は `100%` （完全に不透明）に対応します。

`color` 省略可

オプションで、代替の `<color>` です。ユーザーエージェントが CMYK 色から RGB への変換方法を知らない場合に使用されます。

### 形式文法
```

<device-cmyk()> =   
  <legacy-device-cmyk-syntax>  |  
  <modern-device-cmyk-syntax>    
  
<legacy-device-cmyk-syntax> =   
  device-cmyk( <number>#{4} )    
  
<modern-device-cmyk-syntax> =   
  device-cmyk( <cmyk-component>{4} [ / [ <alpha-value> | none ] ]? )    
  
<cmyk-component> =   
  <number>      |  
  <percentage>  |  
  none            
  
<alpha-value> =   
  <number>      |  
  <percentage>    
  
```

仕様書
---

| Specification |
| --- |
| CSS Color Module Level 5 # device-cmyk |

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

この機能を実装しているブラウザーはありません。
スクロールアンカリングの紹介
==============

ウェブのユーザーであれば、おそらくスクロールアンカリングが解決する問題をよく知っているはずです。速度の遅い接続で長いページを閲覧し、コンテンツを読むためにスクロールを始めるとします。一所懸命に読んでいる間に、ページの見ている部分が突然ジャンプしてしまうことがあります。これはコンテンツの上部に、大きな画像やその他の要素が読み込まれたことによって引き起こされます。

スクロールアンカリング (scroll anchoring) はブラウザーの機能で、ユーザーが既に文書の新しい部分にスクロールした後で、コンテンツが読み込まれたことでページ内容の移動が発生してしまう問題を解決するためのものです。

どのように動作するか
----------

スクロールアンカリングは、表示域 (viewport) 外で起こった変化に対し、スクロール位置を調整する機能です。つまり、文書内のスクロール位置が実際には変わっているのにもかかわらず、ユーザーが見ていた個所が表示域に留まり続けます。

スクロールアンカリングを有効にするには
-------------------

何もする必要はありません。この機能は、対応しているブラウザーでは既定で有効になっています。ほとんどの場合において、スクロールを固定することは望み通りでしょう。 — コンテンツが急に移動してしまうのは、誰にとっても使い勝手が悪いものです。

デバッグする必要がある場合
-------------

スクロールアンカリングを有効にしてページの動作がうまくいかない場合は、一部の `scroll` イベントリスナーがアンカーノードの動きを補うための余分なスクロールをうまく処理していないことが原因かもしれません。

Firefox では `about:config` で `layout.css.scroll-anchoring.enabled` を `false` に変更してスクロールアンカリングを無効にすることで、問題が解決するかどうかを確認できます。

解決した場合は、Firefox がアンカーとして使用しているノードを `layout.css.scroll-anchoring.highlight` スイッチで確認できます。これにより、アンカーノードの上に紫色のオーバーレイが表示されます。

あるノードがアンカーとして適切でないと思われる場合は、以下のように `overflow-anchor` を使用してそのノードを除外することができます。

無効にする必要がある場合は
-------------

仕様書では、新しいプロパティである `overflow-anchor` を追加し、スクロールアンカリングを文書全体、もしくは一部で無効にできるようにしています。基本的には、自動的に有効にされたスクロールアンカリングをオプトアウトする仕組みです。

指定できる値は、 `auto` または `none` のどちらかです。

* `auto` が初期値です。対応しているブラウザーでは、スクロールアンカリングの動作をします。そして、コンテンツの急な移動も少なくなります。
* `none` は、文書全体、もしくは一部でスクロールアンカリングを明示的にオプトアウトするための値です。

文書全体でスクロールアンカリングを無効にするには、`<body>` 要素にこのプロパティを指定してください。


```css
body {
  overflow-anchor: none;
}
```


文書の特定の部分でスクロールアンカリングを無効にしたい場合は、そのコンテンツを囲む要素に `overflow-anchor: none` を指定してください。


```css
.container {
  overflow-anchor: none;
}
```


**メモ:** 仕様書にも書かれていますが、スクロールアンカリングが無効にされた場合、その子孫要素から再び有効にすることはできません。例えば、スクロールアンカリングが文書全体で無効にされた際、文書内の一部に `overflow-anchor: auto` を指定しても、その部分でスクロールアンカリングは動作しません。

### 抑制トリガー

仕様書では、問題になる可能性がある場合はその場でスクロールアンカリングを無効にする、抑制トリガー (*suppression triggers*) についても説明しています。スクロールアンカリングを指定したノードもしくはその祖先でトリガーが発生した場合、スクロールアンカリングが抑制されます。

抑制トリガーとなるのは、次のプロパティの計算値 (computed value) が変更された場合です。

* `top`, `left`, `right`, `bottom`
* `margin`, `padding`
* `width` もしくは `height` に関連するプロパティすべて
* `transform`

さらに、スクロールボックス内の任意の場所で `position` を変更した場合もスクロールアンカリングが無効になります。

**メモ:** バグ Firefox バグ 1584285 で、Firefox Nightly に `layout.css.scroll-anchoring.suppressions.enabled` フラグが追加され、これらのトリガーを無効化できるようになりました。

その他の解説
------

* Explainer document on the WICG site
* Scroll anchoring for web developers on the Chromium blog
* Implement a pin-to-bottom scrolling element using scroll anchoring
ブラウザーの互換性
---------

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

ブラウザーでスクロールアンカリングが利用できるかどうかを検査する必要がある場合は、機能クエリーを使用して `overflow-anchor` プロパティに対応しているかどうかを検査してください。
ブロック、絶対配置、表レイアウトのブロック配置
=======================

ボックス配置仕様書は、様々なレイアウト方式でどのように配置が動作するかを詳説しています。このページでは、ボックス配置は浮動、位置指定、表要素を含むボックスレイアウトのレイアウトでどのように動作するかを明らかにします。このページはブロックレイアウトとボックス配置に固有のことを詳説するため、様々なレイアウト方式に共通のボックス配置の共通機能について説明している、中心となるボックス配置ページを併せて読んでください。

**メモ:** 執筆時点 (2018 年 5 月) では、ブロックレイアウトのボックス配置プロパティへの対応は実際にはありません。この文書では完全性を保つために、仕様がこれらのプロパティをどのように実装することを期待しているかを詳細に説明していますが、仕様やブラウザーの実装が発展するにつれて変更される可能性があります。

align-content と justify-content
-------------------------------

`justify-content` プロパティは、ブロックコンテナーや表のセルには適用されません。

`align-content` プロパティは、ブロック軸に適用され、ボックスの内容物をそのコンテナー内で整列させるためのものです。`space-between`、`space-around`、`space-evenly` などの内容物配分方法が要求されている場合は、内容物が 1 つの配置対象物として扱われるため、代替配置が使用されます。

justify-self
------------

`justify-self` プロパティは、インライン軸上で包含ブロックの内部にアイテムを配置するために使用されます。

このプロパティは浮動要素や表のセルには適用されません。

align-self
----------

`align-self` プロパティは、ブロックレベルボックスには (浮動要素を含め) 適用されません。ブロック軸に複数のアイテムがあるからです。表のセルにも適用されません。

### 絶対配置要素

配置コンテナーは、上、左、下、右のオフセット値を考慮して位置指定されたブロックです。normal キーワードは `stretch` に解決されますが、その位置指定アイテムが置換要素である場合は `start` に解決されます。

現在のレイアウト方法での整列
--------------

現在、ブラウザーはブロックレイアウトでのボックス配置に対応していないため、整列には既存の配置方法のいずれかを使用するか、コンテナー内の 1 つのアイテムでもフレックスボックスで指定された配置プロパティを使用するためにフレックスアイテムにするかのいずれかを選択できます。

フレックスボックスが導入される前のブロックの水平方向の整列は、ブロックに auto のマージンを設定する方法が一般的でした。`margin` を `auto` に設定すると、その次元で利用可能なすべての空間を吸収するため、左右のマージンを自動に設定すると、ブロックを中央に配置することができます。


```css
.container {
  width: 20em;
  margin-left: auto;
  margin-right: auto;
}
```


表レイアウトでは、`vertical-align` プロパティを使用して、セルの内容をそのセル内で配置させることができます。

多くの利用場面では、ブロックコンテナーをフレックスアイテムに変えることで、求めていた配置機能が得られます。以下の例では、アイテムが 1 つだけ入っているコンテナーを、配置プロパティを使用できるようにするためにフレックスコンテナーに変えています。

リファレンス
------

### CSS プロパティ

* `justify-content`
* `align-content`
* `justify-self`
* `align-self`
### 用語集の項目

* 配置対象物
* 配置コンテナー
* 代替配置
グリッドレイアウトでのボックス配置
=================

ボックス配置の仕様書では、さまざまなレイアウト方式で配置がどのように働くかを詳述しています。このページでは、 CSS グリッドレイアウトにおいてボックス配置がどのように働くかを探ります。

このページの目的は、CSS グリッドレイアウトとボックス配置として定められた事柄を詳述するためのものですので、ボックス配置の様々なレイアウト方式の間で共通の機能について詳述した、主となるボックス配置ページを合わせてお読みください。

基本的な例
-----

このグリッドレイアウトの例では、固定幅のトラックをインライン (主) 軸にレイアウトした後、グリッドコンテナーに余分な空間があります。この空間を `justify-content` で分配しています。ブロック (交差) 軸では、グリッド領域内のアイテムの配置を `align-items` で制御しています。最初のアイテムは、グループに設定された `align-items` の値を、`align-self` を `center` に設定することでオーバーライドしています。

グリッド軸
-----

2 次元のレイアウト手法であるグリッドレイアウトでは、アイテムを配置する軸が常に 2 つあります。これを実現するために、すべてのボックス配置プロパティを利用することができます。

インライン軸は、使用されている書字方向において、文中の単語が走る方向に対応する軸です。したがって、英語やアラビア語のような横書きの言語では、インラインの方向は水平方向になります。縦書きの場合は、インライン軸は縦方向になります。

![](/ja/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout/inline_axis.png)

インライン軸上に配置するには `justify-` で始まるプロパティ、`justify-content`、`justify-items`、`justify-self` を使用します。

ブロック軸は、ブロックがページの下に表示される方向にインライン軸と交差しています。例えば、英語の段落は縦に 1 つずつ表示されます。つまり、これがブロック軸です。

ブロック軸上でものを揃えるには、`align-` で始まるプロパティ、`align-content`、`align-items`、`align-self` を使用します。

![](/ja/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout/block_axis.png)

自己配置
----

* `justify-self`
* `align-self`
* `place-self`
* `justify-items`
* `align-items`
* `place-items`

これらのプロパティは、アイテムが配置されたグリッド領域内に整列させるためのものです。`align-items` および `justify-items` プロパティはグリッドコンテナーに適用され、グループとして `align-self` および `justify-self` プロパティを設定します。つまり、すべてのグリッドアイテムの配置を一度に設定し、異なる配置が必要なアイテムは、個々のグリッドアイテムのルールに `align-self` または `justify-self` プロパティを適用してオーバーライドすることができるのです。

`align-self` および `justify-self` の初期値は `stretch` で、アイテムはグリッド領域全体に伸縮します。この規則の例外は、アイテムが固有のアスペクト比を持っている場合、例えば画像などです。この場合、画像が歪まないように、アイテムは両方の次元で `start` に揃えられます。

内容物の配置
------

* `justify-content`
* `align-content`
* `place-content`

これらのプロパティは、グリッドトラックを分配するための空間が余っている場合に、トラックの位置を調整するためのものです。このシナリオは、定義したトラックの合計がグリッドコンテナーの幅の合計よりも小さい場合に発生します。

gap と古い grid-gap プロパティ
----------------------

* `row-gap`
* `column-gap`
* `gap`

グリッド仕様書は、もとは `grid-row-gap`、`grid-column-gap`、`grid-gap` の各プロパティの定義がありました。これらはボックス配置仕様書に移され、`row-gap`、`column-gap`、`gap` と改名されました。これによって、他のレイアウト方式でもアイテム間の溝に使用することができるようになりました。

更新されたプロパティは、まだすべてのブラウザーには実装されていません。したがって、グリッドレイアウトで gap のプロパティを使用する場合は、完全な互換性を確保するために、`grid-row-gap`、`grid-column-gap`、`grid-gap` の各バージョンを使用する必要があります。ベンダー接頭辞と同じように、両方を使用してプロパティを重複利用することもできます。

リファレンス
------

### CSS プロパティ

* `justify-content`
* `align-content`
* `place-content`
* `justify-items`
* `align-items`
* `place-items`
* `justify-self`
* `align-self`
* `place-self`
* `row-gap`
* `column-gap`
* `gap`
### 用語集の項目

* 交差軸
* 主軸
ガイド
---

* グリッドレイアウトのボックス配置
外部リソース
------

* Box alignment cheatsheet
* CSS Grid, Flexbox and Box Alignment
* Thoughts on partial implementations of Box Alignment
段組みレイアウトでのボックス配置
================

ボックス配置仕様書では、さまざまなレイアウト方式で配置がどのように働くかを詳述しています。このページでは、段組みレイアウトのコンテキストにおいてボックス配置がどのように働くかを探ります。このページとしての目的は、段組みレイアウトとボックス配置として定められた事柄を詳述するためのものですので、ボックス配置の様々なレイアウト方式の間で共通の機能について詳述した、主となるボックス配置ページを合わせてお読みください。

段組みレイアウトでは、配置コンテナーは段組みコンテナーのコンテンツボックスです。配置対象物は段ボックスです。段組みレイアウトに適用するプロパティは以下に説明する通りです。

**メモ:** 段組みレイアウトはボックス配置仕様書に先立つものです。そしてここに挙げたプロパティは、段組みレイアウトのために設定されたものであっても、ブラウザーが対応していないことがあります。

align-content と justify-content
-------------------------------

`align-content` プロパティはブロック軸に、 `justify-content` はインライン軸に適用されます。段に追加された空間は配分に使用され、段間のすき間に追加されるため、段間は `column-gap` プロパティで指定された寸法よりも大きくなることがあります。

`justify-content` に `normal` または `stretch` 以外の値を使用すると、 `column-width` が指定された段組みコンテナーに表示し、残りの余白は justify-content の値によって配分されます。

column-gap
----------

段組みレイアウト仕様書の早期の版では、 `column-gap` プロパティが定義されていましたが、ボックス配置では他のレイアウト方式の gap プロパティと統合されました。他のレイアウト方式では、 column-gap の初期値を 0 として扱うのに対し、段組みレイアウトでは、一般に段間にすき間がないようにすることはないでしょうから、 1em として扱うようになっています。

リファレンス
------

### CSS プロパティ

* `justify-content`
* `align-content`
* `column-gap`
### 用語集の項目

* 配置対象物
* 配置コンテナー
* 代替配置
フレックスボックスでのボックス配置
=================

ボックス配置の仕様書では、さまざまなレイアウト方式で配置がどのように働くかを詳述しています。このページでは、フレックスボックスのコンテキストにおいてボックス配置がどのように働くかを探ります。このページの目的は、フレックスボックスとボックス配置として定められた事柄を詳述するためのものですので、ボックス配置の様々なレイアウト方式の間で共通の機能について詳述した、主となるボックス配置ページを合わせてお読みください。

基本的な例
-----

この例では、3 つのフレックスアイテムが `justify-content` を使用して主軸に、 `align-items` を使用して交差軸に配置されます。最初のアイテムはグループに対して設定された `align-items` の値を上書きし、 `align-self` で `center` に設定しています。

軸と flex-direction
-----------------

フレックスボックスは文書の書字方向を尊重しますので、英語の場合で `justify-content` が `flex-end` に設定されていた場合、アイテムをフレックスコンテナーの末尾に配置します。 `flex-direction` が `row` に設定されていた場合、この配置はインライン方向になります。

しかし、フレックスボックスでは `flex-direction` を `column` に設定することで、主軸を変更することができます。この場合、 `justify-content` はアイテムをブロック方向に配置します。したがって、フレックスボックスでは主軸と交差軸について次のように考えると最も簡単です。

* 主軸 = `flex-direction` で設定された向き = `justify-content` で配置
* 交差軸 = 主軸と交差 = `align-content`, `align-self`/`align-items` で配置
### 主軸の配置

* `justify-content`
### 交差軸の配置

* `align-self`
* `align-items`
* `align-content`
### フレックスボックスには justify-self はない

主軸では、フレックスボックスはコンテンツをグループとして扱います。アイテムをレイアウトするために必要な空間の大きさが計算され、残りの空間は配分に利用されます。`justify-content` プロパティは、どのように残りの領域を使用するかを制御します。`justify-content: flex-end` に設定すると、余分な領域はアイテムの前に配置され、`justify-content: space-around` に設定すると、その大きさアイテムの両側に配置される、などです。

つまり、常にアイテムのグループ全体が動き回るよう配分されるため、`justify-self` プロパティはフレックスボックスでは意味を持ちません。

交差軸では、フレックスコンテナーのその方向に余白が追加され、単一のアイテムが始点と終点に動く可能性があるため、 `align-self` は意味を持ちます。

alignment および auto のマージン
------------------------

`justify-self` プロパティが必要であると考える可能性があるフレックスボックスの特定の利用場面があります。これは、おそらく分割ナビゲーションパターンを作成するために、一連のフレックスアイテムを分割したい場合です。この利用場面では、マージンに `auto` を使用することができます。 `auto` に設定されたマージンは、その方向で利用可能な領域をすべて吸収します。これが auto のマージンでブロックを中央揃えしたときの動作です。左右のマージンを `auto` に設定すると、ブロックの両側が利用可能なスペースをすべて利用しようとするので、ボックスは中央に配置されます。

開始点に配置された一連のフレックスアイテムのうち、1 つのアイテムで `margin` を `auto` に設定することで、分割ナビゲーションを作成できます。これは、フレックスボックスと alignment プロパティでうまくいきます。 auto のマージンに使用できる領域がなくなると、アイテムは他のすべてのフレックスアイテムと同じように動作し、空間に収まるように縮小します。

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

* `row-gap`
* `column-gap`
* `gap`
### アイテム間における固定幅の間隔の作成

主軸では、`column-gap` プロパティは兄弟アイテムの間に固定幅の間隔を作成します。

交差軸では、`row-gap` プロパティは、隣接するフレックス行の間隔を作成するので、この効果を得るには `flex-wrap` を `wrap` に設定する必要があります。

リファレンス
------

### CSS プロパティ

* `justify-content`
* `align-content`
* `place-content`
* `justify-items`
* `align-items`
* `place-items`
* `align-self`
* `row-gap`
* `column-gap`
* `gap`
### 用語集の項目

* 交差軸
* 主軸
ガイド
---

* フレックスコンテナー内のアイテムの配置
外部リソース
------

* Box alignment cheatsheet
* CSS Grid, Flexbox and Box Alignment
* Thoughts on partial implementations of Box Alignment
ボックス値からのシェイプ
============

シェイプを作るのに直接的な方法が、 CSS ボックスモデルの値を使用することです。この記事では、これを行う方法を説明します。

シェイプの値として許可されているボックス値は次の通りです。

* `content-box`
* `padding-box`
* `border-box`
* `margin-box`

`border-radius` の値にも対応しており、これはページに丸い縁を持った物を作ることができ、シェイプは作成されたシェイプに従うことができます。

CSS ボックスモデル
-----------

上に挙げた値は CSS ボックスモデルの様々な部分に対応します。 CSS のボックスにはコンテンツ、パディング、境界、マージンがあります。

![ボックスモデルはマージン、境界、パディング、コンテンツの各ボックスから成ります。](/ja/docs/Web/CSS/CSS_shapes/From_box_values/box-model.png)

シェイプにボックス値を使用することで、これらの値で定義された辺でコンテンツを折り返すことができます。以下の例で、コンテンツの様々な流れ方が分かるように、パディング、境界、マージンを持つ要素を使用しています。

### margin-box

`margin-box` は外側のマージンの縁と、要素の定義で `border-radius` を使用することで、シェイプの角の半径によって定義されます。

以下の例では、高さ、幅、背景色を設定した `<div>` である紫色の丸いアイテムが表示されます。 `border-radius` プロパティを使用して丸を作成しており、 `border-radius: 50%` と設定しています。要素にマージンがあるので、コンテンツは丸いシェイプに回り込み、マージンが適用されています。

### border-box

`border-box` の値は、境界の外側の縁で定義されるシェイプです。このシェイプは通常の、境界の外側におけるすべての角の丸め規則に従います。 CSS の `border` プロパティを使用していなくても、境界は存在します。この場合、境界は `padding-box` と同じになり、シェイプはパディングの縁の外側として定義されます。

次の例では、テキストが境界線によって作成された線に従うようになったのが分かります。境界寸法を変更すると、コンテンツがそれに従います。

### padding-box

`padding-box` の値は、パディングの縁に囲まれたシェイプを定義します。このシェイプは境界の内側におけるすべての角の丸め規則に従います。パディングがない場合、 `padding-box` は `content-box` と同じです。

### content-box

`content-box` の値は、コンテンツの外側の縁で囲まれたシェイプを定義します。このボックスにおけるそれぞれの角の丸めは、0または border-radius − border-width − padding より大きくなります。つまり、ここでは負の数を取ることはできません。

ボックス値を使用する場面
------------

シェイプを作成するのに、ボックス値を使用すると簡単ですが、これはよく対応されている `border-radius` プロパティを使用して定義することができる簡単なシェイプしか実現することができません。上記の使用例にあるような使い方の一つです。 border-radius を使用して円形のシェイプを作成し、それに沿って文字列をカーブさせます。

いくらかの面白い効果を作成することができますが、単純なテクニックしか使っていません。この章の最後の例で、左右に 2 つの浮動状態の要素を作成し、それぞれの文字列寄りの方向に対して、 border-radius を 100% に設定しています。

もっと複雑なシェイプについては、この章の他のガイドにあるように、基本シェイプのうちの一つを値として使用するか、画像からシェイプを定義するかする必要があります。