recursal/MDN huggingface dataset:
perspective-origin
==================

**`perspective-origin`** は CSS のプロパティで、閲覧者の視点の位置を決めます。これは `perspective` プロパティによって*消点*として使われます。

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

**`perspective-origin`** および `perspective` の各プロパティは、三次元空間で座標変換される子の親に設定するものであり、座標変換される要素に設定される `perspective()` 変換関数とは異なります。

構文
--


```css
/\* 1 値構文 \*/
perspective-origin: x-position;

/\* 2 値構文 \*/
perspective-origin: x-position y-position;

/\* x-position と y-position がキーワードである場合は、
 以下の構文も有効 \*/
perspective-origin: y-position x-position;

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

### 値

*x-position*

*消失点*の横座標上の位置を示します。次のいずれかの値です。

* `<length-percentage>` は、絶対的な length 値、または要素の幅に対する相対値で位置を示します。負の数も使えます。
* `left` キーワードは、length 値 `0` を示すショートカットです。
* `center` キーワードは、パーセント値 `50%` を示すショートカットです。
* `right` キーワードは、パーセント値 `100%` を示すショートカットです。

*y-position*

*消失点*の縦座標上の位置を示します。次のいずれかの値です。

* `<length-percentage>` は、絶対的な length 値、または要素の高さに対する相対値で位置を示します。負の数も使えます。
* `top` キーワードは、 length 値 `0` を示すショートカットです。
* `center` キーワードは、パーセント値 `50%` を示すショートカットです。
* `bottom` キーワードは、パーセント値 `100%` を示すキーワードです。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `50% 50%` |
| 適用対象 | 座標変換可能要素 |
| 継承 | なし |
| パーセント値 | 囲みボックスの寸法に対する相対値 |
| 計算値 | `length` の場合は絶対的な値、それ以外の場合はパーセント値 |
| アニメーションの種類 | 長さ、パーセント値、 calc の単純なリスト |

形式文法
----
```

perspective-origin =   
  <position>    
  
<position> =   
  [ left | center | right | top | bottom | <length-percentage> ]  |  
  [ left | center | right ] && [ top | center | bottom ]  |  
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |  
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

### 視点の原点の変更

`perspective-origin` の変更方法を示す例は、 CSS 座標変換の使用 > 視点の変更にあります。

仕様書
---

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

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

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

関連情報
----

* CSS 座標変換の使用
* `transform-style`
* `<transform-function>`
* `perspective`
* `transform: perspective()` 関数
使用値
===

**使用値** (used value) は CSS プロパティにおいて、計算値で行われたすべての計算が実行された後の値です。

ユーザーエージェントが計算を終了した後、すべての CSS プロパティは使用値を持ちます。長さ (`width` や `line-height` など) の使用値はピクセル数です。一括指定プロパティ (`background` など) の使用値は、各成分 (`background-color` や `background-size` など) のプロパティに、 `position` や `float` が加味されたものと一致します。

**メモ:** DOM の `getComputedStyle()` API が返すのは解決値であり、これはプロパティによって計算値または使用値のどちらかになります。

例
-

この例は、3 つの要素の `width` の使用値を計算および表示します (大きさを変更すると更新されます)。

### HTML


```html
<div id="no-width">
  <p>明示的な幅の指定なし</p>
  <p class="show-used-width">..</p>

  <div id="width-50">
    <p>明示的な幅: 50%</p>
    <p class="show-used-width">..</p>

    <div id="width-inherit">
      <p>明示的な幅: inherit</p>
      <p class="show-used-width">..</p>
    </div>
  </div>
</div>
```

### CSS


```css
#no-width {
  width: auto;
}

#width-50 {
  width: 50%;
}

#width-inherit {
  width: inherit;
}

/\* 結果を見やすくする \*/
div {
  border: 1px solid red;
  padding: 8px;
}
```

### JavaScript


```js
function updateUsedWidth(id) {
  const div = document.getElementById(id);
  const par = div.querySelector(".show-used-width");
  const wid = window.getComputedStyle(div)["width"];
  par.textContent = `Used width: ${wid}.`;
}

function updateAllUsedWidths() {
  updateUsedWidth("no-width");
  updateUsedWidth("width-50");
  updateUsedWidth("width-inherit");
}

updateAllUsedWidths();
window.addEventListener("resize", updateAllUsedWidths);
```

### 結果

計算値との違い
-------

CSS 2.0 では、プロパティの計算の最後のステップとして*計算値*のみを定義していました。そして CSS 2.1 では、使用値を別な定義として導入しました。そして、計算値がパーセント値である親の幅や高さを、要素が明確に継承できるようになりました。レイアウトに依存しない CSS プロパティ (`display`, `font-size`, `line-height` など) に関しては、計算値と使用値は同じです。以下のものは CSS 2.1 のプロパティのうち、レイアウトに依存し、計算値と使用値が異なるものです。 (CSS 2.1 Changes: Specified, computed, and actual values より取得)。

* `background-position`
* `bottom`, `left`, `right`, `top`
* `height`, `width`
* `margin-bottom`, `margin-left`, `margin-right`, `margin-top`
* `min-height`, `min-width`
* `padding-bottom`, `padding-left`, `padding-right`, `padding-top`
* `text-indent`
仕様書
---

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # used-value |

関連情報
----

* `window.getComputedStyle`
* CSS の主要概念:
    + CSS の構文
    + アットルール
    + コメント
    + 詳細度
    + 継承
    + ボックスモデル
    + レイアウトモード
    + 視覚整形モデル
    + マージンの相殺
    + 値
        - 初期値
        - 計算値
        - 実効値
    + 値の定義構文
    + 一括指定プロパティ
    + 置換要素
<time-percentage>
=================

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

構文
--

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

例
-

### calc() での使用

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

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

50%
+50%        + 記号は任意
-50%        負号はパーセント値を受け入れるすべてのプロパティで有効とは限らない
```

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

50 %        数値とパーセント記号の間に空白は許可されない
```

### 有効な時間
```

12s         正の整数
-456ms      負の整数
4.3ms       非整数
14mS        単位には大文字・小文字の区別がないが、大文字は推奨されない。
+0s         先頭に + がついたゼロと単位
-0ms        先頭に - がついたゼロと単位
```

### 無効な時間
```

0           単位のない <length> は有効だが、 <time> では無効。
12.0        これは単位がないので <number> であって <time> ではない。
7 ms        数値と単位の間に空白は許可されない。
```

仕様書
---

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

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

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

関連情報
----

* `<percentage>`
* `<time>`
* CSS 値と単位
overscroll-behavior-inline
==========================

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

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


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

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

構文
--

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

### 値

`auto`

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

`contain`

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

`none`

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

公式定義
----

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

形式文法
----
```

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

例
-

### インライン方向のオーバースクロールの抑止

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

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

#### HTML


```html
<main>
  <div>
    <div>
      <p>
        <code>overscroll-behavior-inline</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: 400px;
  width: 3000px;
  background-color: white;
  background-image: repeating-linear-gradient(
    to right,
    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-inline: contain;
}

div > div {
  height: 100%;
  width: 1500px;
  background-color: yellow;
  background-image: repeating-linear-gradient(
    to right,
    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: 360px;
  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.

関連情報
----

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

**警告:** このプロパティは `break-before` プロパティによって置き換えられました。

**`page-break-before`** CSS プロパティは、現在の要素の*前で*改ページが行われるように調整します。

このプロパティは、ボックスを生成するブロックレベル要素に適用されます。ボックスを生成しない空の `<div>` には適用されません。


```css
/\* キーワード値 \*/
page-break-before: auto;
page-break-before: always;
page-break-before: avoid;
page-break-before: left;
page-break-before: right;
page-break-before: recto;
page-break-before: verso;

/\* グローバル値 \*/
page-break-before: inherit;
page-break-before: initial;
page-break-before: revert;
page-break-before: unset;
```

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

構文
--

### 値

`auto`

初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。

`always`

要素の前で必ず改ページが行われるように強制します。

`avoid`

要素の前で改ページされないようにします。

`left`

要素の前における改ページを強制し、次のページが左ページとして整形されるようにします。

`right`

要素の前における改ページを強制し、次のページが右ページとして整形されるようにします。

`recto` 
Experimental

左から右に読むページにおいて `right` と同じ動作をします。右から左に読むページであれば `left` と同じ働きをします。

`verso` 
Experimental

左から右に読むページにおいて `left` と同じ動作をします。右から左に読むページであれば `right` と同じ働きをします。

改ページの別名
-------

`page-break-before` プロパティは古いプロパティとなり、 `break-before` によって置き換えられました。

互換性のため、 `page-break-before` はブラウザーから `break-before` の別名として扱われます。これにより、 `page-break-before` を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。

| page-break-before | break-before |
| --- | --- |
| `auto` | `auto` |
| `left` | `left` |
| `right` | `right` |
| `avoid` | `avoid` |
| `always` | `page` |

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | ルート要素の通常フロー内におけるブロックレベル要素。ユーザーエージェントは他の要素に `table-row` 要素のように適用することがあります。 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

page-break-before =   
  auto     |  
  always   |  
  avoid    |  
  left     |  
  right    |  
  inherit    
  
```

例
-

### ある要素の前で改ページを防ぐ


```css
/\* div の前で改ページされないようにします \*/
div.note {
  page-break-before: avoid;
}
```

仕様書
---

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # page |
| CSS Paged Media Module Level 3 # page-break-before |

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

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

関連情報
----

* `break-before`, `break-after`, `break-inside`
* `page-break-after`, `page-break-inside`
* `orphans`, `widows`
::-webkit-slider-runnable-track
===============================

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

**`::-webkit-slider-runnable-track`** は CSS の擬似要素で <input type="range"> の「トラック」 (インジケータがスライドする溝) を表します。

構文
--


```css
::-webkit-slider-runnable-track {}
```

仕様書
---

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

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

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

関連情報
----

* `::-webkit-slider-thumb`
* 他のブラウザーで使われている類似の擬似要素:
    + `::-ms-track`
    + `::-moz-range-track`
* CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS
* QuirksMode: Styling and scripting sliders
CSS フォント
========

**CSS フォント** (CSS Fonts) は CSS のモジュールの一つで、フォントに関するプロパティを定義し、どのようにフォントリソースを読み取るのかを定義します。これによって、単一の文字に利用できる複数のフォントがある場合、使用するフォントのスタイルを、例えばフォントファミリー、寸法、太さ、行の高さ、字体の種類を定義することができます。

基本的な例
-----

以下の例は、テキストの段落をスタイル付けする基本的なフォントプロパティの使い方を示します。


```css
p {
  width: 600px;
  margin: 0 auto;
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-style: italic;
  font-weight: 100;
  font-variant-ligatures: normal;
  font-size: 2rem;
  letter-spacing: 1px;
}
```



```html
<p>
  Three hundred years ago<br />
  I thought I might get some sleep<br />
  I stretched myself out onna antique bed<br />
  An' my spirit did a midnite creep
</p>
```


結果は以下のようになります。

可変フォントの例
--------

たくさんの可変フォントの例を v-fonts.com および axis-praxis.org で見ることができます。詳しい情報と使い方の情報は、可変フォントガイドも参照してください。

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

### プロパティ

* `font`
* `font-family`
* `font-feature-settings`
* `font-kerning`
* `font-language-override`
* `font-optical-sizing`
* `font-size`
* `font-size-adjust`
* `font-stretch`
* `font-style`
* `font-synthesis`
* `font-variant`
* `font-variant-alternates`
* `font-variant-caps`
* `font-variant-east-asian`
* `font-variant-ligatures`
* `font-variant-numeric`
* `font-variant-position`
* `font-variation-settings`
* `font-weight`
* `line-height`
### アットルール

* `@font-face`
* `@font-feature-values`
ガイド
---

テキストとフォントのスタイル付けの基礎

この初心者向けの学習記事では、テキスト/フォントのスタイル付けの基本的な部分をすべて詳しく説明しています。フォントの太さ、ファミリー、スタイルの設定、フォントの一括指定、テキスト配置などの効果、行と文字の間隔の設定などです。

OpenType フォント特性ガイド

フォント特性またはバリアントは、 OpenType フォントに含まれている様々な字形や文字スタイルを参照します。これらには合字 ('fi' や 'ffl' のような特殊な形の文字の組み合わせ)、カーニング (特定の字形の組み合わせにおける間隔の調整)、分数、数字のスタイル、他にもたくさんあります。これらはすべて OpenType の特性として参照され、特定のプロパティや低水準の制御プロパティ — `font-feature-settings` を通してウェブ上で使用することができます。この記事は、 CSS で OpenType フォント特性を使用することについて知る必要があるすべてのことを紹介します。

可変フォントガイド

**可変フォント**は OpenType フォント仕様が進化したもので、幅、太さ、スタイルごとに別々のフォントファイルを用意するのではなく、さまざまな種類のフォントを単一のファイルに組み込むことができます。この記事では、可変フォントを使い始めるために必要なことをすべて紹介します。

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 4  |
path()
======

**`path()`** は CSS の関数で、 SVG のパス文字列を受け取り、 CSS シェイプや CSS モーションパスで描画される形状を有効にするために使用します。

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

構文
--

`offset-path` や `d` で使用する場合:


```css
path(<string>)
```


`clip-path` で使用する場合:


```css
path([<'fill-rule'>,]?<string>)
```

### 引数

`<'fill-rule'>`

 パス内の塗りつぶしルールです。
 指定可能な値は `nonzero` または `evenodd` です。
 既定値は `nonzero` です。
 詳細は塗りつぶしルール (en-US)を参照してください。


`<string>`

文字列で、SVG パスを定義するデータ文字列です。

例
-

### path() の正しい値の例


```css
path("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
path(evenodd,"M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
```

### offset-path の値として使用

`path()` 関数が、アイテムが一周するためのパスを作成するために使用されています。いずれかの値を変更すると、パスがきれいに円を描かなくなります。

### SVG パスで d 属性の値を変更する

`path()` は SVG の `d` 属性 の値を変更するために使用することができます。 CSS で `none` に設定することも可能です。

"V" マークは、 CSS のプロパティとして `d` が対応していれば、カーソルを置いたときに縦に反転します。

#### CSS


```css
html,
body,
svg {
  height: 100%;
}

/\* This path is displayed on hover\*/
#svg\_css\_ex1:hover path {
  d: path("M20,80 L50,20 L80,80");
}
```


#### HTML


```html
<svg id="svg\_css\_ex1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path fill="none" stroke="red" d="M20,20 L50,80 L80,20" />
</svg>
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Shapes Module Level 1 # funcdef-basic-shape-path |

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

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

関連情報
----

* `<shape-outside>`
* CSS シェイプ
* CSS シェイプの概要
* SVG Path Syntax Illustrated Guide
:-moz-submit-invalid
====================

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

**`:-moz-submit-invalid`** は CSS の擬似クラスで、 Mozilla 拡張であり、フォームの送信 `<button>` のうち、内容が制約検証で妥当ではないものを表します。

既定では、適用されているスタイルはありません。この擬似クラスを使用して、無効なフォーム欄があった場合の送信ボタンの外見をカスタマイズすることができます。

構文
--
```

:-moz-submit-invalid
```

仕様書
---

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

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

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

関連情報
----

* `:valid`
* `:invalid`
* `:required`
* `:optional`
border-right
============

**`border-right`** は一括指定の CSS のプロパティで、要素の右側の境界のプロパティをすべて設定します。

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

他の一括指定プロパティと同様に、 `border-right` は、一部の値が指定されていなくても、設定可能なプロパティをすべて設定します。指定されていないプロパティは既定値が設定されます。つまり……


```css
border-right-style: dotted;
border-right: thick green;
```


……は、実際には以下と同じです……


```css
border-right-style: dotted;
border-right: none thick green;
```


……そして、 `border-right` の前で設定された `border-right-style` の値は無視されます。 `border-right-style` の既定値は `none` なので、 `border-style` の部分の設定は境界線なしとなります。

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

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

* `border-right-color`
* `border-right-style`
* `border-right-width`
構文
--


```css
border-right: 1px;
border-right: 2px dotted;
border-right: medium dashed green;

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


一括指定プロパティの 3 つの値は任意の順序で指定可能で、また、1 つまたは 2 つの値を省略することができます。

### 値

`<br-width>`

`border-right-width` を参照してください。

`<br-style>`

`border-right-style` を参照してください。

`<color>`

`border-right-color` を参照してください。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `border-right-width`: `medium`
* `border-right-style`: `none`
* `border-right-color`: `currentcolor`
 |
| 適用対象 | すべての要素。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `border-right-width`: 絶対的な長さ、または `border-right-style` が `none` または `hidden` の場合は `0`
* `border-right-style`: 指定通り
* `border-right-color`: 色の計算値
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `border-right-color`: 色
* `border-right-style`: 離散値
* `border-right-width`: length
 |

形式文法
----
```

border-right =   
  <line-width>  ||  
  <line-style>  ||  
  <color>         
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
<line-style> =   
  none    |  
  hidden  |  
  dotted  |  
  dashed  |  
  solid   |  
  double  |  
  groove  |  
  ridge   |  
  inset   |  
  outset    
  
```

例
-

### 右側の境界の適用

#### HTML


```html
<div>このボックスには右側に境界線があります。</div>
```


#### CSS


```css
div {
  border-right: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}
```


#### 結果

仕様書
---

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

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

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

関連情報
----

* `border`
* `border-block`
* `outline`
widows
======

**`widows`** は CSS のプロパティで、ページ、領域、段の*先頭*に表示されるブロックコンテナーの最小行数を設定します。


```css
/\* <integer> 値 \*/
widows: 2;
widows: 3;

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


組版において、ウィドウ (*widow*) とは (段落が前のページから続いている場合に) 段落の最後の行がページの先頭に単独で現れることです。

|  |  |
| --- | --- |
| 初期値 | `2` |
| 適用対象 | ブロックコンテナー要素 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 計算値の型による |

構文
--

### 値

`<integer>`

区切りの後の新しい断片の先頭に残すことができる最小行数です。値は正の数である必要があります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `2` |
| 適用対象 | ブロックコンテナー要素 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

widows =   
  <integer [1,∞]>    
  
```

例
-

### 段のウィドウの制御

#### HTML


```html
<div>
  これは幾らかのテキストを含む最初の段落です。
  これは最初の段落よりも多くのテキストを含む第二の段落です。これはウィドウがどの様に動作するのかを示すために用います。
  これは第三の段落です。これは最初の段落よりも少しだけ長いテキストを含んでいます。
</div>
```


#### CSS


```css
div {
  background-color: #8cffa0;
  columns: 3;
  widows: 2;
}

p {
  background-color: #8ca0ff;
}

p:first-child {
  margin-top: 0;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Fragmentation Module Level 3 # widows-orphans |
| CSS Multi-column Layout Module Level 1 # filling-columns |

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

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

関連情報
----

* `orphans`
* ページ付きメディア
@namespace
==========

**`@namespace`** はアットルールで、
 CSS スタイルシート で使用する XML 名前空間を定義します。

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

構文
--


```css
/\* 既定の名前空間 \*/
@namespace url(XML-namespace-URL);
@namespace "XML-namespace-URL";

/\* 接頭辞つきの名前空間 \*/
@namespace prefix url(XML-namespace-URL);
@namespace prefix "XML-namespace-URL";
```

解説
--

定義された名前空間は、全称、型、属性セレクターにおいて、選択する要素をその名前空間に制限するために使用することができます。 `@namespace` ルールは一般に、複数の名前空間を含む文書を扱う場合—例えば、HTML5 でインラインの SVG や MathML を併用する場合や、複数の語彙が混在する XML などでのみ役立ちます。

`@namespace` ルールは、スタイルシート内ですべての `@charset` および `@import` ルールより後、また他のアットルールやスタイル宣言より前に配置しなければなりません。

`@namespace` は、スタイルシートの**既定の名前空間**が定義できます。既定の名前空間を定義するとすべての全称セレクターや要素型セレクター（属性セレクターは除く。後述のメモを参照）は、既定の名前空間内の要素にのみ適用されます。

また、 `@namespace` ルールで**名前空間の接頭辞**が定義できます。全称セレクター、要素型セレクター、属性セレクターに名前空間の接頭辞を付加すると、これらのセレクターは名前空間*および*要素または属性に一致する場合のみ一致します。

HTML5 では、既知の外来要素へ自動的に名前空間が割り当てられます。すなわち、 HTML 要素は文書内に `xmlns` 属性が存在しなくても XHTML 名前空間 (`http://www.w3.org/1999/xhtml`) に含まれているかのように動作します。また <svg> および <math> 要素は、適切な名前空間（`http://www.w3.org/2000/svg` および `http://www.w3.org/1998/Math/MathML`）が割り当てられます。

**メモ:** XML では、属性に直接接頭辞を定義しない限り（*例*: `xlink:href`）、属性は名前空間を持ちません。言い換えると、属性は所属する要素から名前空間を継承しません。この動作に合わせるため、 CSS の既定の名前空間は属性セレクターに適用しません。

形式文法
----
```

@namespace =   
  @namespace <namespace-prefix>? [ <string> | <url> ] ;    
  
<namespace-prefix> =   
  <ident>    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
```

例
-

### 既定かつ定義済みの名前空間の指定


```css
@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);

/\* XHTML は既定で接頭辞のない名前空間であるため、これは XHTML のすべての <a> 要素を選択します \*/
a {
}

/\* これはすべての SVG <a> 要素を選択します \*/
svg|a {
}

/\* XHTML と SVG の両方の <a> 要素に一致します \*/
\*|a {
}
```

仕様書
---

| Specification |
| --- |
| CSS Namespaces Module Level 3 # declaration |

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

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

関連情報
----

* 名前空間の集中講座
mask-repeat
===========

**`mask-repeat`** は CSS プロパティで、マスク画像をどのように繰り返すかを設定します。マスク画像は水平軸、垂直軸、両方の軸で繰り返すか、まったく繰り返さないようにすることができます。


```css
/\* 1 つの値の構文 \*/
mask-repeat: repeat-x;
mask-repeat: repeat-y;
mask-repeat: repeat;
mask-repeat: space;
mask-repeat: round;
mask-repeat: no-repeat;

/\* 2 つの値の構文: 水平 | 垂直 \*/
mask-repeat: repeat space;
mask-repeat: repeat repeat;
mask-repeat: round space;
mask-repeat: no-repeat round;

/\* 複数の値 \*/
mask-repeat:
  space round,
  no-repeat;
mask-repeat:
  round repeat,
  space,
  repeat-x;

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


既定では、繰り返された画像は要素の寸法でクリッピングされますが、 (`round` を使用して) 大きさが合うように拡大縮小したり、 (`space` を使用して) 端から端まで等分に配分したりすることができます。

構文
--

1 つ以上の `<repeat-style>` 値をカンマ区切りで指定します。

### 値

`<repeat-style>`

単一の値の構文は、2 つの値の構文の一括指定です。

| 単一の値 | 同等の 2 つの値 |
| --- | --- |
| `repeat-x` | `repeat no-repeat` |
| `repeat-y` | `no-repeat repeat` |
| `repeat` | `repeat repeat` |
| `space` | `space space` |
| `round` | `round round` |
| `no-repeat` | `no-repeat no-repeat` |

2 つの値の構文では、1 つ目の値が水平方向の繰り返しの動作を表し、2 つ目の値が垂直方向の動作を表します。それぞれのオプションが各方向にどのように動作するのかを説明します。

|  |  |
| --- | --- |
| `repeat` | 画像がマスク描画領域全体を埋めるのに必要なだけ繰り返されます。最後の画像は合わない時には切り取られます。 |
| `space` | 画像は切り取られずにできる限り繰り返されます。最初と最後の画像は要素の両端に位置し、画像間に均等に余白が配分されます。 `mask-position` プロパティは、1つだけの画像が切り取られずに表示される場合を除いて無視されます。 `space` を使用して切り取りが発生するのは、1つの画像を表示する十分な大きさがない場合だけです。 |
| `round` | 利用できる空間の寸法が拡大した場合、繰り返される画像は (すき間をおかずに) もう一つ追加するだけの余地ができるまで引き伸ばされます。次の画像が追加されるとき、現在の画像は場所を空けるために縮小されます。例えば、元の幅が 260px の画像が3回繰り返されたとき、それぞれの反復の幅は 300px まで拡大する可能性があり、もう一つの画像が追加されると、 225px まで縮小されます。 |
| `no-repeat` | 画像は繰り返されません (また、描画領域のマスクは全体を覆うとは限りません)。繰り返されないマスク画像の位置は `mask-position` CSS プロパティで定義されます。 |

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `repeat` |
| 適用対象 | すべての要素。 SVG の場合は `defs` 要素やすべてのグラフィック要素を除いたコンテナー要素に適用される |
| 継承 | なし |
| 計算値 | 2 つのキーワードから成り、方向ごとに 1 つずつ |
| アニメーションの種類 | 離散値 |

形式文法
----
```

mask-repeat =   
  <repeat-style>#    
  
<repeat-style> =   
  repeat-x                                     |  
  repeat-y                                     |  
  [ repeat | space | round | no-repeat ]{1,2}    
  
```

例
-

### 単一のマスクの反復設定

### 複数のマスク画像の対応

それぞれのマスク画像に異なる `<repeat-style>` を、カンマで区切って指定することができます。


```css
.examplethree {
  mask-image: url("mask1.png"), url("mask2.png");
  mask-repeat: repeat-x, repeat-y;
}
```


それぞれの画像は最初のものから最後のものに向けて、それぞれの繰り返しスタイルに対応します。

仕様書
---

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

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

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

関連情報
----

* Clipping and Masking in CSS