recursal/MDN huggingface dataset:
border-bottom-color
===================

**`border-bottom-color`** は CSS のプロパティで、要素の下側の境界線の色を設定します。一括指定プロパティの `border-color` または `border-bottom` でも設定することができます。

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

構文
--


```css
/\* <color> 値 \*/
border-bottom-color: red;
border-bottom-color: #ffbb00;
border-bottom-color: rgb(255, 0, 0);
border-bottom-color: hsla(100%, 50%, 25%, 0.75);
border-bottom-color: currentcolor;
border-bottom-color: transparent;

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


`border-bottom-color` プロパティは 1 つの値で指定します。

### 値

`<color>`

境界線の色を定義します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `currentcolor` |
| 適用対象 | すべての要素。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| 計算値 | 色の計算値 |
| アニメーションの種類 | 色 |

形式文法
----
```

border-bottom-color =   
  <color>     |  
  <image-1D>    
  
<image-1D> =   
  <stripes()>    
  
<stripes()> =   
  stripes( <color-stripe># )    
  
<color-stripe> =   
  <color>                            &&  
  [ <length-percentage> | <flex> ]?    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

### 境界線が付いた単純な div

#### HTML


```html
<div class="mybox">
  <p>
    これは周囲に境界線があるボックスです。 なお、ボックスのその辺が
    <span class="redtext">赤</span>になっています。
  </p>
</div>
```


#### CSS


```css
.mybox {
  border: solid 0.3em gold;
  border-bottom-color: red;
  width: auto;
}

.redtext {
  color: red;
}
```


#### 結果

仕様書
---

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

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

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

関連情報
----

* 境界に関する CSS 一括指定プロパティ: `border`, `border-bottom`, `border-color`.
* 他の境界線の色に関する CSS プロパティ: `border-right-color`, `border-top-color`, `border-left-color`
* 同じ境界線に適用される他の境界関連の CSS プロパティ: `border-bottom-style`, `border-bottom-width`
overscroll-behavior-y
=====================

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

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


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

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

構文
--

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

### 値

`auto`

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

`contain`

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

`none`

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

公式定義
----

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

形式文法
----
```

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

例
-

### 背後にある要素の縦スクロールの抑止


```css
.messages {
  height: 220px;
  overflow: auto;
  overscroll-behavior-y: contain;
}
```


完全な例と説明については、 `overscroll-behavior` を参照してください。

仕様書
---

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

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

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

関連情報
----

* スクロールを制御する: 引いて更新や末端の効果のカスタマイズ
* The mapped logical properties: `overscroll-behavior-inline`, `overscroll-behavior-block`
-webkit-mask-box-image
======================

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

`-webkit-mask-box-image` はマスク画像を要素の境界ボックスに設定します。

* 初期値: なし
* 適用先: すべての要素
* 継承: なし
* メディア: `visual`
* 計算値: 指定通り
構文
--
```

-webkit-mask-box-image: <mask-box-image> [<top> <right> <bottom> <left> <x-repeat> <y-repeat>]
```


ここで、

<mask-box-image>

``<uri>` | <gradient> | none`

<top> <right> <bottom> <left>

`<length> | <percentage>`

<x-repeat> <y-repeat>

`repeat | stretch | round | space`

### 値

<uri>

マスク画像として使用する画像リソースの位置です。

<gradient>

マスク画像として使用する `-webkit-gradient` 関数です。

none

境界ボックスにマスク画像がないことを示すために使用します。

<length>

マスク画像のオフセットの大きさです。利用可能な単位は `<length>` を参照してください。

<percentage>

マスク画像のオフセットで、境界ボックスの対応する長さ（幅または高さ）に対するパーセント値です。

repeat

マスク画像は、境界ボックスの範囲に必要な回数だけ繰り返されます。マスク画像が境界ボックスに均等に配置できない場合は、部分画像を含むことがあります。

stretch

マスク画像は、境界ボックスを正確に含むように引き伸ばされます。

round

マスク画像は多少引き伸ばされ、教秋ボックスの端にマスク画像の一部が残らないように繰り返されます。

space

マスク画像は引き伸ばされることなく何度でも繰り返されます。境界ボックスの端に、部分的なマスク画像は置かれません。

公式定義
----

DB に値が見つかりません！形式文法
----

Error: could not find syntax for this item例
-

### 画像の設定


```css
.exampleone {
  -webkit-mask-box-image: url("mask.png");
}
```

### 画僧のオフセットと塗りつぶし


```css
.exampletwo {
  -webkit-mask-box-image: url("logo.png") 100 100 0 0 round round;
}
```

仕様書
---

Not part of any standard.

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

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

関連情報
----

`mask`, `mask-origin`, `-webkit-mask-attachment`,`mask-clip`,`mask-image`,`-webkit-mask-composite`,`mask-repeat`
perspective
===========

**`perspective`** は CSS のプロパティで、 z=0 の平面とユーザーとの間の距離を定めて 3D に配置された要素に遠近感を与えます。

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

構文
--


```css
/\* キーワード値 \*/
perspective: none;

/\* <length> 値 \*/
perspective: 20px;
perspective: 3.5em;

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

### 値

`none`

立体的な座標変換を一切適用しないことを示すキーワードです。

`<length>`

ユーザーと z=0 平面間の距離を表す `<length>` です。立体的な座標変換を要素とその内容に適用するときに使います。 `0` や負の値ならば、立体的な座標変換は適用されません。

解説
--

z>0 である 3D 要素はより大きく、 z<0 である 3D 要素はより小さくなります。効果の強度はこのプロパティの値から決められます。

ユーザーの背後にある 3D 要素の部品、つまり z 軸座標が CSS の `perspective` プロパティの値より大きい要素は描画されません。

*消点*は既定で要素の中心に置かれますが、この位置は `perspective-origin` プロパティで変更できます。

このプロパティを `0` と `none` 以外の値で使用すると、新たな重ね合わせコンテキストを生成します。また、その場合、オブジェクトはそれを含む `position: fixed` の要素の包含ブロックとして動作します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | 座標変換可能要素 |
| 継承 | なし |
| 計算値 | 絶対的な長さまたは `none` |
| アニメーションの種類 | length |
| 重ね合わせコンテキストの生成 | あり |

形式文法
----
```

perspective =   
  none            |  
  <length [0,∞]>    
  
```

例
-

### 視点の設定

視点を様々な位置に設定した場合に立体がどのように変化するかを示す例は、 CSS 座標変換の使用 > 視点の設定にあります。

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 2 # perspective-property |

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

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

関連情報
----

* CSS 座標変換の使用
flex-shrink
===========

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-shrink`** は CSS のプロパティで、フレックスアイテムの縮小係数を設定します。すべてのフレックスアイテムの寸法がフレックスコンテナーよりも大きい場合、アイテムは `flex-shrink` の数値に従って縮小して収まります。

使用時は `flex-shrink` は `flex-grow` や `flex-basis` などの他のフレックスプロパティと共に使用され、ふつうは `flex` の一括指定を使用して定義されます。

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

構文
--


```css
/\* <number> 値 \*/
flex-shrink: 2;
flex-shrink: 0.6;

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


`flex-shrink` プロパティは単一の `<number>` で指定します。

### 値

`<number>`

`<number>` を参照してください。負の値は無効です。既定値は 1 です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `1` |
| 適用対象 | フロー内の擬似要素を含むフレックスアイテム |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 数値 |

形式文法
----
```

flex-shrink =   
  <number [0,∞]>    
  
```

例
-

### フレックスアイテムの縮小係数の設定

#### HTML


```html
<p>全体の幅は 500px で、フレックスアイテムの flex-basis は 120px です。</p>
<p>A、B、C には flex-shrink:1 が、D と E には flex-shrink:2 が設定されています。</p>
<p>D と E の幅は他より狭くなります。</p>
<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
</div>
```


#### CSS


```css
#content {
  display: flex;
  width: 500px;
}

#content div {
  flex-basis: 120px;
  border: 3px solid rgba(0, 0, 0, 0.2);
}

.box {
  flex-shrink: 1;
}

.box1 {
  flex-shrink: 2;
}
```


#### 結果

仕様書
---

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

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

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

関連情報
----

* CSS フレックスボックスガイド: *フレックスボックスの基本概念*
* CSS フレックスボックスガイド: *主軸方向のフレックスアイテムの比率の制御*
column-gap (grid-column-gap)
============================

**`column-gap`** は CSS のプロパティで、要素の段または列の間の隙間 (溝) の寸法を設定します。

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

当初は段組みレイアウトの一部でしたが、`column-gap` の定義は複数のレイアウト方式を含めるように拡張されました。現在はボックス配置の中で定義され、段組みレイアウト、フレキシブルボックス、グリッドレイアウトで使用されることがあります。

構文
--


```css
/\* キーワード値 \*/
column-gap: normal;

/\* <length> 値 \*/
column-gap: 3px;
column-gap: 2.5em;

/\* <percentage> 値 \*/
column-gap: 3%;

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


`column-gap` プロパティは以下に挙げた値の一つで指定します。

### 値

`normal`

列間 (段間) にはブラウザー既定の幅が使われます。段組みレイアウトでは `1em` と指定され、他の種類のレイアウトでは 0 になります。

`<length>`

列間 (段間) の寸法を `<length>` として定義します。 `<length>` のプロパティ値は負の数であってはいけません。

`<percentage>`

列間 (段間) の寸法を `<percentage>` として定義します。 `<percentage>` のプロパティ値は負の数であってはいけません。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `normal` |
| 適用対象 | 段組み要素、フレックスコンテナー、グリッドコンテナー |
| 継承 | なし |
| パーセント値 | コンテンツ領域の対応する寸法に対する相対値 |
| 計算値 | 指定通りで、 <length> は絶対長になり、 normal の計算値は段組み要素を除き 0 になる |
| アニメーションの種類 | length または パーセント値, calc(); |

形式文法
----
```

column-gap =   
  normal                     |  
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

### フレックスレイアウト

#### HTML


```html
<div id="flexbox">
  <div></div>
  <div></div>
  <div></div>
</div>
```


#### CSS


```css
#flexbox {
  display: flex;
  height: 100px;
  column-gap: 20px;
}

#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: auto;
}
```


#### 結果

### グリッドレイアウト

#### HTML


```html
<div id="grid">
  <div></div>
  <div></div>
  <div></div>
</div>
```


#### CSS


```css
#grid {
  display: grid;
  height: 100px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px;
  column-gap: 20px;
}

#grid > div {
  border: 1px solid green;
  background-color: lime;
}
```


#### 結果

### 段組みレイアウト

#### HTML


```html
<p class="content-box">
  This is some multi-column text with a 40px column gap created with the CSS
  `column-gap` property. Don't you think that's fun and exciting? I sure do!
</p>
```


#### CSS


```css
.content-box {
  column-count: 3;
  column-gap: 40px;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # column-row-gap |
| CSS Grid Layout Module Level 2 # gutters |
| CSS Multi-column Layout Module Level 1 # column-gap |

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

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

関連情報
----

* 関連する CSS プロパティ: `row-gap`, `gap`
* グリッドレイアウトのガイド: グリッドレイアウトの基本概念 - 溝
* 段組みレイアウトのガイド: 段組みのスタイル付け
fit-content()
=============

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

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

* Learn more
* See full compatibility
* Report feedback
**`fit-content()`** は CSS の関数で、指定された寸法を `min(最小サイズ, max(最小サイズ, 引数))` の式に従って有効な範囲の寸法に収めます。

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

この関数は CSS グリッドのプロパティにおいて、トラックの寸法を `max-content` で定義された最大寸法と `auto` で定義された最小寸法との間で、 `auto` と似た方法（すなわち `minmax(auto, max-content)`）で計算しますが、 `auto` の最小値よりも大きい場合は*引数*がトラックの寸法になるという点が異なります。

`max-content` および `auto` キーワードについての詳細は、 `grid-template-columns` ページを参照してください。

`fit-content()` 関数は `width`, `height`, `min-width`, `min-height`, `max-width`, `max-height` のレイアウトボックスの寸法としても使用され、最大寸法は内容物の最大寸法、最小寸法は内容物の最小寸法になります。

構文
--

引数として `<length>` または `<percentage>` を受け付ける関数です。


```css
/\* <length> 値 \*/
fit-content(200px)
fit-content(5cm)
fit-content(30vw)
fit-content(100ch)

/\* <percentage> 値 \*/
fit-content(40%)
```

### 値

`<length>`

絶対的な長さです。

`<percentage>`

指定された軸で有効な空間に対する相対的なパーセント値です。

グリッドプロパティでは、行トラックにおける列内のグリッドコンテナーのインライン方向の寸法およびグリッドコンテナーのブロック方向の寸法の相対値です。それ以外では、書字方向に応じてレイアウトボックスの有効なインライン方向の寸法またはブロック方向の寸法に対する相対値になります。

例
-

### グリッドカラムの大きさを fit-content で指定

#### HTML


```html
<div id="container">
  <div>コンテンツの幅のアイテム。</div>
  <div>
    テキストが多いアイテムです。コンテンツが最大幅より広いため、 300 ピクセルで固定されています。
  </div>
  <div>柔軟なアイテム</div>
</div>
```


#### CSS


```css
#container {
  display: grid;
  grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # sizing-values |

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

### css.properties.grid-template-columns.fit-content

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

### css.properties.width.fit-content\_function

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

関連情報
----

* 関連する大きさのキーワード: `min-content`, `max-content`
* 関連する CSS グリッドプロパティ: `grid-template`, `grid-template-rows`, `grid-template-columns`, `grid-template-areas`, `grid-auto-columns`, `grid-auto-rows`, `grid-auto-flow`
* グリッドレイアウトガイド: *線に基づく配置を使用したグリッドレイアウト*
* グリッドレイアウトガイド: *グリッドテンプレート領域 - グリッド定義の一括指定*
::view-transition-new
=====================

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-new`** は CSS の擬似要素で、ビュートランジションの「新しい」ビュー状態を表します。これは新しいビューのライブ表現で、トランジションの後を表します。

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

これは置換要素であり、 `object-fit` や `object-position` などのプロパティで操作できます。コンテンツのサイズに等しい自然な寸法を持ちます。

UA スタイルシートでは以下の既定値が指定されています。


```css
@keyframes -ua-view-transition-fade-in {
  from {
    opacity: 0;
  }
}

html::view-transition-new(\*) {
  position: absolute;
  inset-block-start: 0;
  inline-size: 100%;
  block-size: auto;

  animation-name: -ua-view-transition-fade-in;
  animation-duration: inherit;
  animation-fill-mode: inherit;
}
```


**メモ:** `::view-transition-new` のアニメーションを設定するために、追加のビュートランジションスタイルシートスタイルも設定されます。これらはビュートランジション中に動的に生成されます。詳細は仕様書の setup transition pseudo-elements および update pseudo-element styles の節を参照してください。

構文
--


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


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

`*`

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

`root`

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

`<custom-ident>`

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

例
-


```css
figcaption {
  view-transition-name: figure-caption;
}

@keyframes grow-x {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes shrink-x {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

::view-transition-old(figure-caption),
::view-transition-new(figure-caption) {
  height: auto;
  right: 0;
  left: auto;
  transform-origin: right center;
}

::view-transition-old(figure-caption) {
  animation: 0.25s linear both shrink-x;
}

::view-transition-new(figure-caption) {
  animation: 0.25s 0.25s linear both grow-x;
}
```

仕様書
---

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

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

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

関連情報
----

* ビュートランジション API
* ビュートランジション API によるスムーズでシンプルなトランジション
text-emphasis
=============

**`text-emphasis`** は CSS のプロパティで、 (空白や制御文字を除く) テキストに圏点を適用します。これは `text-emphasis-style` と `text-emphasis-color` の一括指定です。

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

`text-emphasis` プロパティは、 `text-decoration` とは大きく異なります。 `text-decoration` プロパティは継承されず、指定される装飾は要素全体にわたって適用されます。しかし、 `text-emphasis` は継承されます。これは、子孫に対して圏点を変更できることを意味します。

圏点の大きさは、ルビと同様にフォントの大きさの約 50% であり、 `text-emphasis` は現在の行間隔が圏点を表示するのに十分でない場合、行の高さに影響を与えることがあります。

**メモ:** `text-emphasis` は、 `text-emphasis-position` の値をリセットしません。これは、圏点のスタイルと色がテキストで異なる場合に、圏点の位置を要求することがほとんど見込まれないためです。珍しくもこれを必要とするような場合は、プロパティ `text-emphasis-position` を使用してください。

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

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

* `text-emphasis-color`
* `text-emphasis-style`
構文
--


```css
/\* 初期値 \*/
text-emphasis: none; /\* 圏点なし \*/

/\* <string> 値 \*/
text-emphasis: "x";
text-emphasis: "点";
text-emphasis: "\25B2";
text-emphasis: "\*" #555;
text-emphasis: "foo"; /\* 使用するべきではない。 'f' のみとして計算や表示が行われる \*/

/\* キーワード値 \*/
text-emphasis: filled;
text-emphasis: open;
text-emphasis: filled sesame;
text-emphasis: open sesame;

/\* 色と組み合わせたキーワード値 \*/
text-emphasis: filled sesame #555;

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

### 値

`none`

圏点なし。

`filled`

図形が単色で塗りつぶされます。 `filled` も `open` も指定されていない場合は、これが既定値です。

`open`

図形が中抜きになります。

`dot`

記号として小さな円を表示します。filled dot は `'•'` (`U+2022`)、open dot は `'◦'` (`U+25E6`) です。

`circle`

記号として大きな円を表示します。filled circle は `'●'` (`U+25CF`)、open circle は `'○'` (`U+25CB`) です。これは、他の図形が与えられていない場合、横書きモードで既定の形状です。

`double-circle`

記号として二重丸を表示します。filled double-circle は `'◉'` (`U+25C9`)、open double-circle は `'◎'` (`U+25CE`) です。

`triangle`

記号として三角形を表示します。filled triangle は `'▲'` (`U+25B2`)、open triangle は `'△'` (`U+25B3`) です。

`sesame`

記号としてゴマを表示します。filled sesame は `'﹅'` (`U+FE45`)、open sesame は`'﹆'` (`U+FE46`) です。これは、他の図形が与えられていない場合、縦書きモードで既定の形状です。

`<string>`

記号として文字列を表示します。 `<string>` には 1 *文字*を超える文字列を指定しないでください。ユーザーエージェントは、 1 つより多い書記素クラスターから構成される文字列を短縮したり無視したりする可能性があります。

`<color>`

記号の色を定義します。 color を指定しない場合、既定では `currentcolor` です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `text-emphasis-style`: `none`
* `text-emphasis-color`: `currentcolor`
 |
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | 一括指定の次の各プロパティとして* `text-emphasis-style`: 指定通り
* `text-emphasis-color`: 色の計算値
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `text-emphasis-color`: 色
* `text-emphasis-style`: 離散値
 |

形式文法
----
```

text-emphasis =   
  <'text-emphasis-style'>  ||  
  <'text-emphasis-color'>    
  
```

例
-

### 強調して色を付けた見出し

この例は、見出しの各文字に三角形の圏点を付けて描画します。

#### CSS


```css
h2 {
  text-emphasis: triangle #d55;
}
```


#### HTML


```html
<h2>これは重要です！</h2>
```


#### 結果

仕様書
---

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

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

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

関連情報
----

* 個別指定プロパティ: `text-emphasis-style`, `text-emphasis-color`
* 圏点の位置の定義を可能にする `text-emphasis-position` プロパティ
合成と混合
=====

**合成と混合** (Compositing and Blending) は CSS モジュールの一つで、様々な要素のシェイプを単一の画像に合成する方法を定義します。

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

### プロパティ

* `background-blend-mode`
* `isolation`
* `mix-blend-mode`
### データ型

* `<blend-mode>`
仕様書
---

| Specification |
| --- |
| Compositing and Blending Level 2  |
| Compositing and Blending Level 1  |

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

### `background-blend-mode` プロパティ

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

{{Compat}}### `mix-blend-mode` プロパティ

{{Compat}}
background-clip
===============

**`background-clip`** は CSS のプロパティで、要素の背景を境界ボックス、パディングボックス、コンテンツボックスのどれまで拡張するかを設定します。

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

要素に `background-image` または `background-color` がない場合、このプロパティは (`border-style` または `border-image` によって) 境界に透明な領域や部分的に不透明な領域がある場合のみ視覚効果があります。そうでなければ、境界は異なるマスク方法になります。

**メモ:** ルート要素は異なる背景の描画領域を持っているため、その要素に `background-clip` プロパティが指定されても効果はありません。「特殊要素の背景」を参照してください。

**メモ:** ルート要素が HTML 要素である文書の場合、ルート要素上の `background-image` の計算値が `none` であり、その `background-color` が `transparent` であると、ユーザーエージェントは代わりに、 `background` プロパティの計算値をその要素の HTML の `<body>` の子要素から伝搬させなければなりません。その `<body>` 要素の `background` プロパティの使用値はその初期値であり、伝搬された値は、それらがルート要素上で指定されたかのように扱われます。 HTML 文書を作成するときは、 HTML 要素ではなく、 `<body>` 要素にキャンバスの背景を指定することを推奨します。

構文
--


```css
/\* キーワード値 \*/
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;

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

### 値

`border-box`

背景を境界の外側の辺まで拡張します (但し、境界の下に重ね合わせられます)。

`padding-box`

背景をパディングの外側の辺まで拡張します。境界の下には背景が描かれません。

`content-box`

背景をコンテンツボックスの中に (切り取って) 表示します。

`text`

背景を前景のテキストの中に (切り取って) 表示します。

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

`background-clip: text` を使用する際には、背景色とその上に配置されたテキストの色のコントラスト比が、弱視の人がページの内容を読むことができる程度に高いことを確認してください。

背景画像が読み込まれないと、テキストが読めなくなることがあります。これを防ぐために、代替の `background-color` を追加し、画像なしでテストしてください。

`@supports` で機能クエリの使用し、`background-clip: text` に対応しているかどうかをテストして、対応していない場合はアクセス可能な代替手段を提供することを検討してください。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `border-box` |
| 適用対象 | すべての要素。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 反復可能リスト |

形式文法
----
```

background-clip =   
  <visual-box>#    
  
<visual-box> =   
  content-box  |  
  padding-box  |  
  border-box     
  
```

例
-

### HTML


```html
<p class="border-box">背景が境界の裏まで拡張されます。</p>
<p class="padding-box">背景が境界の内側の縁まで拡張されます。</p>
<p class="content-box">背景がコンテンツボックスの縁までだけ表示されます。</p>
<p class="text">背景が前景のテキストで切り取られます。</p>
```

### CSS


```css
p {
  border: 0.8em darkviolet;
  border-style: dotted double;
  margin: 1em 0;
  padding: 1.4em;
  background: linear-gradient(60deg, red, yellow, red, yellow, red);
  font: 900 1.2em sans-serif;
  text-decoration: underline;
}

.border-box {
  background-clip: border-box;
}
.padding-box {
  background-clip: padding-box;
}
.content-box {
  background-clip: content-box;
}

.text {
  background-clip: text;
  -webkit-background-clip: text;
  color: rgba(0, 0, 0, 0.2);
}
```


#### 結果

仕様書
---

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

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

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

関連情報
----

* `clip-path` プロパティは*要素全体*を表示する部分を定義するクリッピング領域を作成します。
* 背景のプロパティ: `background`, `background-color`, `background-image`, `background-origin`
* CSS ボックスモデルの紹介
<frequency-percentage>
======================

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

**`<frequency-percentage>`** は CSS のデータ型で、 `<frequency>` または `<percentage>` が取りうる値を表します。周波数の値、例えば音声の高さは、現在どの CSS プロパティでも使用されていません。

構文
--

`<frequency-percentage>` の値は `<frequency>` または `<percentage>` です。それぞれの構文についての詳細はそれぞれのリファレンスページを参照してください。

解説
--

### calc() での使用

許可されている型として `<frequency-percentage>` が指定されているところでは、これはパーセント値が周期として解決されるので、 `calc()` の式で利用することができます。

例
-

### 有効なパーセント値
```

90% 正のパーセント値
+90% 先頭に + が付いた正のパーセント値
-90% 負のパーセント値 — パーセント値を使用するすべてのプロパティで有効とは限らない
```

### 無効なパーセント値
```

90 % 数値と単位の間に空白を入れてはいけない。
```

### 有効な周波数値
```

12Hz     正の整数
4.3Hz    整数以外
14KhZ    単位は大文字小文字の区別がないが、 SI 以外の大文字小文字の使い分けは推奨しない。
+0Hz     先頭に + が付いた単位付きのゼロ
-0kHz    先頭に - が付いた単位付きのゼロ
```

### 無効な周波数値
```

12.0     これは単位がないため <number> であり <frequency> ではない。
7 Hz     数値と単位の間に空白を入れてはいけない。
0        単位のないゼロは <length> では許可されることがあるが、<frequency> では無効。
```

仕様書
---

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

関連情報
----

* CSS データ型
* CSS 値と単位
* 関連する CSS データ型:
    + `<frequency>`
    + `<percentage>`