recursal/MDN huggingface dataset:
<integer>
=========

**`<integer>`** は CSS のデータ型で、 `<number>` の特殊型であり、正と負の整数を表現します。整数は `column-count`, `counter-increment`, `grid-column`, `grid-row`, `z-index` など、数多くの CSS プロパティで使用することができます。

構文
--

`<integer>` データ型は 1 桁から数桁の 10 進数、 0 から 9 までを含み、任意でその前に単一の `+` または `-` の符号が付きます。整数に関連付けられた単位はありません。

**メモ:** 公式には、有効な `<integer>` 値の範囲は決められていません。 Opera では 2^15 - 1、 IE では2^20 - 1 まで、その他のブラウザーではそれ以上の値に対応しています。 CSS3 Values の策定中には対応すべき最小範囲について多くの議論がありました。 LC 段階の 2012 年 4 月の最新の決定では、 [-2^27 - 1; 2^27 - 1] でしたが、しかし 2^24 - 1 や 2^30 - 1 のような他の値も提案されていました。しかし、最新の仕様書では範囲を定めなくなりました。

補間
--

アニメーション時には、 `<integer>` データ型の値は離散的に整数を使用して補間されます。実数、すなわち浮動小数点で計算が行われた場合、離散値は floor 関数を使って求められます。補間の速度は、アニメーションに結びつけられたタイミング関数で決められます。

例
-

### 有効な整数
```

12          正の整数 (先頭の + なし)
+123        正の整数 (先頭の + あり)
-456        負の整数
0           ゼロ
+0          ゼロ、先頭の + つき
-0          ゼロ、先頭の - なし
```

### 無効な整数
```

12.0        整数を表していますが、これは <number> であり、<integer> ではありません。
12.         小数点を含んではいけません。
+---12      先頭に置ける +/- は 1 つだけです。
ten         文字は使えません。
_5          記号は使えません。
\35         エスケープを使った Unicode 文字は、それが整数を表す場合でも (これは 5 です) 使えません。
\4E94       アラビア数字以外の数字は使えません (これは日本語の「五」です)。
3e4         指数表記は使えません。
```

仕様書
---

| Specification |
| --- |
| CSS Values and Units Module Level 4 # integers |

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

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

関連情報
----

* `<number>`
CSS リスト
=======

**CSS リスト** (CSS List) は CSS モジュールの一つで、リストのレイアウトとスタイル付け方法を定義します。

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

プロパティ
-----

* `list-style-image`
* `list-style-type`
* `list-style-position`
* `list-style`
ガイド
---

一貫したリストのインデント

異なるブラウザー同士でも一貫したリストのインデントを実現する方法を説明します。

CSS カウンターの使用

リストのカウンターを制御するために CSS カウンタープロパティを使用する方法を説明します。

仕様書
---

| Specification |
| --- |
| CSS Lists and Counters Module Level 3  |
border-image-width
==================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2017.

* Learn more
* See full compatibility
* Report feedback
**`border-image-width`** は CSS のプロパティで、要素の境界画像の幅を設定します。

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

このプロパティの値が要素の `border-width` よりも大きい場合、境界画像はパディング領域 (またはコンテンツ領域) の縁に向けて拡張されます。

構文
--


```css
/\* キーワード値 \*/
border-image-width: auto;

/\* <length> 値 \*/
border-image-width: 1rem;

/\* <percentage> 値 \*/
border-image-width: 25%;

/\* <number> 値 \*/
border-image-width: 3;

/\* 上下 | 左右 \*/
border-image-width: 2em 3em;

/\* 上 | 左右 | 下 \*/
border-image-width: 5% 15% 10%;

/\* 上 | 右 | 下 | 左 \*/
border-image-width: 5% 2em 10% auto;

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


`border-image-width` プロパティは下記の値のリストにある 1 つから 4 つの値を使用して指定することができます。

* 値が **1 つ**指定された場合、**全 4 辺**に同じ幅が適用されます。
* 値が **2 つ**指定された場合、1 つ目の幅が**上下**に、2 つ目が**左右**に適用されます。
* 値が **3 つ**指定された場合、1 つ目の幅が**上**に、2 つ目が**左右**に、3 つ目が**下**に適用されます。
* 値が **4 つ**指定された場合、幅は**上**、**右**、**下**、**左**の順 (時計回り) で適用されます。
### 値

`<length-percentage>`

境界の幅を、 `<length>` または `<percentage>` で指定します。パーセント値は水平オフセットにおいては境界画像の領域の*幅*、また垂直オフセットにおいては境界画像の領域の*高さ*です。負の値であってはいけません。

`<number>`

境界の幅を、対応する `border-width` に対する倍率として指定します。負の値であってはいけません。

`auto`

境界の幅が、対応する `border-image-slice` の本質的な幅と高さ (もしあれば) と等しくなるようにします。画像が本質的な寸法を持っていないのであれば、対応する `border-width` が代わりに使用されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `1` |
| 適用対象 | すべての要素。ただし `border-collapse` が `collapse` のときはテーブル要素内部にあるものを除く。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| パーセント値 | 境界画像領域の幅または高さに対する相対値 |
| 計算値 | 指定通り。ただし相対的な長さはは絶対的な長さに変換される |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

border-image-width =   
  [ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

### 境界画像のタイリング

この例は以下の 90 × 90 ピクセルの ".png" ファイルを使用して境界画像を作成します。

![8 つの円を含む正方形の画像。各コーナーの円は薄紫色。 4 つの辺の円は青。真ん中の 9 つ目の円が入る部分は空白。](/ja/docs/Web/CSS/border-image-width/border.png)

そして、元の画像内のそれぞれの円は 30 × 30 ピクセルです。

#### HTML


```html
<p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
  kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
```


#### CSS


```css
p {
  border: 20px solid;
  border-image: url("border.png") 30 round;
  border-image-width: 16px;
  padding: 40px;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-border-image-width |

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

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

関連情報
----

* 背景と境界
* CSS の学習: 背景と境界
table-layout
============

**`table-layout`** は CSS のプロパティで、`<table>` のセル、行、列のレイアウトに使用されるアルゴリズムを設定します。

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

構文
--


```css
/\* キーワード値 \*/
table-layout: auto;
table-layout: fixed;

/\* グローバル値 \*/
table-layout: inherit;
table-layout: initial;
table-layout: unset;
```

### 値

`auto`

既定値で、ほとんどのブラウザーが表の自動レイアウトアルゴリズムを使用します。表とセルの幅は中身に合うように調整されます。

`fixed`

表と列の幅は `table` 要素と `col` 要素の幅によって、または最初の行のセルの幅によって設定されます。後続する行のセルは列の幅に影響しません。

「固定」("fixed") レイアウト方式においては、表の 1 行目がダウンロードされ解析された時点で表全体がレンダリングできるようになります。これは「自動」レイアウト方式よりもレンダリング時間を高速にすることができますが、後続するセルのコンテンツが列の幅に合わなくなる可能性があります。各セルでは表の幅が分かっている場合、`overflow` プロパティを使用して、はみ出すコンテンツを切り取るかどうかを決めます。それ以外の場合、セルからはみ出すことはありません。

公式定義
----

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

形式文法
----
```

table-layout =   
  auto   |  
  fixed    
  
```

例
-

### 固定幅の表に text-overflow を付けた場合

この例は表の固定レイアウトを使用し、`width` プロパティとの組み合わせで、表の幅を制限しています。`text-overflow` プロパティを使用して、語が長すぎる場合は省略記号を使用するようにしています。表のレイアウトが `auto` である場合、表は指定された `width` よりも内容に合わせて広がります。

#### HTML


```html
<table>
  <tr>
    <td>Ed</td>
    <td>Wood</td>
  </tr>
  <tr>
    <td>Albert</td>
    <td>Schweitzer</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Fonda</td>
  </tr>
  <tr>
    <td>William</td>
    <td>Shakespeare</td>
  </tr>
</table>
```


#### CSS


```css
table {
  table-layout: fixed;
  width: 120px;
  border: 1px solid red;
}

td {
  border: 1px solid blue;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # width-layout |

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

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

関連情報
----

* `<table>`
:left
=====

**`:left`** は CSS の擬似クラスで、`@page` アットルールで使われ、印刷文書の左側のページすべてを表します。


```css
/\* 印刷時に左側のページを選択 \*/
@page :left {
  margin: 2in 3in;
}
```


そのページが左側か右側かは、文書の主な書字方向によって決まります。例えば、最初のページの主な書字方向が左から右であれば `:right` ページになります。書字方向が右から左であれば `:left` ページになります。

**メモ:** この擬似クラスは、*ページボックス*の `margin`, `padding`, `border`, `background` の各プロパティのみを変更するために使用することができます。他のすべてのプロパティは無視され、ページ内の文書コンテンツではなく、ページボックスにのみ影響します。

構文
--
```

:left
```

例
-

### 左側のページのマージンを設定


```css
@page :left {
  margin: 2in 3in;
}
```

仕様書
---

| Specification |
| --- |
| CSS Paged Media Module Level 3 # left-right-first |

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

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

関連情報
----

* `@page`
* ページに関する他の擬似クラス: `:first`, `:right`
border-top
==========

**`border-top`** は一括指定の CSS のプロパティで、要素の上側の境界のプロパティをすべて設定します。

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

他の一括指定プロパティと同様に、 `border-top` は、一部の値が指定されていなくても、設定可能なプロパティをすべて設定します。指定されていないプロパティは既定値が設定されます。つまり・・・


```css
border-top-style: dotted;
border-top: thick green;
```


・・・は、実際には以下と同じです・・・


```css
border-top-style: dotted;
border-top: none thick green;
```


・・・そして、 `border-top` の前で設定された `border-top-style` の値は無視されます。 `border-top-style` の既定値は `none` なので、 `border-style` の部分の設定は境界線なしとなります。

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

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

* `border-top-color`
* `border-top-style`
* `border-top-width`
構文
--


```css
border-top: 1px;
border-top: 2px dotted;
border-top: medium dashed green;

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


一括指定プロパティの 3 つの値は任意の順序で指定可能で、また、1 つまたは 2 つの値を省略することができます。

### 値

`<br-width>`

`border-top-width` を参照してください。

`<br-style>`

`border-top-style` を参照してください。

`<color>`

`border-top-color` を参照してください。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `border-top-width`: `medium`
* `border-top-style`: `none`
* `border-top-color`: `currentcolor`
 |
| 適用対象 | すべての要素。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `border-top-width`: 絶対的な長さ、または `border-top-style` が `none` または `hidden` の場合は `0`
* `border-top-style`: 指定通り
* `border-top-color`: 色の計算値
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `border-top-color`: 色
* `border-top-style`: 離散値
* `border-top-width`: length
 |

形式文法
----
```

border-top =   
  <line-width>  ||  
  <line-style>  ||  
  <color>         
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
<line-style> =   
  none    |  
  hidden  |  
  dotted  |  
  dashed  |  
  solid   |  
  double  |  
  groove  |  
  ridge   |  
  inset   |  
  outset    
  
```

例
-

### 上側の境界の適用

#### HTML


```html
<div>このボックスには上側に境界線があります。</div>
```


#### CSS


```css
div {
  border-top: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-shorthands |

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

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

関連情報
----

* `border`
* `border-block`
* `outline`
font-feature-settings
=====================

**`font-feature-settings`** は CSS のプロパティで、 OpenType フォントの拡張書体の特性を制御します。

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

構文
--


```css
/\* 既定の設定を使用する \*/
font-feature-settings: normal;

/\* OpenType の特性タグの値を設定する \*/
font-feature-settings: "smcp";
font-feature-settings: "smcp" on;
font-feature-settings: "swsh" 2;
font-feature-settings:
  "smcp",
  "swsh" 2;

/\* グローバル値 \*/
font-feature-settings: inherit;
font-feature-settings: initial;
font-feature-settings: revert;
font-feature-settings: unset;
```


可能な限り、ウェブの作者は代わりに `font-variant` 一括指定プロパティ、または関連する個別指定プロパティである `font-variant-ligatures`, `font-variant-caps`, `font-variant-east-asian`, `font-variant-alternates`, `font-variant-numeric`, `font-variant-position` プロパティを使うべきです。

これらは `font-feature-settings` よりも、もっと効率的で、予想でき、理解できる結果をもたらし、 `font-feature-settings` は、 OpenType フォント特性を有効またはアクセスするための他の方法が存在しない特殊なケースを処理するように設計された低レベルの機能です。特に、スモールキャップの表現に `font-feature-settings` を使うべきではありません。

### 値

`normal`

テキストは既定の設定で配置されます。

`<feature-tag-value>`

テキストの描画時、 OpenType の特性タグ値のリストがテキストレイアウトエンジンに渡され、フォントの機能を有効化または無効化します。タグは常に 4 文字の ASCII 文字の `<string>` です。文字数がこれより少ないか多い場合、もしくはコードポイント U+20 - U+7E の範囲外の文字を含む場合、プロパティ全体が無効になります。  
値は正の整数です。キーワード `on` と `off` はそれぞれ `1` と `0` の別名です。値が設定されていなければ、既定値は `1` です。 論理値ではない OpenType 特性 (例: stylistic alternates) では、この値は選ばれる特定の字形を意味します。論理値の特性はオンとオフを切り替えます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `normal` |
| 適用対象 | すべての要素とテキスト。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式定義
----
```

font-feature-settings =   
  normal                |  
  <feature-tag-value>#    
  
<feature-tag-value> =   
  <opentype-tag> [ <integer [0,∞]> | on | off ]?    
  
<opentype-tag> =   
  <string>    
  
```

例
-

### 様々なフォント特性を有効にする


```css
/\* スモールキャップ代替字形 \*/
.smallcaps {
  font-feature-settings: "smcp" on;
}

/\* 大文字と小文字の両方をスモールキャップに変換 (記号も) \*/
.allsmallcaps {
  font-feature-settings: "c2sc", "smcp";
}

/\* スラッシュのついたゼロを使用して "O" と区別する \*/

.nicezero {
  font-feature-settings: "zero";
}

/\* 歴史的な書体を有効に \*/
.hist {
  font-feature-settings: "hist";
}

/\* よくある合字を無効にする (既定ではオン) \*/
.noligs {
  font-feature-settings: "liga" 0;
}

/\* 表内の数字を有効にする (等幅) \*/
td.tabular {
  font-feature-settings: "tnum";
}

/\* 自動的に分数化する \*/
.fractions {
  font-feature-settings: "frac";
}

/\* 利用可能な2番目のスウォッシュ文字を使用 \*/
.swash {
  font-feature-settings: "swsh" 2;
}

/\* スタイリッシュセット 7 を有効にする \*/
.fancystyle {
  font-family: Gabriola; /\* available on Windows 7, and on Mac OS \*/
  font-feature-settings: "ss07";
}
```

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-feature-settings-prop |

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

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

関連情報
----

* `font-display`
* `font-family`
* `font-stretch`
* `font-style`
* `font-weight`
* `font-variant`
* `font-variation-settings`
* `src`
* `unicode-range`
* OpenType 特性タグのリスト
min-inline-size
===============

**`min-inline-size`** は CSS のプロパティで、書字方向に応じて要素ブロックの水平または垂直方向の最小の寸法を定義します。これは `min-width` または `min-height` のどちらかのプロパティと、 `writing-mode` の値に応じて対応します。

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

構文
--


```css
/\* <length> 値 \*/
min-inline-size: 100px;
min-inline-size: 5em;

/\* <percentage> 値 \*/
min-inline-size: 10%;

/\* キーワード値 \*/
min-inline-size: max-content;
min-inline-size: min-content;
min-inline-size: fit-content(20em);

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


書字方向が垂直方向であった場合、 `min-inline-size` の値は要素の最小の高さに対応します。そうでなければ、要素の最小幅に対応します。関連プロパティの `min-block-size` が要素のもう一方の寸法を定義します。

### 値

`min-inline-size` プロパティは `min-width` および `min-height` の各プロパティと同じ値を取ります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | `width` および `height` と同じ |
| 継承 | なし |
| パーセント値 | 包含ブロックの inline-size |
| 計算値 | `min-width` および `min-height` と同じ |
| アニメーションの種類 | length または パーセント値, calc(); |

形式文法
----
```

min-inline-size =   
  <'min-width'>    
  
```

例
-

### 縦書きでインライン方向の最小寸法を設定

#### HTML


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


#### CSS


```css
.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  block-size: 5%;
  min-inline-size: 200px;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-min-inline-size |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

関連情報
----

* 対応付けされる物理的プロパティ: `min-width` および `min-height`
* `writing-mode`
text-emphasis-color
===================

**`text-emphasis-color`** は CSS のプロパティで、圏点の色を設定します。この値は一括指定の `text-emphasis` を使用して設定することもできます。

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

構文
--


```css
/\* 初期値 \*/
text-emphasis-color: currentcolor;

/\* <color> \*/
text-emphasis-color: #555;
text-emphasis-color: blue;
text-emphasis-color: rgba(90, 200, 160, 0.8);
text-emphasis-color: transparent;

/\* グローバル値 \*/
text-emphasis-color: inherit;
text-emphasis-color: initial;
text-emphasis-color: revert;
text-emphasis-color: revert-layer;
text-emphasis-color: unset;
```

### 値

`<color>`

記号の色を定義します。 color が存在しない場合、既定で `currentcolor` になります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `currentcolor` |
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | 色の計算値 |
| アニメーションの種類 | 色 |

形式文法
----
```

text-emphasis-color =   
  <color>    
  
```

例
-

### 色と固有の文字で強調

#### CSS


```css
em {
  text-emphasis-color: green;
  text-emphasis-style: "\*";
}
```


#### HTML


```html
<p>例:</p>

<em>これには圏点があります！</em>
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-emphasis-color-property |

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

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

関連情報
----

* `<color>` データ型
* 他の強調記号に関するプロパティ: `text-emphasis-style`, `text-emphasis`, `text-emphasis-position`.
* 色に関する他のプロパティ: `color`, `background-color`, `border-color`, `outline-color`, `text-emphasis-color`, `text-shadow`, `caret-color`, `column-rule-color`
* CSS を使用した HTML 要素への色の適用
-moz-user-focus
===============

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

**`-moz-user-focus`** は CSS のプロパティで、ある要素がフォーカスを持つことができるかどうかを示すために使用されます。


```css
/\* キーワード値 \*/
-moz-user-focus: normal;
-moz-user-focus: ignore;

/\* グローバル値 \*/
-moz-user-focus: inherit;
-moz-user-focus: initial;
-moz-user-focus: unset;
```


この値を `ignore` に設定することで、その要素のフォーカスを無効にすることができます。その要素はタブ順で飛ばされます。

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

構文
--

### 値

`ignore`

その要素は、キーボードフォーカスを受け付けず、タブ順でスキップされます。

`normal`

要素がキーボードフォーカスを受けられるようになります。

`select-after`

?

`select-before`

?

`select-menu`

?

`select-same`

?

`select-all`

?

`none`

?

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----

Error: could not find syntax for this item例
-

### HTML


```html
<input class="ignored" value="The user cannot focus on this element." />
```

### CSS


```css
.ignored {
  -moz-user-focus: ignore;
}
```

仕様書
---

どの標準にも含まれていません。同様のプロパティである `user-focus` は、CSS3 UI 仕様の前身の初期草稿で提案されましたが、ワーキンググループで却下されました。

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

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

関連情報
----

* `-moz-user-input`
* `-moz-user-modify`
* `-moz-user-select`
flex-wrap
=========

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
**`flex-wrap`** は CSS のプロパティで、フレックスアイテムを単一行に押し込むか、あるいは複数行に折り返してもよいかを指定します。折り返しを許可する場合は、行を積み重ねる方向の制御も可能です。

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

他のプロパティや詳細情報については フレックスボックスの基本概念をご覧ください。

構文
--


```css
flex-wrap: nowrap; /\* 既定値 \*/
flex-wrap: wrap;
flex-wrap: wrap-reverse;

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


`flex-wrap` プロパティは次の値のリストから選択した単一のキーワードで指定します。

### 値

以下の値を利用することができます。

`nowrap`

フレックスアイテムは単一行に配置され、フレックスコンテナーからあふれることもあります。 `cross-start` は、 `flex-direction` の値に応じて `start` または `before` と同一になります。

`wrap`

フレックスアイテムは複数行に分割されます。 `cross-start` は `flex-direction` の値に応じて `start` または `before` と同一になり、 `cross-end` は、指定された `cross-start` の反対側になります。

`wrap-reverse`

`wrap` と同様に動作しますが、 `cross-start` と `cross-end` が入れ替わります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `nowrap` |
| 適用対象 | フレックスコンテナー |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

flex-wrap =   
  nowrap        |  
  wrap          |  
  wrap-reverse    
  
```

例
-

### フレックスコンテナーの wrap 値の設定

#### HTML


```html
<h4>This is an example for flex-wrap:wrap</h4>
<div class="content">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:nowrap</h4>
<div class="content1">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:wrap-reverse</h4>
<div class="content2">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
```


#### CSS


```css
/\* Common Styles \*/
.content,
.content1,
.content2 {
  color: #fff;
  font: 100 24px/100px sans-serif;
  height: 150px;
  width: 897px;
  text-align: center;
}

.content div,
.content1 div,
.content2 div {
  height: 50%;
  width: 300px;
}
.red {
  background: orangered;
}
.green {
  background: yellowgreen;
}
.blue {
  background: steelblue;
}

/\* Flexbox Styles \*/
.content {
  display: flex;
  flex-wrap: wrap;
}
.content1 {
  display: flex;
  flex-wrap: nowrap;
}
.content2 {
  display: flex;
  flex-wrap: wrap-reverse;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-wrap-property |

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

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

関連情報
----

* `flex-flow` は `flex-wrap` および `flex-direction` プロパティの一括指定プロパティです。
* CSS フレックスボックスガイド: *フレックスボックスの基本概念*
* CSS フレックスボックスガイド: *フレックスアイテムの折り返しをマスターする*
page-break-after
================

**警告:** このプロパティは `break-after` プロパティで置き換えられました。

**`page-break-after`** は CSS のプロパティで、現在の要素の*後で*改ページが行われるように調整します。


```css
/\* キーワード値 \*/
page-break-after: auto;
page-break-after: always;
page-break-after: avoid;
page-break-after: left;
page-break-after: right;
page-break-after: recto;
page-break-after: verso;

/\* グローバル値 \*/
page-break-after: inherit;
page-break-after: initial;
page-break-after: revert;
page-break-after: unset;
```

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

このプロパティは、ボックスを生成するブロックレベル要素に適用されます。ボックスを生成しない空の `<div>` には適用されません。

構文
--

### 値

`auto`

初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。

`always`

要素の後で必ず改ページが行われるように強制します。

`avoid`

要素の後で改ページされないようにします。

`left`

要素の後における改ページを強制し、次のページが左ページとして整形されるようにします。

`right`

要素の後における改ページを強制し、次のページが右ページとして整形されるようにします。

`recto` 
Experimental

左から右に進むページにおいて `right` と同じ動作をします。右から左に進むページであれば `left` と同じ働きをします。

`verso` 
Experimental

左から右に進むページにおいて `left` と同じ動作をします。右から左に進むページであれば `right` と同じ働きをします。

改ページの別名
-------

`page-break-after` プロパティは古いプロパティとなり、 `break-after` で置き換えられました。

互換性のため、 `page-break-after` はブラウザーでは `break-after` の別名として扱われます。これにより、 `page-break-after` を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。

| page-break-after | break-after |
| --- | --- |
| `auto` | `auto` |
| `left` | `left` |
| `right` | `right` |
| `avoid` | `avoid` |
| `always` | `page` |

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | ルート要素の通常フロー内におけるブロックレベル要素。ユーザーエージェントは他の要素に `table-row` 要素のように適用することがあります。 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

page-break-after =   
  auto     |  
  always   |  
  avoid    |  
  left     |  
  right    |  
  inherit    
  
```

例
-

### 脚注の後にページ区切りを設定


```css
/\* 脚注の後で新しいページに移ります \*/
div.footnotes {
  page-break-after: always;
}
```

仕様書
---

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # page |
| CSS Paged Media Module Level 3 # page-break-after |

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

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

関連情報
----

* `break-before`, `break-after`, `break-inside`
* `page-break-before`, `page-break-inside`
* `orphans`, `widows`
column-span
===========

**`column-span`** は CSS のプロパティで、値に `all` を設定した場合、段組みレイアウトで要素をすべての段にまたがらせることができます。

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


```css
/\* キーワード値 \*/
column-span: none;
column-span: all;

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


複数の段にまたがる要素は**段抜き要素** (spanning element) と呼びます。

構文
--

`column-span` プロパティは以下に挙げたキーワード値のうちの一つで指定します。

### 値

`none`

この要素は複数の段にまたがりません。

`all`

この要素がすべての段にまたがります。この要素よりも前に現れた通常フローのコンテンツは、自動的にすべての段で均等になります。この要素は新しいブロック整形コンテキストを生成します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | フロー内のブロックレベル要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

column-span =   
  none  |  
  all     
  
```

例
-

### 段抜きの見出しの設定

この例では、見出しが記事のすべての段にまたがって作成されます。

#### HTML


```html
<article>
  <h2>Header spanning all of the columns</h2>
  <p>
    The h2 should span all the columns. The rest of the text should be
    distributed among the columns.
  </p>
  <p>
    This is a bunch of text split into three columns using the CSS `columns`
    property. The text is equally distributed over the columns.
  </p>
  <p>
    This is a bunch of text split into three columns using the CSS `columns`
    property. The text is equally distributed over the columns.
  </p>
  <p>
    This is a bunch of text split into three columns using the CSS `columns`
    property. The text is equally distributed over the columns.
  </p>
  <p>
    This is a bunch of text split into three columns using the CSS `columns`
    property. The text is equally distributed over the columns.
  </p>
</article>
```


#### CSS


```css
article {
  columns: 3;
}

h2 {
  column-span: all;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Multi-column Layout Module Level 1 # column-span |

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

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

関連情報
----

* インライン要素 (en-US)
* `HTMLSpanElement`