recursal/MDN huggingface dataset:
background-image
================

**`background-image`** は CSS のプロパティで、要素に 1 つ以上の背景画像を設定します。

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

画像はお互いの上に積み重ねるコンテキストレイヤーに描画されます。最初に指定されたレイヤーが、ユーザーに対し最も手前にあるかのように描画されます。

要素の境界は背景画像よりも上、 `background-color` は背景画像より下に描画されます。画像がボックスとその境界に対し相対的にどう描画されるかは、 `background-clip` および `background-origin` プロパティによって定義されます。

指定された画像を描画することができない (例えば、指定された URI が指し示すファイルをロードできない) 場合、ブラウザーはその指定を `none` 値であるかのように処理します。

**メモ:** たとえ画像が不透明で通常は色が表示されないとしても、ウェブ開発者は常に `background-color` を指定すべきです。例えばネットワークが切断された場合など、もし画像が読み込めなかったときに、背景色がフォールバックとして使われます。

構文
--

それぞれの背景画像は、キーワード `none` または `<image>` 値として指定されます。

複数の背景画像を指定するには、複数の値をカンマで区切って指定してください。


```css
background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 0, 0.5),
    rgba(0, 0, 255, 0.5)
  ), url("catfront.png");

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

### 値

`none`

画像を用いないことを表すキーワード。

`<image>`

表示する背景を記述する `<image>`。複数の背景に対応している場合は、カンマ区切りで複数指定することができます。

アクセシビリティの考慮
-----------

ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。

* MDN "WCAG を理解する ― ガイドライン 1.1 の解説"
* Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0
公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | すべての要素。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | なし |
| 計算値 | 指定通り、ただし `url` の値は絶対パスになる |
| アニメーションの種類 | 離散値 |

形式文法
----
```

background-image =   
  <bg-image>#    
  
<bg-image> =   
  <image>  |  
  none       
  
<image> =   
  <url>       |  
  <gradient>    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
```

例
-

### 背景画像の重ね合わせ

星の画像は一部透過となっており、猫の画像の上に重ねられている点に注意してください。

#### HTML


```html
<div>
  <p class="catsandstars">This paragraph is full of cats<br />and stars.</p>
  <p>This paragraph is not.</p>
  <p class="catsandstars">Here are more cats for you.<br />Look at them!</p>
  <p>And no more.</p>
</div>
```


#### CSS


```css
p {
  font-size: 1.5em;
  color: #fe7f88;
  background-image: none;
  background-color: transparent;
}

div {
  background-image: url("mdn\_logo\_only\_color.png");
}

.catsandstars {
  background-image: url("startransparent.gif"), url("catfront.png");
  background-color: transparent;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # background-image |

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

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

関連情報
----

* CSS での画像スプライトの実装
* `<img>`
* 画像に関するデータ型: `<image>`, `<gradient>`
* 画像に関する関数:
    + `cross-fade()`
    + `element()`
    + `image()`
    + `image-set()`
    + `linear-gradient()`
    + `radial-gradient()`
    + `conic-gradient()`
    + `repeating-linear-gradient()`
    + `repeating-radial-gradient()`
    + `repeating-conic-gradient()`
    + `paint()`
    + `url()`
counter()
=========

**`counter()`** は CSS の関数で、指定された名前付きカウンターの現在値があれば、その文字列を返します。擬似要素において用いるのが多いものの、理論的には `<string>` に対応するすべての箇所で用いることができます。


```css
/\* 単純な使用法 \*/
counter(countername);

/\* カウンターの表示の変更 \*/
counter(countername, upper-roman)
```

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

カウンター自身には視覚的効果が何もありません。 `counter()` 関数 (および `counters()` 関数) は開発者が定義した文字列 (または画像) を返すことでカウンターは利用価値が生まれます。

**メモ:** `counter()` 関数は CSS プロパティとも併用できますが、 `content` 以外のプロパティにおける対応は実験的であり、型または単位の引数への対応は限られています。

ブラウザーの互換性の表を注意深く確認してから本番環境に用いてください。

構文
--

### 値

`<custom-ident>`

カウンターを識別する名前であり、`counter-reset` および `counter-increment` に用いた名前と、大文字小文字まで同一でなければなりません。名前をダッシュ 2 つで始めることはできず、また `none`, `unset`, `initial`, `inherit` という名前は禁止です。

`<counter-style>`

`<list-style-type>` 名、 `<@counter-style>` 名、 `symbols()` 関数の何れかです。カウンタースタイル名には `numeric`, `alphabetic`, `symbolic` などの単純な定義済みスタイル、より複雑なアジアやエチオピアのカウンタースタイル、その他の定義済みカウンタースタイルがあります。省略された場合は、既定で `decimal` になります。

### 形式文法
```

<counter()> =   
  counter( <counter-name> , <counter-style>? )    
  
<counter-style> =   
  <counter-style-name>  |  
  <symbols()>             
  
<symbols()> =   
  symbols( <symbols-type>? [ <string> | <image> ]+ )    
  
<symbols-type> =   
  cyclic      |  
  numeric     |  
  alphabetic  |  
  symbolic    |  
  fixed         
  
<image> =   
  <url>       |  
  <gradient>    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
```

例
-

### 既定値と upper-roman との比較

#### HTML


```html
<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>
```


#### CSS


```css
ol {
  counter-reset: listCounter;
}
li {
  counter-increment: listCounter;
}
li::after {
  content: "[" counter(listCounter) "] == [" counter(listCounter, upper-roman)
    "]";
}
```


#### 結果

### decimal-leading-zero と lower-alpha との比較

#### HTML


```html
<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>
```


#### CSS


```css
ol {
  counter-reset: count;
}
li {
  counter-increment: count;
}
li::after {
  content: "[" counter(count, decimal-leading-zero) "] == [" counter(
      count,
      lower-alpha
    )
    "]";
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # counter-functions |

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

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

関連情報
----

* CSS カウンターの使用
* `counter-reset`
* `counter-set`
* `counter-increment`
* `@counter-style`
* CSS の `counters()` 関数
scroll-padding-inline-end
=========================

`scroll-padding-inline-end` プロパティは、スクロールポートの*最適表示領域*のインライン方向における末尾側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。

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

構文
--


```css
/\* キーワード値 \*/
scroll-padding-inline-end: auto;

/\* <length> 値 \*/
scroll-padding-inline-end: 10px;
scroll-padding-inline-end: 1em;
scroll-padding-inline-end: 10%;

/\* グローバル値 \*/
scroll-padding-inline-end: inherit;
scroll-padding-inline-end: initial;
scroll-padding-inline-end: revert;
scroll-padding-inline-end: unset;
```

### 値

`<length-percentage>`

スクロールポートのインライン方向の末尾側からの内側のオフセットで、有効な長さまたはパーセント値です。

`auto`

オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | スクロールコンテナー |
| 継承 | なし |
| パーセント値 | スクロールコンテナーのスクロールポートに対する相対値 |
| 計算値 | 指定通り |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

scroll-padding-inline-end =   
  auto                       |  
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

仕様書
---

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # padding-longhands-logical |

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

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

関連情報
----

* CSS スクロールスナップ
* Well-Controlled Scrolling with CSS Scroll Snap
hyphens
=======

**`hyphens`** は CSS のプロパティで、文字列を複数行にわたって折り返す際に、単語のハイフネーションを行う方法を指定します。ハイフネーションをまったく行わなかったり、手動で指定された位置で文字列のハイフネーションを行ったり、ブラウザーに適切な位置にハイフンを挿入させたりすることができます。

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

**メモ:** 上記のデモでは、 "An extra­ordinarily long English word!" に非表示の `&shy;` の文字が含まれており、 `An extra&shy;­ordinarily long English word!` のようになっています。この文字は `hyphens: manual;` が指定された場合にハイフンを挿入することができる位置を示しています。

ハイフネーションの規則は言語に依存します。 HTML では言語は `lang` 属性で特定され、ブラウザーはこの属性が存在し、適切なハイフネーション辞書が利用できる場合にのみハイフネーションを行います。 XML では、`xml:lang` (en-US) 属性を使用する必要があります。

**メモ:** どのようにハイフネーションを行うかの規則は仕様書で明確に定義されていないため、厳密なハイフネーションの方式はブラウザーにより異なります。

構文
--


```css
/\* キーワード値 \*/
hyphens: none;
hyphens: manual;
hyphens: auto;

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


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

### 値

`none`

単語内で分割が提案されている文字の位置であっても、改行で単語を分割しません。行はホワイトスペースの位置のみで折り返します。

`manual`

単語内で分割が提案されている文字の位置でのみ、行の折り返しで単語を分割します。詳しくは改行候補位置の提案を参照してください。

`auto`

ブラウザーは自身が選択した規則に従って、ハイフネーションを行うのに適切な位置で自動的に単語を分割します。しかし、改行候補位置 (改行候補位置の提案を参照) があれば、自動的な改行位置の選択を上書きします。


**メモ:** `auto` を設定したときの動作は、正しくタグ付けされた言語に依存して、適切なハイフネーション規則が選択されます。選択した言語で自動的なハイフネーションが適用されるようにすることを保証するために、 HTML の `lang` 属性を必ず指定してください。

改行候補位置の提案
---------

文字列中で改行が可能な位置を手動で指定するために使用できる Unicode 文字は 2 つあります。

U+2010 (HYPHEN)

「ハード」ハイフン文字は、目に見える改行候補位置を示します。実際はその位置で改行されない場合でも、ハイフンが表示されます。

U+00AD (SHY)

不可視の「ソフト」ハイフン ("**s**oft" **hy**phen) です。この文字は表示されませんが、ブラウザーが必要に応じて単語を分割できる位置を示します。 HTML では、 `&shy;` を使用してソフトハイフンを挿入することができます。


**メモ:** HTML の `<wbr>` 要素によって改行が行われた場合、ハイフンは挿入されません。

公式定義
----

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

形式文法
----
```

hyphens =   
  none    |  
  manual  |  
  auto      
  
```

例
-

### テキストのハイフネーションの指定

以下の例では 3 つのクラスを使用し、それぞれの `hyphens` プロパティの設定を示します。

#### HTML


```html
<dl>
  <dt><code>none</code>: no hyphen; overflow if needed</dt>
  <dd lang="en" class="none">An extreme&shy;ly long English word</dd>
  <dt>
    <code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)
  </dt>
  <dd lang="en" class="manual">An extreme&shy;ly long English word</dd>
  <dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt>
  <dd lang="en" class="auto">An extreme&shy;ly long English word</dd>
</dl>
```


#### CSS


```css
dd {
  width: 55px;
  border: 1px solid black;
}
dd.none {
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}
dd.manual {
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
}
dd.auto {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
```


#### 例

仕様書
---

| Specification |
| --- |
| CSS Text Module Level 3 # hyphens-property |

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

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

関連情報
----

* `content`
* `overflow-wrap` (formerly `word-wrap`)
* `word-break`
* テキストの分割と折り返しのガイド
fit-content
===========

**`fit-content`** は `fit-content(stretch)` として動作します。実際には、ボックスは利用可能な空間を使用しますが、　`max-content` 以上にはならないことを意味します。

`width`, `height`, `min-width`, `min-height`, `max-width`, `max-height` のレイアウトされたボックスの大きさとして使用される場合、最大寸法と最小寸法は、コンテンツの寸法を参照します。

**メモ:** CSS Sizing の仕様書では、 `fit-content()` という関数も定義されています。このページではキーワード版について詳しく説明します。

構文
--


```css
width: fit-content;
block-size: fit-content;
```

例
-

### fit-content を使用してボックスの大きさを指定

#### HTML


```html
<div class="container">
  <div class="item">Item</div>
  <div class="item">Item with more text in it.</div>
  <div class="item">
    Item with more text in it, hopefully we have added enough text so the text
    will start to wrap.
  </div>
</div>
```


#### CSS


```css
.container {
  border: 2px solid #ccc;
  padding: 10px;
  width: 20em;
}

.item {
  width: fit-content;
  background-color: #8ca0ff;
  padding: 5px;
  margin-bottom: 1em;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # valdef-width-fit-content |

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

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

関連情報
----

* 関連する大きさのキーワード: `min-content`, `max-content`
align-tracks
============

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

**`align-tracks`** は CSS のプロパティで、ブロック軸が組積であるグリッドコンテナーの組積軸の配置を設定します。

構文
--


```css
/\* キーワード値 \*/
align-tracks: start;
align-tracks: space-between;
align-tracks: center;
align-tracks: start, center, end;

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


このプロパティは単一の値を取ることができ、その場合はすべてのトラックが同じように整列されます。値のリストが使用された場合、最初の値はグリッド軸の最初のトラックに適用され、2 番目は次のトラックに適用され、以下同様となります。

値がトラックより少ない場合は、最後の値が残りすべてのトラックに使用されます。トラックよりも値が多い場合、追加の値は無視されます。

### 値

`start`

アイテムは、組積軸の配置コンテナーの先頭の端に向かって、互いに詰められます。

`end`

アイテムは、組積軸の配置コンテナーの末尾の端に向かって、互いに詰められます。

`center`

アイテムは、組積軸に沿って配置コンテナーの中心に向かって、互いに詰められます。

`normal`

`start` として動作します。

`baseline first baseline`
`last baseline`

 ボックスの先頭または末尾のベースラインセットの配置ベースラインを、ベースライン共有グループのすべてのボックスの共有された先頭または末尾のベースラインセットの対応するベースラインに合わせます。
 `first baseline` の代替配置は `start`、`last baseline` の代替配置は `end` です。


`space-between`

アイテムは配置コンテナー内で組積軸に沿って均等に配置されます。隣接するアイテム同士の間の間隔は同じです。先頭のアイテムは、コンテナーの先頭の端に詰められ、末尾のアイテムは、コンテナーの末尾の端に詰められます。

`space-around`

アイテムは配置コンテナー内で組積軸に沿って均等に配置されます。隣接するアイテム同士の間の間隔は同じです。先頭のアイテムの前と末尾のアイテムの後の空き空間は、隣接するアイテム同士の空間の半分に等しくなります。

`space-evenly`

アイテムは組積軸に沿って配置コンテナー内に均等に配置されます。隣接するアイテム同士の間隔、コンテナーの先頭の端と先頭のアイテム、およびコンテナーの末尾の端と末尾のアイテムは、すべて正確に同じです。

`stretch`

アイテムは組積の軸に沿って伸び、コンテンツボックスを満たします。確定したサイズのアイテムは引き伸ばされません。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `normal` |
| 適用対象 | ブロック軸がマソンリーレイアウトのグリッドコンテナー |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----

Error: could not find syntax for this item例
-

### align-tracks に複数の値がある組積レイアウト

仕様書
---

| Specification |
| --- |
| CSS Grid Layout Module Level 3 # tracks-alignment |

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

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

関連情報
----

* 関連する CSS プロパティ: `justify-tracks`, `masonry-auto-flow`
フィルター効果
=======

**フィルター効果** (Filter Effects) は CSS のモジュールの一つで、要素が文書内に表示される前の処理方法を定義します。

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

### プロパティ

* `backdrop-filter`
* `filter`
### データ型

* `<filter-function>`
仕様書
---

| Specification |
| --- |
| Filter Effects Module Level 2  |
| Filter Effects Module Level 1  |

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

### `backdrop-filter` プロパティ

{{Compat}}### `filter` プロパティ

{{Compat}}
::view-transition-image-pair
============================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

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

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

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


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

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


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

構文
--


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


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

`*`

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

`root`

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

`<custom-ident>`

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

例
-


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

仕様書
---

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

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

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

関連情報
----

* ビュートランジション API
* ビュートランジション API によるスムーズでシンプルなトランジション
:-moz-first-node
================

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

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

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

構文
--


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

例
-

### CSS


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

### HTML


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

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

### 結果

仕様書
---

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

関連情報
----

* `:-moz-last-node`
* `:first-child`
:popover-open
=============

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

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

構文
--


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

例
-

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


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


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


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

仕様書
---

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

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

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

関連情報
----

* ポップオーバー API
border-start-start-radius
=========================

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


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

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

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

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

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

構文
--

### 値

`<length-percentage>`

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

公式定義
----

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

形式文法
----
```

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

例
-

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

#### HTML


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


#### CSS


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

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


#### 結果

仕様書
---

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

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

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

関連情報
----

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

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


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

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

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

構文
--

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

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

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

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

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


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

仕様書
---

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

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

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

関連情報
----

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

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

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

構文
--


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

例
-

### HTML


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

### CSS


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

### 結果

仕様書
---

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

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

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

関連情報
----

* Mozilla の CSS 拡張
* HTML ドラッグ＆ドロップ
置換要素
====

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

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

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

置換要素
----

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

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

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

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

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

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

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

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

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

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

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

`object-fit`

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

`object-position`

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

関連情報
----

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