recursal/MDN huggingface dataset:
border-top-left-radius
======================

**`border-top-left-radius`** は CSS のプロパティは、角の曲率を定義する楕円の半径 (または半長軸と半短軸の半径) を指定することで、要素の左上の角を丸くします。

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

丸みは円または楕円にすることができ、値のうちの一つが `0` であれば、丸めは行われずに角は四角くなります。

![border-radius.png](/ja/docs/Web/CSS/border-top-left-radius/border-radius.png)

背景は、画像または単色ですが、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 `background-clip` プロパティの値で定義されます。

**メモ:** このプロパティの値が `border-top-left-radius` プロパティの後の `border-radius` 一括指定プロパティで設定されなかった場合、このプロパティは一括指定プロパティによって初期値にリセットされます。

構文
--


```css
/\* 角を円にする \*/
/\* border-top-left-radius: radius \*/
border-top-left-radius: 3px;

/\* 角を楕円にする \*/
/\* border-top-left-radius: horizontal vertical \*/
border-top-left-radius: 0.5em 1em;

border-top-left-radius: inherit;

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


値 1 つで指定する場合:

* 値は `<length>` または `<percentage>` であり、境界の角に使用する円の半径を示します。

値 2 つで指定する場合:

* 最初の値は `<length>` または `<percentage>` であり、境界の角に使用する楕円の水平の軌道長半径を示します。
* 最初の値は `<length>` または `<percentage>` であり、境界の角に使用する楕円の垂直の軌道長半径を示します。
### 値

`<length-percentage>`

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

公式定義
----

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

形式文法
----
```

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

例
-

### 円弧

単一の `<length>` 値は円弧を生成します。
```

<div></div>
```



```css
div {
  border-top-left-radius: 40px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}
```

### 楕円弧

2 つの異なる `<length>` 値は楕円弧を生成します。
```

<div></div>
```



```css
div {
  border-top-left-radius: 40px 20px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}
```

### パーセント値で丸みをつけた正方形の要素

正方形の要素に単一の `<percentage>` 値を指定すると、円弧を生成します。
```

<div></div>
```



```css
div {
  border-top-left-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}
```

### パーセント値で丸みをつけた長方形の要素

正方形ではない要素に単一の `<percentage>` 値を指定すると、楕円弧を生成します。
```

<div></div>
```



```css
div {
  border-top-left-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 200px;
  height: 100px;
}
```

仕様書
---

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

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

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

関連情報
----

CSS の border-radius に関するプロパティ: 一括指定の `border-radius`, 他の角のための `border-top-right-radius`, `border-bottom-right-radius`, `border-bottom-left-radius`
CSS ルビレイアウト
===========

**CSS ルビレイアウト** (CSS Ruby Layout) は CSS のモジュールの一つで、ルビ表記の表示に関するレンダリングモデルや整形の制御を提供します。ルビ表記は行間の表記の一種で、ベーステキストに沿った短いテキストで構成されます。これらはふつう東アジアの文書で、発音を示したり、短い説明を提供したりするために使用されます。

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

### プロパティ

* `ruby-align`
* `ruby-position`
仕様書
---

| Specification |
| --- |
| CSS Ruby Annotation Layout Module Level 1  |
scroll-snap-align
=================

`scroll-snap-align` プロパティは、ボックスのスナップ位置を、そのスナップコンテナーの (配置コンテナーとしての) スナップポート内における (配置主体としての) スナップ領域の配置として指定します。2つの値は、それぞれブロック軸とインライン軸内のスナップ位置合わせを指定します。値が1つだけ指定された場合、2番目の値は同じ値を既定値とします。

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

構文
--


```css
/\* キーワード値 \*/
scroll-snap-align: none;
scroll-snap-align: start end; /\* 2 つの値を指定すると、1 番目がブロック、2 番目がインラインとなる \*/
scroll-snap-align: center;

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

### 値

`none`

このボックスでは、その軸のスナップ位置を定義しません。

`start`

このスクロールコンテナーのスナップポートの中で、このボックスのスクロールスナップ領域の先頭位置がこの軸のスナップ位置になります。

`end`

このスクロールコンテナーのスナップポートの中で、このボックスのスクロールスナップ領域の末尾位置がこの軸のスナップ位置になります。

`center`

このスクロールコンテナーのスナップポートの中で、このボックスのスクロールスナップ領域の中央位置がこの軸のスナップ位置になります。

Safari は現在のところ、2 つの値の構文を誤った順序で実装しており、最初の値がインラインで次の値がブロックになっています。bug #191865 を参照してください。

公式定義
----

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

形式文法
----
```

scroll-snap-align =   
  [ none | start | end | center ]{1,2}    
  
```

仕様書
---

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # scroll-snap-align |

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

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

関連情報
----

* CSS スクロールスナップ
* Well-Controlled Scrolling with CSS Scroll Snap
段階変数用のCSSカスタムプロパティ
==================

**段階変数用の CSS カスタムプロパティ**とは何度も繰り返して用いられるカスタムプロパティを作成できるCSSモジュールです。

CSS プロパティ
---------

* `--*`
仕様
--

| Specification |
| --- |
| CSS Custom Properties for Cascading Variables Module Level 1  |
scroll-padding-block-start
==========================

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

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

構文
--


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

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

/\* グローバル値 \*/
scroll-padding-block-start: inherit;
scroll-padding-block-start: initial;
scroll-padding-block-start: unset;
```

### 値

`<length-percentage>`

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

`auto`

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

公式定義
----

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

形式文法
----
```

scroll-padding-block-start =   
  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
padding-inline-end
==================

**`padding-inline-end`** は CSS のプロパティで、要素のインライン方向の論理的な末尾側のパディングを定義し、それが要素の書字方向やテキストの方向に応じて物理的なパディングに対応づけられます。

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

構文
--


```css
/\* <length> 値 \*/
padding-inline-end: 10px; /\* 絶対的な長さ \*/
padding-inline-end: 1em; /\* テキストの大きさに対する相対値 \*/

/\* <percentage> 値 \*/
padding-inline-end: 5%; /\* ブロックコンテナーの幅に対する割合のパディング \*/

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

### 値

`<length>`

パディングの寸法を固定値で指定します。負の値は指定できません。

`<percentage>`

パディングの寸法を包含ブロックのインラインサイズ（`writing-mode` で横書き言語と定義されている場合は *width*）に対するパーセント値で示したものです。負の数であってはいけません。

解説
--

`padding-inline-end` プロパティは、`padding-top` プロパティと同じ値を取ると仕様で定義されています。しかし、このプロパティが対応づけられる物理的なプロパティは、 `writing-mode`, `direction`, `text-orientation` に設定された値に依存します。したがって、`padding-bottom`, `padding-right`, `padding-left` の何れかに対応づけられる可能性があります。

関連プロパティとして、要素の他のマージンを定義する `padding-block-start`, `padding-block-end`, `padding-inline-start` があります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group`, `table-column` を除くすべての要素 |
| 継承 | なし |
| パーセント値 | 包含ブロックの論理的な幅 |
| 計算値 | `length` 通り |
| アニメーションの種類 | length |

形式文法
----
```

padding-inline-end =   
  <'padding-top'>    
  
```

例
-

### 縦書きテキストにおけるインライン方向の末尾のパディングの設定

#### HTML


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


#### CSS


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

.exampleText {
  writing-mode: vertical-lr;
  padding-inline-end: 20px;
  background-color: #c8c800;
}
```


#### 結果

仕様書
---

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

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

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

関連情報
----

* CSS 論理的プロパティと値
* 対応づけ先の物理的プロパティ: `padding-top`, `padding-right`, `padding-bottom`, `padding-left`
* `writing-mode`, `direction`, `text-orientation`
-webkit-text-stroke
===================

**`-webkit-text-stroke`** は CSS のプロパティで、テキスト文字の輪郭線の幅と色を指定します。これは個別指定プロパティ `-webkit-text-stroke-width` および `-webkit-text-stroke-color` の一括指定プロパティです。


```css
/\* 幅と色の値 \*/
-webkit-text-stroke: 4px navy;
text-stroke: 4px navy;

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

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

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

* `-webkit-text-stroke-color`
* `-webkit-text-stroke-width`
構文
--

### 値

`<length>`

輪郭線の幅です。

`<color>`

輪郭線の色です。

公式定義
----

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

形式文法
----
```

-webkit-text-stroke =   
  <line-width>  ||  
  <color>         
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
```

例
-

### テキストに赤い輪郭線を追加

#### HTML


```html
<p id="example">このテキストの輪郭線は赤です。</p>
```


#### CSS


```css
#example {
  font-size: 3em;
  margin: 0;
  -webkit-text-stroke: 2px red;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| Compatibility Standard # the-webkit-text-stroke |

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

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

関連情報
----

* Surfin' Safari blog post announcing this feature
* CSS-Tricks article explaining this feature
* `-webkit-text-stroke-width`
* `-webkit-text-stroke-color`
* `-webkit-text-fill-color`
::-moz-progress-bar
===================

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

**`::-moz-progress-bar`** は CSS の擬似要素で Mozilla 拡張であり、 `<progress>` 要素の中のプログレスバーを表します。 (バーは進捗した量を表します。)

`<progress>` のまだ終了していない部分を Mozilla で選択したい場合は、 `<progress>` で直接選択してください。

構文
--

Error: could not find syntax for this item例
-

### HTML


```html
<progress value="30" max="100">30%</progress>
<progress max="100">Indeterminate</progress>
```

### CSS


```css
::-moz-progress-bar {
  background-color: red;
}

/\* 不確実なバーは強制的に幅をゼロにする \*/
:indeterminate::-moz-progress-bar {
  width: 0;
}
```

### 結果

仕様書
---

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

関連情報
----

* `<progress>`
* `::-ms-fill`
* `::-webkit-progress-bar` (en-US)
* `::-webkit-progress-value`
* `::-webkit-progress-inner-element` (en-US)
CSS カスケードと継承
============

**CSS カスケードと継承** (CSS cascade and inheritance) モジュールは、カスケードと継承によってプロパティに値を割り当てるルールを定義します。このモジュールは、すべての要素のすべてのプロパティの指定値を探すルールを指定します。

CSS の基本設計原則の一つに、ルールのカスケードがあります。これにより、複数のスタイルシートが文書の表示に影響を与えることができます。 CSS のプロパティ値の宣言は、文書の表示方法を定義します。複数の宣言が、同じ要素とプロパティの組み合わせに異なる値を設定することができますが、どの CSS プロパティでも適用できる値は 1 つだけです。 CSS カスケードモジュールは、これらの競合をどのように解決するかを定義します。

逆のことも起こりえます。プロパティの値を定義する宣言がないこともあります。 CSS カスケードモジュールは、これらの欠落した値を、継承またはプロパティの初期値からどのように設定するかを定義します。

**メモ:** ページコンテキストとそのマージンボックスの指定値を探すルールは、CSS ページモジュールに記述されています。

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

### プロパティ

* `all`
### アットルール

* `@import`
* `@layer`
### キーワード

* `initial`
* `inherit`
* `revert`
* `revert-layer` 
Experimental
* `unset`
* `!important` フラグ
### インターフェイス

* `CSSLayerBlockRule`
* `CSSGroupingRule`
* `CSSLayerStatementRule`
* `CSSRule`
### 主要概念と定義

* `詳細度`
* カスケードオリジンと重要性
* 値
    + 実効値
    + 計算値
    + 初期値
    + 解決値
    + 指定値
    + 使用値
* オリジンの種類
    + ユーザーエージェントオリジン
    + 作者オリジン
    + ユーザーオリジン
* レイヤーの宣言
    + 名前付きレイヤー
    + 無名レイヤー
* 用語集: スタイルオリジン
ガイド
---

CSS カスケード入門

ユーザーエージェントが異なる元から来たプロパティ値をどのように結合するかを定義するカスケードアルゴリズムのガイドです。

学習: カスケード、詳細度、継承

CSS の最も基本的な概念であるカスケード、詳細度、継承は、 CSS を HTML に適用する方法や競合を解決する方法を制御します。

学習: カスケードレイヤー

カスケードレイヤー の紹介です。 CSS カスケードと CSS 詳細度の基本概念の上に構築された、より高度な機能です。

CSS 継承

CSS 継承のガイドです。

関連する概念
------

* 要素に装着されたスタイル
* インラインスタイルとカスケード
* @imports の条件付きルール
仕様書
---

| Specification |
| --- |
| CSS Cascading and Inheritance Level 4  |
| CSS Cascading and Inheritance Level 5  |

関連情報
----

* CSS セレクターモジュール
* CSS 議事要素モジュール
* CSS ページ付きメディアモジュール
* CSS 条件付きルールモジュール
* CSS ネストモジュール
* 一括指定プロパティ
mask-clip
=========

**`mask-clip`** は CSS のプロパティで、マスクが影響する領域を指定します。要素の描画されるコンテンツはこの領域に制限されます。


```css
/\* <geometry-box> 値 \*/
mask-clip: content-box;
mask-clip: padding-box;
mask-clip: border-box;
mask-clip: margin-box;
mask-clip: fill-box;
mask-clip: stroke-box;
mask-clip: view-box;

/\* キーワード値 \*/
mask-clip: no-clip;

/\* 標準外のキーワード値 \*/
-webkit-mask-clip: border;
-webkit-mask-clip: padding;
-webkit-mask-clip: content;
-webkit-mask-clip: text;

/\* 複数の値 \*/
mask-clip: padding-box, no-clip;
mask-clip: view-box, fill-box, border-box;

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

構文
--

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

### 値

`content-box`

描画されるコンテンツは、コンテンツボックスで切り取られます。

`padding-box`

描画されるコンテンツは、パディングボックスで切り取られます。

`border-box`

描画されるコンテンツは、境界ボックスで切り取られます。

`margin-box`

描画されるコンテンツは、マージンボックスで切り取られます。

`fill-box`

描画されるコンテンツは、オブジェクトの囲みボックスで切り取られます。

`stroke-box`

描画されるコンテンツは、オブジェクトの輪郭線ボックスで切り取られます。

`view-box`

直近の SVG ビューポートを参照ボックスとして使用します。 `viewBox` 属性が SVG ビューポートを作成している要素に指定されると、参照ボックスは `viewBox` 属性で示された座標系の原点に配置され、参照ボックスの寸法は `viewBox` 属性の幅と高さに設定されます。

`no-clip`

描画されるコンテンツは切り取られません。

`border`
Non-standard

このキーワードは `border-box` と同じ動作をします。

`padding`
Non-standard

このキーワードは `padding-box` と同じ動作をします。

`content`
Non-standard

このキーワードは `content-box` と同じ動作をします。

`text`
Non-standard

このキーワードは要素のテキストでマスク画像を切り取ります。

公式定義
----

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

形式文法
----
```

mask-clip =   
  [ <coord-box> | no-clip ]#    
  
<coord-box> =   
  <paint-box>  |  
  view-box       
  
<paint-box> =   
  <visual-box>  |  
  fill-box      |  
  stroke-box      
  
<visual-box> =   
  content-box  |  
  padding-box  |  
  border-box     
  
```

例
-

### 境界ボックスでマスクを切り取る

`mask-clip` の値を、上記の許容値のいずれかに変更してください。Chromium ベースのブラウザーでこの例を表示する場合は、`-webkit-mask-clip` の値を変更してください。

仕様書
---

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

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

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

関連情報
----

* Clipping and Masking in CSS
transition-property
===================

**`transition-property`** は CSS のプロパティで、トランジション効果を適用する CSS プロパティを指定します。

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

**メモ:** アニメーション可能なプロパティのセットは変更される可能性があります。これにより、将来意図しない結果を引き起こす可能性があるため、リストで現状アニメーションしないとしているプロパティを使用することは避けてください。

一括指定プロパティ (例えば `background`) を指定すると、その個別指定のサブプロパティすべてをアニメーションさせることができます。

構文
--


```css
/\* キーワード値 \*/
transition-property: none;
transition-property: all;

/\* <custom-ident> 値 \*/
transition-property: test_05;
transition-property: -specific;
transition-property: sliding-vertically;

/\* 複数の値 \*/
transition-property: test1, animation4;
transition-property: all, height, color;
transition-property:
  all,
  -moz-specific,
  sliding;

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

### 値

`none`

どのプロパティもトランジションを行いません。

`all`

トランジションが可能なすべてのプロパティで、トランジションを行います。

`<custom-ident>`

値が変更されたとき、トランジション効果を適用するプロパティを識別する文字列です。

公式定義
----

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

形式文法
----
```

transition-property =   
  none                           |  
  <single-transition-property>#    
  
<single-transition-property> =   
  all             |  
  <custom-ident>    
  
```

例
-

### 単純な例

この例では、ユーザーが要素の上にカーソルを置いたときに、 4 秒間でフォントサイズの遷移を行います。 `transition-property` は `font-size` です。

#### HTML


```html
<a class="target">ここにマウスポインターを置いてください</a>
```


#### CSS


```css
.target {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
}

.target:hover {
  font-size: 36px;
}
```


#### 結果

`transition-property` のその他の例は、主となる CSS トランジションの記事にあります。

仕様書
---

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

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

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

関連情報
----

* CSS トランジションの使用
* `transition`
* `transition-duration`
* `transition-timing-function`
* `transition-delay`
* `TransitionEvent`
::grammar-error
===============

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

**`::grammar-error`** は CSS の擬似要素で、ユーザーエージェントが文法的に正しくないとしたテキストの区間を示します。

利用できるプロパティ
----------

`::grammar-error` 擬似要素では、一部の CSS プロパティのみが利用できます。

* `color`
* `background-color`
* `cursor`
* `caret-color`
* `outline` およびその個別指定プロパティ
* `text-decoration` および関連プロパティ
* `text-emphasis-color`
* `text-shadow`
構文
--


```css
::grammar-error {}
```

例
-

### 単純な文書の文法チェック

この例では、最終的に対応しているブラウザーでは、フラグの立った文法エラーがあれば、示したスタイルで強調表示されます。

#### HTML


```html
<p>My friends is coming to the party tonight.</p>
```


#### CSS


```css
::grammar-error {
  text-decoration: underline red;
  color: red;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # selectordef-grammar-error |

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

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

関連情報
----

* `::spelling-error`
max-content
===========

`max-content` は大きさのキーワードで、コンテンツの内在的な最大幅や高さを表します。テキストコンテンツの場合、これはオーバーフローが発生しても、コンテンツがまったく折り返されないことを意味します。

構文
--


```css
/\* 長さとして使用 \*/
width: max-content;
inline-size: max-content;
height: max-content;
block-size: max-content;

/\* グリッドトラックで使用 \*/
grid-template-columns: 200px 1fr max-content;
```

例
-

### max-content をボックスの大きさに使用

#### HTML


```html
<div id="container">
  <div class="item">Item</div>
  <div class="item">
    Item with more text in it which will overflow the fixed width box.
  </div>
</div>
```


#### CSS


```css
#container {
  background-color: #8cffa0;
  padding: 10px;
  width: 200px;
}

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


#### 結果

### max-content をグリッド列の大きさに使用

#### HTML


```html
<div id="container">
  <div>Item</div>
  <div>Item with more text in it.</div>
  <div>Flexible item</div>
</div>
```


#### CSS


```css
#container {
  display: grid;
  grid-template-columns: max-content max-content 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 3 # valdef-width-max-content |

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

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

関連情報
----

* 関連する大きさのキーワード: `min-content`, `fit-content`
CSS スクロールスナップ
=============

**CSS スクロールスナップ** (CSS Scroll Snap) は CSS モジュールの一つで、スクロール操作の完了後にスクロールコンテナーのスクロールポートが終了するスクロール位置を強制する、スクロールスナップ位置を導入します。

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

### コンテナーの CSS プロパティ

* `scroll-snap-type`
* `scroll-padding`
* `scroll-padding-top`
* `scroll-padding-right`
* `scroll-padding-bottom`
* `scroll-padding-left`
* `scroll-padding-inline`
* `scroll-padding-inline-start`
* `scroll-padding-inline-end`
* `scroll-padding-block`
* `scroll-padding-block-start`
* `scroll-padding-block-end`
### 子の CSS プロパティ

* `scroll-snap-align`
* `scroll-margin`
* `scroll-margin-top`
* `scroll-margin-right`
* `scroll-margin-bottom`
* `scroll-margin-left`
* `scroll-margin-inline`
* `scroll-margin-inline-start`
* `scroll-margin-inline-end`
* `scroll-margin-block`
* `scroll-margin-block-start`
* `scroll-margin-block-end`
* `scroll-snap-stop`
ガイド
---

* CSS スクロールスナップの基本概念
* ブラウザーの互換性とスクロールスナップ
仕様書
---

| Specification |
| --- |
| CSS Scroll Snap Module Level 1  |

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

個々のプロパティページにて、それぞれのプロパティのブラウザー互換性情報を詳しく説明しています。

**メモ:** このモジュールの以前のバージョンはスクロールスナップ点と呼ばれており、非推奨になりました。CSS スクロールスナップが現在の実装です。新旧の仕様の対応方法の概要については、ブラウザーの互換性のガイドを参照してください。
overscroll-behavior
===================

**`overscroll-behavior`** は CSS のプロパティで、スクロール領域の境界に達したときにブラウザーが何をするかを設定します。これは `overscroll-behavior-x` および `overscroll-behavior-y` の一括指定です。

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

既定で、モバイルブラウザーはページの上端または下端（または他のスクロール領域）に到達したときに「跳ね返り」効果や、ページの更新を行う傾向があります。また、スクロールするコンテンツのあるページの上にスクロールするコンテンツのあるダイアログボックスがある場合、ダイアログボックスのスクロールの境界線に達すると、その下にあるページがスクロールを開始することにお気づきかもしれませんが、これは **スクロール連鎖** と呼ばれます。

場合によっては、この動きが望ましくないことがあります。 `overscroll-behavior` を使用すると、望ましくないスクロール連鎖を抑止したり、ブラウザー版の Facebook や Twitter アプリなどに見られる「引いて更新」の類の動きを実現したりすることができます。

構文
--


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

/\* 2 つの値 \*/
overscroll-behavior: auto contain;

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


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

2 つのキーワードでは、 `overscroll-behavior` のそれぞれ `x` 及び `y` 軸の値を指定します。値が 1 つだけ指定された場合は、 x および y が同じ値とみなされます。

### 値

`auto`

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

`contain`

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

`none`

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

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | 非置換ブロックレベル要素と非置換インラインブロック要素 |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `overscroll-behavior-x`: 指定通り
* `overscroll-behavior-y`: 指定通り
 |
| アニメーションの種類 | 離散値 |

形式文法
----
```

overscroll-behavior =   
  [ contain | none | auto ]{1,2}    
  
```

例
-

### 下の要素がスクロールするのを抑止する

overscroll-behavior の例 (ソースコードはこちら) は、全画面で擬似連絡先の一覧を、ダイアログボックスでチャットウィンドウを表示します。

!['Active chat' と題されたポップアップチャットウィンドウで、 Chris と Bob の会話が表示されています。チャットウィンドウの背後には、 'overscroll-behavior demo' と題された連絡先リストが掲載されています。](/ja/docs/Web/CSS/overscroll-behavior/example.png)

どちらの領域もスクロールします。ふつう、チャットウィンドウをスクロール境界に当たるまでスクロールすると、下の連絡先ウィンドウもスクロールを始めます。これは望ましくないことです。これは、次のようにチャットウィンドウに `overscroll-behavior-y` （`overscroll-behavior` でも可）を使用することで抑止することができます。


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


連絡先が先頭または末端までスクロールしたときの標準のスクロール末端効果を抑止したいかもしれません（例えば Android 版 Chrome は、冒頭の境界を超えてスクロールしようとするとページを再読み込みします）。これは `overscroll-behavior: none` を `<html>` 要素に設定することで抑止することができます。


```css
html {
  margin: 0;
  overscroll-behavior: none;
}
```

仕様書
---

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

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

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

関連情報
----

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