recursal/MDN huggingface dataset:
background-blend-mode
=====================

**`background-blend-mode`** は CSS のプロパティで、要素の背景画像が相互にどのように混合されるか、また要素の背景色とどのように混合されるかを設定します。

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

混合モードは `background-image` プロパティと同じ順番で定義してください。混合モードのリストと背景画像のリストの長さが異なる場合は、長さが合うまで繰り返しや切り落としが行われます。

構文
--
```

/* 1 値 */
background-blend-mode: normal;

/* 2 値、背景ごとにひとつずつ */
background-blend-mode: darken, luminosity;

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

### 値

`<blend-mode>`

適用する混合モードです。複数の値をカンマ区切りで置くことができます。

Formal definition
-----------------

|  |  |
| --- | --- |
| 初期値 | `normal` |
| 適用対象 | すべての要素。 SVG では、コンテナー要素、グラフィック要素、グラフィック参照要素に適用されます。。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | アニメーション不可 |

Formal syntax
-------------
```

background-blend-mode =   
  <mix-blend-mode>#    
  
```

例
-

### 基本的な例


```css
.item {
  width: 300px;
  height: 300px;
  background: url("image1.png"), url("image2.png");
  background-blend-mode: screen;
}
```

### 様々な混合モードを試してみる
```

<div id="div"></div>
<select id="select">
  <option>normal</option>
  <option>multiply</option>
  <option selected>screen</option>
  <option>overlay</option>
  <option>darken</option>
  <option>lighten</option>
  <option>color-dodge</option>
  <option>color-burn</option>
  <option>hard-light</option>
  <option>soft-light</option>
  <option>difference</option>
  <option>exclusion</option>
  <option>hue</option>
  <option>saturation</option>
  <option>color</option>
  <option>luminosity</option>
</select>
```


```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: screen;
}
```


```
document.getElementById("select").onchange = function (event) {
  document.getElementById("div").style.backgroundBlendMode =
    document.getElementById("select").selectedOptions[0].innerHTML;
};
console.log(document.getElementById("div"));
```

仕様書
---

| Specification |
| --- |
| Compositing and Blending Level 2 # background-blend-mode |

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

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

関連情報
----

* `<blend-mode>`
* `mix-blend-mode`
CSS テキスト装飾
==========

**CSS テキスト装飾** (CSS Text Decoration) は CSS のモジュールの一つで、下線、テキストの影、圏点など、テキスト装飾に関連する機能を定義します。

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

### プロパティ

* `text-decoration`
* `text-decoration-color`
* `text-decoration-line`
* `text-decoration-skip-ink`
* `text-decoration-style`
* `text-decoration-thickness`
* `text-emphasis`
* `text-emphasis-color`
* `text-emphasis-position`
* `text-emphasis-style`
* `text-shadow`
* `text-underline-offset`
* `text-underline-position`
### ガイド

*なし。*

例
-


```css
.under {
  text-decoration: underline red;
}

.over {
  text-decoration: wavy overline lime;
}

.line {
  text-decoration: line-through;
}

.plain {
  text-decoration: none;
}

.underover {
  text-decoration: dashed underline overline;
}

.thick {
  text-decoration: solid underline purple 4px;
}

.blink {
  text-decoration: blink;
}
```



```html
<p class="under">このテキストには下付近に 1 本の線があります。</p>
<p class="over">このテキストの上に線があります。</p>
<p class="line">このテキストには取り消し線があります。</p>
<p>
  この<a class="plain" href="#">リンクには下線が引かれていません</a
 >が、リンクは一般的には既定で下線があります。ユーザーはハイパーリンクを示すアンダーラインを頼りにしていることが多いので、アンカーの文字装飾を削除する場合は注意が必要です。
</p>
<p class="underover">このテキストには上<em>と</em>下に線があります。</p>
<p class="thick">
  対応しているブラウザーでは、このテキストは実に太い紫色の下線があります。
</p>
<p class="blink">
  使用しているブラウザーによっては、このテキストは点滅しているかもしれません。
</p>
```

仕様書
---

| Specification |
| --- |
| CSS Text Decoration Module Level 3  |
::view-transition-old
=====================

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-old`** は CSS の擬似要素で、ビュートランジションの「古い」ビュー状態、すなわちトランジション前の古いビューの静的なスクリーンショットを表します。

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

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

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


```css
@keyframes -ua-view-transition-fade-out {
  to {
    opacity: 0;
  }
}

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

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


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

構文
--


```css
::view-transition-old(<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-old |

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

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

関連情報
----

* ビュートランジション API
* ビュートランジション API によるスムーズでシンプルなトランジション
子結合子
====

**子結合子** (child combinator) (`>`) は 2 つの CSS セレクターの間に配置されます。 2 つ目のセレクターが 1 つ目のセレクターの直接の子要素の場合にのみ一致します。


```css
/\* "my-things"クラスを持つリストの子要素であるリスト項目 \*/
ul.my-things > li {
  margin: 2em;
}
```


2 つ目のセレクターに一致する要素は、 1 つ目のセレクターに一致する要素の直接の子要素でなければなりません。これは、子孫結合子が 1 つ目のセレクターに一致する要素が祖先が存在する 2 つ目のセレクターに一致するすべての要素に一致するのに比べて厳密です。

構文
--


```css
セレクター1 > セレクター2 { スタイルプロパティ }
```

例
-

### CSS


```css
span {
  background-color: aqua;
}

div > span {
  background-color: yellow;
}
```

### HTML


```html
<div>
  <span
 >Span #1, in the div.
    <span>Span #2, in the span that's in the div.</span>
  </span>
</div>
<span>Span #3, not in the div at all.</span>
```

### 結果

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # child-combinators |

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

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

関連情報
----

* 子孫結合子
:dir()
======

**`:dir()`** は CSS の擬似クラスで、中に含まれる文字列の方向に基づいて要素を選択します。


```css
/\* 右から左への文字列がある要素すべてを選択 \*/
:dir(rtl) {
  background-color: red;
}
```


`:dir()` 擬似クラスは書字方向の意味的な値、つまり、文書自体に設定されているもののみを使用します。スタイルによる書字方向、つまり、 `direction` のような CSS プロパティで設定された書字方向には対応しません。

**メモ:** `:dir()` 擬似クラスは `[dir=…]` 属性セレクターと等価ではないことに注意してください。後者は HTML の `dir` 属性を選択しますが、これがない要素は、書字方向が親から継承されていても無視します。（同様に、 `[dir=rtl]` と `[dir=ltr]` は `auto` の値に一致しません。）それに対して、 `:dir()` は継承された場合も含め、ユーザーエージェントが計算した値で選択します。

**メモ:** HTML では、書字方向は `dir` 属性で指定されます。他の文書型では異なる方法があるかもしれません。

構文
--

`:dir()` 擬似クラスは1つの引数を取り、対象としたい書字方向を指定します。
```

:dir( [ ltr | rtl ] )
```

### 引数

`ltr`

書字方向が左書きの要素を対象とします。

`rtl`

書字方向が右書きの要素を対象とします。

例
-

### HTML


```html
<div dir="rtl">
  <span>test1</span>
  <div dir="ltr">
    test2
    <div dir="auto">עִבְרִית</div>
  </div>
</div>
```

### CSS


```css
:dir(ltr) {
  background-color: yellow;
}

:dir(rtl) {
  background-color: powderblue;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # selector-ltr |
| Selectors Level 4 # the-dir-pseudo |

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

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

関連情報
----

* 言語に関連する擬似クラス: `:lang`, `:dir`
* HTML の `lang` 属性
* HTML の `translate` 属性
:enabled
========

**`:enabled`** は CSS の擬似クラスで、すべての有効な要素を表します。有効な要素とは、アクティブ化 (選択、クリック、入力など) したりフォーカスを得たりすることができるものです。要素には無効な状態、つまりアクティブ化したりフォーカスを得たりすることができない状態もあります。


```css
/\* 有効な <input> を選択 \*/
input:enabled {
  color: blue;
}
```

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

構文
--
```

:enabled
```

例
-

以下の例は有効なときに文字列の色とボタンの `<input>` を緑色にし、無効な時に灰色にします。これでユーザーは要素が操作できるかどうかを知るのに役立ちます。

### HTML


```html
<form action="url\_of\_form">
  <label for="FirstField">First field (enabled):</label>
  <input type="text" id="FirstField" value="Lorem" /><br />

  <label for="SecondField">Second field (disabled):</label>
  <input type="text" id="SecondField" value="Ipsum" disabled="disabled" /><br />

  <input type="button" value="Submit" />
</form>
```

### CSS


```css
input:enabled {
  color: #2b2;
}

input:disabled {
  color: #aaa;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # selector-enabled |
| Selectors Level 4 # enableddisabled |

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

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

関連情報
----

* `:disabled`
<flex>
======

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
**`<flex>`** は CSS のデータ型で、グリッドコンテナー内部における可変の長さを記述します。 `grid-template-columns` や `grid-template-rows` およびほかの関連プロパティで使われます。

構文
--

`<flex>` データ型は `<number>` のあとに単位 `fr` が付きます。 `fr` 単位はグリッドコンテナーの余った空間の割合を表します。他の CSS の数量と同様に、数値と単位の間に空白は入れません。

例
-

### fr データ型の正しい値の例
```

1fr    /* 整数値の使用 */
2.5fr  /* 浮動小数点値の使用 */
```

### CSS グリッドレイアウトのトラックリストでの使用例


```css
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 2.5fr 1.5fr;
}
```

仕様書
---

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # fr-unit |

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

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

関連情報
----

* CSS グリッドレイアウト
box-lines
=========

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

**警告:** これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。現在の標準についての情報はフレックスボックスを参照してください。

**`box-lines`** は CSS のプロパティで、ボックスの配置行 (水平方向のボックスでは行、垂直方向のボックスでは列) が単一なのか複数なのかを指定します。


```css
/\* キーワード値 \*/
box-lines: single;
box-lines: multiple;

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


既定では、水平方向のボックスは子を単一行で配置し、垂直方向のボックスは子を単一列で配置します。この動作は `box-lines` プロパティを使用して変更することができます。既定値は `single` であり、すべての要素が単一の行または列で配置され、それに合わない要素は単純にあふれさせて表示することを意味します。

しかし、 `multiple` の値が指定された場合、ボックスはすべての子を収容できるように複数の配置行 (つまり、複数の行または列) に拡張することができます。ボックスはできるだけ少ない配置行数で子が収まるように、必要に応じて最小幅または高さまで縮小します。

水平ボックスの中の子が最小幅まで縮小されても配置行上に収まらない場合、子は次の配置行上に 1 つずつ、残りが前の配置行に収まるまで移動されます。この手続は任意の配置行数に達するまで繰り返されます。配置行上に収まり切れない要素が1つしかない場合、要素はその配置行に留まりボックスの外にあふれます。その後の配置行は、順方向のボックスであれば前の配置行の下に、逆方向のボックスであれば上に配置されます。配置行の高さはその配置行内で最も高い子の高さになります。各配置行にある最大の要素のマージンを除いて、配置行間に余分な余白は表示されません。配置行の高さを計算するために、計算値が auto であるマージンは値が 0 として扱われます。

同様の処理が垂直配置ボックスの子に対しても行われます。後の配置行は、順方向のボックスであれば前の配置行の右側に配置され、逆方向のボックスであれば前の配置行の左側に配置されます。

配置行の数が決定すると、 `box-flex` の計算値が `0` 以外である要素は、配置行の残りの空間を埋めるために必要なだけ引き伸ばされます。それぞれの配置行は個別に計算されるので、 `box-flex` と `box-flex-groups` を評価するときに、その配置行上の要素だけが考慮されます。配置行内の要素のまとめ方も、 `box-pack` プロパティで定義されている通り、それぞれの行で個別に計算されます。

構文
--

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

### 値

`single`

ボックスの要素は単一の行または列に配置されます。

`multiple`

ボックスの要素は複数の行または列に配置されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `single` |
| 適用対象 | ボックス要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----

Error: could not find syntax for this item例
-

### 単純な使用法の例

仕様書の当初の版では、`box-lines`で、フレックスコンテナーの子を複数の行に折り返すことを指定できました。これは WebKit ベースのブラウザーのみが対応しており、接頭辞が付いていました。


```css
div {
  display: box;
  box-orient: horizontal;
  box-lines: multiple;
}
```


現在のフレックスボックスで同等のものは `flex-wrap` です。

仕様書
---

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

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

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

関連情報
----

* `box-flex`
* `box-flex-group`
* `box-pack`
column-width
============

**`column-width`** は CSS のプロパティで、段組みレイアウトで理想的な段の幅を設定します。コンテナーは `column-width` の値よりも狭い段がないように、できるだけ多くの段を配置します。コンテナーの幅が指定された値よりも狭い場合、実際の段の幅はより狭くなることがあります。

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

このプロパティは様々な画面の大きさに合うレスポンシブデザインを作成するのに役立ちます。特に (優先度の高い) `column-count` プロパティがある場合、正確な段の幅を設定するには、すべての幅の値を指定する必要があります。横書きでは、これらは `width`, `column-width`, `column-gap`, `column-rule-width` です。

構文
--


```css
/\* キーワード値 \*/
column-width: auto;

/\* <length> 値 \*/
column-width: 60px;
column-width: 15.5em;
column-width: 3.3vw;

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


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

### 値

`<length>`

段の最適な幅のヒントを与えます。実際の段の幅は指定された値と異なります。空間を埋める必要がある場合は広くなる可能性があり、利用可能な幅が狭すぎる場合は狭くなる可能性があります。この値は正の数だけで、そうでなければ宣言は無効になります。パーセント値も無効です。

`auto`

段の幅は `column-count` などの他の CSS プロパティによって決定されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | 表ラッパーボックスを除くブロックコンテナー |
| 継承 | なし |
| 計算値 | ゼロ以上の絶対的な長さ |
| アニメーションの種類 | length |

形式文法
----
```

column-width =   
  auto                                |  
  <length [0,∞]>                      |  
  min-content                         |  
  max-content                         |  
  fit-content( <length-percentage> )    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

### 段の幅をピクセル数で設定

#### HTML


```html
<p class="content-box">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
  enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
  nisl ut aliquip ex ea commodo consequat.
</p>
```


#### CSS


```css
.content-box {
  column-width: 100px;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # column-sizing |
| CSS Multi-column Layout Module Level 1 # cw |

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

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

関連情報
----

* 段組みレイアウト (レイアウトの学習)
* 段組みの基本概念
user-modify
===========

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

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**`user-modify`** プロパティは Firefox では効果がありません。元々は要素の内容をユーザーが編集できるかどうかを決める予定でした。


```css
/\* キーワード値 \*/
user-modify: read-only;
user-modify: read-write;
user-modify: write-only;

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


**警告:** このプロパティは `contenteditable` 属性に置き換えられました。

構文
--

`-moz-user-modify` プロパティは、以下のリストにあるキーワード値の一つで指定します。

### 値

`read-only`

既定値です。内容は読み取り専用です。

`read-write`

ユーザーが内容を読み書きできます。

`read-write-plaintext-only` 
Non-standard

`read-write` と同じですが、リッチテキスト書式は失われます。

`write-only`

ユーザーが内容を編集できますが、読むことはできません。

公式定義
----

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

Error: could not find syntax for this item例
-

### HTML


```html
<div class="readwrite">The user is able to change this text.</div>
```

### CSS


```css
.readwrite {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
}
```

仕様書
---

このプロパティは仕様書で定義されていません。類似のプロパティである `user-focus` が、 CSS3 UI 仕様書の早期の草稿で提案されましたが、作業グループによって拒否されました。

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

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

関連情報
----

* `-moz-user-focus`
* `-moz-user-input`
* `-moz-user-select` (en-US)
-moz-user-input
===============

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

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

Mozilla アプリケーションでは、 **`-moz-user-input`** はある要素がユーザの入力を受け付けるかどうかを決定します。


```css
/\* キーワード値 \*/
-moz-user-input: none;
-moz-user-input: enabled;
-moz-user-input: disabled;

/\* グローバル値 \*/
-moz-user-input: inherit;
-moz-user-input: initial;
-moz-user-input: unset;
```


`<textarea>` のようなユーザーからの入力を通常受け付ける要素では `-moz-user-input` の初期値は `enabled` です。

**メモ:** `-moz-user-input` は、 CSS 3 の `user-input` プロパティの先行実装案の一つでしたが、これはまだ (実装を要求する) 勧告候補に達していません。類似のプロパティ `user-focus` が CSS3 UI 仕様の前身であった初期の草稿 で提案されましたが、作業グループによって却下されました。

構文
--

### 値

none

要素はユーザーからの入力に反応せず `:active` にならない。

enabled

要素はユーザーからの入力を受け付ける。テキストボックスではこれが標準の動作。**この値は Firefox 60 以降は対応していませんので注意してください (Firefox バグ 1405087)。**

disabled

要素はユーザーからの入力を受け付けない。しかし、これは `disabled` を true にするのとは等しくなく、要素は普通に (無効にならずに) 描画される。**この値は Firefox 60 以降は対応していませんので注意してください (Firefox バグ 1405087)。**

公式定義
----

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

形式文法
----

Error: could not find syntax for this item例
-

### 要素のユーザー入力の無効化


```css
input.example {
  /\* ユーザーはテキストの選択はできますが変更はできません。 \*/
  -moz-user-input: disabled;
}
```

仕様書
---

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

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

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

関連情報
----

* `-moz-user-focus`
* `-moz-user-modify`
* `-moz-user-select`
clip
====

**`clip`** は CSS のプロパティで、要素のどの部分が可視であるかを定義します。 `clip` プロパティは絶対配置された要素、つまり `position:absolute` または `position:fixed` を持つ要素だけに適用されます。


```css
/\* キーワード値 \*/
clip: auto;

/\* <shape> 値 \*/
clip: rect(1px, 10em, 3rem, 2ch);

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

構文
--

**メモ:** 可能であれば、より新しい `clip-path` を使うことをお勧めします。

### 値

`<shape>`

`rect(<top>, <right>, <bottom>, <left>)` 形式の矩形の `<shape>` です。 `<top>` と `<bottom>` は、ボックス境界の上辺からのオフセットを表します。`<right>` と `<left>` は、ボックス境界の左辺からのオフセットを表します。これがボックスの中身となります。

`<top>`、`<right>`、`<bottom>`、`<left>` の値は `<length>` または `auto` のいずれかです。`auto` が指定されると、その辺の*内部のボックス境界*で切り取られます。

`auto`

要素はクリップされません (既定値)。ボックス境界で切り取る `rect(auto, auto, auto, auto)` とはまったく異なることに注意してください。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | 絶対位置指定された要素 |
| 継承 | なし |
| 計算値 | `auto` が指定されていれば `auto`、それ以外は 4 つの値をともなう矩形。矩形の場合、各値は `auto` が指定されていれば `auto`、それ以外では長さの計算値 |
| アニメーションの種類 | rectangle |

形式文法
----
```

clip =   
  <rect()>  |  
  auto        
  
<rect()> =   
  rect( <top> , <right> , <bottom> , <left> )    
  
```

例
-

### 画像の切り抜き

#### CSS


```css
.dotted-border {
  border: dotted;
  position: relative;
  width: 536px;
  height: 350px;
}

#top-left,
#middle,
#bottom-right {
  position: absolute;
  top: 0;
}

#top-left {
  left: 360px;
  clip: rect(0, 175px, 113px, 0);
}

#middle {
  left: 280px;
  clip: rect(119px, 255px, 229px, 80px);
}

#bottom-right {
  left: 200px;
  clip: rect(235px, 335px, 345px, 160px);
}
```


#### HTML


```html
<p class="dotted-border">
  <img src="hut.jpg" title="Original graphic" />
  <img id="top-left" src="hut.jpg" title="Graphic clipped to upper left" />
  <img id="middle" src="hut.jpg" title="Graphic clipped towards middle" />
  <img
 id="bottom-right"
 src="hut.jpg"
 title="Graphic clipped to bottom right" />
</p>
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Masking Module Level 1 # clip-property |

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

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

関連情報
----

* このプロパティは非推奨です。代わりに `clip-path` を使ってください。
* 関連する CSS プロパティ: `text-overflow`, `white-space`, `overflow-x`, `overflow-y`, `overflow`, `display`, `position`
text-decoration-skip
====================

**`text-decoration-skip`** は CSS のプロパティで、要素に影響する要素の内容に対するテキスト装飾のどの部分をスキップする必要があるかを設定します。これは要素によって描かれたテキスト装飾の行、および祖先によって描かれたすべてのテキスト装飾を制御します。

**メモ:** 他の多くのブラウザーでは、より単純な `text-decoration-skip-ink` プロパティへの対応に集中しています。


```css
/\* キーワード値 \*/
text-decoration-skip: none;
text-decoration-skip: objects;
text-decoration-skip: spaces;
text-decoration-skip: edges;
text-decoration-skip: box-decoration;

/\* 複数のキーワード \*/
text-decoration-skip: objects spaces;
text-decoration-skip: leading-spaces trailing-spaces;
text-decoration-skip: objects edges box-decoration;

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

構文
--

### 値

`none`

何もスキップされません。つまり、テキストの装飾はすべてのテキストの内容と不可分のインラインレベルボックスに渡って描かれます。

`objects`

要素の中で、画像やインラインブロックなどの不可分のインラインボックスのマージンボックス全体がスキップされます。

`spaces`

すべての空白をスキップします。すべての Unicode ホワイトスペース文字、すべての単語区切りに加えて、子孫の `letter-spacing` または `word-spacing` すべてです。

`leading-spaces`

先頭の空白のみがスキップされるという点を除いて、 `spaces` と同じです。

`trailing-spaces`

末尾の空白のみがスキップされるという点を除いて、 `spaces` と同じです。

`edges`

テキスト装飾の始点と終点を、装飾ボックスのコンテンツの辺からわずかに (例えば線の太さの半分だけ) 離します。つまり、子孫ボックスには個別に下線が引かれます。 (これは中国語では、区切って下線を引くのに重要です。)

!["text-decoration-skip: edges;" の例です。](/ja/docs/Web/CSS/text-decoration-skip/decoration-skip-edges.png)

`box-decoration`

テキストの装飾はボックスのマージン、境界、パディング領域をスキップします。これは祖先により重ねられた装飾の効果のみを持ちます。*装飾ボックス*はボックスの装飾の上に描画を行いません。

公式定義
----

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

形式文法
----
```

text-decoration-skip =   
  none  |  
  auto    
  
```

例
-

### エッジをスキップ

#### HTML


```html
<p>Hey, grab a cup of <em>coffee!</em></p>
```


#### CSS


```css
p {
  margin: 0;
  font-size: 3em;
  text-decoration: underline;
  text-decoration-skip: edges;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Text Decoration Module Level 4 # text-decoration-skipping |

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

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

関連情報
----

* `text-decoration-skip-ink`
mask-image
==========

**`mask-image`** は CSS のプロパティで、要素のマスクレイヤーとして使用される画像を設定します。
 既定では、マスク画像のアルファチャンネルと要素のアルファチャンネルが乗算されることになります。これは `mask-mode` プロパティで制御することができます。


```css
/\* キーワード値 \*/
mask-image: none;

/\* <mask-source> 値 \*/
mask-image: url(masks.svg#mask1);

/\* <image> 値 \*/
mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent);
mask-image: image(url(mask.png), skyblue);

/\* 複数の値 \*/
mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1), transparent);

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

構文
--

### 値

`none`

このキーワードは、透明な黒い画像レイヤーとして解釈されます。

`<mask-source>`

`url()` による `<mask>` または CSS 画像への参照です。

`<image>`

マスク画像レイヤーとして使用される画像の値です。

公式定義
----

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

形式文法
----
```

mask-image =   
  <mask-reference>#    
  
<mask-reference> =   
  none           |  
  <image>        |  
  <mask-source>    
  
<image> =   
  <url>       |  
  <gradient>    
  
<mask-source> =   
  <url>    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
```

例
-

### マスク画像を URL で設定

仕様書
---

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

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

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

関連情報
----

* Clipping and Masking in CSS
* Apply effects to images with CSS's mask-image property