recursal/MDN huggingface dataset:
mask-border-outset
==================

**`mask-border-outset`** は CSS のプロパティで、要素のマスク境界の境界ボックスからの距離を指定します。

構文
--


```css
/\* <length> 値 \*/
mask-border-outset: 1rem;

/\* <number> 値 \*/
mask-border-outset: 1.5;

/\* 上下 | 左右 \*/
mask-border-outset: 1 1.2;

/\* 上 | 左右 | 下 \*/
mask-border-outset: 30px 2 45px;

/\* 上 | 右 | 下 | 左 \*/
mask-border-outset: 7px 12px 14px 5px;

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


`mask-border-outset` プロパティは 1 ～ 4 つの値で指定します。それぞれの値は `<length>` または `<number>` です。負の値は無効です。

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

`<length>`

マスク境界の辺からの距離を長さで表します。

`<number>`

マスク境界の辺からの距離を、対応する `border-width` の倍数で表します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | すべての要素。 SVG の場合は `defs` 要素やすべてのグラフィック要素を除いたコンテナー要素に適用される |
| 継承 | なし |
| 計算値 | 指定通り。ただし相対的な長さはは絶対的な長さに変換される |
| アニメーションの種類 | 離散値 |

形式文法
----
```

mask-border-outset =   
  [ <length> | <number> ]{1,4}    
  
```

例
-

### 基本的な使用

このプロパティは、まだどこでも対応されていないようです。このプロパティが対応されるようになれば、要素の境界ボックスからマスクをどれだけ内側に離すかを示します。 — この機能を使用すると、マスクの端の位置を境界のすぐ内側ではなく、境界の途中にすることができるようになります。


```css
mask-border-outset: 1rem;
```


Chromium ベースのブラウザーは、このプロパティの古い版 — `mask-box-image-outset` — に接頭辞つきで対応しています。


```css
-webkit-mask-box-image-outset: 1rem;
```


**メモ:** `mask-border` ページでは動作する例を (Chromium で対応している古い接頭辞つきの境界マスクプロパティを使用して) 挙げていますので、効果について分かるでしょう。

仕様書
---

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask-border-outset |

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

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

関連情報
----

* `mask-border`
* `mask-border-mode`
* `mask-border-repeat`
* `mask-border-source`
* `mask-border-width`
accent-color
============

**`accent-color`** は CSS のプロパティで、一部の要素で生成されるユーザーインターフェイス要素の強調表示色を設定します。

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

現在 `accent-color` に対応しているブラウザーは、以下の HTML 要素に適用します。

* `<input type="checkbox">`
* `<input type="radio">`
* `<input type="range">`
* `<progress>`

各ユーザーエージェントには、読みやすさとコントラストを確実に保持するためのバリエーションを持つアクセントカラーがあります。そのアクセントカラーはすべてのユーザーインターフェイスコントロールで使用されるわけではなく、コントロールのすべての状態で使用されるわけでもありません。 `accent-color` は、それが適用される状態でアクセントカラーを使用するユーザーインターフェイスコントロールにのみ適用されます。

構文
--


```css
/\* キーワード値 \*/
accent-color: auto;

/\* <color> 値 \*/
accent-color: darkred;
accent-color: #5729e9;
accent-color: rgb(0 200 0);
accent-color: hsl(228 4% 24%);

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

### 値

`auto`

UA が選択した色を表します。プラットフォームの強調色がある場合は、それと一致します。

`<color>`

強調色として使用される色を指定します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | `auto` は仕様通りに計算され、 `<color>` 値は `color` プロパティで定義されたように計算される。 |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

accent-color =   
  auto     |  
  <color>    
  
```

例
-

### 独自の強調色を設定

#### HTML


```html
<input type="checkbox" checked />
<input type="checkbox" class="custom" checked />
```


#### CSS


```css
input {
  accent-color: auto;
  display: block;
  width: 30px;
  height: 30px;
}

input.custom {
  accent-color: rebeccapurple;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # widget-accent |

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

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

関連情報
----

* `background-color`, `border-color`, `caret-color`, `color`, `column-rule-color`, `outline-color`, `text-decoration-color`, `text-emphasis-color`, `text-shadow`: その他の色に関するプロパティ
* `<color>` データ型
* `<input>` 要素
* CSS を使った HTML の要素への色の適用
:paused
=======

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

**`:paused`** は CSS の擬似クラスセレクターで、「再生中」または「停止中」の状態を持つ音声、動画、その他のリソースの要素が「停止中」である場合に一致する、リソース状態擬似クラスです。

リソースが停止中になるのは、アクティブでない状態になった場合や、ユーザーが明示的に停止させた場合です。


```css
:paused {
}
```

構文
--
```

:paused
```

例
-

### CSS


```css
:paused {
  border: 5px solid orange;
}
```

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # selectordef-paused |

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

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

関連情報
----

* `:playing`
<length-percentage>
===================

**`<length-percentage>`** は CSS のデータ型で、 `<length>` または `<percentage>` が取りうる値を表します。

構文
--

この型に利用できる個々の構文の詳細は、 `<length>` および `<percentage>` の文書を参照してください。

例
-

### length-percentage の例

以下の簡単な例では、`<length-percentage>` の値を使用するいくつかのプロパティを示しています。

#### HTML


```html
<p>パーセント値や長さは様々な場面で使うことができます。</p>
```


#### CSS


```css
p {
  /\* length-percentage の例 \*/
  width: 75%;
  height: 200px;
  margin: 3rem;
  padding: 1%;
  border-radius: 10px 10%;
  font-size: 250%;
  line-height: 1.5em;

  /\* length の例 \*/
  text-shadow: 1px 1px 1px red;
  border: 5px solid red;
  letter-spacing: 3px;

  /\* percentage example \*/
  text-size-adjust: 20%;
}
```


#### 結果

### calc() での使用

許可されている型として `<length-percentage>` が指定されているところでは、これはパーセント値が長さとして解決されるので、 `calc()` の式で利用することができます。したがって、以下のすべての値が `width` で利用できます。


```css
width: 200px;
width: 20%;
width: calc(100% - 200px);
```

仕様書
---

| Specification |
| --- |
| CSS Values and Units Module Level 4 # mixed-percentages |

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

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

関連情報
----

* `<percentage>`
* `<length>`
* CSS 値と単位
text-combine-upright
====================

**`text-combine-upright`** は CSS のプロパティで、一文字分の空間に挿入する文字の組み合わせを設定します。組み合わせたテキストが 1em の幅より広い場合、ユーザーエージェントはコンテンツを 1em の幅に収めなければなりません。合成結果は、レイアウトおよび装飾においてグリフ一文字として扱われます。このプロパティは、縦書きモードでのみ効果があります。

これは、日本語の縦中横、中国語の *直書橫向* として知られる効果をもたらすために使用されます。

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

構文
--


```css
/\* キーワード値 \*/
text-combine-upright: none;
text-combine-upright: all;

/\* Digits 値 \*/
text-combine-upright: digits; /\* 2 桁の数字を垂直テキスト内に水平に収めます \*/
text-combine-upright: digits 4; /\* 4 桁までの数字を垂直テキスト内に水平に収めます \*/

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

### 値

`none`

何も特別な処理をしません。

`all`

タイプセットのすべての文字を水平に並べてボックス内に収めます。この幅は、縦書きボックス内で一文字分の空間を取ります。

`digits <integer>?`

指定した桁数 (整数値) までの連続した ASCII 数字 (U+0030–U+0039) を水平に並べてボックス内に収めます。この幅は、縦書きボックス内で一文字分の空間を取ります。整数値を省略した場合の値は 2 になります。2 ～ 4 までの範囲外の整数値は不正です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | 置換でないインライン要素 |
| 継承 | あり |
| 計算値 | 指定されたキーワード、'digits' の場合は続けて整数 |
| アニメーションの種類 | アニメーション不可 |

形式文法
----
```

text-combine-upright =   
  none                         |  
  all                          |  
  [ digits <integer [2,4]>? ]    
  
```

例
-

### 横書きテキストでの 'all' の使用

all の値は、水平テキストにするすべての部分にマークアップする必要があります。現在、これは digits 値よりも多くのブラウザーが対応しています。

#### HTML


```html
<p lang="zh-Hant">
  民國<span class="num">105</span>年<span class="num">4</span>月<span
 class="num"
 >29</span
 >日
</p>
```


#### CSS


```css
html {
  writing-mode: vertical-rl;
  font: 24px serif;
}
.num {
  text-combine-upright: all;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Writing Modes Level 4 # text-combine-upright |

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

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

関連情報
----

* `writing-mode`, `text-orientation`
offset-distance
===============

Baseline 2023
-------------

Newly availableSince August 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`offset-distance`** は CSS プロパティで、 `offset-path` 上の要素を配置する位置を指定します。

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

構文
--


```css
/\* 既定値 \*/
offset-distance: 0;

/\* offset-path の途中 \*/
offset-distance: 50%;

/\* パス上の固定距離の位置 \*/
offset-distance: 40px;

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


``<length-percentage>``

要素が (`offset-path` で定義された) パス上のどのくらいの距離にあるかを指定する長さです。

100% はパスの全長を表します。 (`offset-path` が基本シェイプまたは `path()` として定義されている場合)。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | 座標変換可能要素 |
| 継承 | なし |
| パーセント値 | パスの全長に対する相対値 |
| 計算値 | `length` の場合は絶対的な値、それ以外の場合はパーセント値 |
| アニメーションの種類 | length または パーセント値, calc(); |

形式文法
----
```

offset-distance =   
  <length-percentage>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

### アニメーション内での offset-distance の使用

CSS モーションパスのモーションアスペクトは、一般に `offset-distance` プロパティのアニメーションから来ています。要素をパス全体の上でアニメーションさせたい場合は、その `offset-path` を定義し、 `offset-distance` に `0%` から `100%` までを取るアニメーションを設定してください。

#### HTML


```html
<div id="motion-demo"></div>
```


#### CSS


```css
#motion-demo {
  offset-path: path("M20,20 C20,100 200,0 200,100");
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
  background: cyan;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| Motion Path Module Level 1 # offset-distance-property |

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

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

関連情報
----

* `offset`
* `offset-anchor`
* `offset-path`
* `offset-position`
* `offset-rotate`
@font-feature-values
====================

**`@font-feature-values`** は CSS のアットルールで、OpenType で有効化された特性が異なるものに対して `font-variant-alternates` プロパティで共通の名前を使用することができます。これは、複数のフォントを使用している場合に CSS を簡素化するのに役立ちます。

`@font-feature-values` アットルールは、CSS の最上位で使用することも、任意の CSS の条件付きグループアットルールの内部で使用することもできます。

構文
--

### 特性値のブロック

`@swash`

`font-variant-alternates` の `swash()` 関数記法に渡される特性名を指定します。文字飾り (swash) の特性値に定義できる値は 1 個だけです。`ident1: 2` は正しいですが、`ident2: 2 4` は正しくありません。

`@annotation`

`font-variant-alternates` の `annotation()` 関数記法に渡される特性名を指定します。注釈 (annotation) 特性値に定義できる値は 1 個だけです。`ident1: 2` は正しいですが、`ident2: 2 4` は正しくありません。

`@ornaments`

`font-variant-alternates` の `ornaments()` 関数記法に渡される特性名を指定します。装飾活字 (ornaments) の特性値に定義できる値は 1 個だけです。`ident1: 2` は正しいですが、`ident2: 2 4` は正しくありません。

`@stylistic`

`font-variant-alternates` の `stylistic()` 関数記法に渡される特性名を指定します。文字様式 (stylistic) の特性値に定義できる値は 1 個だけです。`ident1: 2` は正しいですが、`ident2: 2 4` は正しくありません。

`@styleset`

`font-variant-alternates` の `styleset()` 関数記法に渡される特性名を指定します。`ident1: 2 4 12 1` は、OpenType 値 `ss02` および `ss04`, `ss12`, `ss01` に対応付けされます。`99` よりも大きな値は正しいですが、どの OpenType 値にも対応付けされず、無視されます。

`@character-variant`

`font-variant-alternates` の `character-variant()` 関数記法に渡される特性名を指定します。異体字 (character-variant) の特性値に定義できる値は 1 個または 2 個です。`ident1: 3` は `cv03=1` に対応付けされ、`ident2: 2 4` は `cv02=4` に対応付けされますが、 `ident2: 2 4 5` は無効です。

形式文法
----
```

@font-feature-values =   
  @font-feature-values <family-name># { <declaration-rule-list> }    
  
<family-name> =   
  <string>         |  
  <custom-ident>+    
  
```

例
-

### @font-feature-values ルール内での @styleset の使用


```css
/\* "nice-style" を Font One に指定するアットルール \*/
@font-feature-values Font One {
  @styleset {
    nice-style: 12;
  }
}

/\* Font Two における "nice-style" のためのアットルール \*/
@font-feature-values Font Two {
  @styleset {
    nice-style: 4;
  }
}

…

/\* 1 回の宣言でアットルールを適用 \*/
.nice-look {
  font-variant-alternates: styleset(nice-style);
}
```

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-feature-values |

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

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

関連情報
----

* このアットルールが定義する値を使用する `font-variant-alternates` プロパティ
CSSOM View
==========

**CSSOM View** は CSS のモジュールの一つで、文書の表示方法、特にスクロールの振る舞いを操作できるようにするものです。

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

### プロパティ

* `scroll-behavior`
ガイド
---

座標系

モニター上のウィンドウ、モバイル機器のビューポート、印刷時の紙上の位置などのディスプレイコンテキストにおける位置を特定するために使われる座標系についてのガイドです。

仕様書
---

| Specification |
| --- |
| CSS Overflow Module Level 3 # smooth-scrolling |

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

### scroll-behavior プロパティ

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
tab-size
========

CSS の **`tab-size`** プロパティは、タブ文字 (U+0009) の表示幅の指定に用います。

構文
--


```css
/\* <integer> 値 \*/
tab-size: 4;
tab-size: 0;

/\* <length> 値 \*/
tab-size: 10px;
tab-size: 2em;

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

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

### 値

`<integer>`

タブの幅として使用される空白文字（U+0020）の幅の倍数です。正の数でなければなりません。

`<length>`

タブの幅です。正の数でなければなりません。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `8` |
| 適用対象 | ブロックコンテナー |
| 継承 | あり |
| 計算値 | 指定された整数値または絶対的な長さ |
| アニメーションの種類 | length |

形式文法
----
```

tab-size =   
  <number [0,∞]>  |  
  <length [0,∞]>    
  
```

例
-

### 文字数による展開


```css
pre {
  tab-size: 4; /\* スペース 4 つ分となります \*/
}
```

### タブの折り畳み


```css
pre {
  tab-size: 0; /\* インデント除去 \*/
}
```

### 既定の大きさの比較

この例では、既定のタブの大きさとカスタムのタブの大きさを比較しています。タブがつぶれないように、 `white-space` を `pre` に設定していることに注意してください。

#### HTML


```html
<p>no tab</p>
<p>&#0009;default tab size of 8 characters wide</p>
<p class="custom">&#0009;custom tab size of 3 characters wide</p>
<p>&nbsp;&nbsp;&nbsp;3 spaces, equivalent to the custom tab size</p>
```


#### CSS


```css
p {
  white-space: pre;
}

.custom {
  tab-size: 3;
  -moz-tab-size: 3;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Text Module Level 3 # tab-size-property |

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

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

関連情報
----

* Controlling size of a tab character (U+0009) - Anne van Kesteren 氏 (Opera) からの CSSWG へのメール
initial-letter
==============

`initial-letter` は CSS のプロパティで、頭文字をドロップキャップにしたり、上げたり、下げたりすることを設定します。


```css
/\* キーワード値 \*/
initial-letter: normal;

/\* 数値 \*/
initial-letter: 1.5; /\* 頭文字が1.5行分を占める \*/
initial-letter: 3; /\* 頭文字が3行分を占める \*/
initial-letter: 3 2; /\* 頭文字が3行分を占め、
 2行分下がる \*/

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

構文
--

キーワード値の `normal`、または `<number>` と、その後に任意で `<integer>` が付きます。

### 値

`normal`

頭文字に特別な効果を付与しません。テキストは普通通りに表示されます。

`<number>`

頭文字の寸法を、何行を占めるかで指定します。負の値は使用できません。

`<integer>`

寸法が与えられたときに、頭文字が沈み込む行数を定義します。0 以上の値でなければなりません。省略された場合は、寸法の値を複製し、最も近い正の整数に切り捨てられます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `normal` |
| 適用対象 | `::first-letter` 擬似要素と、ブロックコンテナーの最初のインラインレベルの子 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

initial-letter =   
  normal                               |  
  <number [1,∞]> <integer [1,∞]>       |  
  <number [1,∞]> && [ drop | raise ]?    
  
```

例
-

### 先頭文字の大きさの設定

#### HTML


```html
<p class="normal">Initial letter is normal</p>
<p class="onefive">Initial letter occupies 1.5 lines</p>
<p class="three">Initial letter occupies 3 lines</p>
```


#### CSS


```css
.normal::first-letter {
  -webkit-initial-letter: normal;
  initial-letter: normal;
}

.onefive::first-letter {
  -webkit-initial-letter: 1.5;
  initial-letter: 1.5;
}

.three::first-letter {
  -webkit-initial-letter: 3;
  initial-letter: 3;
}
```


#### Result

仕様書
---

| Specification |
| --- |
| CSS Inline Layout Module Level 3 # sizing-drop-initials |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
<dashed-ident>
==============

**`<dashed-ident>`** は CSS のデータ型で、 identifier として使用される任意の文字列を示します。

構文
--

`<dashed-ident>` の構文は CSS の識別子（プロパティ名など）と似ていますが、大文字小文字を区別するという点が異なります。 2 つのダッシュで始まり、ユーザー定義の識別子が続きます。

先頭に 2 つのダッシュをつけることで、 CSS コードブロックを読むときに簡単に識別でき、標準 CSS キーワードとの名前の衝突を避けることができます。

`<custom-ident>` と同様に、 `<dashed-ident>` はユーザーによって識別されますが、 `<custom-ident>` とは異なり、 CSS は `<dashed-ident>` を定義しません。

例
-

### CSS カスタムプロパティでの使用

`<dashed-ident>` は CSS カスタムプロパティで使用されます。まずプロパティが宣言され、 CSS の var() 関数の中で使用されます。


```css
html {
  --primary-color: red;
  --secondary-color: blue;
  --tertiary-color: green;
}

h1,
h4 {
  color: var(--primary-color);
}

h2,
h5 {
  color: var(--secondary-color);
}

h3,
h6 {
  color: var(--tertiary-color);
}
```

### @color-profile での使用

`<dashed-ident>` が @color-profile アットルールで使用される場合、先にアットルールが宣言され、それから CSS の color() 関数内で使用されます。


```css
@color-profile --my-color-profile {
  src: url("https://example.org/SWOP2006\_Coated5v2.icc");
}

.header {
  background-color: color(--my-color-profile 0% 70% 20% 0%);
}
```

### @font-palette-values での使用

`<dashed-ident>` を @font-palette-values (en-US) アットルールで使用する場合、先にアットルールを宣言してから、 font-palette (en-US) プロパティの値として使用します。


```css
@font-palette-values --my-palette {
  font-family: Bixa;
  base-palette: 1;
  override-colors: 0 #ff0000;
}

h1,
h2,
h3,
h4 {
  font-palette: --my-palette;
}
```

仕様書
---

| Specification |
| --- |
| CSS Values and Units Module Level 4 # dashed-idents |

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

*この型は実際の型ではなく、他の CSS 構文の定義を簡略化するために使用する便宜的な型であるため、ブラウザーの互換性に関する情報はありません。*

関連情報
----

* <ident>
* <custom-ident>
columns
=======

**`columns`** は CSS 一括指定プロパティで、要素の内容物を描画する際に使用する段数や段の幅を設定します。

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

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

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

* `column-count`
* `column-width`
構文
--


```css
/\* 段の幅 \*/
columns: 18em;

/\* 段数 \*/
columns: auto;
columns: 2;

/\* 段の幅と段数の両方 \*/
columns: 2 auto;
columns: auto 12em;
columns: auto auto;

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


`columns` プロパティは以下に挙げる値を 1 つまたは 2 つで、順不同で指定します。

### 値

`<'column-width'>`

理想的な段の幅であり、 `<length>` または `auto` キーワードで定義されます。実際の段の幅は、実際の空間に合わせて広くなったり狭くなったりします。 `column-width` を参照してください。

`<'column-count'>`

要素の内容物が流れる理想的な段の数であり、 `<integer>` または `auto` キーワードで定義します。この値と段の幅の両方が `auto` でない場合は、最大の段数を示します。 `column-count` を参照してください。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `column-width`: `auto`
* `column-count`: `auto`
 |
| 適用対象 | 表ラッパーボックスを除くブロックコンテナー |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `column-width`: ゼロ以上の絶対的な長さ
* `column-count`: 指定通り
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `column-width`: length
* `column-count`: integer
 |

形式文法
----
```

columns =   
  <'column-width'>  ||  
  <'column-count'>    
  
```

例
-

### 3 つの等しい段の設定

#### HTML


```html
<p class="content-box">
  This is a bunch of text split into three columns using the CSS `columns`
  property. The text is equally distributed over the columns.
</p>
```


#### CSS


```css
.content-box {
  columns: 3 auto;
}
```


#### 結果

仕様書
---

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

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

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

関連情報
----

* `widows`
* `orphans`
* ページ化メディア
* 段組みレイアウト
text-orientation
================

**`text-orientation`** は CSS のプロパティで、行内のテキストの向きを設定します。このプロパティは縦書きのテキスト (`writing-mode` が `horizontal-tb` 以外の場合) でのみ効果があります。これは縦書きを使用する言語の表示を制御したり、縦書きの表見出しを作成したりするのに有用です。

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

構文
--


```css
/\* キーワード値 \*/
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways-right;
text-orientation: sideways;
text-orientation: use-glyph-orientation;

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


`text-orientation` プロパティは、以下のリストから単一のキーワードとして指定されます。

### 値

`mixed`

横書き用の文字を右に 90° 回転させ、縦書き用の文字は自然に配置します。既定値です。

`upright`

横書き用の文字を、縦書き用の字形と同様に自然に (正立で) 配置します。なお、このキーワードはすべての文字を左書きと見なします。 `direction` の使用値は `ltr` に強制されます。

`sideways`

全行を横書きで書いて 90° 回転したように配置します。

`sideways-right`

`sideways` の別名です。これは互換性のために維持されています。

`use-glyph-orientation`

SVG 要素上で、非推奨の SVG プロパティ `glyph-orientation-vertical` と `glyph-orientation-horizontal` の値を使用します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `mixed` |
| 適用対象 | 表の行グループ、列グループ、行、列を除くすべての要素 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | アニメーション不可 |

形式文法
----
```

text-orientation =   
  mixed     |  
  upright   |  
  sideways    
  
```

例
-

### HTML


```html
<p>Lorem ipsum dolet semper quisquam.</p>
```

### CSS


```css
p {
  writing-mode: vertical-rl;
  text-orientation: upright;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Writing Modes Level 4 # text-orientation |

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

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

関連情報
----

* 他の縦書きに関連する CSS プロパティ: `writing-mode`, `text-combine-upright`, `unicode-bidi`
* CSS 論理的プロパティ
* 縦書きテキストのスタイル付け (中国語、日本語、韓国語、モンゴル語)
* 広範なブラウザーの対応状況のテスト結果: https://w3c.github.io/i18n-tests/results/horizontal-in-vertical.html#text\_orientation
transition-delay
================

CSS の `transition-delay` プロパティは、値が変更されたときにプロパティのトランジション効果が始まるまでの待ち時間を指定します。

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

待ち時間はゼロ、正の数、負の数で指定します。

* `0s` (または `0ms`) の値は直ちにトランジション効果が始まります。
* 正の数の場合は、指定された時間の長さの分だけトランジション効果が始まるのが遅れます。
* 負の数の場合は、直ちにトランジション効果が、効果の途中から始まります。言い換えれば、効果は指定された時間の長さの分だけ既に実行されていたかのように動きます。

複数の待ち時間を指定することができ、複数のプロパティのトランジションを行うときに有用です。それぞれの待ち時間は、マスターリストである `transition-property` プロパティによって指定された対応するプロパティに適用されます。マスターリストよりも指定された待ち時間が少ない場合は、充足するまで待ち時間のリストが繰り返して使用されます。また待ち時間の数が多い場合は、リストが適切な長さに切り詰められます。どちらの場合も、 CSS の宣言として妥当です。

構文
--


```css
/\* <time> 値 \*/
transition-delay: 3s;
transition-delay: 2s, 4ms;

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

### 値

`<time>`

プロパティの値が変化してからトランジション効果が始まるまでの待ち時間を記述します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0s` |
| 適用対象 | すべての要素、`::before` / `::after` 擬似要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | アニメーション不可 |

形式文法
----
```

transition-delay =   
  <time>#    
  
```

例
-

### 様々な待ち時間を示す例

#### HTML


```html
<div class="box delay-1">0.5 seconds</div>

<div class="box delay-2">2 seconds</div>

<div class="box delay-3">4 seconds</div>

<button id="change">Change</button>
```


#### CSS


```css
.box {
  margin: 20px;
  padding: 10px;
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 18px;
  transition-property: background-color font-size transform color;
  transition-timing-function: ease-in-out;
  transition-duration: 3s;
}

.transformed-state {
  transform: rotate(270deg);
  background-color: blue;
  color: yellow;
  font-size: 12px;
  transition-property: background-color font-size transform color;
  transition-timing-function: ease-in-out;
  transition-duration: 3s;
}

.delay-1 {
  transition-delay: 0.5s;
}

.delay-2 {
  transition-delay: 2s;
}

.delay-3 {
  transition-delay: 4s;
}
```


#### JavaScript


```js
function change() {
  const elements = document.querySelectorAll("div.box");
  for (let element of elements) {
    element.classList.toggle("transformed-state");
  }
}

const changeButton = document.querySelector("#change");
changeButton.addEventListener("click", change);
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Transitions # transition-delay-property |

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

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

関連情報
----

* CSS トランジションの利用
* `TransitionEvent`
CSS 雑題
======

このページでは、非常に実験的であるか、他の分類に適合しない CSS プロパティを扱います。

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

### プロパティ

* `all`
* `text-rendering`
ガイド
---

*なし。*

仕様書
---

*これらのプロパティは互いにほとんど無関係です。仕様書については個々の記事を参照して下さい。*

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

*これらのプロパティは互いにほとんど無関係です。ブラウザーで利用できるかどうかは個々の記事を参照して下さい。*