recursal/MDN huggingface dataset:
unicode-bidi
============

**`unicode-bidi`** は CSS のプロパティで、 `direction` プロパティと共に、文書内の双方向テキストの扱いを指定します。例えば、テキストブロックに左書き (LTR) と右書き (RTL) の両方のテキストが含まれている場合、ユーザーエージェントは、複雑な Unicode アルゴリズムを用いてテキストの表示方法を決定します。 `unicode-bidi` プロパティは、このアルゴリズムを上書きして開発者がテキストの埋め込みを制御できるようにします。

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

`unicode-bidi` と `direction` プロパティだけは、 `all` 一括指定プロパティによる影響を受けません。

**警告:** このプロパティは文書型定義 (DTD) デザイナー向けです。ウェブデザイナー等の作者は、このアルゴリズムを**上書きすべきではありません**。

構文
--


```css
/\* キーワード値 \*/
unicode-bidi: normal;
unicode-bidi: embed;
unicode-bidi: isolate;
unicode-bidi: bidi-override;
unicode-bidi: isolate-override;
unicode-bidi: plaintext;

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

### 値

`normal`

要素は、双方向アルゴリズムを尊重し、追加の埋め込みのレベルを提供しません。インライン要素に対しては、要素の境界に渡って、並べ替え作業を省略します。

`embed`

要素がインラインの場合、この値は双方向アルゴリズムを尊重し、追加の埋め込みのレベルを開きます。この埋め込みレベルの方向は、 `direction` プロパティにより与えられます。

`bidi-override`

インライン要素に対しては、この値で上書きされます。ブロックコンテナー要素に対しては、この値でインラインレベルの子孫を上書きし、別のブロックコンテナー要素は上書きしません。これは、要素内部に作用することを意味し、並べ替えは `direction` による順序に従います。双方向アルゴリズムの省略された部分は無視されます。

`isolate`

このキーワードは、要素のコンテナーの記述方向が、要素の内容を考慮せずに計算されることを示します。要素はその兄弟から*隔離* (isolated) されます。双方向解決アルゴリズムが適用される時、そのコンテナー要素は、対象の要素を 1 個またはいくつかの `U+FFFC Object Replacement Character` として処理します。つまり、画像要素のように扱います。

`isolate-override`

このキーワードは、周囲のコンテンツに `isolate` キーワードの隔離処理を適用し、内部のコンテンツに `bidi-override` キーワードの上書き処理を適用します。

`plaintext`

 このキーワードは、要素の記述方向を、その親要素の双方向状態や `direction` プロパティの値を考慮せずに計算します。記述方向は、Unicode Bidirectional Algorithm の P2 および P3 規則を用いて計算されます。
 この値により、Unicode Bidirectional Algorithm に従うツールを用いてすでに整形されたデータを表示できます。


公式定義
----

|  |  |
| --- | --- |
| 初期値 | `normal` |
| 適用対象 | すべての要素。ただし一部の値はインラインでない要素には効果がありません |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | アニメーション不可 |

形式文法
----
```

unicode-bidi =   
  normal            |  
  embed             |  
  isolate           |  
  bidi-override     |  
  isolate-override  |  
  plaintext           
  
```

例
-

### CSS


```css
.bible-quote {
  direction: rtl;
  unicode-bidi: embed;
}
```

### HTML


```html
<div class="bible-quote">A line of text</div>
<div>Another line of text</div>
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Writing Modes Level 4 # unicode-bidi |

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

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

関連情報
----

* `direction`
font-size-adjust
================

**`font-size-adjust`** は CSS のプロパティで、 (大文字の大きさを定義する) 現在のフォントサイズに相対的な小文字の大きさを設定します。


```css
/\* 指定されたフォントサイズを使用 \*/
font-size-adjust: none;

/\* 小文字のフォントサイズを、指定された
フォントサイズの半分にする \*/
font-size-adjust: 0.5;

/\* 2 つの値 - Level 5 仕様書で追加 \*/
font-size-adjust: ex-height 0.5;

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


このプロパティが便利なのは、特に小さなサイズのフォントの読みやすさは、大文字の高さではなく小文字の高さで決まるからです。最初に選択した `font-family` が利用できず、その代替フォントのアスペクト比 (小文字の大きさとフォントの大きさの比率) が著しく異なる場合、読みやすさが問題になることがあります。

このプロパティの使い方は、 `font-size-adjust` に対応していないブラウザーと互換性を持たせるため、 `font-size` プロパティに掛け合わせる数値として指定します。つまり、このプロパティ指定された値は、ふつう最初に選択されたフォントのアスペクト比になります。例えば、次のように指定されたスタイルシートでは、


```css
font-size: 14px;
font-size-adjust: 0.5;
```


実際のところ、フォントの小文字が `7px` の高さ (0.5 x 14px) を持つべきであると指定しています。これは、 `font-size-adjust` に対応していないブラウザーでは `14px` のフォントが使用されている場合でも、妥当な結果が得られます。

構文
--

### 値

`none`

`font-size` プロパティだけを基準にフォントサイズを選びます。

ex-height | cap-height | ch-width | ic-width | ic-height

正規化の対象となるフォントメトリックを指定します。既定値は `ex-height` です。次のいずれかです。

`ex-height`

x-height をフォントサイズで割った値を使って、フォントのアスペクト値を正規化します。

`cap-height`

フォントの cap-height を正規化し、cap-height をフォントサイズで使用します。

`ch-width`

"0" (ZERO, U+0030) の送り幅をフォントサイズで割った値を使って、フォントの横方向の狭ピッチを正規化します。

`ic-width`

"水" (CJK water ideograph, U+6C34) の送り幅をフォントサイズで割って、フォントの水平方向のワイドピッチを正規化します。

`ic-height`

フォントの垂直方向のワイドピッチを、"水" (CJK water ideograph, U+6C34) のアドバンスハイトをフォントサイズで割った値で正規化します。


`<number>`

`font-size` に掛け合わせて小文字の高さ (そのフォントの文字 x の高さ) になるような値を指定し、フォントサイズを選びます。

指定した数値は、通常は最初に選んだ `font-family` のアスペクト比 (文字 x の高さとフォントサイズの比率) にしてください。こうすれば、最初に選んだフォントが利用可能なら、ブラウザーが `font-size-adjust` に対応しているかどうかに関わらず、どのブラウザーでも同じサイズで表示されます。

`0` は高さが 0 のテキスト (非表示テキスト) になります。

公式定義
----

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

形式定義
----
```

font-size-adjust =   
  none            |  
  <number [0,∞]>    
  
```

例
-

### 小文字の大きさの調整

#### HTML


```html
<p class="times">
  This text uses the Times font (10px), which is hard to read in small sizes.
</p>
<p class="verdana">
  This text uses the Verdana font (10px), which has relatively large lowercase
  letters.
</p>
<p class="adjtimes">
  This is the 10px Times, but now adjusted to the same aspect ratio as the
  Verdana.
</p>
```


#### CSS


```css
.times {
  font-family: Times, serif;
  font-size: 10px;
}

.verdana {
  font-family: Verdana, sans-serif;
  font-size: 10px;
}

.adjtimes {
  font-family: Times, serif;
  font-size-adjust: ex-height 0.58;
  font-size: 10px;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 5 # font-size-adjust-prop |

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

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

関連情報
----

* `font-size`
* `font-weight`
* 基本的なテキストとフォントの装飾
initial-letter-align
====================

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

CSS の **`initial-letter-align`** プロパティは、段落内の最初の文字の配置を指定します。


```css
/\* キーワード値 \*/
initial-letter-align: auto;
initial-letter-align: alphabetic;
initial-letter-align: hanging;
initial-letter-align: ideographic;

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

構文
--

以下に挙げたキーワード値のうちの一つです。

### 値

`auto`

ユーザーエージェントがテキストの言語に従って値を選択します。西洋の言語では既定で alphabetic であり、日中韓の言語は ideographic、一部のインド語派の言語は hanging になります。

`alphabetic`

上記の通り、最初の文字の大文字高は、テキストの最初の行の大文字高に配置されます。最初の文字のベースラインは N 文字目のテキストのベースラインに配置されます。

`hanging`

最初の文字のぶら下げベースラインは、テキストの最初の行のぶら下げベースラインに配置されます。

`ideographic`

最初の文字は N 行の領域の中央に配置されます。

公式定義
----

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

形式文法
----
```

initial-letter-align =   
  [ border-box? [ alphabetic | ideographic | hanging | leading ]? ]!    
  
```

例
-

### 最初の文字の配置

#### HTML


```html
<p class="auto ">Initial letter - auto</p>
<p class="alphabetic">Initial letter - alphabetic</p>
<p class="hanging">Initial letter - hanging</p>
<p class="ideographic">Initial letter - ideographic</p>
```


#### CSS


```css
.auto {
  -webkit-initial-letter-align: auto;
  initial-letter-align: auto;
}

.alphabetic {
  -webkit-initial-letter-align: alphabetic;
  initial-letter-align: alphabetic;
}

.hanging {
  -webkit-initial-letter-align: hanging;
  initial-letter-align: hanging;
}

.ideographic {
  -webkit-initial-letter-align: ideographic;
  initial-letter-align: ideographic;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Inline Layout Module Level 3 # aligning-initial-letter |

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

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

**`<time>`** は CSS のデータ型で、時間の値を秒単位またはミリ秒単位で表現します。これは `animation` や `transition` および関連するプロパティで使用されています。

構文
--

`<time>` データ型は、 `<number>` の直後に下記の単位を続けます。省略可能ですが、その前に単一の `+` または `-` を付けることもあります。どの単位の場合も、単位と数字との間には空白を置きません。

**メモ:** 数値の `0` は単位に関わらず常に同じですが、単位は省略できません。言い換えれば、 `0` は無効であり、 `0s` または `0ms` を表すものではありません。

### 単位

**`s`**

秒単位の時間を表します。例: `0s`, `1.5s`, `-60s`

**`ms`**

ミリ秒単位の時間を表します。例: `0ms`, `150.25ms`, `-60000ms`


**メモ:** `s` と `ms` の間の変換は、論理的に `1s` = `1000ms` となります。

例
-

### 有効な時間
```

12s         正の整数
-456ms      負の整数
4.3ms       整数でない数値
14mS        単位では大文字小文字が区別されませんが、大文字は推奨されません。
+0s         先導する + と単位を伴うゼロです
-0ms        先導する - と単位を伴うゼロです
```

### 無効な時間
```

0           単位なしのゼロは <length> では使えますが、他のすべての単位では無効です。
12.0        これは <number> であり、 <time> ではありません。単位が必須です。
7 ms        数値と単位との間に空白を置いてはいけません。
```

仕様書
---

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

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

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

関連情報
----

* `<time-percentage>`
* CSS 値と単位
mask-mode
=========

**`mask-mode`** は CSS のプロパティで、 `mask-image` で定義されたマスクを、輝度とアルファマスクのどちらで扱うかを設定します。


```css
/\* キーワード値 \*/
mask-mode: alpha;
mask-mode: luminance;
mask-mode: match-source;

/\* 複数の値 \*/
mask-mode: alpha, match-source;

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

構文
--

`mask-mode` プロパティは、以下に示す 1 つまたは複数のキーワード値を、カンマで区切って指定します。

### 値

`alpha`

このキーワードは、マスクレイヤーの透過性 (アルファチャンネル) の値をマスクの値として使用することを示します。

`luminance`

このキーワードは、マスクレイヤーの輝度の値をマスクの値として使用することを示します。

`match-source`

`mask-image` プロパティが `<mask-source>` 型であれば、マスクレイヤー画像の輝度の値がマスクの値として使用されます。

`<image>` 型であれば、マスクレイヤー画像のアルファ値がマスクの値として使用されます。

公式定義
----

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

形式文法
----
```

mask-mode =   
  <masking-mode>#    
  
<masking-mode> =   
  alpha         |  
  luminance     |  
  match-source    
  
```

例
-

### アルファマスクモードの使用

仕様書
---

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask-mode |

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

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

関連情報
----

* Clipping and Masking in CSS
mask-composite
==============

**`mask-composite`** は CSS のプロパティで、現在のマスクレイヤーとその下のマスクレイヤーとの間で使われる合成操作を表します。


```css
/\* キーワード値 \*/
mask-composite: add;
mask-composite: subtract;
mask-composite: intersect;
mask-composite: exclude;

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

構文
--

以下に示す 1 つまたは複数のキーワード値を、カンマで区切って指定します。

### 値

混合において、現在のマスクレイヤーは *source*、その下にあるすべてのマスクレイヤーは *destination* とします。

`add`

source が destination の上に配置されます。

`subtract`

destination の外側に source が配置されます。

`intersect`

destination と重なっている source の部分が destination を置き換えます。

`exclude`

source と destination で重なっていない領域が結合されます。

公式定義
----

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

形式文法
----
```

mask-composite =   
  <compositing-operator>#    
  
<compositing-operator> =   
  add        |  
  subtract   |  
  intersect  |  
  exclude      
  
```

例
-

### マスクレイヤーを加算で合成

仕様書
---

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask-composite |

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

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

関連情報
----

* Clipping and Masking in CSS
overscroll-behavior-block
=========================

**`overscroll-behavior-block`** は CSS のプロパティで、スクロール領域のブロック方向の境界に達したときのブラウザーの挙動を設定します。

全体的な説明は `overscroll-behavior` を参照してください。


```css
/\* キーワード値 \*/
overscroll-behavior-block: auto; /\* 既定値 \*/
overscroll-behavior-block: contain;
overscroll-behavior-block: none;

/\* グローバル値 \*/
overscroll-behavior-block: inherit;
overscroll-behavior-block: initial;
overscroll-behavior-block: revert;
overscroll-behavior-block: revert-layer;
overscroll-behavior-block: unset;
```

構文
--

`overscroll-behavior-block` プロパティは、次の値の一覧のうち一つのキーワードで指定します。

### 値

`auto`

スクロールの末端における既定の振る舞いが通常通りに発生します。

`contain`

この値が設定された要素の内部では、スクロールの末端における既定の振る舞いが見られますが、隣接するスクロール領域に対するスクロール連鎖はありません。例えば、基底となる要素はスクロールしません。

`none`

隣接するスクロール領域に対するスクロール連鎖はなく、スクロールの末端における既定の振る舞いが抑制されます。

公式定義
----

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

形式文法
----
```

overscroll-behavior-block =   
  contain  |  
  none     |  
  auto       
  
```

例
-

### ブロック方向のオーバースクロールの抑止

このデモでは、一方がもう一方の中にある二つのブロックレベルボックスがあります。外側のボックスは広い `height` を持っているので、ページは垂直にスクロールします。内側のボックスは `width` (と `height`) が小さく、ビューポート内にきちんと収まりますが、内容は広い `height` を持つため、垂直にスクロールします。

既定では、内側のボックスがスクロールして境界に達すると、ページ全体がスクロールし始めますが、これはおそらく望ましくない動きです。ブロック方向でこれが発生することを防ぐために、内側のボックスに `overscroll-behavior-block: contain` を設定しました。

#### HTML


```html
<main>
  <div>
    <div>
      <p>
        <code>overscroll-behavior-block</code> has been used to make it so that
        when the scroll boundaries of the yellow inner box are reached, the
        whole page does not begin to scroll.
      </p>
    </div>
  </div>
</main>
```


#### CSS


```css
main {
  height: 3000px;
  width: 500px;
  background-color: white;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 19px,
    rgba(0, 0, 0, 0.5) 20px
  );
}

main > div {
  height: 300px;
  width: 400px;
  overflow: auto;
  position: relative;
  top: 50px;
  left: 50px;
  overscroll-behavior-block: contain;
}

div > div {
  height: 1500px;
  width: 100%;
  background-color: yellow;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 19px,
    rgba(0, 0, 0, 0.5) 20px
  );
}

p {
  padding: 10px;
  background-color: rgba(255, 0, 0, 0.5);
  margin: 0;
  width: 340px;
  position: relative;
  top: 10px;
  left: 10px;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Overscroll Behavior Module Level 1 # overscroll-behavior-longhands-logical |

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

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

関連情報
----

* スクロールを制御する: 引いて更新や末端の効果のカスタマイズ（英語）
inset
=====

**`inset`** は CSS のプロパティで、 `top`, `right`, `bottom`, `left` に対応する一括指定です。これは `margin` の一括指定における複数値の場合と同じ構文です。

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

*CSS 論理的プロパティ*の仕様書で定義されているものですが、*論理的*なオフセットを定義するものではありません。これは*物理的*なオフセットであり、要素の書字方向やテキストの向きには関係がありません。

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

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

* `top`
* `right`
* `bottom`
* `left`
構文
--


```css
/\* <length> 値 \*/
inset: 10px; /\* すべての辺に適用される値 \*/
inset: 4px 8px; /\* 上/下 左/右 \*/
inset: 5px 15px 10px; /\* 上 左/右 下 \*/
inset: 2.4em 3em 3em 3em; /\* 上 右 下 左 \*/

/\* 包含ブロックの幅 (左/右) または 高さ (上/下) に対する <percentage> \*/
inset: 10% 5% 5% 5%;

/\* キーワード値 \*/
inset: auto;

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

### 値

`inset` プロパティは `left` プロパティと同じ値を取ります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `top`: `auto`
* `bottom`: `auto`
* `left`: `auto`
* `right`: `auto`
 |
| 適用対象 | 位置指定要素 |
| 継承 | なし |
| パーセント値 | relative to the containing block’s size in the corresponding axis (e.g. width for left or right, height for top or bottom) |
| 計算値 | 一括指定の次の各プロパティとして* `top`: 長さで指定されると相当する絶対的な長さ、パーセント値として指定されると指定値、それ以外では `auto`
* `bottom`: 長さで指定されると相当する絶対的な長さ、パーセント値として指定されると指定値、それ以外では `auto`
* `left`: 長さで指定されると相当する絶対的な長さ、パーセント値として指定されると指定値、それ以外では `auto`
* `right`: 長さで指定されると相当する絶対的な長さ、パーセント値として指定されると指定値、それ以外では `auto`
 |
| アニメーションの種類 | length または パーセント値, calc(); |

形式文法
----
```

inset =   
  <'top'>{1,4}    
  
```

例
-

### 要素のオフセットの設定

#### HTML


```html
<div>
  <span class="exampleText">テキストの例</span>
</div>
```


#### CSS


```css
div {
  background-color: yellow;
  width: 150px;
  height: 120px;
  position: relative;
}

.exampleText {
  writing-mode: sideways-rl;
  position: absolute;
  inset: 20px 40px 30px 10px;
  background-color: #c8c800;
}
```


#### 結果

仕様書
---

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

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

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

関連情報
----

* 個別指定のボックスのオフセットプロパティ: `top`, `right`, `bottom`, `left`
* 対応する論理的プロパティの一括指定: `inset-block` および `inset-inline`
* `margin` 一括指定の複数値の構文
contain-intrinsic-size
======================

`contains-intrinsic-size` CSS プロパティは、`content-visibility`で指定された要素の自然なサイズを制御します。

構文
--


```css
/\* <length> values \*/
contain-intrinsic-size: 1000px;
contain-intrinsic-size: 10rem;

/\* <percentage> value \*/
contain-intrinsic-size: 10%;
```

仕様書
---

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # propdef-contain-intrinsic-size |

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

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

関連情報
----

* content-visibility: the new CSS property that boosts your rendering performance (web.dev)
@counter-style
==============

**`@counter-style`** は CSS のアットルールで、スタイルにあらかじめ設定されたものではないカウンターのスタイルを定義することができます。 `@counter-style` ルールはカウンターの値をどのように文字列表現に変換するかを定義します。


```css
@counter-style thumbs {
  system: cyclic;
  symbols: "\1F44D";
  suffix: " ";
}

ul {
  list-style: thumbs;
}
```


初期バージョンの CSS では、有用なカウンターのスタイルのセットを定義していました。しかし、何年にもわたって定義済みのスタイルがここに追加され続けたため、世界中の記法のニーズを満たすにはこのシステムでは不十分になりました。 `@counter-style` アットルールは、あらかじめ定義されたスタイルがニーズに合っていないときに独自のカウンタースタイルを定義できるようにすることで、この欠点を完全に解決します。

構文
--

### 記述子

それぞれの `@counter-style` は名前で識別され、記述子のセットを持ちます。

`system`

カウンターの整数値を文字列表現に変換するために使用するアルゴリズムを指定します。


`negative`

値が負の数の時に、カウンター表現の前または後に追加する記号を指定します。


`prefix`

マーカー表現の前に追加する記号を指定します。接頭辞は表現の最終段階で追加されるため、カウンターの最終的な表現では、負号の前に来ます。


`suffix`

prefix 記述子と同様に、マーカー表現に追加される記号を指定します。接尾辞はマーカー表現の後に来ます。


`range`

カウンタースタイルが適用される値の範囲を定義します。カウンタースタイルが範囲を外れたカウンター値を表現するために使用されると、カウンタースタイルは代替スタイルで代用されます。


`pad`

マーカー表現に最小文字数を適用する必要がある場合に使用されます。例えば、カウンターが 01 から始まって 02、03、04 のように進む場合は、パッド文字が使用されます。指定されたパッド値よりも長い文字数の場合は、マーカーは通常通りに構築されます。


`fallback`

指定したシステムでカウンター値の表現を構築できない場合や、カウンター値が指定された範囲の外にあった場合に、代わりに使用されるシステムを指定します。指定された代替スタイルも値の表現に失敗した場合は、代替スタイルの代替があれば、それが使用されます。代替システムが記述されていない場合や、代替システムのチェーンがカウンター値を表現できなかった場合は、最終的に decimal スタイルに代替されます。


`symbols`

マーカー表現に使用される記号を指定します。記号は文字列、画像、カスタム識別子を含むことができます。記号がマーカー表現を構築するためにどのように使用されるかは、 system 記述子で指定されたアルゴリズムによります。例えば、 system が fixed に指定されていた場合は、この記述子で N 個の記号が指定されていると、カウンターの最初の N 個の記号を表すために使用されます。記号のセットを使い切ると、リストの残りには代替スタイルが使用されます。

以下の `@counter-style` ルールでは、文字の記号ではなく画像を使用しています。記号に画像の値を使用するのは現在のところ「リスクのある」機能で、実装されているブラウザーはありません。


```css
@counter-style winners-list {
  system: fixed;
  symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg);
  suffix: " ";
}
```


`additive-symbols`

symbols 記述子で指定された記号は、多くのアルゴリズムではマーカーを構築するために使用されますが、 'addaptive' などの一部のシステムではこの記述子の*加算的タプル*に依存します。それぞれの加算的タプルはカウンター記号と、非負の整数の重みによって成ります。加算的タプルは重みの降順で指定しなければなりません。


`speak-as`

読み上げソフトのような音声合成で、カウンタースタイルを読み上げる方法を記述します。例えば、マーカー記号の値はこの記述子の値に応じて、順序付きリストでは数値やアルファベットとして、順序なしリストでは合図として読み上げられることがあります。

形式文法
----
```

@counter-style <counter-style-name> { <declaration-list> }
```

例
-

### counter-style で記号を設定


```css
@counter-style circled-alpha {
  system: fixed;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  suffix: " ";
}
```


上記のカウンタースタイルルールは、このようにリストに適用されます。


```css
.items {
  list-style: circled-alpha;
}
```


このようなリストを生成します。

 Ⓐ One
 Ⓑ Two
 Ⓒ Three
 Ⓓ Four
 Ⓔ Five
 …
 Ⓨ Twenty-five
 Ⓩ Twenty-six
 27 Twenty-seven
 28 Twenty-eight
 29 Twenty-nine
 30 Thirty

他の例はデモページをご覧ください。

### 既成のカウンタースタイル

100 以上の `counter-style` のコードスニペットを集めた Ready-made Counter Styles の文書をご覧ください。この文書では、世界中の言語と文化のニーズを満たすカウンタースタイルを提供しています。

カウンタースタイル変換ツール は、このリストから、カウンタースタイルのコピー＆ペーストコードをテストし、作成するために使用されます。

仕様書
---

| Specification |
| --- |
| CSS Counter Styles Level 3 # the-counter-style-rule |

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

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

関連情報
----

* `list-style`, `list-style-image`, `list-style-position`, `list-style-type`
* 無名のカウンタースタイルを作成する関数表記である `symbols()`
* CSS の `counter()` および `counters()` 関数
* カウンタースタイルのデモ (コード)
box-direction
=============

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

**警告:** これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。以前の標準であった `box-direction` は `flex-direction` に置き換えられたので、 `-moz-box-direction` は XUL でのみ使用されます。現在の標準についての情報はフレックスボックスを参照してください。

**`box-direction`** は CSS のプロパティで、ボックスが内容を通常通りに (上または左から) 配置するか、逆方向に (下または右から) 配置するかを指定します。


```css
/\* キーワード値 \*/
box-direction: normal;
box-direction: reverse;

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

構文
--

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

### 値

`normal`

ボックスが内容を先頭 (左または上の端) から配置します。

`reverse`

ボックスが内容を末尾 (右または下の端) から配置します。

メモ
--

整列のために *start* と指定されたボックスの辺は、ボックスの方向によって異なります。

* 水平方向の要素の場合、 *start* は上端になります。
* 垂直方向の要素の場合、 *start* は左端になります。

start の反対側の端は *end* となります。

要素の `dir` 属性を使用して書字方向を設定した場合は、このスタイルは無視されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `normal` |
| 適用対象 | CSS の `display` の値が `box` または `inline-box` である要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----

Error: could not find syntax for this item例
-

### ボックスの方向を設定


```css
.example {
  /\* bottom-to-top layout \*/
  -moz-box-direction: reverse; /\* Mozilla \*/
  -webkit-box-direction: reverse; /\* WebKit \*/
  box-direction: reverse; /\* 仕様書通り \*/
}
```

仕様書
---

標準仕様には含まれていません。

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

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

関連情報
----

* `box-orient`
* `box-pack`
* `box-align`
* `flex-direction`
overflow-x
==========

Baseline 2022
-------------

Newly availableSince September 2022, 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
**`overflow-x`** は CSS のプロパティで、ブロックレベル要素の内容が左右の境界からあふれた場合、どのように表示するのかを設定します。表示しないか、スクロールバーを表示するか、あふれさせるかを設定できます。

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

構文
--


```css
/\* キーワード値 \*/
overflow-x: visible;
overflow-x: hidden;
overflow-x: clip;
overflow-x: scroll;
overflow-x: auto;

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


`overflow-x` プロパティは、以下の値の一覧のうち一つのキーワードで指定します。

### 値

`visible`

内容は切り取られず、パディングボックスの左右の辺よりも外側に表示される可能性があります。 `overflow-y` が `hidden`, `scroll`, `auto` のいずれかであり、このプロパティが `visible` である場合は、暗黙に `auto` に計算します。

`hidden`

水平方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。スクロールバーは表示されません。

`clip` 
Experimental

`hidden` のように、内容が要素のパディングボックスで切り取られます。 `clip` と `hidden` の違いは、 `clip` キーワードはプログラムによるスクロールも含め、すべてのスクロールを禁止することです。ボックスはスクロールコンテナーにならず、新しい整形コンテキストを開始しません。新しい整形コンテキストを始めるのであれば、 `display: flow-root` を使用して実現することができます。

`scroll`

水平方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。ブラウザーは内容が実際に切り取られるかどうかにかかわらず、スクロールバーを表示します。 (これは内容が変化したときにスクロールバーが表示されたり非表示になったりすることを防ぎます。) プリンターははみ出す内容を印刷するかもしれません。

`auto`

ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は `visible` と同じように表示されますが、新しいブロック整形文脈を生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `visible` |
| 適用対象 | ブロックコンテナー, フレックスコンテナー, グリッドコンテナー |
| 継承 | なし |
| 計算値 | 指定通り、ただし `overflow-x` と `overflow-y` のどちらかが `visible` でも clip でもない場合は、 `visible`/`clip` はそれぞれ `auto`/`hidden` と計算される |
| アニメーションの種類 | 離散値 |

形式文法
----
```

overflow-x =   
  visible  |  
  hidden   |  
  clip     |  
  scroll   |  
  auto       
  
```

例
-

### HTML


```html
<ul>
 - <code>overflow-x:hidden</code> — ボックスの外側のテキストを隠す
    <div id="div1">
  </li>

 - <code>overflow-x:scroll</code> — 常にスクロールバーを表示
    <div id="div2">
  </li>

 - <code>overflow-x:visible</code> — 必要に応じてテキストをボックスの外に表示
    <div id="div3">
  </li>

 - <code>overflow-x:auto</code> — 多くのブラウザーでは <code>scroll</code> と同じ
    <div id="div4">
  </li>
</ul>
```

### CSS


```css
#div1,
#div2,
#div3,
#div4 {
  border: 1px solid black;
  width: 250px;
  margin-bottom: 12px;
}

#div1 {
  overflow-x: hidden;
}
#div2 {
  overflow-x: scroll;
}
#div3 {
  overflow-x: visible;
}
#div4 {
  overflow-x: auto;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Overflow Module Level 3 # overflow-properties |

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

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

関連情報
----

* 関連する CSS プロパティ: `text-overflow`, `white-space`, `overflow`, `overflow-y`, `clip`, `display`