recursal/MDN huggingface dataset:
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
===============

**`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 のデータロスとは、コンテンツの一部が消えてしまうことを意味します。そのため、`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
アクセシビリティのためのメディアクエリーの使用
=======================

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

動きの縮減
-----

点滅やフラッシュのアニメーションは、注意欠陥障害 (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");
  }
}
```
プログラムによるメディアクエリーの評価
===================

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)
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
======

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

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
マージンの相殺の習得
==========

ブロックの上端と下端のマージンは、それぞれのマージンの大きい方の寸法（または等しい場合はいずれか 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 はこれらのボックスの寸法、位置、プロパティ（色、背景、境界の幅など）を決定します。

それぞれのボックスは 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 の構文
    + アットルール
    + コメント
    + 詳細度
    + 継承
    + レイアウトモード
    + 視覚整形モデル
    + マージンの相殺
    + 値
        - 初期値
        - 計算値
        - 使用値
        - 実効値
    + 値の定義構文
    + 一括指定プロパティ
    + 置換要素
ナビゲーションの分割
==========

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 フレックスボックスレイアウト
パンくずナビゲーション
===========

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 属性の使用（英語）
要素を中央に配置
========

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 ボックス配置のガイド