::view-transition-image-pair - CSS: カスケーディングスタイルシート

::view-transition-image-pair
============================

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

**`::view-transition-image-pair`** は CSS の擬似要素で、ビュートランジションの「古い」および「新しい」ビュー状態、すなわちトランジションの前と後のコンテナーを表します。

ビュートランジションの間、 `::view-transition-image-pair` はビュートランジションのプロセスで説明されているように、関連する擬似要素のツリーとして表現されます。これは `::view-transition-group` の子にしかなりません。子という意味では、 `::view-transition-new` または `::view-transition-old`、あるいはその両方を持つことができます。

UA スタイルシートでは `::view-transition-image-pair` に以下の既定値が指定されています。

```css
html::view-transition-image-pair(\*) {
  position: absolute;
  inset: 0;

  animation-duration: inherit;
  animation-fill-mode: inherit;
}
```

ビュートランジションの間、 `::view-transition-image-pair` は `isolation: isolate` をビュートランジションスタイルシートで設定することで、他の視覚出力に影響を与えることなく、通常の混合モード以外で混合することができます。

構文
--

```css
::view-transition-image-pair(<pt-name-selector>) {
  /\* ... \*/
}
```

`<pt-name-selector>` は以下の値のうちのいずれかです。

`*`

擬似要素が、すべてのビュートランジショングループに一致するようにします。

`root`

擬似要素が、ページ全体のビュートランジションを含むためにユーザエージェントによって作成された既定の `root` ビュートランジショングループに一致するようにします。すなわち、 `view-transition-name` プロパティによって自分自身を固有のビュートランジショングループに割り当てていない要素を意味します）。

`<custom-ident>`

擬似要素が、指定された `<custom-ident>` を `view-transition-name` プロパティを通して要素に割り当てることによって作成された固有のビュートランジショングループに一致するようにします。

例
-

```css
::view-transition-image-pair(root) {
  isolation: auto;
}
```

仕様書
---

| Specification |
| --- |
| CSS View Transitions Module Level 1 # ::view-transition-image-pair |

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

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

関連情報
----

* ビュートランジション API
* ビュートランジション API によるスムーズでシンプルなトランジション


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

:-moz-first-node
================

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`:-moz-first-node`** は CSS の擬似クラスで、 Mozilla 拡張であり、他の要素の最初の子要素であるあらゆる要素を表します。 `:first-child` とは異なり、最初の子要素の前に（ホワイトスペース以外の）テキストがあると一致しません。

**メモ:** 要素の先頭にあるホワイトスペースは `:-moz-first-node` の決定において無視されます。

構文
--

```css
:-moz-first-node;
```

例
-

### CSS

```css
span:-moz-first-node {
  background-color: lime;
}
```

### HTML

```html
<p>
  <span>This matches!</span>
  <span>This doesn't match.</span>
</p>

<p>
  Blahblah.
  <span>This doesn't match because it's preceded by text.</span>
</p>
```

### 結果

仕様書
---

どの標準にも含まれていません。

関連情報
----

* `:-moz-last-node`
* `:first-child`


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

:popover-open
=============

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

**`:popover-open`** は CSS の擬似クラスで、ポップオーバー要素（すなわち `popover` 属性のあるもの）が表示中の状態であることを表します。これを使用して、ポップオーバー要素が表示中の場合だけスタイルを適用することができます。

構文
--

```css
:popover-open {
  /\* ... \*/
}
```

例
-

既定では、ポップオーバーはビューポートの中央に現れます。既定のスタイルでは、UA スタイルシートでこのように実現されています。

```css
[popover] {
  position: fixed;
  inset: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
  border: solid;
  padding: 0.25em;
  overflow: auto;
  color: CanvasText;
  background-color: Canvas;
}
```

既定値のスタイルを上書きして、ビューポートの他の場所にポップオーバーが現れるようにするには、上記のスタイルを次のように上書きする必要があります。

```css
:popover-open {
  width: 200px;
  height: 100px;
  position: absolute;
  inset: unset;
  bottom: 5px;
  right: 5px;
  margin: 0;
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # selector-popover-open |

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

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

関連情報
----

* ポップオーバー API


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

border-start-start-radius
=========================

**`border-start-start-radius`** は CSS のプロパティで、要素の論理的な境界の半径を定義します。これは要素の `writing-mode`, `direction`, `text-orientation` に応じて、物理的な境界の半径に対応づけられます。これはテキストの方向や書字方向に依存せずにスタイルを構築する際に便利です。

```css
/\* <length> 値 \*/
/\* 値 1 つの場合は角を円にする \*/
border-start-start-radius: 10px;
border-start-start-radius: 1em;

/\* 値 2 つの場合は角を楕円にする \*/
border-start-start-radius: 1em 2em;

/\* グローバル値 \*/
border-start-start-radius: inherit;
border-start-start-radius: initial;
border-start-start-radius: revert;
border-start-start-radius: unset;
```

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

このプロパティは、要素の block-start と inline-start の間の角に影響します。すなわち、書字方向が `horizontal-tb` で `ltr` の方向であれば、 `border-top-left-radius` プロパティに対応します。

構文
--

### 値

`<length-percentage>`

円の半径または楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の `<length>` データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対する値です。負の数は無効です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | すべての要素。ただし、ユーザーエージェントは `border-collapse` が `collapse` である場合に`table` および `inline-table` 要素に適用する必要はない。内部表要素での動作は、今のところ未定義。。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| パーセント値 | 境界ボックスの対応する寸法に対する相対値 |
| 計算値 | ２つの絶対的な `length` または `percentage` 値 |
| アニメーションの種類 | length または パーセント値, calc(); |

形式文法
----
```

border-start-start-radius =
  <length-percentage [0,∞]>{1,2}

<length-percentage> =
  <length>      |
  <percentage>

```

例
-

### 縦書きの時の境界の丸め

#### HTML

```html
<div>
  <p class="exampleText">Example</p>
</div>
```

#### CSS

```css
div {
  background-color: rebeccapurple;
  width: 120px;
  height: 120px;
  border-start-start-radius: 10px;
}

.exampleText {
  writing-mode: vertical-rl;
  padding: 10px;
  background-color: #fff;
  border-start-start-radius: 10px;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # border-radius-properties |

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

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

関連情報
----

* 対応する物理的プロパティ: `border-top-left-radius`
* `writing-mode`, `direction`, `text-orientation`


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

::cue
=====

**`::cue`** は CSS の擬似要素で、選択された要素内の WebVTT キューに一致します。これにより、 VTT トラック付きのメディアでキャプションや他のキューをスタイル付けすることができます。

```css
::cue {
  color: yellow;
  font-weight: bold;
}
```

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

このプロパティは、あたかも 1 つの部品であるかのように、一連のキュー全体に適用されます。 `background` とその個別指定だけは例外で、各キューに個別に適用されます。これは、ボックスが生成されて予期せずメディアの大きな領域を占めることを避けるためです。

構文
--

Error: could not find syntax for this item利用可能なプロパティ
----------

セレクターにこの要素を含むルールでは、以下の CSS プロパティしか使用することができません。

* `background`
* `background-attachment`
* `background-clip`
* `background-color`
* `background-image`
* `background-origin`
* `background-position`
* `background-repeat`
* `background-size`
* `color`
* `font`
* `font-family`
* `font-size`
* `font-stretch`
* `font-style`
* `font-variant`
* `font-weight`
* `line-height`
* `opacity`
* `outline`
* `outline-color`
* `outline-style`
* `outline-width`
* `ruby-position`
* `text-combine-upright`
* `text-decoration`
* `text-decoration-color`
* `text-decoration-line`
* `text-decoration-style`
* `text-decoration-thickness`
* `text-shadow`
* `visibility`
* `white-space`
例
-

### WebVTT のキューを黒地に白にする

次の CSS はキューのスタイルを設定し、テキストが白に、背景が半透明の黒い矩形になります。

```css
::cue {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
}
```

仕様書
---

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # the-cue-pseudo-element |

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

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

関連情報
----

* ウェブ動画テキストトラックフォーマット (WebVTT)
* `<track>`, `<video>`


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

:-moz-drag-over
===============

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`:-moz-drag-over`** は CSS の擬似クラスで、 Mozilla 拡張であり、 `dragover` イベントが呼び出された時に要素に一致します。

構文
--

```css
:-moz-drag-over;
```

例
-

### HTML

```html
<table border="1">
  <tr>
    <td width="100px" height="100px">Drag Over</td>
  </tr>
</table>
```

### CSS

```css
td:-moz-drag-over {
  color: red;
}
```

### 結果

仕様書
---

いずれの標準にも含まれていません。

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

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

関連情報
----

* Mozilla の CSS 拡張
* HTML ドラッグ＆ドロップ


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

all
===

**`all`** は CSS の一括指定プロパティで、要素のすべてのプロパティを (`unicode-bidi`、`direction`、 CSS カスタムプロパティを除いて) 初期化します。プロパティは初期値または継承値、または他のカスケードレイヤーまたはスタイルシートに由来して指定した値に設定される可能性があります。

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

構成要素のプロパティ
----------

このプロパティは、`unicode-bidi`、`direction`、カスタムプロパティを除くすべての CSS プロパティの一括指定です。

構文
--

```css
/\* グローバル値 \*/
all: initial;
all: inherit;
all: unset;
all: revert;
all: revert-layer;
```

`all` プロパティは、 CSS のグローバルキーワード値のうちの一つで定義します。なお、これらの値は `unicode-bidi` および `direction` プロパティには影響しません。

### 値

`initial`

その要素のすべてのプロパティを初期値に変更するべきであることを指定します。

`inherit`

その要素のすべてのプロパティを継承値に変更するべきであることを指定します。

`unset`

その要素のすべてのプロパティを、既定値が inherit のものは継承値に、そうでなければ初期値に変更するべきであることを指定します。

`revert`

宣言が所属するスタイルシートの出所に応じて動作を指定します。

* 作者オリジンに所属するルールの場合、 `revert` の値でカスケードをユーザーのレベルまでロールバックし、その要素の指定値は、作者レベルのルールが指定されていないかのように計算されます。 `revert` の用途では、作者オリジンはオーバーライドおよびアニメーションのオリジンも含まれます。
* ユーザーオリジンに所属するルールの場合、 `revert` の値でカスケードをユーザーエージェントレベルまでロールバックし、その要素の指定値は、作者レベルまたはユーザーレベルのルールが指定されていないかのように計算されます。
* ユーザーエージェントオリジンでは、 `revert` の値は `unset` と同様に動作します。

`revert-layer`

その要素のすべてのプロパティを、直前のカスケードレイヤーが存在すれば、そこまでカスケードをロールバックすることを指定します。 他にカスケードレイヤーが存在しない場合、要素のプロパティは、現在のレイヤーに一致するルールが存在する場合はそのルール、または直前のスタイルオリジンにロールバックします。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 具体的な初期値なし。 |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | この一括指定が対象とする各プロパティに適用する指定された値のまま。 |
| アニメーションの種類 | この一括指定のそれぞれのプロパティとして (`unicode-bidi` と `direction`) を除いたすべてのプロパティ |

形式文法
----
```

all =
  initial       |
  inherit       |
  unset         |
  revert        |
  revert-layer

```

例
-

この例では、 CSS ファイルには親要素である `<body>` 要素のスタイル設定に加えて、 `<blockquote>` 要素のスタイル設定が格納されています。結果節の様々な出力は、 `<blockquote>` 要素のスタイル設定が `blockquote` ルール内の `all` プロパティに様々な値が適用されたときに、どのように影響されるかを示しています。

### HTML

```html
<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```

### CSS

```css
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
  margin: 0;
  padding: 0;
}

blockquote {
  background-color: skyblue;
  color: red;
}
```

### 結果

#### A. `all` プロパティなし
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```

```
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
}
```

これは `blockquote` ルールの中に `all` プロパティが設定されていない場合のシナリオです。 `<blockquote>` 要素はブラウザーに既定値のスタイル設定を使用し、マージンを与え、スタイルシートを指定します。また、ブロック要素としても振る舞います。続くテキストはその下にあります。

#### B. `all: initial`
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```

```
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: initial;
}
```

`blockquote` ルールで `all` プロパティを `initial` に設定すると、`<blockquote>` 要素はブラウザー既定のスタイル設定を使用しなくなります。これでインライン要素になり（初期値）、 `background-color` は `transparent` （初期値）に、 `font-size` は `medium` に、 `color` は `black` （初期値）になります。

#### C. `all: inherit`
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```

```
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: inherit;
}
```

この場合、 `<blockquote>` 要素はブラウザーの既定のスタイル設定を使用しません。これでブロック要素となり（継承値）、`background-color` は `#F0F0F0` （継承値）、 `font-size` は `small` （継承値）、 `color` は `blue` （継承値）となります。

#### D. `all: unset`
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```

```
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: unset;
}
```

`blockquote` ルールの `all` プロパティに `unset` 値を用いた場合、 `<blockquote>` 要素はブラウザー既定値のスタイル設定を使用しません。なぜなら、 `background-color` は継承されないプロパティであり、`font-size` と `color` は継承されるプロパティだからです、 `<blockquote>` 要素はこれでインライン要素（初期値）、 `background-color` は `transparent` （初期値）となりますが、 `font-size` は `small` （継承値）、 `color` は `blue` （継承値）のままです。

#### E. `all: revert`
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```

```
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: revert;
}
```

`blockquote` ルールの `all` プロパティに `revert` が設定されている場合、`blockquote` ルールは存在しないとみなされ、スタイル設定のプロパティ値は親要素 `<body>` に適用されている値が継承されます。つまり、 `<blockquote>` 要素はブロック要素となり、 `background-color` は `#F0F0F0`、`font-size` は `small`、`color` は `blue` でスタイル設定されます。これらはすべて `body` ルールから継承された値です。

#### F. `all: revert-layer`
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```

```
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: revert-layer;
}
```

この CSS ファイルにはカスケードレイヤーが定義されていないので、 `<blockquote>` 要素は対応する `body` ルールからスタイルを継承します。ここでの `<blockquote>` 要素はブロック要素としてスタイル設定されており、 `background-color` が `F0F0F0` に、 `font-size` が `small` に、 `color` が `blue` に設定されます。 - すべて `body` ルールから継承された値です。このシナリオでは、`all` を `revert-layer` に設定しても、`all` を `revert` に設定した場合と同じ動作をします。

仕様書
---

| Specification |
| --- |
| CSS Cascading and Inheritance Level 4 # all-shorthand |

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

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

関連情報
----

CSS のグローバルキーワード値: `initial`, `inherit`, `unset`, `revert`, `revert-layer`


置換要素 - CSS: カスケーディングスタイルシート

置換要素
====

CSS において、**置換要素**は CSS のスコープの外で表現される要素です。 CSS の整形モデルとは独立して表現される外部オブジェクトです。

もっと簡単な言葉で言い換えれば、コンテンツが現在の文書のスタイルに影響されない要素です。置換要素の位置は CSS を使用して変更することができますが、置換要素自身のコンテンツは違います。 `<iframe>` のような一部の置換要素では、独自のスタイルシートを持つことができますが、親文書のスタイルは継承されません。

CSS が置換要素において影響できることは、要素のボックス内におけるコンテンツの位置の制御に対応するプロパティがあることだけです。詳しい情報はコンテンツボックス内のオブジェクト位置の制御をご覧ください。

置換要素
----

一般的な置換要素は以下の通りです。

* `<iframe>`
* `<video>`
* `<embed>`
* `<img>`

一部の要素は、特定の場合に限って置換要素として扱われます。

* `<option>`
* `<audio>`
* `<canvas>`
* `<object>`
* `<applet>`

HTML 仕様書では `<input>` 要素も置換要素になることがあるとしており、これは `"image"` 型の `<input>` 要素が `<img>` と同様に置換要素であるためです。しかし、他のフォームコントロールは、他の型の `<input>` 要素も含め、明示的に非置換要素として挙げられています (仕様書では、プラットフォームに依存した既定のレンダリングを「ウィジェット」という用語で記述しています)。

CSS の `content` プロパティを使用して挿入されるオブジェクトは*無名置換要素*です。 HTML のマークアップには存在しないので、「無名」です。

置換要素における CSS の使用
----------------

CSS はマージンの計算時や一部の `auto` 値の時など場合によって、特別に置換要素を扱います。

なお、一部の置換要素は、すべてではありませんが、 `vertical-align` のように一部の CSS プロパティで使用される内在的な寸法やベースラインの定義を持っていることがあります。置換要素のみが内在的な寸法を持つことがあります。

### コンテンツボックス内のオブジェクト位置の制御

置換要素内に含まれたオブジェクトが要素のボックスエリア内で、どのように配置されるかを指定するために、特定の CSS プロパティを使用することができます。これらは CSS Images 仕様書で定義されています。

`object-fit`

置換要素の中身のオブジェクトがどのように要素の内包ボックスに合わせられるかを指定します。

`object-position`

要素のボックス内で置換要素の中身のオブジェクトが配置される位置を指定します。

関連情報
----

* HTML 仕様書
* CSS の主要概念:
    + CSS の構文
    + アットルール
    + コメント
    + 詳細度
    + 継承
    + ボックスモデル
    + レイアウトモード
    + 視覚整形モデル
    + マージンの相殺
    + 値
        - 初期値
        - 計算値
        - 使用値
        - 実効値
    + 値の定義構文
    + 一括指定プロパティ


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

margin-inline
=============

The **`margin-inline`** は CSS の一括指定プロパティで、論理的なインライン方向の先頭と末尾のマージンを設定します。これは要素の書字方向やテキストの向きに応じて物理的なマージンに変換されます。

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

構成要素のプロパティ
----------

このプロパティは以下の CSS プロパティの一括指定です。

* `margin-inline-start`
* `margin-inline-end`
構文
--

```css
/\* <length> 値 \*/
margin-inline: 10px 20px; /\* 絶対的な長さ \*/
margin-inline: 1em 2em; /\* テキストの大きさに対する相対値 \*/
margin-inline: 5% 2%; /\* 直近のブロックコンテナーの大きさに対する相対値 \*/
margin-inline: 10px; /\* 先頭と末尾の両方を設定 \*/

/\* キーワード値 \*/
margin-inline: auto;

/\* グローバル値 \*/
margin-inline: inherit;
margin-inline: initial;
margin-inline: revert;
margin-inline: revert-layer;
margin-inline: unset;
```

このプロパティは、 `margin-top` と `margin-bottom`、または `margin-right` と `margin-left` プロパティに、 `writing-mode`, `direction`, `text-orientation` で定義された値にしたがって対応します。

`margin-inline` プロパティは、 1 つまたは 2 つの値を使用して指定します。

* **1 つ**の値が指定された場合は、**先頭と末尾の両方**に同じマージンを適用します。
* **2 つ**の値が指定された場合は、 1 つ目のマージンが**先頭**に、 2 つ目のマージンが**末尾**に指定されます。
### 値

`margin-inline` プロパティは、 `margin` プロパティと同じ値を取ります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `margin-inline-start`: `0`
* `margin-inline-end`: `0`
 |
| 適用対象 | `margin` と同じ |
| 継承 | なし |
| パーセント値 | レイアウトモデルに依存 |
| 計算値 | 一括指定の次の各プロパティとして* `margin-inline-start`: 長さで指定されると相当する絶対的な長さ、パーセント値として指定されると指定値、それ以外では `auto`
* `margin-inline-end`: 長さで指定されると相当する絶対的な長さ、パーセント値として指定されると指定値、それ以外では `auto`
 |
| アニメーションの種類 | length |

形式文法
----
```

margin-inline =
  <'margin-top'>{1,2}

```

例
-

### インライン方向の先頭と末尾のマージンの設定

#### CSS

```css
div {
  background-color: yellow;
  width: 120px;
  height: auto;
  border: 1px solid green;
}

p {
  margin: 0;
  margin-inline: 20px 40px;
  background-color: tan;
}

.verticalExample {
  writing-mode: vertical-rl;
}
```

#### HTML

```html
<div>
  <p>Example text</p>
</div>
<div class="verticalExample">
  <p>Example text</p>
</div>
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-margin-inline |

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

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

関連情報
----

* CSS 論理的プロパティと値
* 対応する物理的プロパティ: `margin-top`, `margin-right`, `margin-bottom`, `margin-left`
* `writing-mode`, `direction`, `text-orientation`


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

border-collapse
===============

**`border-collapse`** は CSS のプロパティで、表 (`<table>`) の中のセルが境界を共有するか分離するかを設定します。

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

セルが折り畳まれている場合 (collapse)、 `border-style` の値で `inset` が `groove` のように動作し、 `outset` が `ridge` のように動作します。

セルが分離されている場合 (separate)、セル間の距離は `border-spacing` プロパティで定義されます。

構文
--

```css
/\* キーワード値 \*/
border-collapse: collapse;
border-collapse: separate;

/\* グローバル値 \*/
border-collapse: inherit;
border-collapse: initial;
border-collapse: revert;
border-collapse: unset;
```

`border-collapse` プロパティは、以下のリストから選択された単一のキーワードで指定します。

### 値

`collapse`

隣接するセルで境界線を共有します (collapsed-border 表レンダリングモデル)。

`separate`

隣接するセルが個別に境界線を持ちます (separated-border 表レンダリングモデル)。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `separate` |
| 適用対象 | `table` および `inline-table` 要素 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

border-collapse =
  separate  |
  collapse

```

例
-

### ブラウザーエンジンのカラフルな表

#### HTML

```html
<table class="separate">
  <caption>
    <code>border-collapse: separate</code>
  </caption>
  <tbody>
    <tr>
      <th>Browser</th>
      <th>Layout Engine</th>
    </tr>
    <tr>
      <td class="fx">Firefox</td>
      <td class="gk">Gecko</td>
    </tr>
    <tr>
      <td class="ed">Edge</td>
      <td class="tr">EdgeHTML</td>
    </tr>
    <tr>
      <td class="sa">Safari</td>
      <td class="wk">Webkit</td>
    </tr>
    <tr>
      <td class="ch">Chrome</td>
      <td class="bk">Blink</td>
    </tr>
    <tr>
      <td class="op">Opera</td>
      <td class="bk">Blink</td>
    </tr>
  </tbody>
</table>
<table class="collapse">
  <caption>
    <code>border-collapse: collapse</code>
  </caption>
  <tbody>
    <tr>
      <th>Browser</th>
      <th>Layout Engine</th>
    </tr>
    <tr>
      <td class="fx">Firefox</td>
      <td class="gk">Gecko</td>
    </tr>
    <tr>
      <td class="ed">Edge</td>
      <td class="tr">EdgeHTML</td>
    </tr>
    <tr>
      <td class="sa">Safari</td>
      <td class="wk">Webkit</td>
    </tr>
    <tr>
      <td class="ch">Chrome</td>
      <td class="bk">Blink</td>
    </tr>
    <tr>
      <td class="op">Opera</td>
      <td class="bk">Blink</td>
    </tr>
  </tbody>
</table>
```

#### CSS

```css
.collapse {
  border-collapse: collapse;
}

.separate {
  border-collapse: separate;
}

table {
  display: inline-table;
  margin: 1em;
  border: dashed 5px;
}

table th,
table td {
  border: solid 3px;
}

.fx {
  border-color: orange blue;
}
.gk {
  border-color: black red;
}
.ed {
  border-color: blue gold;
}
.tr {
  border-color: aqua;
}
.sa {
  border-color: silver blue;
}
.wk {
  border-color: gold blue;
}
.ch {
  border-color: red yellow green blue;
}
.bk {
  border-color: navy blue teal aqua;
}
.op {
  border-color: red;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-border-collapse |

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

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

関連情報
----

* `border-spacing`, `border-style`
* `border-collapse` プロパティは HTML の `<table>` 要素の表示方法を変更します。


テキストの分割と折り返し - CSS: カスケーディングスタイルシート

テキストの分割と折り返し
============

このガイドは CSS で管理することができるテキストのはみ出しの様々な方法を説明します。

テキストのはみ出しとは
-----------

CSS では、非常に長い単語などの切れない文字列がある場合、既定ではインライン方向に小さすぎるコンテナからはみ出します。下の例で、この現象を見ることができます。長い単語が、ボックスの境界を越えて伸びています。

CSS はこのようにあふれて表示させますが、これは他の方法をとるとデータロスが発生するためです。CSS のデータロスとは、コンテンツの一部が消えてしまうことを意味します。そのため、`overflow`の初期値は `visible` であり、あふれたテキストを見ることができます。一般的には、あふれた部分はが汚くても見えた方が良いものです。`overflow` が `hidden` に設定されている場合のように、物が消えたり、トリミングされたりすると、サイトをプレビューしたときに気づかないかもしれません。汚くてもオーバーフローは、少なくとも簡単に見つけることができ、最悪、訪問者は多少奇妙に見えたとしてもコンテンツを見て読むことができます。

次の例では、 `overflow` が `hidden` に設定されている場合に何が起こるかを見てみましょう。

min-content の寸法を探る
------------------

コンテンツを溢れずに含むことができるボックスの最小の寸法を探るには、そのボックスの `width` または `inline-size` プロパティに `min-content` を設定してください。

そのため、 `min-content` を使用すると、ボックスがあふれてしまう可能性があります。もし、ボックスがコンテンツに必要な最小の寸法まで成長し、それ以上大きくならないようにすることが可能であれば、このキーワードを使用することで、その寸法を得ることができます。

長い単語の分割
-------

ボックスのサイズを固定する必要がある場合や、長い単語がはみ出さないようにしたい場合は、`overflow-wrap` プロパティが役立ちます。このプロパティは、単語が長すぎて 1 行に収まらない場合、その単語を分割します。

**メモ:** `overflow-wrap` プロパティは、標準外のプロパティの `word-wrap` と同じように動作します。 `word-wrap` プロパティは、現在ブラウザーでは標準プロパティの別名として扱われています。

別のプロパティとして、`word-break` を試すことができます。このプロパティは、あふれた時点で単語を改行します。単語を改行することで分割せずに表示できる場合でも分割されます。

次の例では、同じ文字列で 2 つのプロパティの違いを比較してみましょう。

これは、文字列に十分なスペースがある場合に、大きなギャップが現れないようにしたい場合に便利です。また、他の要素があって、その直後に改行させたくない場合にも便利です。

以下の例には、チェックボックスとラベルがあります。例えば、ラベルがボックスに対して長すぎる場合には、ラベルを改行したいとします。しかし、チェックボックスの直後では改行してほしくありません。

ハイフンの追加
-------

単語が改行されるときにハイフンを追加するには、CSS の `hyphens` プロパティを使用します。`auto` の値を使用すると、ブラウザーは自由に選択したルールに従って、適切なハイフネーション位置で自動的に単語を区切ります。プロセスをある程度制御するには、値を `manual` にして、ハードまたはソフトブレイク文字を文字列に挿入します。ハードブレイク (`‐`) は、その必要がない場合でも、常に改行します。ソフトブレイク (``) は、改行が必要な場合にのみ改行します。

<wbr> 要素
--------

長い文字列を区切りたい場所がわかっている場合は、HTMLの `<wbr>` 要素を挿入することも可能です。これは、ページ上に長い URL を表示する場合などに便利です。このプロパティを追加することで、文字列を読みやすい場所で改行することができます。

以下の例では、`<wbr>` の位置でテキストが改行されています。

関連情報
----

* HTML の `<wbr>` 要素
* CSS の `word-break` プロパティ
* CSS の `overflow-wrap` プロパティ
* CSS の `hyphens` プロパティ
* Overflow and Data Loss in CSS


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

印刷
==

コンテンツを印刷するときに、ウェブサイトまたはアプリケーションで使い勝手を向上させたい場合があります。考えられるシナリオはいくつかあります。

* 紙の大きさと形状を生かしてレイアウトを調整したい
* (画面とは) 異なるスタイルを利用して、紙の上でのコンテンツの見栄えを良くしたい
* 良い結果をるために、より高解像度の画像を使用したい
* 印刷を始める前にコンテンツの印刷プレビュー版を表示するなど、印刷の使い勝手を調整したい

他にも印刷処理を管理したい場合がありますが、これらは最も一般的なシナリオの一部です。この記事では、ウェブコンテンツの印刷品質を向上させるためのヒントとテクニックを紹介します。

印刷スタイルシートの使用
------------

`<head>` タグの中に次のように追加してください。
```

<link href="/path/to/print.css" media="print" rel="stylesheet" />
```

レイアウトを改善するためのメディアクエリの使用
-----------------------

印刷リクエストの検出
----------

ブラウザーによっては (Firefox 6 以降や Internet Explorer など) コンテンツが印刷を開始することを判断できるように、 `beforeprint` および `afterprint` イベントを送信します。これを使用して、印刷中に表示されるユーザーインターフェイスを調整することができます (例えば、印刷処理中にユーザーインターフェイス要素を表示したり隠したりするなど)。

**メモ:** `window.onbeforeprint` (en-US) および `window.onafterprint` (en-US) を使用してこれらのイベントにハンドラーを割り当てることもできますが、 `EventTarget.addEventListener()` を使用することをお勧めします。

例
-

よくある例をいくつか紹介します。

#### ポップアップウィンドウを開き、終了したら閉じる

ユーザーがコンテンツを印刷した後に popup window (例えば文書の印刷用など) を自動的に閉じたい場合は、次のようなコードで実現できます。

```html
<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>JavaScript Window Close Example</title>
    <script type="text/javascript">
 function popuponclick() {
 my\_window = window.open(
 "",
 "mywindow",
 "status=1,width=350,height=150",
 );
 my\_window.document.write("<html><head><title>Print Me</title></head>");
 my\_window.document.write('<body onafterprint="self.close()">');
 my\_window.document.write(
 "<p>When you print this window, it will close afterward.</p>",
 );
 my\_window.document.write("</body></html>");
 }
 </script>
  </head>
  <body>
    <p>
      To try out the <code>afterprint</code> event, click the link below to open
      the window to print. You can also try changing the code to use
      <code>beforeprint</code> to see the difference.
    </p>
    <p><a href="javascript: popuponclick()">Open Popup Window</a></p>
  </body>
</html>
```

ライブ例を表示

### 外部ページを開かずに印刷する

外部ページを開かずに印刷できるようにしたい場合は、非表示の `<iframe>` (HTMLIFrameElement (en-US) を参照) を利用し、ユーザーがコンテンツを印刷した後で自動的にそれを削除するようにすることで実現できます。以下の例は、 `externalPage.html` という名前のファイルを印刷することができる例です。

```html
<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>MDN Example</title>
    <script type="text/javascript">
 function closePrint() {
 document.body.removeChild(this.\_\_container\_\_);
 }

 function setPrint() {
 this.contentWindow.\_\_container\_\_ = this;
 this.contentWindow.onbeforeunload = closePrint;
 this.contentWindow.onafterprint = closePrint;
 this.contentWindow.focus(); // Required for IE
 this.contentWindow.print();
 }

 function printPage(sURL) {
 var oHiddFrame = document.createElement("iframe");
 oHiddFrame.onload = setPrint;
 oHiddFrame.style.position = "fixed";
 oHiddFrame.style.right = "0";
 oHiddFrame.style.bottom = "0";
 oHiddFrame.style.width = "0";
 oHiddFrame.style.height = "0";
 oHiddFrame.style.border = "0";
 oHiddFrame.src = sURL;
 document.body.appendChild(oHiddFrame);
 }
 </script>
  </head>

  <body>
    <p>
      <span
 onclick="printPage('externalPage.html');"
 style="cursor:pointer;text-decoration:underline;color:#0000ff;"
 >Print external page!</span
 >
    </p>
  </body>
</html>
```

**メモ:** 古いバージョン Internet Explorer は、非表示の `<iframe>` の印刷することができません。

関連情報
----

* `window.print`
* `window.onbeforeprint` (en-US)
* `window.onafterprint` (en-US)
* Media queries
* `@media`


アクセシビリティのためのメディアクエリーの使用 - CSS: カスケーディングスタイルシート

アクセシビリティのためのメディアクエリーの使用
=======================

**メディアクエリー**は、障碍を持ったユーザーがウェブサイトをより理解することを支援するためにも利用することができます。

動きの縮減
-----

点滅やフラッシュのアニメーションは、注意欠陥障害 (ADHD) のような認知障害を持った人々にとって問題になる可能性があります。加えて、特定の種類の動きが前庭障害、てんかん、片頭痛、スコピック感受性などを引き起こす可能性があります。

また、この方法でユーザー設定によってアニメーションの停止を切り替えると、バッテリーが少ない、または性能が低い携帯電話やコンピューターを使用しているユーザーにも便益があります。

### 構文

`no-preference`

システムが把握している設定をユーザーが行っていないことを示します。

`reduce`

ユーザーがシステムに、動作やアニメーションを最小量にして、必要以外の動作を削除したほうが好ましいと通知したことを示します。

### 例

この例は、アクセシビリティ設定で動きを抑制するよう設定しないと煩いアニメーションが表示されます。

#### HTML

```html
<div class="animation">animated box</div>
```

#### CSS

```css
.animation {
  -webkit-animation: vibrate 0.3s linear infinite both;
  animation: vibrate 0.3s linear infinite both;
}

@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
  }
}
```

高コントラストモード
----------

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**-ms-high-contrast** は CSS のメディア特性、 Microsoft 拡張であり、アプリケーションが高コントラストモードで表示されているかどうか、どの配色で表示されているかを記述します。

これは弱視やコントラストに敏感な問題を抱えるユーザーだけでなく、直射日光下のコンピューターや携帯電話で作業をしているユーザーにも役立ちます。

構文
--

**`-ms-high-contrast`** メディア特性は、以下の値のうちの一つで指定します。

### 値

`active`

配下の整形規則は、システムが任意の配色の高コントラストモードの時に適用されることを示します。

`black-on-white`

配下の整形規則は、システムが白地に黒の高コントラストモードの時に適用されることを示します。

`white-on-black`

配下の整形規則は、システムが黒地に白の高コントラストモードの時に適用されることを示します。

例
-

以下の宣言は、それぞれ任意の配色、白地に黒、黒地に白の高コントラストモードで表示されているアプリケーションに一致します。

```css
@media screen and (-ms-high-contrast: active) {
  /\* すべての高コントラストの整形規則 \*/
}
@media screen and (-ms-high-contrast: black-on-white) {
  div {
    background-image: url("image-bw.png");
  }
}
@media screen and (-ms-high-contrast: white-on-black) {
  div {
    background-image: url("image-wb.png");
  }
}
```


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

メディアクエリーの使用
===========

**メディアクエリー**は、一般的な端末の種類 (プリンタと画面など)や特定の特性 (画面の解像度やブラウザーのビューポートの幅など) に応じてサイトやアプリを変更したいときに便利です。

メディアクエリーは以下の用途で使用されます。

* CSS の `@media` および `@import` アットルールにより、条件付きでスタイルを適用する。
* `<link>`, `<link>`, `<source>`, などの HTML 要素で `media=` 属性を付けて特定のメディアを対象とする。
* メディアの状態の検査と監視をするために、JavaScript で `Window.matchMedia()` および `MediaQueryList.addListener()` (en-US) メソッドを使用する

**メモ:** このページの例では説明のために CSS の `@media` を使用していますが、基本構文はすべての種類のメディアクエリーで共通です。

構文
--

メディアクエリーは、任意の*メディア種別*と任意の数の*メディア特性*の式で構成されます。*論理演算子*を使用して、複数のクエリーを様々な形で組み合わせることができます。メディアクエリーは大文字小文字の区別がありません。

* メディア種別は、メディアクエリーを適用する機器の大まかな分類を `all`, `print`, `screen`, `speech` で定義します。
 種別は省略可能 (`all` と見なされる) ですが、 `not` や `only` 論理演算子を使用する場合は例外です。
* メディア特性は、ユーザーエージェント、出力機器、環境などの特定の特徴を記述します。 `any-hover`, `any-pointer`, `aspect-ratio`, `color`, `color-gamut`, `color-index`, `device-aspect-ratio`
非推奨
, `device-height`
非推奨
, `device-width`
非推奨
, `display-mode`, `forced-colors`, `grid`, `height`, `hover`, `inverted-colors`, `monochrome`, `orientation`, `overflow-block`, `overflow-inline`, `pointer`, `prefers-color-scheme`, `prefers-contrast`, `prefers-reduced-motion`, `resolution`, `scripting`, `update`, `width` があります。
 例えば、`hover` という機能では、端末が要素の上で停止したことを検出できるかどうかをクエリーで検査することができます。
 メディア特性式は、その存在や値をテストするもので、完全にオプションです。
 それぞれのメディア特性式は括弧で囲む必要があります。
* 論理演算子は、複合的なメディアクエリーを構成するために使用します。 `not`, `and`, `only` があります。
 また、複数のメディアクエリーをカンマで区切って 1 つのルールにまとめることもできます。

 メディア種別（指定されている場合）が文書を表示する端末と照合され、かつ、すべてのメディア機能式が `true` と計算されると、メディアクエリーは true と計算されます。
 未知のメディア種別を含むクエリは常に false となります。

**メモ:** `<link>` タグにメディアクエリーがついていた場合、スタイルシートはクエリーが `false` を返したとしてもダウンロードされますが、ダウンロードの優先度ははるかに低くなります。
 ただし、その内容は、クエリーの結果が `true` にならない限り適用されません。
 なぜこのようになるかは、 Tomayac 氏のブログ Why Browser Download Stylesheet with Non-Matching Media Queries に書かれています。

メディア種別を対象にする
------------

メディア種別は、その機器の一般的な分類を記述します。ウェブサイトは一般的に画面を想定してデザインされていますが、プリンターや、音声ベースのスクリーンリーダーのような特殊な機器を対象としたスタイルを作成したい場合もあるでしょう。例えば、この CSS はプリンターを対象としています。

```css
@media print { ... }
```

複数の機器を対象にすることもできます。例えば、この `@media` ルールは 2 つのメディアクエリーを使用して、画面とプリンターの両方の端末を対象としています。

```css
@media screen, print { ... }
```

すべてのメディア種別の一覧は、メディア種別を参照してください。とても大まかな用語で端末を記述するため、数はわずかしかありません。もっと具体的な属性で対象にするには、代わりに*メディア特性*を使用してください。

メディア特性を対象にする
------------

 メディア特性は、ユーザーエージェント、出力端末、環境などの特定の特徴を記述します。
 例えば、画面の広いモニター、マウスを使用したコンピューター、暗い状況で使用される端末などに対して特定のスタイルを適用することができます。
 この例は、ユーザーの*主な*入力手段（マウスなど）が要素の上で停止したことを検出できる場合にスタイルを適用します。

```css
@media (hover: hover) { ... }
```

多くのメディア特性は*範囲特性*であり、 "min-" または "max-" の接頭辞をつけて「最小条件」または「最大条件」の制約を表現します。例えば、この CSS はブラウザーのビューポートの幅が 12450px 以下である場合のみ、スタイルを適用します。

```css
@media (max-width: 12450px) { ... }
```

値を指定せずにメディア特性クエリーを作成した場合、特性の値がゼロ (または Level 4 では `none`) ではない場合に中のスタイルが使用されます。例えば、この CSS はカラー画面を持つ任意の端末に適用されます。

```css
@media (color) { ... }
```

ブラウザーを実行している端末である特性が適用されない場合、メディア特性に向けた式は常に偽です。例えば、以下のクエリーの中のスタイルは、音声のみの端末には画面のアスペクト比がないので、決して使われません。

```css
@media speech and (aspect-ratio: 11/5) { ... }
```

その他のメディア特性の例については、それぞれの特性のリファレンスページを参照してください。

複合メディアクエリーの作成
-------------

複数の条件に依存するメディアクエリーを作成したくなる場合があるかもしれません。これは、 `not`, `and`, `only` の**論理演算子**の出番です。その上、複数のメディアクエリーを**カンマ区切りのリスト**で結合することができます。これによって、同じスタイルを異なる場面で適用することができます。

 以前の例で、すでに `and` 演算子がメディア*種別*とメディア*特性*をグループ化するために使用されているのを見ました。
 `and` 演算子は、複数のメディア特性を 1 つのメディアクエリーに結合することもできます。一方で `not` 演算子は、メディアクエリーを反転し、基本的に普通の意味とは逆になります。
 `only` 演算子は古いブラウザーでスタイルが適用されるのを防止します。

**メモ:** 多くの場合、 `all` メディア種別が他のタイプが指定されない場合に既定で使用されます。
 しかし、 `not` または `only` 演算子を使用する場合は、メディア種別を明示的に指定する必要があります。

### 複数の種別または特性の組み合わせ

`and` キーワードはメディア特性をメディア種別、*または*他のメディア特性に結合します。この例は2つのメディア特性を結合して、スタイルを横長で幅が 30em 以上ある端末に制限します。

```css
@media (min-width: 30em) and (orientation: landscape) { ... }
```

スタイルを画面に限定する場合は、メディア特性に `screen` メディア種別を結合します。

```css
@media screen and (min-width: 30em) and (orientation: landscape) { ... }
```

### 複数のクエリーの検査

カンマ区切りのリストを使うと、ユーザーの端末が様々なメディア種別、特性、状態のいずれか一つに一致する場合にスタイルを適用させることができます。例えば、以下のルールはユーザーの端末の高さが 680px 以上*または*画面が縦長モードであるときにスタイルが適用されます。

```css
@media (min-height: 680px), screen and (orientation: portrait) { ... }
```

上記の例について言えば、もしユーザーがページの縦が 800px のプリンターを持っていた場合、最初のクエリーが適用されるので media ステートメントは真を返します。同様に、ユーザーが縦長モードでビューポートの高さが 480px のスマートフォンを使っていた場合、2番目のクエリーが適用され、 media ステートメントはやはり真を返します。

### クエリーの意味の反転

`not` キーワードはメディアクエリー全体の意味を反転します。これは、適用される特定のメディアクエリーを単純に反転します。
 (従って、メディアクエリーのカンマ区切りのリストにあるそれぞれのメディアクエリーには適用されません。)
 `not` キーワードは個別の特性クエリーに対して使用することができず、クエリー全体のみを反転します。 `not` は以下のクエリーの最後に評価されます。

```css
@media not all and (monochrome) { ... }
```

... よって、上記のクエリーは次のように評価されます。

```css
@media not (all and (monochrome)) { ... }
```

... このようにはなりません。

```css
@media (not all) and (monochrome) { ... }
```

他の例を挙げます。以下のメディアクエリーは、

```css
@media not screen and (color), print and (color) { ... }
```

... 次のように評価されます。

```css
@media (not (screen and (color))), print and (color) { ... }
```

### 古いブラウザーとの互換性の維持

`only` キーワードは、メディア特性がついたメディアクエリーに対応していない古いブラウザーで、そのスタイルが適用されるのを防ぎます。*最近のブラウザーでは効果がありません。*

```css
@media only screen and (color) { ... }
```

Level 4 での構文の拡張
---------------

 Media Queries Level 4 仕様書では、例えば幅や高さについて、よりすっきりとした "range" 型を持つ特性を使ってメディアクエリーを作れるよう構文が拡張されました。
 Level 4 はこのようなクエリーを書くために*範囲コンテキスト*を追加しています。例えば、幅について `max-` の特性を使用する場合は、以下のように書くことができます。

**メモ:** Media Queries Level 4 仕様は、最新のブラウザーはそれなりに対応していますが、一部のメディア機能には十分に対応していません。詳細は `@media` ブラウザー互換性一覧表を参照してください。

```css
@media (max-width: 30em) { ... }
```

Media Queries Level 4 では、これを次のように書くことができます。

```css
@media (width <= 30em) { ... }
```

`min-` および `max-` を使用すると、次のようにして幅が2つの値の間にあるかどうかを検査することができます。

```css
@media (min-width: 30em) and (max-width: 50em) { ... }
```

Level 4 の構文に変換すると、次のようになります。

```css
@media (30em <= width <= 50em ) { ... }
```

また、 Media Queries Level 4 では **and**, **not**, **or** を伴う完全な論理代数を使ったメディアクエリーの組み合わせの方法も追加されました。

### `not` による特性の否定

`not()` を使用してメディア特性を囲むと、クエリーのその特性を否定します。例えば、 `not(hover)` は端末でホバーができない場合に一致します。

```css
@media (not(hover)) { ... }
```

### Testing for multiple features with `or`

`or` を使用して複数の特性の中の一つと一致するか検査することができ、特性のうちの何れかが true であれば `true` になります。例えば、次のクエリーは端末がモノクロ画面である、またはホバーができるかどうかを検査します。

```css
@media (not (color)) or (hover) { ... }
```

関連情報
----

* プログラムからのメディアクエリーの検査
* CSS Animations Between Media Queries
* Mozilla 拡張メディア特性
* WebKit 拡張メディア特性


プログラムによるメディアクエリーの評価 - CSS: カスケーディングスタイルシート

プログラムによるメディアクエリーの評価
===================

DOM では、メディアクエリーの結果を `MediaQueryList` インターフェイスおよびそのメソッドやプロパティを用いてプログラムからで調べることができる機能を備えています。`MediaQueryList` オブジェクトを作成すると、クエリーの結果を確認したり、結果が変化したときに自動的に通知を受け取ったりすることができます。

メディアクエリーリストの作成
--------------

クエリーの結果を評価できるようにするのに先立ち、メディアクエリーを示す `MediaQueryList` オブジェクトを作成する必要があります。オブジェクトを作成するには、`window.matchMedia` メソッドを用います。

例えば、端末が横置きか縦置きかを調べるクエリーリストを設定したい場合は、以下のようにします。

```js
const mediaQueryList = window.matchMedia("(orientation: portrait)");
```

クエリーの結果の確認
----------

メディアクエリーリストを作成したら、その `matches` プロパティの値を参照することで、クエリーの結果を確認することができます。

```js
if (mediaQueryList.matches) {
  /\* 現在ビューポートが縦長である \*/
} else {
  /\* 現在ビューポートが縦長ではない、すなわち横長である \*/
}
```

クエリーの通知の受信
----------

クエリの評価結果の変更を継続的に認識する必要がある場合、クエリーの結果をポーリングするよりも、リスナーを登録する方が効率的です。これを行うには、`MediaQueryList` オブジェクトの `addEventListener()` メソッドを呼び出し、メディアクエリーのステータスが変化したとき（例えば、メディアクエリーのテストが `true` から `false` になったとき）に呼び出すコールバック関数を指定します。

```js
// クエリーリストを作成する。
const mediaQueryList = window.matchMedia("(orientation: portrait)");

// イベントリスナーのコールバック関数を定義する。
function handleOrientationChange(mql) {
  // …
}

// 向き変更時のハンドラーを一度実行する。
handleOrientationChange(mediaQueryList);

// コールバック関数をリスナーとしてクエリーリストに追加する。
mediaQueryList.addEventListener("change", handleOrientationChange);
```

このコードでは端末の向き (orientation) を評価するメディアクエリーリストを作成し、次にリスナーを追加しています。リスナーを定義した後、そのリスナーを直接一度呼び出しています。これにより、リスナーが現在の端末の向きを基にして初期状態の調整を行うことができます（そうしないと、コードでは端末の初期状態が縦置きと想定しているが実際は横置きであるような場合に、不整合が発生します）。

次の `handleOrientationChange()` メソッドで、クエリーの結果の確認や端末の向きが変わったときに必要な処理を行います。

```js
function handleOrientationChange(evt) {
  if (evt.matches) {
    /\* 現在ビューポートが縦長 \*/
  } else {
    /\* 現在ビューポートが横長 \*/
  }
}
```

上記では、パラメーターを `evt`（`MediaQueryListEvent` (en-US) 型のイベントオブジェクトであり `media` (en-US) と `matches` (en-US) プロパティも含む）として定義しているので、`MediaQueryList` に直接アクセスするか、イベントオブジェクトにアクセスすることで、これらの機能を問い合わせることができます。

クエリーの通知の終了
----------

メディアクエリーの値の変更に関する通知を受け取らないようにするには、`MediaQueryList` に対して `removeEventListener()` を呼び出し、先に定義したコールバック関数の名前を渡します。

```js
mediaQueryList.removeEventListener("change", handleOrientationChange);
```

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

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

関連情報
----

* メディアクエリーの使用
* `window.matchMedia()`
* `MediaQueryList`
* `MediaQueryListEvent` (en-US)


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

フレックスボックスと他のレイアウト方法の関係
======================

この記事ではフレックスボックスが他の CSS モジュールとどのように組み合わせられるかを見ていきます。フレックスボックスについて学びたいときに気をつけておくべき仕様を明らかにし、またなぜフレックスボックスが他のモジュールと異なったものであるかという点についても明確にします。

**メモ:** CSS のバージョン 1 と 2 は、すべての CSS を長大な一つの文書に定義している単一の仕様でした。 CSS が機能の豊富な言語になるに従って、 CSS の各機能がそれぞれ異なるスピードで変化するため、一つの巨大な仕様をメンテナンスしていくことが問題になってきました。そこで CSS はモジュール化され、現在では個別の CSS 仕様が異なるモジュールとして CSS 全体を構成しています。これらのモジュールは互いに関係し合っていますが、それぞれ異なる開発ステージにあります。

ボックス配置モジュール
-----------

多くの人にとってフレックスボックスに着目し始めた最初の理由は、フレックスコンテナー内でフレックスアイテムを適正に配置する機能があるためです。フレックスボックスはアイテムの交差軸上での位置合わせを行ったり、主軸上での端揃えを行うためのプロパティを提供しています。

これらのプロパティは、フレックスボックスの仕様として生まれましたが、現在では Box Alignment 仕様書の一部でもあります。この仕様はフレックスボックスに限らない、すべてのレイアウトにおいて配置がどのように動作するかについての詳細を記しています。ボックス配置は位置合わせや端揃えについて扱い、また軸に沿った余白の分配についても扱っています。

ボックス配置に含まれているプロパティがフレックスボックス仕様においても詳細に記述され残っているのは、すべてのレイアウトタイプにおける配置方法の詳細を記さなければいけないボックス配置によって、フレックスボックス仕様の完成が遅れることのないようにするためです。フレックスボックス仕様には、将来 Box Alignment Level 3 が完成した際には、フレックスボックス仕様の定義はボックス配置の定義に取って代わられるというメモがあります。

>
>
>  "メモ: 配置のためのプロパティは CSS Box Alignment [CSS-ALIGN-3] 中で定義されていますが、仕様策定を遅らせうるような依存関係を持たせないために、Flexible Box Layout にも同様のプロパティの定義が重複して掲載されています。これらのプロパティは CSS Box Alignment Level 3 が完成し、他のレイアウトモードへの効果を定義するまでは、flex レイアウトのみに適用されます。さらに、Box Alignment モジュールにて定義されるすべての新しい値は Flexible Box Layout にも適用されます。言い換えると、Box Alignment モジュールの完成後には、Box Alignment モジュールでの定義がここでの定義に取って代わるということです。"
>  (訳注: https://www.w3.org/TR/css-flexbox-1/#alignment より引用)
>
>
>
>

このガイドの後の記事「フレックスコンテナー内のアイテムの配置」では、フレックスアイテムに適用できるボックス配置プロパティについて詳細に見ていきます。

書字方向
----

「フレックスボックスの基本概念」の記事で、フレックスボックスが**書字方向対応**であることに触れました。書字方向については CSS の Writing Modes 仕様書で詳細に記されており、国によって異なる様々な書字方向にどのように CSS が対応しているか明らかにしています。書字方向によって文書中にレイアウトされるブロックの方向が変わることが、フレックスレイアウトにどのような影響を及ぼすかについて気を配らなければなりません。**ブロック**方向と**インライン**方向について理解することが、新しいレイアウト方法の鍵となります。

コンテンツが異なる書字方向の言語で書かれてるからという理由以外でも、文書の書字方向を変更したい場合があると知っておくことも大切です。各書字方向についての詳細な説明と、他言語のコンテンツのためあるいはクリエイティブな理由のために書字方向を使う方法については、この記事を参照してください。

### 書字方向

Writing mode 仕様では `writing-mode` プロパティのために以下の値を定義しており、特定の書字方向においてコンテンツがブロック内にレイアウトされる方向と、ブロックがページ内で配置される方向が適合するよう変更するために使えます。フレックスレイアウトに何が起こるかを理解するために、以下の例を変更してみてください。

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

`sideways-rl` と `sideways-lr` の対応は現時点では Firefox のみということに注意してください。また `writing-mode` とフレックスボックスに関しての既知の問題がいくつかあります。ブラウザーの対応状況については MDN の書字方向のドキュメントに情報があります。しかし、もしレイアウトのために書字方向を設定する予定であれば、それがどのような結果になるか注意深くテストすることが推奨されます。比較的簡単に、文字が読みにくくなってしまうからです。

CSS の `writing-mode` プロパティを文書全体の書字方向を変更するために使うことはあまりないでしょう。通常は HTML 上で `html` 要素に `dir` 属性と `lang` 属性を指定することで、文書の言語とテキスト方向を指定します。それによって CSS が読み込まれなかったとしても文書を正しく表示することができます。

フレックスボックスと他のレイアウト方法
-------------------

フレックスボックス仕様には、他のレイアウト方法を使用していて、それからフレックスアイテムになった場合に起こることの定義が含まれています。例えば `float` 設定されている要素がありその親要素がフレックスコンテナーとなった場合について、またあるいは、フレックスコンテナーがレイアウトの一部としてどのように振る舞うかについて記載されています。

`display: flex` に設定された要素は、他の包含ブロックを構成するブロックレベルコンテナーとほとんど同じように振る舞います。浮動要素が侵入せず、コンテナーのマージンは相殺されません。

フレックスアイテムについては、ある要素は浮動 (`float`) や解除 (`clear`) が設定されていて、その上で親要素に `display: flex` が設定されたためにフレックスアイテムとなった場合、浮動と解除のいずれも無効になり、浮動が配置される通常のフローからは外れます。`inline-block` やテーブルレイアウトでの位置合わせのために `vertical-align` プロパティを使用している場合、このプロパティは作用しなくなります。代わりにフレックスボックスの配置用プロパティを使うことができます。

次の例では、子要素は浮動設定されており、コンテナーには `display: flex` が設定されています。`display: flex` を削除すると、解除が適用されていないため `.box` が折りたたまれます。再度 `display: flex` を適用すると折りたたみは起こりません。これは子要素がフレックスアイテムに変換されたために、浮動が適用されなくなったためです。

フレックスボックスとグリッドレイアウト
-------------------

CSS グリッドレイアウトとフレックスボックスは、ほかのレイアウト方法を上書きするという観点ではおおむね同じように振る舞います。しかし、フレックスボックスの方が古いブラウザーでも比較的サポートされているため、フレックスボックスをグリッドレイアウトのフォールバックとして使いたいときがあるかもしれません。このやり方はうまく動きます。フレックスアイテムがグリッドアイテムになるとき、そのアイテムに設定されている `flex` プロパティは無視されるようになります。

ボックス配置プロパティは、両レイアウト方法をまたいで使用することができ、グリッドレイアウトのフォールバックとしてフレックスボックスを使う場合にもうまくいきます。

### フレックスとグリッドの違いは？

フレックスボックスと CSS グリッドレイアウトの違いは何か？なぜところどころ同じことをしているように見える 2 つの仕様がわざわざあるのか？というのはよくある疑問です。

この疑問に対する最も素直な答えは、仕様自体で定義されています。一方のフレックスボックスは一次元のレイアウト方法で、他方のグリッドレイアウトは二次元のレイアウト方法だということです。以下の例はフレックスレイアウトを使っており、基本コンセプトの記事で述べたようにフレックスアイテムは折り返すことができますが、折り返された場合にはそれぞれの行が別のフレックスコンテナーとなります。余白の分配の際にほかの行のアイテム配置については考慮されず、ほかの行との間でのアイテムの位置を揃えようともしません。

同様のレイアウトをグリッドで作成すると、行と列の両方を制御することができます。

これらの例はフレックスボックスとグリッドの主要な差異を示しています。グリッドレイアウトではサイズの指定の大部分はコンテナーに対して行い、トラックを組み上げてそこにアイテムを配置していきます。フレックスボックスではフレックスコンテナーを作りその方向を決めますが、アイテムのサイズに関する制御はアイテム自体に行っていくことになります。

場合によってはいずれのレイアウト方法でも適切に使えるかもしれませんが、この両方を自信を持って使えるようになるにつれて、それぞれのレイアウト方法が得意とするレイアウトの要求が異なっていることがわかってくるでしょう。そして最終的には両方のレイアウト方法を使うことになるでしょう。ひとつの正解や不正解があることはほとんどありません。

基本的なルールとして、折り返しされたフレックスコンテナーの一行の中のアイテムを、上の行のアイテムの位置と揃えるためにフレックスアイテムに幅を設定しようとするときには、二次元レイアウトがどうしても欲しくなることがあります。そのような場合には CSS グリッドレイアウトを使ったほうがよいでしょう。小さなコンポーネントにはフレックスボックスを使い、大きいコンポーネントにはグリッドレイアウトを使うべきというのは事実ではありません。とても小さいコンポーネントであっても二次元になることもあれば、大きなレイアウトを一次元のレイアウトで表現することが適している場合もあります。今はレイアウト方法を選べるようになったので、その利点を生かすためにいろいろと試してみてください。

グリッドとフレックスボックスのさらに詳しい比較については「グリッドレイアウトと他のレイアウト方法との関係」の記事を参照してください。この記事ではグリッドレイアウトがフレックスレイアウトと異なっている多くの点について詳述し、またグリッドレイアウトの持つグリッド上のアイテムのレイヤー機能などの追加機能について実例を示しています。また、どちらのレイアウト方法を選ぶべきかを決める手助けにもなるでしょう。

フレックスボックスと display: contents
----------------------------

`display` プロパティの値 `contents` は、仕様書の中で以下のように述べられている新しい値です。

>
>
>  「要素自体はボックスを生成しませんが、その子要素や擬似要素については通常と変わらずボックスを生成します。ボックス生成とレイアウトにおいては、この要素はその子要素や擬似要素によって置き換えられたように扱わなければなりません」
>  (訳注: https://www.w3.org/TR/css-display-3/#box-generation より引用)
>
>
>
>

`display` のこの値はボックス生成を制御し、ページ上に表示されスタイリングすることができるボックスをその要素が生成すべきか、または通常生成されるボックスは削除して子要素を親要素が元々加わっていたレイアウト方法に引き上げて参加させるべきかを制御します。これについては例を見たほうがわかりやすいでしょう。

以下の例では、フレックスコンテナーに 3 つの子要素があります。そのうちの 1 つにはさらに 2 つのネストした子要素があります。ネストした子要素は通常、フレックスレイアウトの構成に含まれません。フレックスレイアウトはフレックスコンテナーの直下の子要素のみに適用されます。

ここで `display: contents` をネストした要素のラッパーに追加することで、このラッパー要素がレイアウトから消え、2 つのネストした子要素がフレックスコンテナーの直下の要素であった時のようにレイアウトされます。`display: contents` を削除してみると元に戻ることを確認できます。

レイアウト上からボックスが削除されるだけで、レイアウト以外の観点ではこのネストした子要素が直下の子要素にならない点には注意が必要です。例では直下の子セレクターを使ってフレックスアイテムに背景色とボーダーを設定しているのですが、ネストした子要素には適用されないことが以下の例でわかります。フレックスアイテムとしてレイアウトはされますが、直下の子要素ではないため他のスタイリングまでは適用されません。

**警告:** 現在のほとんどのブラウザーの実装では、`display: contents` を持つ要素をアクセシビリティツリーから削除します（ただし、子孫は残ります）。これにより、要素自体がスクリーンリーダー技術でアナウンスされなくなります。これは仕様書によれば正しくない動作です。 `display: contents` を参照してください。

また、ボックスを削除した場合には、それを例えば背景色をネストした子要素に適用するために使用することはできません。今回の例において `display: contents` を削除すると、削除されていた直下の子要素がオレンジの背景色になっていることがわかります。この背景色はボックスが消えると同時に消えます。

`display: contents` のブラウザーの対応は限られていますが、このデモを動かすために必要です。 Firefox はすでに `display: contents` に対応しており、Chrome も実装しています。ブラウザーの対応が進めば、意味上の理由でマークアップが必要だが生成されてしまうボックスを表示したくないという場合において、この機能は大変有用なものになるでしょう。


フレックスボックスの典型的な用途 - CSS: カスケーディングスタイルシート

フレックスボックスの典型的な用途
================

このガイドでは、フレックスボックスの一般的な使用用途（フレックスボックスが他のレイアウト方法よりも有意義である場合）について見ていきます。

なぜフレックスボックスを選ぶのか？
-----------------

ブラウザーが完全対応しているならば、アイテムの集まりをある方向へ並べる用途にはフレックスボックスが適しています。アイテムを並べる際には、コンテナーの内部でのアイテムの寸法や、アイテム同士の余白を調節したくなると思います。フレックスボックスはそのような用途のために設計されています。フレックスボックスと CSS グリッドレイアウトとの違いについては フレックスボックスと他のレイアウト方法の関係 をご覧ください。そこでは、フレックスボックスが CSS レイアウトの全体像にどのように適合しているのかを説明しています。

現状では、グリッドレイアウトのほうが適しているけれどもそれを使えない、という場面でもフレックスボックスはよく使われます。また、アイテムを整列する手段としても使われます。これは、ボックス配置がブロック要素のレイアウト方法として実装されれば解決するでしょう。このガイドでは、現状での典型的なフレックスボックスの使用例を紹介します。

ナビゲーション
-------

ナビゲーションのよくあるパターンとして、水平な棒状にリストを表示するというものがあります。このパターンは見た目とは裏腹に、フレックスボックスの登場以前は実現が難しいものでした。フレックスボックスならばとても簡単であり、うってつけの出番だと言えます。

水平方向に表示したいアイテム群がある場合、空間が残ることがあります。この空間をどうするかを決めなければなりませんが、いくつかの選択肢があります。アイテムの外側に空間を表示して、アイテムの間や周囲に余白を設けるか、アイテムの内側に空間を吸収して、アイテムを伸長してこの空間を占めるようにするか、どちらかにする必要があります。

### アイテムの周囲に余白を分配

アイテムの間または周囲に余白を分配するには、フレックスボックスの配置プロパティと `justify-content` プロパティを使います。このプロパティの詳細については、フレックスコンテナー内のアイテムの配置をご覧ください。そこでは、主軸におけるアイテムの配置について説明しています。

下記のライブ例では、アイテムをそれぞれ本来の大きさで表示しています。また、 `justify-content: space-between` によって、アイテム同士の間に同じ幅の余白を配置しています。値に `space-around` や、ブラウザーが対応している場合は `space-evenly` を指定することで、余白の配置方法を変えることができます。 `flex-start` で余白をアイテム群の後ろに配置したり、 `flex-end` で余白をアイテム群の前に配置したり、 `center` でアイテム群をナビゲーションの中央に配置したりすることもできます。

### アイテムの内側に余白を分配

ナビゲーションでのもう一つのパターンは、余白をアイテムの間ではなく、アイテム自身の内部に配置することです。この場合は、 `flex` プロパティを使うことで、アイテムを互いの比率を保ったまま伸縮することができます。主軸方向のフレックスアイテムの比率の制御に書かれている通りです。

もしナビゲーションアイテムの size プロパティを尊重しつつ、利用できる空間を均等に共有したいのであれば、 `flex: auto` を使用することができます。これは `flex: 1 1 auto` の一括指定で、すべてのアイテムは flex-basis が auto の状態から伸縮します。これは、より大きなアイテムは、利用できる空間の大きさの割り当てが他と同じだけであったとしても、より大きなサイズから始めるので、より大きな空間を占めることということです。

下記のライブサンプルの `flex: auto` を `flex: 1` に変えてみてください。これは `flex: 1 1 0` の短縮版で、すべてのアイテムの幅が同じになります。なぜなら、 flex-basis が 0 となって空間が均等に分配されるからです。

ナビゲーションの分割
----------

主軸（横軸）でアイテムを整列するもうひとつの方法は、マージンを auto にすることです。これにより、一方のアイテム群を左揃えにして別のアイテム群を右揃えにする、というナビゲーションバーのデザインパターンが可能になります。下記の例では、 auto マージンを使用した主軸上での配置に書かれている、マージンを auto にする技法を使っています。

アイテムは、フレックスボックスの初期動作である `flex-start` で主軸に配置されています。 `gap` プロパティを使用してアイテム間にすき間を作成しています。そして、左マージンを auto にすることで、最後のアイテムを右に配置しています。このクラスをあるアイテムから別のアイテムに移動させることで、分割される位置を変更することができます。

アイテムの中央揃え
---------

フレックスボックスの登場以前、開発者たちは「ウェブデザインで最も難しいのは垂直方向の中央揃えだ」と冗談を言っていました。下記のライブ例のとおり、フレックスボックスの配置プロパティを使用することで、簡単に解決できるようになりました。

配置では、 `flex-start` でアイテムを先頭に、 `flex-end` で末尾に配置することができます。

将来、ボックス配置の各プロパティがブロック要素のレイアウト方法として完全に実装されれば、単一のアイテムの中央揃えのためにフレックスコンテナーを作る必要はなくなります。しかし現状では、1 つのものを別のものの中で正確に中央に配置したければ、フレックスボックスを使うことになります。上記の例のように、コンテナーをフレックスコンテナーとして扱ってフレックスコンテナーに `align-items` を指定するか、フレックスアイテム自身に `align-self` を指定してください。

フッターが下端に張り付くカード
---------------

フレックスボックスや CSS グリッドを使ってコンテナー内のカード状の部品を並べて配置する場合、それらの制御はコンテナーの直下の要素であるカード自身にしか及びません。どういうことかと言うと、各カードの中身の量が異なる場合、カードはグリッド領域やフレックスコンテナーの高さに引き伸ばされます。そして、カードの内部では通常のブロックレイアウトが用いられます。つまり、中身の量が少ないカードでは、カードのフッターはカードの下端に張り付くのではなく、フッターが下端から浮き上がってしまいます。

![2 枚のカード部品は、部品の内部がラッパーと一緒に伸びることはない。](/ja/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox/flex-cards.png)

フレックスボックスはこれを解決できます。カード自身もフレックスコンテナーにして、 `flex-direction``: column` を指定します。そしてカードの本文領域に `flex: 1` を指定します。これは `flex: 1 1 0` の一括指定です。アイテムは `0` の flex-basis をもとに伸縮します。引き伸ばせるフレックスアイテムが本文領域だけの場合、本文領域はフレックスコンテナー内の空間をすべて取り込み、フッターを下端に張り付かせます。ライブサンプルから `flex` プロパティを削除すると、フッターが本文の真下に移動するのを確認できます。

メディアオブジェクト
----------

メディアオブジェクトは、ウェブデザインでよく見られるパターンです。このパターンでは、画像やその他の要素が片側に、テキストが右側に配置されています。メディアオブジェクトは、反転させることができるのが理想です。すなわち、画像を左から右に移動することです。

このパターンは、コメント欄をはじめ、画像や説明を表示する必要がある場所でよく見られます。フレックスボックスを使用すると、画像を含むメディアオブジェクトの部分が画像から大きさを取得し、メディアオブジェクトの本文が残りの空間を確保するように拡大縮小します。

下のライブ例では、メディアオブジェクトが表示されています。配置プロパティを使用して、横軸のアイテムを `flex-start` に揃え、`.content` のフレックスアイテムを `flex: 1` に設定しています。前述のカラムレイアウトカードのパターンと同様に、`flex: 1` を使用することで、カードのこの部分を伸長させることができます。

このライブ例では、デザインの中でメディアオブジェクトを制約するさまざまな方法を試してみることができます。

画像が大きくなりすぎるのを防ぐには、 `max-width` を画像に指定します。画像領域のフレックスボックスの指定は初期値のままなので、縮むことはできますが伸びることはできません。また、初期値では `flex-basis` は auto なので、画像の `width` や max-width が `flex-basis` となります。

```css
.image img {
  max-width: 100px;
}
```

両方の領域の比率を維持したまま伸縮させることもできます。両者に `flex: 1` を指定すると、0 の `flex-basis` をもとに伸縮することになります。つまり両者の幅は同じになります。内容物を元に、両方とも `flex: auto` に設定すると、内容物の寸法や、画像の幅などフレックスアイテムに直接適用される大きさに合わせて拡大縮小することができます。

```css
.media .content {
  flex: 1;
  padding: 10px;
}

.image {
  flex: 1;
}
```

両者に別々の `flex-grow` の比率を指定することもできます。例えば画像領域には `flex: 1`、文章領域には `flex: 3` というように。これは、両者に `0` の `flex-basis` が適用されますが、指定された `flex-grow` に従って別々の比率で領域が確保されることを意味します。このように使用される flex プロパティについては、主軸方向のフレックスアイテムの比率の制御で詳しく説明されています。

```css
.media .content {
  flex: 3;
  padding: 10px;
}

.image {
  flex: 1;
}
```

### メディアオブジェクトを反転させる

画像が右で文章が左になるようにメディアオブジェクトの表示を切り替えるには、`flex-direction` プロパティに `row-reverse` を指定します。下記のライブサンプルでは、`flipped` のクラスを `.media` の隣に追加することで実現しています。 HTML からそのクラスを削除すれば、どのように表示が変わるのかが分かるでしょう。

フォームコントロール
----------

フレックスボックスはフォームコントロールのスタイル指定に関しては特に便利です。フォームにはたくさんのマークアップや小さな要素があり、それらを配置したいと考えるはずです。よくあるパターンは `<input>` 要素と `<button>` の組み合わせでしょう。検索フォームや、単に訪問者にメールアドレスを入力してもらう用途などで使われます。

フレックスボックスならばこのようなレイアウトを簡単に実現できます。下記の例では、`<button>` と `<input>` フィールドを枠線と `display: flex` を指定したラッパーの中に入れています。`<input>` フィールドを引き伸ばすために flex プロパティを使っています。ただし、ボタンは引き伸ばされません。つまり、確保できる領域の変化に応じて伸縮する入力欄を備えたフォーム部品を実現できます。

ボタンを右側に置いたのと同じように、ラベルやアイコンを左側に置くことも簡単にできます。今回はラベルを置きました。背景色以外は、何もレイアウトを変更していません。伸縮する入力欄は少し狭くなるものの、2 つのアイテムが取った残りの領域をすべて使うことになります。

このようなパターンのおかげで、デザインに合わせたフォーム要素のライブラリーを簡単に作れます。要素の追加にも簡単に対応できます。伸縮するアイテムとしないアイテムを組み合わせる用途では、フレックスボックスの柔軟性の恩恵を存分に受けることができるのです。

終わりに
----

上に挙げたパターンを見て回るうちに、フレックスボックスの最適な利用場面を考え始めたことと思います。いろいろな選択肢があることでしょう。伸縮するアイテムとしないアイテムを組み合わせたり、フレックスアイテムの中身のサイズをフレックスアイテム自身に反映させたり、比率に沿ってフレックスボックスの領域を分け合ったり。すべてはあなた次第です。

コンテンツの最適な表現方法を思い描いてみてください。そしてその実現にあたって、フレックスボックスや他のレイアウト方法をどのように利用できるのかを調べてみてください。


フレックスアイテムの順序 - CSS: カスケーディングスタイルシート

フレックスアイテムの順序
============

フレックスボックスやグリッドといった新しいレイアウト方式には、コンテンツの順序を制御する機能があります。この記事では、フレックスボックスを使っている場合にコンテンツの見た目上の順序を変更する方法について見ていきます。またアクセシビリティの観点における、アイテム順の変更による影響についても考察します。

アイテムを逆順に表示する
------------

`flex-direction` プロパティは以下の 4 つの値のうち一つを取ることができます。

* `row`
* `column`
* `row-reverse`
* `column-reverse`

最初の 2 つの値は、文書のソースの順番と同じ順番で項目を保持し、先頭行から順に表示します。

![アイテムが左から始まり一行に表示されています。](/ja/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items/basics1.png)

![アイテムが上から始まり一列に表示されています。](/ja/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items/align10.png)

下 2 つの値は先頭と末尾を入れ替えて、アイテムを逆順に表示します。

![アイテムが右から始まり逆順に表示されています。](/ja/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items/align9.png)

![アイテムが下から始まり一列に逆順に表示されています。](/ja/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items/align11.png)

先頭は書字方向に応じて変わるということを思い出してください。先ほどの例のうち行についてのものは、`row` と `row-reverse` が英語のような左書きの言語においてどのように作用するかを示しています。アラビア語のような右書きの言語を使用している場合には、`row` では右から始まり `row-reverse` では左から始まります。

![アラビア文字の場合に row が右から始まり、 row-reverse では左から始まることを示すフレックスコンテナー](/ja/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items/order-rtl.png)

これは、アイテムが*表示上*でのみ逆順になるという点に注意が必要ではあるものの、アイテムを逆順に表示するための素晴らしい方法にみえます。この点については仕様の中で以下の様に触れられています。

>
> 「注：フレックスレイアウトの順序変更の機能は、意図的に表示のレンダリングにのみ影響するようになっており、読み上げの順序やナビゲーションがソースコード順に従うという挙動には影響しません。これにより作成者は、CSS 非対応の UA や読み上げや逐次ナビゲーションといった線形のモデルをソースの順序に保ったまま、視覚表現についての操作をすることができるようになります。」 - Ordering and Orientation
>
>
>

仮にアイテムがリンクなどのようなタブで移動できる要素であったとすると、その移動順は表示されている順序ではなく、文書のソースに現れる順となります。

逆順の値を設定しているときやそのほかの方法でアイテムの順序を変更している場合、本当にソース上で論理的な順序を変更しなくてよいか考慮する必要があります。仕様の中でも先ほどの注に続けて、ソースの問題を修正するために順序設定を利用するべきではないという記載があります。

>
> 「文書のアクセシビリティを損なうため、order や flex-flow/flex-direction の \*-reverse 値をソース順序の修正の代用として利用してはいけません。」
>
>
>

**メモ:** 数年間にわたって Firefox には、ブラウザーの挙動と異なりソース上の順序ではなく表示上の順序に従うというバグがありました。このバグは現在は修正されています。最新のユーザーエージェントは仕様に従っているものとして、常にソース上の順序を文書の論理的な順序として扱うべきです。

以下の例ではリンクからリンクにタブ移動した際に、どれが強調されているかわかりやすいように focus スタイルを加えています。`flex-direction` を使って表示順を変更した場合でも、タブ順序はソース上の順序に従って移動することがわかります。

`flex-direction` の変更がナビゲーションの順序を変更しないのと同様に、描画の順序についても変更されることはありません。あくまでアイテムの表示上の順序が逆転するだけです。

order プロパティ
-----------

フレックスアイテムが表示される順序を逆転することができましたが、それに加えて `order` プロパティを使用することでアイテム個別に表示される順序を変更することができます。

`order` プロパティは、アイテムを*数字で順序づけたグループ*でレイアウトするよう設計されています。つまりアイテムはグループ内での順序を表す整数に割り当てられ、その数字が小さい順に表示されるということです。同じ数字が複数のアイテムに割り当てられているときは、ソース上に現れる順に表示されます。

例として、5 つのアイテムに対して以下のように `order` を割り当てます。

* ソース上で 1 番目のアイテム: `order: 2`
* ソース上で 2 番目のアイテム: `order: 3`
* ソース上で 3 番目のアイテム: `order: 1`
* ソース上で 4 番目のアイテム: `order: 3`
* ソース上で 5 番目のアイテム: `order: 1`

このときアイテムは以下の順序でページ上に表示されます。

* ソース上で 3 番目のアイテム: `order: 1`
* ソース上で 5 番目のアイテム: `order: 1`
* ソース上で 1 番目のアイテム: `order: 2`
* ソース上で 2 番目のアイテム: `order: 3`
* ソース上で 4 番目のアイテム: `order: 3`

![ソース上の順序を示す番号を表示している順序変更されたアイテム](/ja/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items/order-property.png)

以下の例で値を変更して、表示順がどのように変わるか試してみてください。また `flex-direction` を `row-reverse` に変えたときに何が起こるか、つまり先頭が変わるために反対側から並べられることを確かめましょう。

フレックスアイテムの既定の `order` は `0` です。したがって 0 より大きい `order` をもつアイテムは、明示的に `order` を指定されていないアイテムの後ろに表示されます。

`order` には負の値を指定することもでき、ほかのアイテムはそのままの順序を保ちながら一つのアイテムだけを先頭に表示したい場合になどに有用です。先頭に表示したいアイテムの順序を `-1` を設定することで、0 より小さい `order` のこのアイテムが常に先頭に表示されるようになります。

以下の例では フレックスボックスを使ってレイアウトをしています。HTML の中で指定されている `active` クラスを別のアイテムに付け替えることで、レイアウトの先頭に幅すべてを使って表示されるアイテムを変更することができ、残りのアイテムは次の行に表示されるようになります。

アイテムは仕様書の中で *order-modified document order* として述べられているものに従って表示されます。アイテムが表示される前に、`order` プロパティの値が考慮されます。

`order` はアイテムの描画順についても変更します。`order` の値が小さいものから先に描画され、大きくなる順に描画されていきます。

order プロパティとアクセシビリティ
--------------------

`order` プロパティの使用は、`flex-direction` による方向の変更と同様のアクセシビリティに対する影響があります。`order` は描画の順序および表示上の順序を変更しますが、逐次的なナビゲーションの順序は変更しません。そのため、もしユーザーがアイテム間の移動をタブによって行った場合、レイアウト中を混乱するような動作で飛び回っているように見えるでしょう。

この記事中の例でタブ移動を試すことで、`order` がポインティングデバイスを使わないユーザーにおかしな経験をさせてしまう可能性があることがわかるでしょう。表示上の順序と論理的な順序の分断とそれによって起こりうるアクセシビリティの問題についてさらに理解するためには、以下のページを参照してください。

* Flexbox and the keyboard navigation disconnect
* HTML Source Order vs CSS Display Order
* The Responsive Order Conflict for Keyboard Focus
order の用途
---------

フレックスアイテムの論理的な順序、そして読むときの順序が表示上の順序と分かれていることが役に立つ場合があります。気をつけて使えば `order` プロパティは、いくつかのよくあるパターンを簡単に実装するために役に立ちます。

例えばニュース記事を表示するカードのデザインがあったとします。ニュースの見出しはハイライトされる重要なもので、またユーザーが読みたいものを探すためにタブでほかの見出しからジャンプする対象となる要素でもあります。カードには日付もあり、作りたいデザインは以下のようなものであるとします。

![日付が先頭にあり、見出しと本文がそれに続いているデザインコンポーネント](/ja/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items/order-card.png)

表示上では日付が見出しの上に現れています。しかしスクリーンリーダーによって読み上げられるときには、タイトルが先に読まれて日付はその後が望ましいと思っているとします。こういったことを `order` プロパティで実現することができます。

カードをフレックスコンテナーとして、 `flex-direction` を `column` に設定します。そして、日付は `order` を `-1` に設定します。これによって見出しの上に日付を引き上げることができます。

この例のような細かな調整は `order` プロパティを使うのにふさわしい状況です。読むためやタブ移動のための論理的な順序を保ち、アクセシビリティと構造化された形を維持してください。そして `order` プロパティは純粋に視覚的なデザインの調整のために使ってください。その際にはユーザーがキーボードでタブ移動をする対象となるアイテムの順序変更をしていないか留意してください。特に比較的新しいレイアウトを使うときには、マウスやタッチ画面ではなく、キーボードのみによるサイト操作の確認を確実にテストに含めた方がよいでしょう。そのテストで、開発時の選択がコンテンツの移動を難しくしてしまっているかどうか、すぐにわかるようになるでしょう。


主軸方向のフレックスアイテムの比率の制御 - CSS: カスケーディングスタイルシート

主軸方向のフレックスアイテムの比率の制御
====================

このガイドでは、フレックスアイテムに適用され、主軸に沿ってアイテムの寸法と自由度を制御することができる 3 つのプロパティ — `flex-grow`, `flex-shrink`, `flex-basis` を見ていきます。これらのプロパティがどのようにアイテムを伸縮させるかについて完全に理解することが、フレックスボックスをマスターするための鍵です。

最初に見てみる
-------

3 つのプロパティは、フレックスアイテムの自由度を以下の観点から制御します。

* `flex-grow`: このアイテムが得る正の余白はどれくらいか。
* `flex-shrink`: このアイテムから縮小できる負の余白はどれくらいか。
* `flex-basis`: 伸長や縮小が発生する前のアイテムの寸法はいくつか。

プロパティは通常、一括指定の `flex` プロパティとして表されます。以下のコードは `flex-grow` プロパティを `2` に、 `flex-shrink` を `1` に、 `flex-basis` を `auto` に設定します。

```css
.item {
  flex: 2 1 auto;
}
```

すでにフレックスボックスの基本概念の記事を読んでいるのであれば、すでにこれらのプロパティの紹介を受けているでしょう。ここではこれらを掘り下げ、使用するとブラウザーが何をするかを完全に理解できるようにします。

主軸に合わせて動作する重要概念
---------------

主軸方向の比率を制御するためのフレックスプロパティの機能を見る前に、いくつかの概念を確認しておきましょう。これらは、フレックスアイテムの成長や縮小が起こる前の*自然な*寸法と、余白の概念に関連しています。

### フレックスアイテムの寸法の変更

フレックスアイテムをレイアウトするための空間を確保するには、まずアイテムの大きさをブラウザーが知る必要があります。絶対的な長さの単位で適用される幅や高さを持たないアイテムは、どのようにして処理されるのでしょうか。

CSS には `min-content` と `max-content` という概念があります。これらのキーワードは長さの単位の代わりに使用することができます。

例えば、以下のライブ例では、テキストの文字列を含む 2 つの段落要素があります。1 つ目の段落の幅は `min-content` となっています。このキーワードに対応しているブラウザーでは、テキストのソフトな折り返しの機会をすべて利用して、はみ出さない範囲で小さくなっているのがわかるはずです。これが、その文字列の最小コンテンツサイズです。基本的には、文字列の中で最も長い単語が大きさを決定します。

2 つ目の段落は、 `max-content` という値を持っているので、逆のことをしています。これは可能な限り大きくして、ソフトな折り返しの機会を与えません。コンテナーが狭すぎるとボックスからあふれてしまいます。

この動作と、`min-content` および `max-content` がどのような効果を持つかについては、後述の `flex-grow` と `flex-shrink` の説明で覚えておいてください。

### 正と負の余白

これらの特性を説明するには、**正と負の余白**の概念を理解する必要があります。フレックスコンテナーに正の余白がある場合は、コンテナー内にフレックスアイテムを表示するのに必要な空間よりも大きな空間があるということです。たとえば 幅が 500 ピクセルのコンテナーで、`flex-direction` が `row` であり、幅 100 ピクセルのフレックスアイテムが 3 つあった場合、正の余白が 200 ピクセルあり、コンテナーいっぱいに表示したい場合は、各アイテムに分配することができます。

![アイテムを配置した後で空間が残っていることを表す画像です。](/ja/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis/basics7.png)

アイテムの自然な大きさの合計が、フレックスコンテナー内の利用可能な空間よりも大きい場合、負の余白が発生します。上の図のように幅 500 ピクセルのコンテナーがあるものの、3 つのフレックスアイテムの幅がそれぞれ 200 ピクセルであった場合、必要な空間は合計で 600 ピクセルとなり、100 ピクセルの負の余白が発生します。これをアイテムから取り除くことで、コンテナーに合わせることができます。

![アイテムがコンテナーからあふれてしまう](/ja/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis/ratios1.png)

フレックスのプロパティを理解するには、この正の余白の分配と負の余白の除去を理解する必要があります。

以下の例では、`flex-direction` を row (行) に設定して作業しているので、アイテムの寸法は常に幅に基づいて決定されます。すべてのアイテムの幅の合計とコンテナーの幅を比較して、正と負の余白を計算します。それぞれの例を `flex-direction: column` で試すこともできます。主軸が列になり、アイテムの高さと、アイテムが入っているコンテナーの高さを比較して、プラスとマイナスの余白を計算する必要が出てきます。

flex-basis プロパティ
----------------

`flex-basis` プロパティは、余白の分配が行われる前のフレックスアイテムの初期の大きさを指定します。このプロパティの初期値は `auto` です。`flex-basis` が `auto` に設定されている場合、ブラウザーはアイテムの初期の大きさを計算するために、まずアイテムの主軸方向の寸法に絶対寸法が設定されているかどうかをチェックします。例えば、アイテムの幅を 200 ピクセルに設定している場合です。この場合、`200px` がこのアイテムのフレックスベースとなります。

アイテムの寸法が自動になっている場合、 `auto` を指定すると内容物の寸法が解決値になります。このとき、 `min-` および `max-content` の寸法に関する知識があると便利です。フレックスボックスでは、アイテムの `max-content` の寸法を `flex-basis` として使用します。次のライブ例でこれを説明します。

この例では、柔軟性のない一連のボックスを作成し、 `flex-grow` と `flex-shrink` の両方を `0` に設定しています。ここでは、主軸方向の寸法として 150 ピクセルの幅を明示的に設定した最初のアイテムが、 `flex-basis` として `150px` を取るのに対し、他の 2 つのアイテムは幅を持たないため、コンテンツの幅に応じたサイズになっていることがわかります。

`auto` キーワードに加えて、`content` キーワードを `flex-basis` として使用することができます。この場合、アイテムに幅が設定されていても、コンテンツの寸法から `flex-basis` が算出されます。これは新しいキーワードで、ブラウザーの対応も少ないのですが、 `auto` を flex-basis として使用し、アイテムに幅を設定しないようにすることで、自動で寸法が調整されるので、常に同じ効果を得ることができます。

余白の分配を行う際に、フレックスボックスでアイテムの寸法を完全に無視したい場合は、 `flex-basis` を `0` に設定します。これは基本的に、フレックスボックスのすべての空間が利用可能であり、それをアイテムに比例して分配することを指示します。この例は、次に紹介する `flex-grow` で見てみましょう。

flex-grow プロパティ
---------------

`flex-grow` プロパティは、**フレックス伸長係数**を指定します。これは、正の余白が分配されたときに、フレックスアイテムがフレックスコンテナー内の他のフレックスアイテムに対してどれだけ伸長するかを決定します。

すべてのアイテムの `flex-grow` 係数が同じであれば、余白はすべてのアイテムに均等に分配されます。このような場合、ふつうは値に `1` を使用しますが、すべてのアイテムに `flex-grow` の値として `88`、`100`、`1.2` など与えることもできます。これは係数です。係数がすべてのアイテムで等しく、フレックスコンテナー内に正の余白があれば、すべてのアイテムに均等に分配されます。

### `flex-grow` と `flex-basis` を組み合わせる

`flex-grow` と `flex-basis` がどのように相互作用するかという点については混乱しやすいものです。コンテンツの長さが異なる 3 つのフレックスアイテムに、次のような `flex` ルールを適用した場合を考えてみましょう。

`flex: 1 1 auto;`

この場合、 `flex-basis` の値は `auto` で、アイテムには幅が設定されていないので、寸法は自動調整されます。つまり、フレックスボックスはアイテムの `max-content` の寸法を見ていることになります。アイテムを並べると、フレックスコンテナー内に正の余白 (この画像で斜線を引いた部分) ができます。

![正の余白を斜線で表現している画像](/ja/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis/ratios2.png)

コンテンツの寸法と同じ `flex-basis` を使用しているので、全体の利用可能な空間（フレックスコンテナーの幅）から分配可能な領域を差し引いた余白を各アイテムに均等に分配しています。より大きなアイテムは、他のアイテムと同じ量の余白が割り当てられますが、もともと寸法が大きいので、結果的にもっと大きくなります。

![正の余白は、アイテム間に分配される](/ja/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis/ratios3.png)

もし本当に実現したいことが 3 つのアイテムを同じ大きさにすることであれば、最初の寸法が異なっていても、これを使用してください。

`flex: 1 1 0;`

ここでは、余白の分配の計算上、アイテムの寸法を `0` としています。すべての空間が確保され、すべてのアイテムが同じ `flex-grow` 係数を持っているので、それぞれに同じ量の余白が分配されることになります。最終的には、3 つの同じ幅の伸縮可能ななアイテムができあがります。

このライブ例で、 `flex-grow` 係数を 1 から 0 に変更して、動作の違いを確認してみてください。

### アイテムに個別の flex-grow 要素を与える

`flex-grow` と `flex-basis` の関係を理解すると、アイテムに様々な `flex-grow` 係数を割り当てることで、個々のアイテムの大きさをさらに制御することができるようになります。 `flex-basis` を `0` にして、すべての空間を分配できるようにした場合、3 つのフレックスアイテムにそれぞれ異なる `flex-grow` ファクターを割り当てることができます。以下の例では、次のような値を使用しています。

* 1 番目のアイテムには `1`
* 2 番目のアイテムには `1`
* 3 番目のアイテムには `2`

`flex-basis` を `0` とすると、余白は次のように分配されます。まずフレックス伸長係数を合計し、フレックスコンテナー内の正の余白の合計をその数値、この場合は 4 で割ります。それからそれぞれの値に応じて余白を分配します。 — 1 番目のアイテムは 1 つ分、2 番目は 1 つ分、3 番目は 2 つ分になります。つまり、3 番目のアイテムは、1 番目と 2 番目のアイテムの 2 倍の大きさになります。

ここでは、どんな正の値も使用できることを覚えておいてください。重要なのは、ある項目と他の項目との比率です。大きな数字を使っても、小数を使っても構いません。 — あなた次第です。試しに、上の例で割り当てられた値を `.25`, `.25`, `.50` に変更してみてください。 — 同じ結果が得られるはずです。

flex-shrink プロパティ
-----------------

`flex-shrink` プロパティでは、**フレックス縮小係数**を指定します。これは、負の余白が分配されたときに、フレックスコンテナー内の他のフレックスアイテムに対して、フレックスアイテムがどれだけ縮小するかを決定します。

このプロパティは、ブラウザーがフレックスアイテムの `flex-basis` 値を計算して、フレックスコンテナーに収まらない大きさだと判断した場合に対処します。`flex-shrink` に正の値があれば、コンテナーからはみ出さないようにアイテムが縮小されます。

つまり、 `flex-grow` が余白を追加する扱いをするのに対し、 `flex-shrink` はボックスがはみ出さずにコンテナーに収まるように空間を縮小する扱いをします。

次のライブ例では、3 つのアイテムをフレックスコンテナーに入れています。それぞれに 200 ピクセルの幅を与え、コンテナーの幅は 500 ピクセルにしています。 `flex-shrink` を `0` に設定すると、アイテムは縮小できないので、ボックスからはみ出してしまいます。

`flex-shrink` の値を `1` に変更すると、すべてのアイテムがボックスに収まるように、各アイテムが同じ量だけ縮小されるのがわかります。これは、すべてのアイテムがボックスに収まるようにするために、最初の幅よりも小さくしたものです。

### `flex-shrink` と `flex-basis` の組み合わせ

`flex-shrink` は、`flex-grow` とほとんど同じように動作すると言えるでしょう。しかし、*完全に*同じではない理由が 2 つあります。

通常は些細な違いですが、仕様に定義されていることは、負の余白に対して `flex-shrink` が行うことが、正の余白に対して `flex-grow` が行うこととまったく同じではない理由の一つです。

>
> 「注：負の余白を分配する際には、フレックス縮小係数にフレックスベースの大きさが乗じられます。これは、アイテムが縮小できる量に比例して負の余白を分配するもので、例えば、大きなアイテムが目に見えて縮小する小さなアイテムが、大きなアイテムが目立って縮小する前にゼロまで縮小してしまうことはありません。」
>
>
>

2 つ目の理由は、フレックスボックスは、負の余白を除去する際に小さなアイテムがゼロの大きさにまで縮小することを防ぐためです。アイテムは `min-content` の寸法が下限になります。 — 可能な限りすべてのワードラップの機会を利用した後の寸法です。

以下の例では、 `min-content` の下限になり、 `flex-basis` が内容物の大きさに解決されていることがわかります。フレックスコンテナーの幅を 700px などに変更してからフレックスアイテムの幅を小さくすると、最初の 2 つのアイテムは折り返されますが、 `min-content` の寸法より小さくなることはありません。ボックスが小さくなると、3 つ目のアイテムが縮小します。

実際には、縮小の動作は妥当な結果をもたらす傾向があります。通常、内容物が完全に消えてしまったり、ボックスが最小の内容物よりも小さくなってしまったりすることはありません。そのため、上記のルールは、コンテナーに収まるように内容物を縮小する必要がある場合の適切な動作という点で、理にかなっています。

### アイテムに別の `flex-shrink` 要素を与える

`flex-grow` と同様に、それぞれのフレックスアイテムに異なる `flex-shrink` 係数を与えることができます。これにより、たとえば、あるアイテムを兄弟アイテムよりも急速に縮小させたり、まったく縮小させないようにしたい場合に、既定の動作を変更することができます。

次のライブ例では、1 番目のアイテムの `flex-shrink` 係数は 1、2 番目のアイテムは `0` （つまり、まったく縮まない）、3 番目のアイテムは `4` です。したがって、3 番目のアイテムは、1 番目のアイテムよりも急速に縮小します。`flex-grow` と同様に、ここでも小数や大きな数字を使うことができます。最も分かりやすいものを選んでください。

フレックスアイテムの寸法の設定をマスターする
----------------------

フレックスアイテムの寸法の調整の仕組みを理解するには、いくつかの要素を理解する必要があります。このガイドでは、以下の点について説明してきました。

アイテムの基本的な寸法に何が設定されているか
----------------------

1. `flex-basis` が `auto` に設定されていて、アイテムに幅が設定されている場合は、その幅に応じた寸法になります。
2. `flex-basis` が `auto` または `content` （対応しているブラウザーの場合）に設定されている場合は、寸法はアイテムの寸法に基づいて決定されます。
3. `flex-basis` が長さの単位で、0 ではない場合は、これがアイテムの寸法になります。
4. `flex-basis` が `0` に設定されている場合は、アイテムの寸法は空間共有の計算には考慮されません。
### 利用できる余白が残っているか

正の余白がないとアイテムは伸長しませんし、負の余白がないとアイテムは縮小しません。

1. すべてのアイテムの幅（列の場合は高さ）を合計したとき、その合計がコンテナーの幅（または高さ）の合計よりも**小さい**場合は、正の余白があり、`flex-grow` の出番となります。
2. すべてのアイテムの幅（列の場合は高さ）を合計した場合、その合計がコンテナーの幅（または高さ）の合計よりも**大きい**場合は、負の余白があり、`flex-shrink` が効いてきます。
### 余白を分配する別の方法

アイテムに余白を追加したくない場合は、「フレックスコンテナー内のアイテムの配置」で説明している配置プロパティを使って、アイテム間やアイテム周辺の余白を処理できることを覚えておいてください。 `justify-content` プロパティを使用すると、アイテム間やアイテム周辺の余白の分配が可能になります。また、フレックスアイテムに auto のマージンを使用すると、スペースを吸収してアイテム間に隙間を作ることができます。

自由に使えるフレックスツールがあれば、最初は少し試行錯誤するかもしれませんが、ほとんどの作業が可能であることがわかります。


フレックスボックスの基本概念 - CSS: カスケーディングスタイルシート

フレックスボックスの基本概念
==============

フレキシブルボックスレイアウトモジュールは、通常フレックスボックスと呼ばれ、一次元のレイアウトモデルとして、またインターフェイス中のアイテム間で余白の分配をする機能と強力な位置合わせをする機能を提供するものとして設計されました。この記事ではフレックスボックスの主な特徴の概要を示します。詳細については、このガイドのほかのページで説明します。

フレックスボックスが一次元であることは、フレックスボックスが一つの次元、つまり行か列のいずれかの方向にしかレイアウトしないことを述べています。これは CSS グリッドレイアウトが行と列の二次元を同時に制御するモデルであることと対照的です。

フレックスボックス 2 つの軸
---------------

フレックスボックスを使うときは 2 つの軸、つまり主軸 (main axis) と交差軸 (cross axis) の観点から考える必要があります。主軸は `flex-direction` プロパティによって定義され、交差軸は主軸に垂直に交わる軸です。フレックスボックスを使った操作では常にこの軸について参照することになるので、最初にその動きを理解しましょう。

### 主軸

主軸は `flex-direction` によって定義され、4 種類の値をとることができます。

* `row`
* `row-reverse`
* `column`
* `column-reverse`

`row` または `row-reverse` を選択した場合、主軸は**インライン要素の並ぶ方向**に沿った軸となります。

![flex-direction が row に設定された場合の主軸は、インライン方向の行に沿った軸となる。](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox/basics1.png)

`column` または `column-reverse` を選んだ場合は、ページの上から下に向かって**ブロック要素の並ぶ方向**に沿った軸となります。

![flex-direction が column に設定された場合の主軸は、ブロック方向に沿った軸となる。](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox/basics2.png)

### 交差軸

交差軸は主軸に垂直に交わる軸です。したがって、`flex-direction` (主軸) が `row` または `row-reverse` なら、交差軸は列に沿ったものになります。

![flex-direction が row に設定されている場合の交差軸は、ブロック方向に沿った軸となる。](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox/basics3.png)

主軸が `column` または `column-reverse` であれば、交差軸は行の方向になります。

![flex-direction が column に設定されている場合の交差軸は、インライン方向に沿った軸となる。](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox/basics4.png)

行の先頭と末尾
-------

理解が必要なもう一つの重要事項は、フレックスボックスは文書の書字方向を仮定しないという点です。 CSS は過去には、左から右への横書きの書字方向に過度に偏っていました。最近のレイアウト方法は多様な書字方向に対応しており、したがってテキスト行が左上から始まり右に進み、新しい行が下に続くということを仮定しません。

後述するフレックスボックスと他のレイアウト方法の関係を読むこともできますが、フレックスアイテムが流れる方向を説明するときに、左右や上下の話をしない理由は、以下の説明で理解できると思います。

もし `flex-direction` が `row` で言語が英語の場合、主軸の先頭は左で末尾は右になります。

![英語の場合、先頭側は左になります。](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox/basics5.png)

一方で言語がもしアラビア語であった場合、主軸の先頭は右で末尾が左になります。

![右書きの言語では、先頭側は右になります。](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox/basics6.png)

両言語ともに書字方向が横書きであるため、いずれの場合でも、交差軸の先頭側は上で末尾側が下になります。

こうしてみると、左と右ではなく先頭と末尾で考えることが自然なものに思えます。この考え方は CSS グリッドレイアウトのような、同じパターンに従っているレイアウトメソッドを扱う際にも役立つでしょう。

フレックスコンテナー
----------

フレックスボックスを使ってレイアウトされる文書の領域は、**フレックスコンテナー**と呼ばれています。フレックスコンテナーを作るには、その領域のコンテナーに対して `display` プロパティの値を `flex` もしくは `inline-flex` に設定します。またこれにより、このコンテナー直下の子要素が**フレックスアイテム**となります。ほかの CSS プロパティと同様に、いくつかの初期値が定義されているため、フレックスコンテナーを作成するとそのコンテナーに含まれるフレックスアイテムは以下のように振る舞います。

* フレックスアイテムは行に沿って並んで表示されます（`flex-direction` プロパティの既定値は `row` です）。
* フレックスアイテムは主軸の先頭側を先頭に並びます。
* フレックスアイテムは主軸方向に引き伸ばされませんが、収縮する場合があります。
* フレックスアイテムは、交差軸の大きさを埋めるように引き伸ばされます。
* `flex-basis` プロパティは `auto` に設定されます。つまり、横書きの場合はフレックスアイテムの `width` と等しくなり、縦書きの場合はフレックスアイテムの `height` と等しくなります。対応する `width`/`height` も `auto` に設定されている場合は、代わりに `flex-basis` の内容が使用されます。
* `flex-wrap` プロパティは `nowrap` に設定されます。つまり、フレックスアイテムは常に 1 行または 1 列のままとなり、それらの `width`/`height` の合計がコンテナ要素の `width`/`height` を超えると、コンテナからはみ出します。

その結果、アイテムはすべて一行に並び、コンテンツの寸法が主軸方向の寸法になります。アイテムがコンテナーに収まらない場合は、折り返されずにあふれます。一部のアイテムの高さが他のアイテムより高い場合、すべてのアイテムは交差軸全体の大きさまで引き伸ばされます。

この見え方についての、例を以下に挙げます。アイテムを変更したり新たに追加してフレックスボックスの初期値の挙動を確認してください。

### flex-direction の変更

フレックスコンテナーに `flex-direction` プロパティを設定すると、フレックスアイテムが表示される方向を変更することができます。 `flex-direction: row-reverse` と設定することで、アイテムは行に沿って並ぶ点は変わりませんが、先頭と末尾が入れ替わります。

`flex-direction` を `column` に変更すると、主軸の方向が変わり、フレックスアイテムは列に沿って並んで表示されるようになります。 `column-reverse` では、さらに先頭と末尾が入れ替わります。

次の例では、`flex-direction` が `row-reverse` に設定されています。他の値である `row`, `column`, `column-reverse` で何が起こるか確かめてみてください。

flex-wrap による複数行のフレックスコンテナー
---------------------------

フレックスボックスは一次元モデルですが、フレックスアイテムを複数行に折り返して表示させることも可能です。その際には、それぞれの行を新しいフレックスコンテナーとして捉える必要があります。余白の分配はその行の中でのみ発生し、隣の行については参照されません。

折り返しを発生させるには `flex-wrap` プロパティに値として `wrap` を設定します。するとアイテムが一行で表示するには大きすぎる場合には、新たな行に折り返されます。以下の例では、全アイテムを合わせた幅がフレックスコンテナーよりも大きくなるように、アイテムの幅を設定しています。 `flex-wrap` を `wrap` に設定すると、アイテムが折り返します。初期値である `nowrap` に設定すると、フレックスボックスの初期値はアイテムの収縮を許可するので、アイテムはコンテナーに合うように収縮されます。 `nowrap` はアイテムを収縮不可能な場合や、コンテナーに合う大きさまで小さくできない場合には、あふれ出ます。

フレックスアイテムの折り返しについての詳細は、フレックスアイテムの折り返しをマスターするを参照してください。

flex-flow 一括指定プロパティ
-------------------

`flex-direction` と `flex-wrap` の 2 つのプロパティは、`flex-flow` 一括指定プロパティにより 2 つ同時に指定することができます。最初に指定される値が `flex-direction` で、2 つ目の値が `flex-wrap` です。

以下の例で、1 つ目の値を `flex-direction` に使える値 (`row`, `row-reverse`, `column`, `column-reverse` のいずれか) に変更してみてください。また、2 つ目の値を `wrap` か `nowrap` に変更してみてください。

フレックスアイテムに適用されるプロパティ
--------------------

フレックスアイテムに対してさらなる制御をするために、アイテムを直接操作対象にすることができます。以下の 3 つのプロパティを使用します。

* `flex-grow`
* `flex-shrink`
* `flex-basis`

本ページでは、これらのプロパティについて簡単に触れます。主軸方向のフレックスアイテムの比率の制御のガイドで、より完全な情報を得られます。

上述のプロパティについて理解する前に、**分配可能な余白** (available space) の概念について考える必要があります。上述のプロパティを変更するということは、アイテム間での分配可能な余白の分配のしかたを変えるということです。この分配可能な余白についての考え方は、アイテムの位置合わせについて考える時に重要になります。

たとえば、500 ピクセル幅のコンテナーの中に 100 ピクセル幅のアイテムが 3 つあるとき、アイテムの配置に必要な幅は 300 ピクセルです。このとき 200 ピクセルの分配可能な余白が残っています。初期値を変更しなかった場合フレックスボックスは、余白を最後のアイテムの後ろに配置します。

![このフレックスコンテナーは、アイテムを配置した後に分配可能な余白があります。](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox/basics7.png)

そうではなく、アイテムを拡大して余白を埋めたいときには、余っている余白をアイテムに分配する方法が必要となります。それがアイテム自体に設定する `flex` プロパティが提供する機能です。

### flex-basis プロパティ

`flex-basis` は、そのアイテムの寸法を、使用しない余白は分配可能な余白として残すように定義します。このプロパティの初期値は `auto` で、この設定ではブラウザーはアイテムに寸法が設定されているかを確認します。上述の例では、すべてのアイテムが 100 ピクセルの幅に設定されているため、これが `flex-basis` として使われます。

アイテムに寸法が設定されていない場合は、その内容の大きさが `flex-basis` として使われます。`display: flex` を親要素に設定するだけで、すべてのフレックスアイテムがそのアイテムの内容を表示するのに必要な余白のみを使用して行の中に整列していたのは、この挙動のためです。

### flex-grow プロパティ

`flex-grow` プロパティを正の整数に設定すると、フレックスアイテムは主軸に沿って `flex-basis` 以上に引き伸ばすことができます。これによって、アイテムが主軸上の分配可能な余白をすべて使うまで引き伸ばされるか、他のアイテムも引き伸ばし可能であれば、分配可能な余白の割合となります。

先ほどの例で、すべてのアイテムの `flex-grow` に 1 を設定すると、分配可能な余白はアイテム間で均等に分配され、主軸方向にコンテナーを埋めるように引き伸ばされます。

flex-grow プロパティは割合で余白を分配するために使うことができます。最初のアイテムの `flex-grow` に 2 を設定し、ほかのアイテムには 1 を設定した場合、最初のアイテムに 2/4 （先ほどの例では 200px 中の 100px）が与えられ、残りの 2 つのアイテムに 1/4 （200px 中の 50px）ずつが与えられます。

### flex-shrink プロパティ

`flex-grow` プロパティが主軸上の余白の追加を扱う一方で、`flex-shrink` は余白の取りあげ方を制御します。 アイテムを配置するのに十分な余白がコンテナーになく、`flex-shrink` に正の整数が設定されていれば、アイテムは `flex-basis` よりも小さくなります。`flex-grow` と同様に、あるアイテムの収縮するスピードを他のアイテムより早くするために、異なる値を設定することができます。 つまり `flex-shrink` により大きな値が設定されているアイテムは、他のより小さな値が設定されている兄弟要素よりも早く収縮します。

実際の収縮幅の計算にはアイテムの最小寸法が考慮されるため、`flex-shrink` の動作は `flex-grow` に比べて一貫性がないように見えるかもしれません。そのため、そのアルゴリズムがどのように動くかについての詳細は、主軸方向のフレックスアイテムの比率の制御の記事に書かれています。

**メモ:** `flex-grow` や `flex-shrink` に指定する値は比率です。一般的には、たとえばあるアイテムを他の `flex: 1 1 200px` に設定したアイテムより 2 倍の比率で拡大させたいときには、 `flex: 2 1 200px` を設定します。しかし、望むならば `flex: 10 1 200px` と `flex: 20 1 200px` という書き方もできます。

### flex プロパティの一括指定の値

`flex-grow`、`flex-shrink`、`flex-basis` の各プロパティを個別に使うケースは稀であり、そのかわりに `flex` 一括指定プロパティでまとめて指定されることが多いでしょう。`flex` 一括指定プロパティは、`flex-grow`、`flex-shrink`、`flex-basis` の順に 3 つの値を設定することができます。

以下の例では、`flex` 一括指定プロパティの様々な値を試せるようになっています。 最初の値が `flex-grow` であり、正の値を指定することでアイテムが引き伸ばされるようになります。2 番目の値は `flex-shrink` です。正の値によりアイテムが収縮できるようになりますが、これはアイテムの寸法の合計が主軸をあふれる場合にのみ起こります。最後の値が `flex-basis` となり、アイテムが伸縮する際の基準値となります。

また、ほとんどの用途をカバーできるいくつかの定義済みの一括指定値があります。 チュートリアル中で使用されているのを度々見かけるでしょうし、ほとんどの場合でこれらの値で十分でしょう。 定義済みの値は以下のとおりです。

* `flex: initial`
* `flex: auto`
* `flex: none`
* `flex: <正の数>`

`flex: initial` はフレックスボックスの初期値にリセットします。これは `flex: 0 1 auto` に設定することと同じです。この場合 `flex-grow` は 0 となるため、アイテムが `flex-basis` よりも大きくなることはありません。`flex-shrink` は 1 なので、必要な場合にはあふれるのではなく収縮します。`flex-basis` の値は `auto` です。アイテムに設定されている主軸方向の寸法か、またはアイテムの内容の寸法がフレックスアイテムの寸法として使用されます。

`flex: auto` では、`flex: 1 1 auto` に設定することと等しくなります。`flex: initial` とは、アイテムがコンテナーを埋めるように引き伸ばされる点を除いて同じで、必要に応じて収縮もします。

`flex: none` は、全く伸縮性のない flex アイテムを作成します。これは `flex: 0 0 auto` と同じです。アイテムは伸び縮みせずに、`flex-basis: auto` のフレックスボックスとして配置されます。

チュートリアル内では、`flex: 1` や `flex: 2` のような設定をよく目にするでしょう。これは `flex: 1 1 0` を使うのと同様、`flex-basis` が 0 の状態から伸び縮みします。

これらの一括指定値について、以下の例で試してみてください。

アイテム間での位置合わせ、端揃え、余白分配
---------------------

フレックスボックスの重要な特徴は、主軸および交差軸において位置合わせや端揃えをし、フレックスアイテム間での余白の分配ができる点にあります。

### align-items

`align-items` プロパティは、交差軸におけるアイテムの位置合わせを行います。

このプロパティの初期値は `stretch` であり、これによって既定では最も高いフレックスアイテムの高さまで他のアイテムが伸張する挙動になっています。実際には、最も高いフレックスアイテムの高さがコンテナーの高さを決めるため、フレックスコンテナーを埋めるように伸張します。

アイテムをフレックスコンテナーの先頭側に揃えるためには `align-items` に `flex-start` を設定し、末尾側に揃えるためには `flex-end` を、中央揃えにするには `center` を設定します。 以下の例で試してみましょう。この例では、コンテナー内でアイテムがどのように移動するかわかりやすくするためフレックスコンテナーに高さを設定しています。`align-items` に以下の値を設定したときにそれぞれ何が起こるか確認してください。

* `stretch`
* `flex-start`
* `flex-end`
* `center`

### justify-content

`justify-content` プロパティは、主軸におけるアイテムの配置、つまり `flex-direction` で設定された方向における位置合わせを行います。初期値は `flex-start` で、コンテナーの先頭側からアイテムが並べられます。`flex-end` を設定することで末尾から、`center` を設定することで中央に並べることもできます。

また、`space-between` を使用して、アイテムを配置したあとの残りの余白のすべてをアイテム間で均等に振り分けられ、これによって同じ幅の空白がそれぞれアイテムの間に挿入されます。各アイテムの左右に同じだけの余白を空けるには、`space-around` を使用します。`space-around` では、コンテナーの両端には、アイテムの間隔の半分の大きさの余白が設けられます。両端にも同じだけの余白を設けるには、`space-evenly` を使用します。この場合はコンテナの両端にフルサイズ (アイテムの間隔と同じ大きさ) の余白が設けられます。

例で、以下の `justify-content` の値を試してみましょう。

* `flex-start`
* `flex-end`
* `center`
* `space-around`
* `space-between`
* `space-evenly`

フレックスコンテナー内のアイテムの配置の記事では、これらのプロパティがどのように動作するのか深く理解するために、より詳細に述べています。しかし上述の簡潔な例でもほとんどの用途で役に立つでしょう。

### justify-items

`justify-items` プロパティは、フレックスボックスレイアウトでは無視されます。

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

この記事で、フレックスボックスの基本的な特徴についての理解ができたと思います。次の記事ではフレックスボックスと他のレイアウト方法の関係を見ていきます。


フレックスアイテムの折り返しをマスターする - CSS: カスケーディングスタイルシート

フレックスアイテムの折り返しをマスターする
=====================

フレックスボックスは一次元のレイアウトとして設計されており、つまりアイテムを行または列として扱います。 — しかし、同時ではありません。しかし、フレックスアイテムを新しい行に折り返し、 `flex-direction` が `row` の場合は新しい行を、 `flex-direction` が `column` の場合は新しい列を生成します。このガイドでは、これがどのように動作するのか、何のために設計されているのか、どのような場合にフレックスボックスより CSS グリッドレイアウトが必要になるかを説明します。

折り返しを行う
-------

`flex-wrap` プロパティの初期値は `nowrap` です。つまり、コンテナーに対して幅が広すぎるフレックスアイテムのセットがあると、コンテナーからはみ出してしまいます。幅が広くなりすぎたら折り返すようにしたい場合は、`flex-wrap` プロパティを追加して `wrap` の値を設定するか、一括指定の `flex-flow` を使用して `row wrap` または `column wrap` の値を設定する必要があります。

アイテムはコンテナーの中に収まります。次の例では、10 個のアイテムを配置しています。すべてのアイテムの `flex-basis` は 160px で、伸長と縮小が可能です。最初の列で 160 ピクセルのアイテムを配置する空間がなくなると、新しいフレックス行が作成され、すべてのアイテムが配置されるまで繰り返されます。アイテムが成長すると、各列を完全に埋めるために、160 ピクセルよりも大きく拡張されます。最終行にアイテムが 1 つしかない場合は、行全体を埋めるように伸縮します。

これと同じことが列でも起こります。アイテムが折り返して新しい列を作り始め、それぞれの列を完全に埋めるためにアイテムを伸長するようにするためには、コンテナーに高さを設定する必要があります。

折り返しと flex-direction
--------------------

折り返しは、`flex-direction` と組み合わせることで、期待通りの効果を発揮します。`flex-direction` が `row-reverse` に設定されている場合、アイテムはコンテナーの端から始まり、逆順に並んでいきます。

なお、反転は行内方向にのみ行われます。右から開始して 2 行目に進み、再び右から開始します。下から開始してコンテナーを上がっていくという、両方の方向で反転しているわけではありません。

一次元レイアウトの説明
-----------

上の例で見たように、アイテムが伸縮することが許されていれば、最後の行や列のアイテムが少なくなると、それらのアイテムは空いた空間を埋めるように伸びていきます。

フレックスボックスには、ある行のアイテムとその上の行のアイテムの位置を揃える方法はありません。各フレックス行は新しいフレックスコンテナーのように機能します。これが主軸の空間分配を行います。アイテムが 1 つだけで、そのアイテムが成長することが許可されている場合、1 つのアイテムのフレックスコンテナーがある場合と同様に、その軸いっぱいに表示されます。

2 次元でのレイアウトが必要な場合は、おそらくグリッドレイアウトを使用します。上記の折り返し行の例を CSS グリッド版のレイアウトと比較すると、違いが分かります。次のライブサンプルでは、CSS グリッドレイアウトを使用して、160 ピクセル以上の列が収まるだけのレイアウトを作成し、余分な空間をすべての列に分配しています。ただし、この場合、アイテムはグリッド内に留まり、最終行のアイテム数が少なくなっても伸びることはありません。

これが一次元と二次元のレイアウトの違いです。フレックスボックスのような一次元方式では、行または列のみを制御します。グリッドのような二次元のレイアウトでは、両方を同時に制御します。行ごとに空間を分配したい場合は、フレックスボックスを使用してください。そうでない場合は、グリッドを使用してください。

フレックスボックスベースのグリッドシステムはどのように機能するか
--------------------------------

通常、フレックスボックスベースのグリッドシステムは、フレックスボックスを馴染みのある float ベースのレイアウトの世界に戻すことで機能します。フレックスアイテムにパーセント値の幅を割り当てると、`flex-basis` として、または `flex-basis` の値を `auto` のままにしてアイテム自体に幅を追加することで、2 次元のレイアウトのような印象を与えることができます。以下の例では、この機能を確認できます。

ここでは、`flex-grow` と `flex-shrink` を `0` に設定して、柔軟性のないフレックスアイテムを作り、フロートレイアウトで行っていたように、パーセント値を使って柔軟性をコントロールしています。

フレックスアイテムを横軸に並べる必要がある場合は、この方法で幅を制御することで実現できます。しかし、ほとんどの場合、この方法でフレックスアイテムに幅を追加する場合は、その部分をグリッドレイアウトに変更した方がよいことがわかります。

アイテム間のすき間の生成
------------

フレックスアイテム間にすき間または溝を作成するには、 `gap` プロパティを使用します。

CSS の gap プロパティは `row-gap` と `column-gap` の一括指定で、グリッド、フレックス、段組みレイアウトにおける行や列の間の空間である溝の大きさを指定します。

フレックスボックスでは、 `gap` プロパティをフレックスコンテナーに適用します。これは隣接するフレックスアイテムの間に固定された空間を作成します。しかし、アイテムの間に空間を作ることができるのは `gap` プロパティだけではありません。マージン、パディング、`justify-content`、`align-content` も溝のサイズを大きくすることができ、実際のすき間のサイズに影響を与えます。

両方の軸で `gap` プロパティが `margin` とどのように異なるかを確認するには、コンテナー `.box` の `gap` 値を変更し、下記スタイルシートの `.box > *` ルールに `margin` 値を追加してみてください。リセットボタンをクリックすると前回の値に戻ります。

アイテムの折り畳み
---------

フレックスボックスの仕様では、アイテムに `visibility: collapse` を設定することで、フレックスアイテムが折り畳まれた場合の動作が詳細に規定されています。 `visibility` プロパティの MDN ドキュメントを参照してください。仕様では、以下のように動作を説明しています。

>
> 「フレックスアイテムに visibility:collapse を指定すると、折り畳まれたフレックスアイテムになり、table-row や table-column の visibility:collapse と同様の効果が得られます。折り畳まれたフレックス アイテムはレンダリングから完全に削除されますが、フレックス行の交差軸の寸法を安定させる「支柱」が残ります。したがって、フレックスコンテナーにフレックス行が 1 つしかない場合、アイテムの折り畳み状態を動的に変化させると、フレックスコンテナーの主軸の寸法が変更されることがありますが、交差軸の寸法には影響しないことが保証されているため、ページの残りのレイアウトが「ぐらつく」ことはありません。ただし、フレックスの行の折り返しは折り畳み後に再実行されるため、複数の行を持つフレックスコンテナーの交差軸の寸法は変更される場合もあれば、変更されない場合もあります。" - Collapsed items
>
>
>

この動作は、 JavaScript を使用してフレックスアイテムを対象にし、コンテンツの表示・非表示を行う場合などに便利です。仕様書の例では、そのようなパターンの一つを示しています。

次のライブ例では、折り返しのないフレックスコンテナーを使用しています。3 番目のアイテムは他のアイテムよりも内容物が多いのですが、 `visibility: collapse` に設定されているため、フレックスコンテナーはこのアイテムを表示するために必要な高さの*支柱*を保持しています。CSS から `visibility: collapse` を削除したり、値を `visible` に変更したりすると、アイテムが現れ、折り畳まれていないアイテムに空間が再分配されますが、フレックスコンテナーの高さは変わりません。

**メモ:** Chrome や Safari では折りたたまれている部分は非表示として扱われるため、以下の 2 つの例は Firefox を使用してください。

しかし、複数行のフレックスコンテナーを扱う場合は、折り返しが折り返しの後に再実行されることを理解する必要があります。つまり、ブラウザーは折り畳まれたアイテムがインライン方向に残した新しい空間を考慮して、折り返しの動作を再実行する必要があります。

つまり、アイテムが最初の行とは別の行になってしまう可能性があるのです。アイテムを表示したり隠したりすると、アイテムが別の行になってしまうこともあります。

次のライブ例では、この動作を作成しました。折り畳まれたアイテムの位置に基づいて、引き伸ばされている行が変化している様子がわかります。2 番目のアイテムにさらにコンテンツを追加すると、十分な長さになった時点で行が変更されます。その結果、一番上の行は、テキストの 1 行分の高さにしかなりません。

これによりレイアウトに問題が生じる場合は、構造を見直す必要があるかもしれません。たとえば、各行を別々のフレックスコンテナーに入れて、行がずれないようにするなどです。

### `visibility: hidden` や `display: none` との違い

 前回のライブ例では、 `visiblity: collapse` の代わりに `visibility: hidden` または `display: none` を使用してみてください。 `visibility: hidden` を使用すると、アイテムは見えなくなりますが、ボックスは書式構造内に保持されるので、レイアウトの一部であるかのように動作します。
 `display: none` を使用すると、項目は完全に書式構造から除去されます。見えないだけでなく、構造も除去されます。これはカウンターがそれを無視し、トランジションなどのことが実行されないことを意味しています。


フレックスコンテナー内のアイテムの配置 - CSS: カスケーディングスタイルシート

フレックスコンテナー内のアイテムの配置
===================

フレックスボックスがウェブ開発者の関心を急速に集めた理由の一つに、ウェブコンテンツで適切な配置ができる初めての機能であってことが挙げられます。正しい垂直方向の配置が可能になったことで、ついにボックスの中央寄せを簡単にできるようになりました。このガイドでは、フレックスボックスにおいて配置や行端揃えのプロパティがどのように働くかを詳しくみていきます。

ボックスを中央寄せするには、`align-items` プロパティを使って交差軸上（今回の場合は縦軸上）の配置をし、`justify-content` プロパティで主軸上（今回の場合は横軸上）の配置をします。

![内部に中央寄せされたボックスを持つコンテナー要素](/ja/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container/align1.png)

以下の例のコードをみてください。コンテナーや子要素のサイズを変更しても、子要素は常に中央寄せされます。

配置を制御するプロパティ
------------

本ガイドで扱うプロパティは以下のとおりです。

* `justify-content` — 全アイテムの主軸上の配置を制御します。
* `align-items` — 全アイテムの交差軸上の配置を制御します。
* `align-self` — 個別のフレックスアイテムごとに交差軸上の配置を制御します。
* `align-content` — 仕様では「フレックス行のパッキング (packing flex lines)」と説明されている。交差軸上でのフレックス行間の余白を制御します。
* `gap`, `column-gap`, `row-gap` — フレックスアイテム間にすき間または溝を生成するために使用します。

また、auto マージンがフレックスボックスでの配置にどのように使えるかについても触れます。

交差軸
---

`align-items` プロパティと `align-self` プロパティは、交差軸 (cross axis) 上のフレックスアイテムの位置を制御します。 `flex-direction` が `row` のときは列を下り、 `flex-direction` が `column` のときは行方向です。

もっとも単純なフレックスの例で、交差軸上の配置を試してみましょう。`display: flex` をコンテナーに設定すると、子要素はすべてフレックスアイテムになり、一行に配置されます。このフレックスアイテムはすべて、最も高さのあるアイテムと同じ高さになるように引き伸ばされますので、最も高さのあるアイテムが交差軸のアイテムの高さを定義することになります。フレックスコンテナーに高さが設定されている場合は、アイテム内のコンテンツの大きさにかかわらず、コンテナーの高さまでアイテムが引き伸ばされます。

![3 つのアイテムがあり、うち 1 つのアイテムには他よりも高くなる要因となる追加のテキストがある。](/ja/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container/align2.png)

![3つのアイテムが 200 ピクセル高に引き伸ばされている](/ja/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container/align3.png)

アイテムが同じ高さになるのは、交差軸での配置を制御する `align-items` プロパティの初期値が `stretch` となっているためです。

アイテムの配置を制御するために、以下の値を使うことができます。

* `align-items: flex-start`
* `align-items: flex-end`
* `align-items: center`
* `align-items: stretch`
* `align-items: baseline`

以下の例では、`align-items` の値は `stretch` に設定されています。他の値についても試し、フレックスコンテナーの中でそれぞれのアイテムが互いにどのように配置されるかを確認してください。

### `align-self` で個別のアイテムを配置

`align-items` プロパティは、すべてのアイテムの `align-self` プロパティをまとめて設定します。つまり、 `align-self` プロパティでは 1 つずつ個別のアイテムを対象として指定できます。 `align-self` プロパティには、 `align-items` プロパティに使えるすべての値と、それに加えてフレックスコンテナーで定義した値にリセットするための `auto` を使うことができます。

次の例では、フレックスコンテナーには `align-items: flex-start` を設定していて、これはアイテムを交差軸上の始点に揃えます。`first-child` セレクターを使って最初のアイテムを対象として、 `align-self: stretch` を設定しており、また別のアイテムを `selected` クラスで選択して `align-self: center` を設定しています。 `align-items` の値を変更したり、個別のアイテムの `align-self` の値を変更して、どのように動作するかを試してみてください。

主軸の変更
-----

ここまでは、 `flex-direction` が `row` で、上から下へ書かれる言語の場合の動作を見てきました。これはつまり、主軸は横方向に行に沿ったものであり、一方で交差軸での配置はアイテムを上下に移動させるものとなります。

![3 つのアイテムがあり、1 つ目は flex-start、2 つ目は center、3 つ目は flex-end に配置されている。垂直軸上で配置されている。](/ja/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container/align4.png)

`flex-direction` を `column` に変更した場合、`align-items` と `align-self` はアイテムの左右方向での配置を行うようになります。

![3 つのアイテムがあり、1 つ目は flex-start、2 つ目は center、3 つ目は flex-end に配置されている。水平軸上で配置されている。](/ja/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container/align5.png)

次の例では `flex-direction: column` を設定し、それ以外は先の例と全く同じフレックスコンテナーを使ってこの動作を示しています。

交差軸上の配置 — align-content プロパティ
-----------------------------

ここまで、フレックスコンテナーによって定義される領域の中で、アイテム全体またはアイテム個別の配置をしてきました。折り返しのある複数行のフレックスコンテナーがある場合、 `align-content` プロパティを使えば行間でのスペース分配を制御できます。仕様では、これは「フレックス行のパッキング (packing flex lines)」として説明されています。

`align-content` が有効に動作するためには、アイテムを表示するのに必要な高さよりもフレックスコンテナーの方が高くする必要があります。このプロパティはすべてのアイテムを 1 つのセットとして扱い、余白の扱いと、セットに含まれるアイテムの配置について指示します。

`align-content` プロパティには以下の値を設定できます。

* `align-content: flex-start`
* `align-content: flex-end`
* `align-content: center`
* `align-content: space-between`
* `align-content: space-around`
* `align-content: stretch`
* `align-content: space-evenly` （フレックスボックス仕様には含まれていない）

以下の例では、フレックスコンテナーは 400 ピクセルの高さで、アイテムを表示するのに必要な高さよりも高くなっています。 `align-content` の値は `space-between` で、この場合は残る分配可能な余白 (available space) はフレックス行の*間に*分配され、フレックス行自体はコンテナーの交差軸上の始点と末尾に密着して配置されます。

`align-content` プロパティがどのように働くか、ほかの値を設定して確認してください。

列に沿った軸の時にこのプロパティの効果がどのように変わるか、 `flex-direction` を `column` に変更した場合について確認してください。変更前と同様に、すべてのアイテムを表示した上で、十分な余白が交差軸上に必要です。

**メモ:** `space-evenly` はフレックスボックス仕様書では定義されておらず、あとからボックス配置仕様書に追加されたものです。この値に対するブラウザーの対応は、フレックスボックス仕様書に定義されている他の値より遅れています。

主軸上での配置
-------

ここまで交差軸上での配置がどのように動くかを見てきましたが、ここでは主軸上での配置について見ていきます。使えるプロパティは `justify-content` の一つだけです。アイテムは主軸上ではグループとしてのみ扱われるため、プロパティも一種類となります。 `justify-content` では、アイテムを表示するのに必要な分よりも大きい空間がある場合の分配可能な余白の扱いを制御できます。

コンテナーに `display: flex` を設定した最初の例では、アイテムはコンテナーの始点に一行に整列して表示されます。これは `justify-content` の初期値が `flex-start` であるためです。すべての分配可能な余白はアイテムの後ろに置かれます。

![3 つの 100 ピクセル幅のアイテムが 500 ピクセル幅のコンテナー内にある。分配可能な余白はアイテムの後ろに置かれる。](/ja/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container/align6.png)

`justify-content` プロパティは `align-content` と同じ値を受け付けます。

* `justify-content: flex-start`
* `justify-content: flex-end`
* `justify-content: center`
* `justify-content: space-between`
* `justify-content: space-around`
* `justify-content: space-evenly` (フレックスボックス仕様書には含まれていない)

次の例では、 `justify-content` の値は `space-between` となっています。アイテムを表示した後に余った分配可能な余白は、アイテムの間に分配されます。左右の端のアイテムはそれぞれ始点と末尾に揃えて並びます。

`flex-direction` が `column` に設定されて主軸がブロック方向となっているとき、`justify-content` はフレックスコンテナー内の分配可能なスペースがあれば、アイテム間にその方向にそってスペースを分配します。

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

上述の配置方法において、`flex-start` と `flex-end` はいずれも書字方向に対応したものとなります。`justify-content` の値が `start` で、書字方向が英語のような左書きであれば、アイテムはコンテナーの左端から並べられます。

![3 つのアイテムが左側に並んでいる](/ja/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container/basics5.png)

一方で書字方向がアラビア語のように右から左であれば、アイテムはコンテナーの右端から並べられます。

![3 つのアイテムは右側から並んでいる](/ja/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container/basics6.png)

以下の例ではフレックスアイテムを右から左に並べるために `direction` プロパティを `rtl` を設定しています。この設定を削除したり `justify-content` の値を変更するなどして、行が右から始まる場合のフレックスボックスの動作を確認してください。

配置と flex-direction
------------------

`flex-direction` プロパティを変更した場合にも、始点は変わります。例えば `row` の代わりに `row-reverse` を設定した場合などがこれにあたります。

次の例では、`flex-direction: row-reverse` と `justify-content: flex-end` を設定してアイテムをレイアウトしています。左書きの言語では、すべてのアイテムは左側に並びます。`flex-direction: row-reverse` の値を `flex-direction: row` に変更してみてください。アイテムが右側に移動することがわかります。

こうした動作は少し紛らわしいかもしれませんが、覚えておくべき原則として、何かを変更しない限りは、文書の言語において単語が配置される方向にインライン軸、行方向の軸に沿ってフレックスアイテムが配置されます。`flex-start` は文の中でテキストが始まる側を示すことになります。

![左から始まり右で終わることを示す図。](/ja/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container/align8.png)

`flex-direction: column` を使うことで、アイテムの配置方向を文書の言語におけるブロック方向に変更することもできます。この場合は `flex-start` は段落が始まる先頭を示すことになります。

![上から始まり下で終わることを示す図](/ja/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container/align10.png)

`flex-direction` を逆方向の値のいずれかに変更すると、軸の末尾側から文書の言語において単語が書かれる方向と逆方向にレイアウトされます。 `flex-start` はその軸の末尾側、つまりインライン方向では行を折り返す側、ブロック方向では最後の文が終わる側を示すことになります。

![右から始まり左で終わることを示す図](/ja/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container/align9.png)

![下から始まり上で終わることを示す図](/ja/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container/align11.png)

auto マージンを使用した主軸上での配置
---------------------

主軸上ではアイテムは一つのグループとして扱われるため、`justify-items` プロパティや `justify-self` プロパティに相当するものはありません。しかし、フレックスボックスと併せて auto マージンを使ってアイテム毎の配置をすれば、個別のアイテムまたは一部アイテムのグループを他のアイテムから分離して配置することができます。

よくあるパターンは、ナビゲーションバーでいくつかのキーアイテムが右に配置され、メイングループは左に配置されるようなものです。このようなケースは `justify-self` プロパティの使いどころだと思われるでしょうが、以下の図について考えてみましょう。3 つのアイテムが片方にあり、もう一方に 2 つのアイテムがあります。もし仮に `justify-self` をアイテム *d* に対して使うことができたとすると、意図したものであってもそうでなくても、それに続くアイテム *e* の配置も変わってしまうでしょう。

![2 つのグループに分かれた 5 つのアイテム。3 つは左側にあり、2 つは右側にある。](/ja/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container/align7.png)

4 つめのアイテムに対して `justify-content` ではなく `margin-left` に `auto` を設定すれば、先頭の 3 つから分離できます。auto マージンはマージンの方向に沿った余白をすべて占有しようとしますが、これは左右に auto マージンを設定して要素をブロック内で中央揃えするときと同じです。両側のマージンが取れるだけの余白を取ろうとするために、ブロックが中央に押し出されることになります。

以下の例では、最小限のフレックス設定をして一行に並べたフレックスアイテムと、`margin-left: auto` を設定した `push` クラスを定義しています。このクラスを削除したり他のアイテムに追加して、どのような動作をするのか確かめてください。

アイテム間にすき間を作成
------------

フレックスのアイテム間にすき間を作るには、`gap`、`column-gap`、`row-gap`の各プロパティを使用します。`column-gap` プロパティは、行内のアイテム間にすき間を作成します。`row-gap` プロパティは、`flex-wrap` が `wrap` に設定されている場合、フレックス行間にすき間を作成します。`gap` プロパティは、両方を一緒に設定する一括指定です。

関連情報
----

* ボックス配置
* フレックスボックスでのボックス配置
* グリッドレイアウトでのボックス配置


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

inherits
========

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

**`inherits`** は CSS の記述子で、 `@property` アットルールを使用するときには必要であり、 `@property` で指定されたカスタムプロパティの登録を既定で継承するかどうかを制御します。

構文
--

```css
@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

@property --property-name {
  syntax: "<color>";
  inherits: true;
  initial-value: #c0ffee;
}
```

値
-

`true`

このプロパティは既定で継承されます。

`false`

このプロパティは既定で継承されません。

公式定義
----

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

形式文法
----
```

inherits =
  true   |
  false

```

例
-

`--my-color` `カスタムプロパティ`に色としての型チェックと、既定値、そして値が継承されないことを追加します。

CSS の `@property` アットルールを使用すると次のようになります。

```css
@property --my-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}
```

JavaScript の `CSS.registerProperty` を使用すると次のようになります。

```js
window.CSS.registerProperty({
  name: "--my-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee",
});
```

仕様書
---

| Specification |
| --- |
| CSS Properties and Values API Level 1 # inherits-descriptor |

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

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

関連情報
----

* CSS プロパティと値 API
* CSS 描画 API
* CSS 型付きオブジェクトモデル
* CSS Houdini


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

syntax
======

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

**`syntax`** は CSS の記述子で、 `@property` アットルールを使用する上で必要であり、そのプロパティで許可される構文を記述します。

構文
--

以下のものはすべて、有効な構文の文字列です。

```css
syntax: "<color>"; /\* 色を受け入れる \*/

syntax: "<length> | <percentage>"; /\* 長さまたはパーセント値を受け入れるが、両者を組み合わせた calc 式は受け入れない \*/

syntax: "small | medium | large"; /\* カスタム識別子で設定されたこれらの値の何れかを受け入れる \*/

syntax: "\*"; /\* 常に有効なトークン \*/
```

値
-

仕様で定義されている対応する構文を持つ文字列。対応する構文は CSS 型のサブセットです。これらは一緒に使うこともできますし、いくつかの型を組み合わせて使うこともできます。

`"<length>"`

あらゆる有効な `<length>` の値です。

`"<number>"`

あらゆる有効な `<number>` の値です。

`"<percentage>"`

あらゆる有効な `<percentage>` の値です。

`"<length-percentage>"`

あらゆる有効な `<length-percentage>` の値です。

`"<color>"`

あらゆる有効な `<color>` の値です。

`"<image>"`

あらゆる有効な `<image>` の値です。

`"<url>"`

あらゆる有効な `url()` の値です。

`"<integer>"`

あらゆる有効な `<integer>` の値です。

`"<angle>"`

あらゆる有効な `<angle>` の値です。

`"<time>"`

あらゆる有効な `<time>` の値です。

`"<resolution>"`

あらゆる有効な `<resolution>` の値です。

`"<transform-function>"`

あらゆる有効な `<transform-function>` の値です。

`"<custom-ident>"`

あらゆる有効な `<custom-ident>` の値です。

`"<transform-list>"`

有効な `<transform-function>` の値のリストです。

公式定義
----

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

形式文法
----
```

syntax =
  <string>

```

例
-

`--my-color` `カスタムプロパティ`に、 `<color>` の構文を使用して型チェックを追加します。

CSS の `@property` アットルールを使用すると次のようになります。

```css
@property --my-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}
```

JavaScript の `CSS.registerProperty` を使用すると次のようになります。

```js
window.CSS.registerProperty({
  name: "--my-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee",
});
```

仕様書
---

| Specification |
| --- |
| CSS Properties and Values API Level 1 # the-syntax-descriptor |

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

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

関連情報
----

* CSS プロパティと値 API
* CSS 描画 API
* CSS 型付きオブジェクトモデル
* CSS Houdini


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

initial-value
=============

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

**`initial-value`** は CSS の記述子で、構文があらゆる有効なトークンストリームを受け入れない限り `@property` アットルールを使用する上で必須です。そのプロパティの初期値を設定します。

`initial-value` として選択された値は、構文の定義に従って正しく解釈しなければなりません。したがって、もし構文が `<color>` であれば、初期値は有効な `color` 値でなければなりません。

構文
--

```css
@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

@property --property-name {
  syntax: "<color>";
  inherits: true;
  initial-value: #c0ffee;
}
```

値
-

選択された `syntax` に対して正しい値を持つ文字列です。

公式定義
----

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

形式文法
----
```

initial-value =
  <declaration-value>?

```

例
-

`--my-color` `カスタムプロパティ`に、有効な色となる初期値を色として型チェックを追加します。

CSS の `@property` アットルールを使用すると次のようになります。

```css
@property --my-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}
```

JavaScript の `CSS.registerProperty` を使用すると次のようになります。

```js
window.CSS.registerProperty({
  name: "--my-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee",
});
```

仕様書
---

| Specification |
| --- |
| CSS Properties and Values API Level 1 # initial-value-descriptor |

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

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

関連情報
----

* CSS プロパティと値 API
* CSS 描画 API
* CSS 型付きオブジェクトモデル
* CSS Houdini


マージンの相殺の習得 - CSS: カスケーディングスタイルシート

マージンの相殺の習得
==========

ブロックの上端と下端のマージンは、それぞれのマージンの大きい方の寸法（または等しい場合はいずれか 1 つ）の単一のマージンに結合される（折り畳まれる、collapsed）ことがあり、**マージンの相殺**という動作として知られています。なお、浮動要素と絶対位置指定要素では折り畳まれません。

マージンの相殺は、基本的に 3 つの場合に発生します。

隣接兄弟要素

隣接兄弟要素のマージンは相殺されます (後ろの兄弟要素がそれ以前の浮動状態を解除 する必要がある場合を除く)。

親と子孫を隔てるコンテンツがない場合

あるブロックの `margin-top` と、1 つ以上の子孫ブロックの `margin-top` を隔てる境界、パディング、インライン部分、 ブロック整形コンテキストの生成、*浮動の解除* のいずれもがない場合、もしくは、あるブロックの `margin-bottom` と1つ以上の子孫ブロックの `margin-bottom` を隔て境界、パディング、インラインコンテンツ、 `height`, `min-height`, `max-height` のいずれもがない場合、それぞれマージンが折り畳まれます。折り畳まれた側のマージンは、親要素の外側に出ます。

空ブロック

あるブロックの `margin-top` を `margin-bottom` と隔てる境界、パディング、インラインコンテンツ、 `height`, `min-height` のいずれもがない場合、上端と下端のマージンは相殺されます。

注意すべきことがいくつかあります。

* これらのケースが組み合わさると、もっと複雑な (3 つ以上の) マージンの相殺が発生します。
* このルールはマージン幅がゼロの場合にも当てはまるので、親要素のマージンがゼロであるかどうかに関わらず、先頭/末尾の子要素のマージンは最終的に、 (上のルールに従って) その親要素より外側に出ます。
* 負のマージンが含まれる場合には、相殺されるマージンの大きさは、一番大きな正のマージンと一番小さな (もっともマイナス寄りの) マージンの合計値になります。
* すべてのマージンが負の場合、折りたたまれたマージンのサイズは、最小の (最もマイナス寄りの) マージンとなります。これは、隣接する要素と入れ子になった要素の両方に適用されます。
* マージンの相殺は、縦方向にのみ関係します。
* マージンはコンテナーの `display` が `flex` または `grid` に設定されていると相殺されません。
例
-

### HTML

```html
<p>この段落の下端マージンは相殺されています …</p>
<p>
  … この段落の上端マージンとの間で <code>1.2rem</code> のマージンになります。
</p>

<div>
  この親要素には 2 つの段落があります。
  <p>
    この段落には上のテキストとの間に <code>.4rem</code> のマージンがあります。
  </p>
  <p>
    下端マージンは親と相殺され、下端マージンは <code>2rem</code> になります。
  </p>
</div>

<p>上の要素から下に <code>2rem</code> の位置です。</p>
```

### CSS

```css
div {
  margin: 2rem 0;
  background: lavender;
}

p {
  margin: 0.4rem 0 1.2rem 0;
  background: yellow;
}
```

### 結果

関連情報
----

* CSS の主要概念:
    + CSS の構文
    + アットルール
    + コメント
    + 詳細度
    + 継承
    + ボックスモデル
    + レイアウトモード
    + 視覚整形モデル
    + 値
        - 初期値
        - 計算値
        - 使用値
        - 実効値
    + 値の定義構文
    + 一括指定プロパティ
    + 置換要素


CSS 基本ボックスモデル入門 - CSS: カスケーディングスタイルシート

CSS 基本ボックスモデル入門
===============

ブラウザーのレンダリングエンジンは文書をレイアウトする際に、それぞれの要素を標準的な **CSS 基本ボックスモデル**に基づいた長方形のボックスとして表現します。 CSS はこれらのボックスの寸法、位置、プロパティ（色、背景、境界の幅など）を決定します。

それぞれのボックスは 4 つの部品（または*領域*）から構成され、それぞれの縁について*コンテンツの縁 (content edge)*、*パディングの縁 (padding edge)*、*境界の縁 (border edge)*、*マージンの縁 (margin edge)* が定義されています。

![CSS ボックスモデル](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model/boxmodel.png)

コンテンツ領域
-------

**コンテンツ領域**は、コンテンツの縁に囲まれた領域で、文字列、画像、動画プレイヤー等の「実際の」コンテンツを含みます。領域の寸法は*コンテンツ幅*（または*コンテンツボックスの幅*）と*コンテンツの高さ*（または\*コンテンツボックスの高さ）\*です。背景色や背景画像を持っていることがあります。

`box-sizing` プロパティが `content-box` (既定値) に設定されており、要素がブロック要素である場合は、コンテンツ領域の寸法は `width`、`min-width`、`max-width`、`height`、`min-height`、`max-height` の各プロパティによって正確に定義することができます。

パディング領域
-------

**パディング領域**は、パディングの縁に囲まれた領域で、コンテンツ領域に要素のパディングを含めた広がりです。この領域の寸法は、*パディングボックスの幅*と*パディングボックスの高さ*です。

パディングの幅は、 `padding-top`、`padding-right`、`padding-bottom`、`padding-left` の各プロパティおよび一括指定プロパティの `padding` で決定されます。

境界領域
----

**境界領域**は、境界の縁に囲まれた領域で、パディング領域に要素の境界を含めた広がりです。この領域の寸法は、*境界ボックスの幅*と*境界ボックスの高さ* になります。

境界の幅は、 `border-width` および一括指定プロパティの `border` で決定されます。 `box-sizing` プロパティが `border-box` に設定されていた場合、境界領域の寸法は `width`、`min-width`、`max-width`、`height`、`min-height`、`max-height` の各プロパティで正確に定義することができます。ボックスに背景（`background-color` または `background-image`）が設定されている場合、背景は境界の縁の外枠まで拡張されます（つまり、 Z 順で境界の下にまで拡張されます）。これは既定の振る舞いで、 CSS の `background-clip` プロパティで変更することができます。

マージン領域
------

**マージン領域**は、マージン境界に囲まれた領域で、境界領域に、隣の要素と分離するために使用する空の領域を含めて拡張したものです。この領域の寸法は、*マージンボックスの幅*と*マージンボックスの高さ*になります。

マージン領域の寸法は、 `margin-top`、`margin-right`、`margin-bottom`、`margin-left` の各プロパティおよび一括指定プロパティである `margin` で決定されます。マージンの相殺が発生したときは、マージンがボックス間で共有されるため、マージン領域が明確に定義されません。

置換要素ではないインライン要素については、空間の大きさは `line-height` プロパティによって決定され、行の高さに寄与します。この場合も境界とパディングは、コンテンツの周囲に視覚的に現れます。

関連情報
----

* レイアウトと包含ブロック
* CSS カスケード入門
* カスケード、詳細度、継承
* CSS の主要概念:
    + CSS の構文
    + アットルール
    + コメント
    + 詳細度
    + 継承
    + レイアウトモード
    + 視覚整形モデル
    + マージンの相殺
    + 値
        - 初期値
        - 計算値
        - 使用値
        - 実効値
    + 値の定義構文
    + 一括指定プロパティ
    + 置換要素


ナビゲーションの分割 - CSS: カスケーディングスタイルシート

ナビゲーションの分割
==========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
1 つ以上の要素が他のナビゲーション項目から分離されているナビゲーションのパターンです。

![2つのグループに分けられた項目。](/ja/docs/Web/CSS/Layout_cookbook/Split_Navigation/split-navigation.png)

要件
--

よくあるナビゲーションのパターンとして、ある要素を他の要素から離すというものがあります。フレックスボックスを使用すると、項目を 2 つに分けて別々のフレックスコンテナーに入れることなく、これを実現することができます。

レシピ
---

この例をダウンロード

行った選択
-----

このパターンは、自動マージンとフレックスボックスを組み合わせて項目を分割します。

マージンを auto にすると、適用される方向に利用可能なすべての空間を吸収します。 これは、 auto マージンを使ってブロックを中央に配置するのと同じ方法です。ブロックの両側にすべての空間を取ろうとするので、ブロックが中央に押し込まれます。

この場合、 auto の左マージンは利用可能な空間をすべて占め、項目を右に押します。リスト内の任意の項目にクラス `push` を適用することができます。

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

レイアウト方法によってブラウザーの対応状況が異なります。使用しているプロパティの基本的な対応の詳細については、以下の表を参照してください。

### フレックスボックス

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

関連情報
----

* CSS フレックスボックスレイアウト


パンくずナビゲーション - CSS: カスケーディングスタイルシート

パンくずナビゲーション
===========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
パンくず (Breadcrumb) ナビゲーションは、来た道をたどって開始ページまで戻ることができるパンくずリストを提供することによって、ユーザーがウェブサイト内の自分の位置を理解するのに役立ちます。

![リンクを区切り文字を付けてインラインで表示](/ja/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation/breadcrumb-navigation.png)

要件
--

項目は通常、個々のページ間の階層を示すために、区切り文字を付けてインラインで表示されます。

レシピ
---

この例をダウンロードする

**メモ:** 上記の例では 2 つのセレクターを使用して、最初の物を除いてそれぞれの `li` の前にコンテンツを挿入しています。これは次のようにすると、 1 つのセレクターのみで実現することもできます。

```css
.breadcrumb li:not(:first-child)::before {
  content: "→";
}
```

この解決策ではより複雑なセレクターを使用しますが、必要とするルールは少なくなります。好きな方の解決策を使用してください。

行った選択
-----

このパターンは単純なフレックスレイアウトを使用してレイアウトされており、CSS の 1 行でナビゲーションがどのように行われるかを示しています。 区切り文字は CSS 生成コンテンツを使用して追加されます。 区切り文字は好きなものに変更することができます。

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

`aria-label` (en-US) 属性および `aria-current` (en-US) 属性を使用して、このナビゲーションが何であるか、そして現在のページが構造のどこにあるのかをユーザーが理解できるようにしています。 詳細については関連リンクを参照してください。

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

レイアウト方法によってブラウザーの対応状況が異なります。使用しているプロパティの基本的な対応の詳細については、以下の表を参照してください。

### フレックスボックス

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

関連情報
----

* CSS フレックスボックスレイアウト
* パンくずリストの提供（英語）
* aria-current 属性の使用（英語）


要素を中央に配置 - CSS: カスケーディングスタイルシート

要素を中央に配置
========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
このレシピでは、あるボックスを別のボックスの中央に配置する方法がわかります。 フレックスボックスを使用する前は、水平方向と垂直方向の両方の中央に配置することは困難でしたが、ボックス配置プロパティを使用できるようになり簡単になりました。

![大きなボックスの中央に配置された要素](/ja/docs/Web/CSS/Layout_cookbook/Center_an_element/cookbook-center.png)

要件
--

アイテムを別のボックスの縦横の中央に配置する。

レシピ
---

この例をダウンロード

行った選択
-----

あるボックスを別のボックスの中央に配置するには、コンテナーをフレックスコンテナーにします。 次に、ブロック軸の中央に配置するために `align-items` を `center` に設定し、インライン軸の中央に配置するために `justify-content` を `center` に設定します。

ここで使用されているボックス配置プロパティは、ブロックレイアウトにも適用されるように指定されているため、将来的には親をフレックスコンテナーに変える必要なしに要素を中央に配置できるようになるかもしれません。ただし、今のところブロックレイアウトでのボックス配置プロパティの対応は制限されているため、現在は、フレックスボックスを使用して中央に配置するのが最も確実な方法です。

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

レイアウト方法によってブラウザーの対応状況が異なります。使用しているプロパティの基本的な対応の詳細については、以下の表を参照してください。

#### align-items

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

#### justify-content

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

MDN の関連資料
---------

* フレックスボックスでのボックス配置
* CSS ボックス配置のガイド