view-timeline-inset - CSS: カスケーディングスタイルシート

view-timeline-inset
===================

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

**`view-timeline-inset`** は CSS のプロパティで、ビュー進行タイムラインのアニメーションの主体要素が可視であるとみなされるスクロールポート（詳細はスクロールコンテナーを参照）の位置の調整を表す 1 つまたは 2 つの値を指定するために使用します。別の言い方をすると、これはタイムラインの位置をオフセットする開始値や終了値のインセット（またはアウトセット）を指定することができます。

 これは `animation-range` とその個別指定プロパティと組み合わせたり、その代わりに使用したりすることができ、タイムラインに沿ってアニメーションの適用範囲を設定することができます。
 詳細は CSS スクロール駆動アニメーション (en-US)を参照してください。

構文
--

```css
/\* Single value \*/
view-timeline-inset: auto;
view-timeline-inset: 200px;
view-timeline-inset: 20%;

/\* Two values \*/
view-timeline-inset: 20% auto;
view-timeline-inset: auto 200px;
view-timeline-inset: 20% 200px;
```

### 値

`view-timeline-inset` に指定できる値は以下の通りです。

`auto`

設定されている場合、スクロールポートの端に対応する `scroll-padding` （または同等の個別指定値）が使用されます。これが設定されていない場合（または `auto` に設定されている場合）、通常は 0 が使用されますが、ユーザーエージェントによっては調査結果を使用して異なる既定値を使用する場合もあります。

`<length-percentage>`

有効な `<length-percentage>` 値であれば、インセット/アウトセットの値として受け入れられます。

* 値が正の値の場合、アニメーションの開始/終了位置は、指定した長さまたはパーセント分だけスクロールポートの内側に移動されます。
* 値が負の場合、アニメーションの開始/終了位置は、指定した長さまたはパーセントだけスクロールポートの外に移動します。つまり、スクロールポートに現れる前にアニメーションを開始したり、スクロールポートを出た後にアニメーションを終了したりします。

2 つの値が指定された場合、最初の値は関連する軸の開始インセット/アウトセット（アニメーションが始まる場所）を表し、 2 つ目の値は終了インセット/アウトセット（アニメーションが終わる場所）を表します。値が 1 つだけ指定された場合、開始と終了のインセット/アウトセットは両方とも同じ値に設定されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| パーセント値 | 関連するスクロールポートの対応する寸法との相対値 |
| 計算値 | リストで、それぞれの項目は 'auto' または長さのパーセント値 |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

view-timeline-inset =
  [ [ auto | <length-percentage> ]{1,2} ]#

<length-percentage> =
  <length>      |
  <percentage>

```

例
-

### インセットを含む名前付きビュー進行タイムラインの作成

`--subjectReveal` という名前のビュー進行タイムラインを `view-timeline` プロパティを用いて、 `class` が `animation` の主体要素に定義します。
 これを同じ要素のタイムラインとして設定するには `animation-timeline: --subjectReveal;` を使用します。その結果、主体要素は文書化されたものをスクロールしながら上方向に移動してアニメーションします。

`view-timeline-inset` 宣言も設定することで、アニメーションを予想より遅く始め、早く終わらせることができます。

#### HTML

この例の HTML は以下の通りです。

```html
<div class="content">
  <h1>Content</h1>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Risus quis varius quam
    quisque id. Et ligula ullamcorper malesuada proin libero nunc consequat
    interdum varius. Elit ullamcorper dignissim cras tincidunt lobortis feugiat
    vivamus at augue.
  </p>

  <p>
    Dolor sed viverra ipsum nunc aliquet. Sed sed risus pretium quam vulputate
    dignissim. Tortor aliquam nulla facilisi cras. A erat nam at lectus urna
    duis convallis convallis. Nibh ipsum consequat nisl vel pretium lectus.
    Sagittis aliquam malesuada bibendum arcu vitae elementum. Malesuada bibendum
    arcu vitae elementum curabitur vitae nunc sed velit.
  </p>

  <div class="subject animation"></div>

  <p>
    Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu
    cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet
    dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non
    tellus orci ac auctor augue mauris. Risus quis varius quam quisque id diam
    vel quam elementum. Nibh praesent tristique magna sit amet purus gravida
    quis. Duis ultricies lacus sed turpis tincidunt id aliquet. In egestas erat
    imperdiet sed euismod nisi. Eget egestas purus viverra accumsan in nisl nisi
    scelerisque. Netus et malesuada fames ac.
  </p>
</div>
```

#### CSS

`subject` 要素とそれを含む `content` 要素には最小限のスタイルを設定し、テキストコンテンツには基本的なフォントを設定します。

```css
.subject {
  width: 300px;
  height: 200px;
  margin: 0 auto;
  background-color: deeppink;
}

.content {
  width: 75%;
  max-width: 800px;
  margin: 0 auto;
}

p,
h1 {
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  font-size: 3rem;
}

p {
  font-size: 1.5rem;
  line-height: 1.5;
}
```

`subject` クラスのついた `<div>` には、`animation` クラスも指定されています。ここで `view-timeline` を設定し、名前付きビュー進行タイムラインを定義しています。また、アニメーションが予想よりも遅く始まり、早く完了するように `view-timeline-inset` 宣言も指定します。また、同じ値で `animation-timeline` の名前を指定して、ビュー進行タイムラインが進むにつれてアニメーションする要素であることを宣言します。

最後に、要素の透過率と変倍をアニメーションで指定し、スクロール移動されるたびにフェードインしたり変倍させたりします。

```css
.animation {
  view-timeline: --subjectReveal block;
  view-timeline-inset: 70% -100px;
  animation-timeline: --subjectReveal;

  animation-name: appear;
  animation-fill-mode: both;
  animation-duration: 1ms; /\* Firefox では、アニメーションを適用するために必要 \*/
}

@keyframes appear {
  from {
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    opacity: 1,
    transform: scaleX(1);
  }
}
```

#### 結果

スクロールすると、主体要素がアニメーションします。

仕様書
---

| Specification |
| --- |
| Scroll-driven Animations # view-timeline-inset |

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

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

関連情報
----

* `animation-timeline`
* `timeline-scope` (en-US)
* `view-timeline`, `view-timeline-axis`, `view-timeline-name`
* CSS スクロール駆動アニメーション (en-US)


CSS テキスト装飾 - CSS: カスケーディングスタイルシート

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 - CSS: カスケーディングスタイルシート

::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 によるスムーズでシンプルなトランジション


子結合子 - CSS: カスケーディングスタイルシート

子結合子
====

**子結合子** (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() - CSS: カスケーディングスタイルシート

: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` 属性


offset-path - CSS: カスケーディングスタイルシート

offset-path
===========

Baseline 2023
-------------

Newly availableSince August 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`offset-path`** は CSS のプロパティで、要素がたどる移動経路と、親コンテナーまたは SVG 座標系の中での要素の配置を指定します。

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

構文
--

```css
/\* 既定値 \*/
offset-path: none;

/\* 関数値 \*/
offset-path: ray(45deg closest-side contain);

/\* URL \*/
offset-path: url(#path);

/\* 図形 \*/
offset-path: circle(50% at 25% 25%);
offset-path: inset(50% 50% 50% 50%);
offset-path: polygon(30% 0%, 70% 0%, 100% 50%, 30% 100%, 0% 70%, 0% 30%);
offset-path: path("M 0,200 Q 200,200 260,80 Q 290,20 400,0 Q 300,100 400,200");

/\* 位置ボックス \*/
offset-path: margin-box;
offset-path: stroke-box;

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

### 値

`ray()`

最大 3 つの値を取り、ボックスの位置から始まり、指定された角度で定義された方向に進む線分であるパスを定義します。定義は角度で、 CSS のグラデーションの角度と同様に、 `0deg` を上にして正の角度を時計回り方向に増加させます。続く寸法の値は CSS の半径方向のグラデーションの寸法の値に似ており、 `closest-side` から `farthest-corner` まで、そしてキーワード `contain` です。

`url()`

SVG 図形の ID の参照です。 — `circle`, `ellipse`, `line`, `path`, `polygon`, `polyline`, `rect` — のいずれかで、図形の形状をパスとして使用します。

`<basic-shape>`

CSS シェイプ、たとえば `circle()`, `ellipse()`, `inset()`, `polygon()`, `path()` を指定します。

* `path()`
* : SVG 座標の構文で定義されたパス文字列です。

`none`

モーションパスを全く定義しません。

解説
--

このプロパティは、移動する要素がたどることができる経路を定義します。オフセットの経路は 1 つまたは複数のサブ経路で指定された経路か、スタイル付けされていない基本図形の形状で指定します。オフセット経路上の要素の正確な位置は、 `offset-distance` プロパティで決定されます。それぞれの図形または経路は、初期位置を `offset-distance` の `0` の計算値で定義し、オブジェクトの回転方向を指定する初期方向を初期位置にします。

仕様書の初期の版では、このプロパティを `motion-path` と呼んでいました。これが `offset-path` と変更されたのは、このプロパティが動きではなく静的な位置を記述するからです。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | 座標変換可能要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 計算値の型による |
| 重ね合わせコンテキストの生成 | あり |

形式文法
----
```

offset-path =
  none                          |
  <offset-path> || <coord-box>

<offset-path> =
  <ray()>        |
  <url>          |
  <basic-shape>

<coord-box> =
  <paint-box>  |
  view-box

<ray()> =
  ray( <angle>          &&
  <ray-size>?           &&
  contain?              &&
  [ at <position> ]? )

<url> =
  <url()>  |
  <src()>

<paint-box> =
  <visual-box>  |
  fill-box      |
  stroke-box

<ray-size> =
  closest-side     |
  closest-corner   |
  farthest-side    |
  farthest-corner  |
  sides

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

<url()> =
  url( <string> <url-modifier>\* )  |
  <url-token>

<src()> =
  src( <string> <url-modifier>\* )

<visual-box> =
  content-box  |
  padding-box  |
  border-box

<length-percentage> =
  <length>      |
  <percentage>

```

例
-

### offset-path を指定した要素のアニメーション

CSS コードサンプルの `offset-path` プロパティは、 SVG の `<path>` 要素と同じモーションパスを定義しています。このパスは、 SVG コードのレンダリングを見てもわかるように、煙突のある家の線画になっています。

#### SVG

ハサミの上半分と下半分は、 `offset-path` で定義されたモーションパスの始点に沿って配置されていなければ、キャンバスの左上に表示されます。

```html
<svg
 xmlns="http://www.w3.org/2000/svg"
 width="700"
 height="450"
 viewBox="350 0 1400 900">
  <title>House and Scissors</title>
  <rect x="595" y="423" width="610" height="377" fill="blue" />
  <polygon points="506,423 900,190 1294,423" fill="yellow" />
  <polygon points="993,245 993,190 1086,190 1086,300" fill="red" />
  <path
 id="house"
 d="M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190"
 fill="none"
 stroke="black"
 stroke-width="13"
 stroke-linejoin="round"
 stroke-linecap="round" />
  <path
 id="firstScissorHalf"
 class="scissorHalf"
 d="M30,0 H-10 A10,10 0 0,0 -20,10 A20,20 0 1,1 -40,-10 H20 A10,10 0 0,1 30,0 M-40,20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,20 M0,0"
 transform="translate(0,0)"
 fill="green"
 stroke="black"
 stroke-width="5"
 stroke-linejoin="round"
 stroke-linecap="round"
 fill-rule="evenodd" />
  <path
 id="secondScissorHalf"
 class="scissorHalf"
 d="M30,0 H-10 A10,10 0 0,1 -20,-10 A20,20 0 1,0 -40,10 H20 A10,10 0 0,0 30,0 M-40,-20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,-20 M0,0"
 transform="translate(0,0)"
 fill="forestgreen"
 stroke="black"
 stroke-width="5"
 stroke-linejoin="round"
 stroke-linecap="round"
 fill-rule="evenodd" />
</svg>
```

#### CSS

```css
.scissorHalf {
  offset-path: path(
    "M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190"
  );
  animation: followpath 4s linear infinite;
}

@keyframes followpath {
  to {
    motion-offset: 100%;
    offset-distance: 100%;
  }
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| Motion Path Module Level 1 # offset-path-property |

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

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

関連情報
----

* `offset`
* `offset-distance`
* `offset-rotate`
* SVG <path>

その他のデモ:

* Examples of the various values
* Triangle
* Scissors
* Eyes


:enabled - CSS: カスケーディングスタイルシート

: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> - CSS: カスケーディングスタイルシート

<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: カスケーディングスタイルシート

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`


:target - CSS: カスケーディングスタイルシート

:target
=======

**`:target`** は CSS の擬似クラスで、 URL のフラグメントに一致する `id` を持つ固有の要素（*ターゲット要素*）を表します。

```css
/\* 現在の URL のフラグメントに一致する ID を持つ要素を選択 \*/
:target {
  border: 2px solid black;
}
```

例えば、以下の URL には `section2` と呼ばれる要素を指すフラグメント（*#* 記号で記述）があります。
```

http://www.example.com/index.html#section2
```

現在の URL が上記の通りの場合、以下の要素が `:target` セレクターで選択されます。

```html
<section id="section2">Example</section>
```

構文
--

```css
:target {
  /\* ... \*/
}
```

**メモ:** CSS 仕様書のバグの可能性がありますが、`:target` はウェブコンポーネント内では動作しません。シャドウルートがターゲット要素をシャドウツリーに渡さないためです。

例
-

### 目次

`:target` 擬似クラスは、目次を構成するためにリンクされたページの部分を強調表示するために使うことができます。

#### HTML

```html
<h3>目次</h3>
<ol>
  <li><a href="#p1">第 1 段落にジャンプ！</a></li>
  <li><a href="#p2">第 2 段落にジャンプ！</a></li>
  <li>
    <a href="#nowhere">このリンクは対象がないので、どこにも行きません。</a>
  </li>
</ol>

<h3>面白い記事</h3>
<p id="p1">
  URL フラグメントを使うと<i>この段落</i>をターゲットにすることができます。上記のリンクをクリックして試してみてください。
</p>
<p id="p2">
  これは<i>別な段落</i>であり、やはり上記のリンクからアクセスできます。喜ばしいことだと思いませんか。
</p>
```

#### CSS

```css
p:target {
  background-color: gold;
}

/\* 対象要素に擬似要素を追加 \*/
p:target::before {
  font: 70% sans-serif;
  content: "►";
  color: limegreen;
  margin-right: 0.25em;
}

/\* 対象要素の中の i 要素にスタイルを適用 \*/
p:target i {
  color: red;
}
```

#### 結果

### 純粋な CSS のライトボックス

`:target` 擬似クラスを使用して JavaScript を使わずにライトボックスを作成することができます。このテクニックはページ内の最初は非表示の要素にリンクを作ることができることを利用しています。いったん対象となれば、 CSS で `display` を変更して表示させます。

**メモ:** `:target` 擬似クラスを使用した純粋な CSS のライトボックスのもっと完全な版は、 GitHub で利用できます (デモ)。

#### HTML

```html
<ul>
  <li><a href="#example1">例 1 を開く</a></li>
  <li><a href="#example2">例 2 を開く</a></li>
</ul>

<div class="lightbox" id="example1">
  <figure>
    <a href="#" class="close"></a>
    <figcaption>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis enim,
      placerat id eleifend eu, semper vel sem.
    </figcaption>
  </figure>
</div>

<div class="lightbox" id="example2">
  <figure>
    <a href="#" class="close"></a>
    <figcaption>
      Cras risus odio, pharetra nec ultricies et, mollis ac augue. Nunc et diam
      quis sapien dignissim auctor. Quisque quis neque arcu, nec gravida magna.
    </figcaption>
  </figure>
</div>
```

#### CSS

```css
/\* 開いていないライトボックス \*/
.lightbox {
  display: none;
}

/\* 開いたライトボックス \*/
.lightbox:target {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/\* ライトボックスの中身 \*/
.lightbox figcaption {
  width: 25rem;
  position: relative;
  padding: 1.5em;
  background-color: lightpink;
}

/\* 閉じるボタン \*/
.lightbox .close {
  position: relative;
  display: block;
}

.lightbox .close::after {
  right: -1rem;
  top: -1rem;
  width: 2rem;
  height: 2rem;
  position: absolute;
  display: flex;
  z-index: 1;
  align-items: center;
  justify-content: center;
  background-color: black;
  border-radius: 50%;
  color: white;
  content: "×";
  cursor: pointer;
}

/\* ライトボックスのオーバーレイ \*/
.lightbox .close::before {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.7);
  content: "";
  cursor: default;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* セレクターでの :target 擬似クラスの利用


column-width - CSS: カスケーディングスタイルシート

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 - CSS: カスケーディングスタイルシート

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)


shape-outside - CSS: カスケーディングスタイルシート

shape-outside
=============

**`shape-outside`** は CSS のプロパティで、隣接するインラインコンテンツが回り込むシェイプ (形状) を — 矩形でない場合もありますが — 定義します。既定では、インラインコンテンツはマージンボックスを回り込みます。`shape-outside` によって、この回り込みをカスタマイズし、テキストが単純なボックスではなく複雑なオブジェクトの周りを回り込めるようにします。

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

構文
--

```css
/\* キーワード値 \*/
shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;

/\* 関数値 \*/
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
shape-outside: path(
  "M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z"
);

/\* <url> 値 \*/
shape-outside: url(image.png);

/\* <gradient> 値 \*/
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);

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

`shape-outside` プロパティは、*浮動領域*と*浮動要素*を表す以下に挙げた値を使用して指定します。浮動領域はインラインコンテンツ (浮動要素) が囲む形状を指定します。

### 値

`none`

浮動領域は影響を受けません。インラインコンテンツは通常通り、要素のマージンボックスを回り込みます。

`<shape-box>`

浮動領域は浮動要素の辺の形状に従って (CSS ボックスモデル で定義された通りに) 計算されます。これは`margin-box`、`border-box`、`padding-box`、`content-box` の何れかになります。この形状は `border-radius` プロパティで生成された丸い角も含みます (`background-clip` と同様の動作です)。

`margin-box`

マージンの外側の縁で囲まれた形状を定義します。この形状の角の半径は、対応する `border-radius` および `margin` の値で決定されます。 `border-radius / margin` の比率が `1` 以上の場合、マージンの角の半径は `border-radius + margin` です。この比率が `1` 未満の場合、マージンの角の半径は `border-radius + (margin * (1 + (ratio-1)^3))` となります。

`border-box`

境界の外側の縁で囲まれた形状を定義します。この形状は、境界の外側の形状における通常のルールに従います。

`padding-box`

パディングの外側の縁で囲まれた形状を定義します。この形状は、境界の内側の形状における通常のルールに従います。

`content-box`

コンテンツの外側の縁で囲まれた形状を定義します。このボックスのそれぞれの角の半径は、 `0` と `border-radius - border-width - padding` の大きい方になります。

`<basic-shape>`

浮動領域は、`inset()`、`circle()`、`ellipse()`、`polygon()`、またはレベル 2 の仕様書で追加された `path()` の何れかによって生成された形状に基づいて計算されます。`<shape-box>` も提供された場合は、`<basic-shape>` 関数の参照ボックスを定義します。それ以外の場合、参照ボックスは既定で `margin-box` になります。

`<image>`

浮動領域は指定された `<image>` のアルファチャンネルに基づいて、 `shape-image-threshold` で定義されたように抽出され計算されます。

**メモ:** ユーザーエージェントは、`shape-outside` の値に含まれるすべての URL に対して、HTML5 の仕様で定義されている CORS に対応している可能性のあるフェッチメソッドを使用する必要があります。読み取りの際、ユーザーエージェントは "Anonymous" モードを使用し、参照元をスタイルシートの URL に設定し、文書の URL を含むオリジンを設定しなければなりません。この結果、有効な代替画像がないなどのネットワークエラーが発生した場合は、**`none`** の値を指定したのと同様になります。

補間
--

1 つ目と 2 つ目の `<basic-shape>` の間でアニメーションを行う場合、次のルールが適用されます。シェイプ関数の中の値は、単純なリストとして補間されます。このリストの値の補間は、可能な限り `<length>`、`<percentage>`、`calc()` のいずれかとして補間されます。リストの値がこれらの型ではなく、同一であった場合 (両方のリストの同じ位置に `nonzero` があった場合など)、それらの値は補間されます。

* 両方の形状は、同じ参照ボックスを使用する必要があります。
* 両方の形状が同じ型であった場合、その型が `ellipse()` または `circle()` であり、かつどの半径にも `closest-side` や `farthest-side` のキーワードを使用していない場合は、シェイプ関数内のそれぞれの値の間で補間されます。
* 両方の形状が `inset()` 型であった場合、シェイプ関数内のそれぞれの値の間で補間されます。
* 両方の形状が `polygon()` 型であった場合、両方の多角形の頂点の数が同じで、同じ `<fill-rule>` を使用していた場合は、シェイプ関数内のそれぞれの値の間で補完されます。
* それ以外の場合は、補間は行われません。
公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | 浮動要素 |
| 継承 | なし |
| 計算値 | `basic-shape` で定義された通り (与えられている場合は `shape-box` (en-US) が続く)、 URI を絶対化した `image`、それ以外は指定通り。 |
| アニメーションの種類 | `basic-shape` で指定された場合はあり、それ以外の場合はなし |

形式定義
----
```

shape-outside =
  none                              |
  [ <basic-shape> || <shape-box> ]  |
  <image>

<shape-box> =
  <visual-box>  |
  margin-box

<image> =
  <url>       |
  <gradient>

<visual-box> =
  content-box  |
  padding-box  |
  border-box

<url> =
  <url()>  |
  <src()>

<url()> =
  url( <string> <url-modifier>\* )  |
  <url-token>

<src()> =
  src( <string> <url-modifier>\* )

```

例
-

### 漏斗状のテキスト

#### HTML

```html
<div class="main">
  <div class="left"></div>
  <div class="right"></div>
  <p>
    Sometimes a web page's text content appears to be funneling your attention
    towards a spot on the page to drive you to follow a particular link.
    Sometimes you don't notice.
  </p>
</div>
```

#### CSS

```css
.main {
  width: 530px;
}

.left,
.right {
  width: 40%;
  height: 12ex;
  background-color: lightgray;
}

.left {
  -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%);
  shape-outside: polygon(0 0, 100% 100%, 0 100%);
  float: left;
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.right {
  -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);
  shape-outside: polygon(100% 0, 100% 100%, 0 100%);
  float: right;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

p {
  text-align: center;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Shapes Module Level 1 # shape-outside-property |

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

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

関連情報
----

* CSS シェイプ
* CSS シェイプの概要
* ボックス値からのシェイプ
* 基本シェイプ
* 画像からのシェイプ
* `<basic-shape>`
* `shape-margin`
* `shape-image-threshold`


-moz-user-input - CSS: カスケーディングスタイルシート

-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 - CSS: カスケーディングスタイルシート

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 - CSS: カスケーディングスタイルシート

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`


grid-row-end - CSS: カスケーディングスタイルシート

grid-row-end
============

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
**`grid-row-end`** は CSS のプロパティで、グリッドの配置に線または区間を使用したり、使用しなかったりして (自動)、グリッド行内のグリッドアイテムの末尾位置、すなわちグリッド領域のインラインの末尾側の端を指定します。

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

構文
--

```css
/\* キーワード値 \*/
grid-row-end: auto;

/\* <custom-ident> 値 \*/
grid-row-end: somegridarea;

/\* <integer> + <custom-ident> 値 \*/
grid-row-end: 2;
grid-row-end: somegridarea 4;

/\* span + <integer> + <custom-ident> 値 \*/
grid-row-end: span 3;
grid-row-end: span somegridarea;
grid-row-end: 5 somegridarea span;

/\* グローバル値 \*/
grid-row-end: inherit;
grid-row-end: initial;
grid-row-end: revert;
grid-row-end: unset;
```

### 値

`auto`

プロパティをグリッドアイテムの配置に影響させず、自動的に配置し、間隔を自動的に取るか、既定の `1` とするためのキーワードです。

`<custom-ident>`

`<custom-ident>-end` という名前の付いた線がある場合、これはそのような線の先頭がグリッドアイテムの配置に関わります。

**メモ:** 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 `grid-row-end: foo;` と指定すると名前付きグリッド領域の末尾側の端を選択します (その前に `foo-end` という名前の線が明示的に存在しない限り)。

そうでなければ、これは `<custom-ident>` に沿って整数の `1` が指定されたものとして扱われます。

`<custom-ident>` は `span` の値を取ることができません。

`<integer> && <custom-ident>?`

n 番目のグリッド線をグリッドアイテムの配置に使用します。負の整数が指定された場合は、逆方向にカウントし、明示的なグリッドの末尾の端から始めます。

名前が `<custom-ident>` として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。

`0` の `<integer>` 値は無効です。

`span && [ <integer> || <custom-ident> ]`

グリッドアイテムのグリッド領域の行の末尾の端が先頭の端から n 本になるように、グリッドアイテムの配置にグリッドスパンを設定します。

名前が `<custom-ident>` として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分おにない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。

<integer> が省略された場合の既定値は `1` です。負の数や `0` は無効です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | 包含ブロックがグリッドコンテナーであるグリッドアイテムまたは絶対位置指定のボックス |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

grid-row-end =
  <grid-line>

<grid-line> =
  auto                                                |
  <custom-ident>                                      |
  [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ]  |
  [ span && [ <integer [1,∞]> || <custom-ident> ] ]

```

例
-

### グリッドアイテムの行の末尾位置の設定

#### HTML

```html
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
</div>
```

#### CSS

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

.box2 {
  grid-column-start: 1;
  grid-row-start: 3;
  grid-row-end: 5;
}
```

```
\* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.nested {
  border: 2px solid #ffec99;
  border-radius: 5px;
  background-color: #fff9db;
  padding: 1em;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # line-placement |

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

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

関連情報
----

* 関連する CSS プロパティ: `grid-row-start`, `grid-row`, `grid-column-start`, `grid-column-end`, `grid-column`
* グリッドレイアウトガイド: 線に基づく配置を使用したグリッドレイアウト
* 動画チュートリアル: *Line-based placement*


mask-image - CSS: カスケーディングスタイルシート

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


CSS カスケード入門 - CSS: カスケーディングスタイルシート

CSS カスケード入門
===========

**カスケード**は、異なるソースから来るプロパティ値を組み合わせる方法を定義するアルゴリズムです。カスケードでは、複数のオリジンやカスケードレイヤーの宣言が要素のプロパティに値を設定する場合に、何が優先されるかを定義します。

これは*カスケーディング*スタイルシートという名前で強調されているように、 CSS の中心を占めるものです。セレクターが要素に一致する場合、優先順位の低いオリジンやレイヤーのセレクターがより高い詳細度を持っていたとしても、優先順位の最も高いオリジンのプロパティ値が適用されます。

この記事では、カスケードとは何か、 CSS の宣言をカスケードする順番、そしてウェブ開発者にどのように影響するかを説明します。

オリジンの種類
-------

CSS カスケードアルゴリズムの役割は、 CSS プロパティの正しい値を決定するために CSS 宣言を選択することです。 CSS 宣言は、**ユーザーエージェントスタイルシート**、**作成者スタイルシート**、**ユーザースタイルシート** など、さまざまなものに由来します。

スタイルシートはこれらの異なるオリジンから生まれ、これらのオリジンのそれぞれで異なるレイヤーにあることがありますが、スコープでは重なり合っています。これを機能させるために、カスケードアルゴリズムはそれらがどのように相互に作用するかを定義しています。相互作用に取り組む前に、いくつかの用語を定義しておきましょう。

### ユーザーエージェントスタイルシート

ブラウザーには、任意の文書に既定のスタイルを提供する基本的なスタイルシートがあります。これらのスタイルシートには**ユーザーエージェントスタイルシート**と呼ばれています。実際のスタイルシートを使用するブラウザーもあれば、コードでシミュレートするブラウザーもありますが、最終的な結果は同じです。

ブラウザーによっては、ユーザーがユーザーエージェントスタイルシートを変更することができます。

ユーザーエージェントスタイルシートに関するいくつかの制約は HTML 仕様書によって設定されていますが、ブラウザーにはまだ多くの自由度があります。つまり、ブラウザーごとに大きな違いがあります。開発プロセスを簡素化するために、ウェブ開発者は多くの場合、 CSS リセットスタイルシート（例えば normalize.css）を使用して、あらゆるブラウザーが特定のニーズに合わせて変更を開始する前に、共通のプロパティ値を既知の状態にします。

ユーザーエージェントスタイルシートがプロパティの隣に `!important` を含み、それを "important" にしない限り、リセットスタイルシートを含む作成者スタイルによって宣言されたスタイルは、関連するセレクターの詳細度にかかわらず、ユーザーエージェントスタイルより優先さ れます。

### 作成者スタイルシート

**作成者スタイルシート**はスタイルシートの最も一般的な種類です。これらはウェブ開発者によって書かれたスタイルです。これらのスタイルは、上に述べたように、ユーザーエージェントスタイルをリセットすることができ、与えられたウェブページやアプリケーションのデザインのためのスタイルを定義します。作成者やウェブ開発者は、一つ以上のリンクされた、あるいはインポートされたスタイルシート、 `<style>` ブロック、 `style` 属性で定義されたインラインスタイルを使って文書用のスタイルを定義しています。これらの作成者スタイルは、ウェブサイトのルック＆フィール（テーマ）を定義します。

### ユーザースタイルシート

ほとんどのブラウザーでは、ウェブサイトのユーザー（または読者）は、ユーザーの希望に合わせた使い勝手を提供するために設計された独自の**ユーザースタイルシート**を使用して、スタイルを上書きすることを選択することができます。ユーザーエージェントによっては、ユーザースタイルを直接設定するか、ブラウザー拡張機能を介して追加することができます。

### カスケードレイヤー

カスケード順序は、オリジンの種類に基づきます。オリジンタイプ内のカスケードは、その種類の中でのカスケードレイヤーの宣言順序に基づきます。ユーザーエージェント、作成者、ユーザーのすべてのオリジンについて、スタイルは名前付きまたは無名のレイヤーの内部または外部で宣言することができます。 `layer`, `layer()` または `@layer` を使って宣言した場合、スタイルは指定された名前のレイヤーに、名前が提供されていない場合は無名のレイヤーに配置されます。レイヤーの外側で宣言されたスタイルは、最後に宣言された匿名のレイヤーに属するものとして扱われます。

各オリジンの種類内のカスケードレイヤーの説明に入る前に、カスケードのオリジンの種類について見てみましょう。

カスケード順
------

カスケーディングアルゴリズムは、それぞれの文書要素のそれぞれのプロパティに適用する値を見つける方法を決定する。カスケードアルゴリズムには、以下の手順が適用されます。

1. **関連性**: 最初に、さまざまなオリジンからすべてのルールをフィルタリングして、特定の要素に適用されるルールのみを保持します。つまり、セレクターが指定された要素と一致し、適切な `media` アットルールの一部であるルールを意味します。
2. **オリジンと重要度**: 次に、これらのルールをその重要度、つまり、 `!important` が後に続くかどうか、およびそのオリジンに従って並べ替えます。ひとまずレイヤーを無視すると、カスケード順は次のようになります。

| 順序（低い順） | オリジン | 重要度 |
| --- | --- | --- |
| 1 | ユーザーエージェント（ブラウザー） | 通常 |
| 2 | ユーザー | 通常 |
| 3 | 作成者（開発者） | 通常 |
| 4 | CSS @keyframe アニメーション |  |
| 5 | 作成者（開発者） | `!important` |
| 6 | ユーザー | `!important` |
| 7 | ユーザーエージェント（ブラウザー） | `!important` |
| 8 | CSS トランジション |  |
3. **詳細度:** あるオリジンと等しい場合、ルールの詳細度を考慮して、ある値を選択することができる。セレクターの詳細度を比較し、最も高い詳細度を持つ宣言が勝利します。
4. **出現順**: 優先順位を持つオリジンでは、ある特性に対して、同等の詳細度を持つセレクターに一致するスタイルブロックに競合する値がある場合、スタイルの順序の最後の宣言が適用されます。

カスケードは昇順で、アニメーションはユーザー、作成者、ユーザーエージェントのいずれのスタイルで宣言されていても通常の値より優先され、重要な値はアニメーションより優先され、トランジションは重要な値より優先されることを意味しています。

**メモ:** **トランジションとアニメーション**

アニメーションで設定されたプロパティ値 `@keyframes` は、すべての通常のスタイル（`!important`を設定していないもの）よりも優先されます。

`transition` で設定されているプロパティ値は、たとえ `!important` でマークされているものであっても、他のすべての設定値より優先されます。

カスケードアルゴリズムは、詳細度アルゴリズムの前に適用されます。つまり、ユーザースタイルシート（2 行目）で `:root p { color: red;}` が宣言され、作成者スタイルシート（3 行目）でより詳細度の低い `p {color: blue;}` が宣言されると、その段落は青色になるということです。

基本的な例
-----

さまざまなオリジンにまたがる CSS の複数のソースを含む例を見てみましょう。カスケードレイヤーがカスケードにどのような影響を与えるかを詳しく見る前に、さまざまなオリジンの CSS の複数のソースを含む例を見て、カスケードアルゴリズムのステップを通して作業してみましょう。

ここには、ユーザーエージェントスタイルシート、 2 つの作成者スタイルシート、ユーザースタイルシート、および HTML 内のインラインスタイルがあります。

**ユーザーエージェント CSS:**

```css
li {
  margin-left: 10px;
}
```

**作成者 CSS 1:**

```css
li {
  margin-left: 0;
} /\* これは初期化 \*/
```

**作成者 CSS 2:**

```css
@media screen {
  li {
    margin-left: 3px;
  }
}

@media print {
  li {
    margin-left: 1px;
  }
}

@layer namedLayer {
  li {
    margin-left: 5px;
  }
}
```

**ユーザー CSS:**

```css
.specific {
  margin-left: 1em;
}
```

**HTML:**

```html
<ul>
  <li class="specific">1<sup>st</sup></li>
  <li>2<sup>nd</sup></li>
</ul>
```

この場合、 `li` および `.specific` ルール内の宣言を適用する必要があります。

繰り返しになりますが、カスケードアルゴリズムには 4 つのステップがあり、順に次のようになります。

1. 関連性
2. オリジンと重要度
3. 詳細度
4. 出現順序

この `1px` は印刷媒体用です。そのメディア種別に基づく\_関連性がないため、検討対象から外されています。

`!important`として宣言されている宣言はないため、優先順位は、ユーザースタイルシートまたはユーザーエージェントスタイルシートの前の作成者スタイルシートです。オリジンと重要度\_に基づいて、ユーザースタイルシートの `1em` とユーザーエージェントスタイルシートの `10px` は考慮から除外されます。

`1em` の `.specific` にあるユーザースタイルがより高い詳細度をを持っていても、それはユーザースタイルシートの通常の宣言であることに注意してください。そのため、作成者スタイルよりも優先順位が低く、詳細度が考慮される前に、アルゴリズムのオリジンと重要性のステップで削除されます。

ここでは 3 つの宣言が競合しています。

```css
li {
  margin-left: 0;
} /\* from author css 1 \*/
```

```css
@media screen {
  li {
    margin-left: 3px;
  }
}
```

```css
@layer namedLayer {
  li {
    margin-left: 5px;
  }
}
```

最後の `5px` はカスケードレイヤーの一部です。レイヤー内の通常の宣言は、同じオリジン種別内のレイヤーにない通常のスタイルよりも優先順位が低くなります。これはアルゴリズムのステップ 2、*オリジンと重要度*によっても取り除かれます。

このため、`0`と`3px`が残り、どちらも同じセレクターを持つので、同じ*詳細度*となります。

次に、*出現順序*を見ます。レイヤーがない 2 つの作成者スタイルのうち、2 番目のスタイルが勝ります。

```css
margin-left: 3px;
```

**メモ:** ユーザー CSS で定義された宣言は、より高い詳細度を持つかもしれませんが、カスケードアルゴリズムのオリジンと重要性が詳細度アルゴリズムの前に適用されるため、選択されることはありません。カスケードレイヤーで定義された宣言は、コードの後半に来るかもしれませんが、カスケードレイヤーの通常のスタイルが通常の非レイヤーのスタイルより優先順位が低いため、優先順位もありません。 出現の順序\_は、オリジン、重要度、および詳細度の両方が等しい場合にのみ重要である。

作成者スタイル: インラインスタイル、レイヤー、優先度
---------------------------

カスケード順の表は、優先順位の概要を 提供していました。この表では、ユーザーエージェント用、ユーザー用、作成者用のオリジン型スタイルをそれぞれ「オリジン型 - normal」と「オリジン型 - !important」で2行にまとめていました。各オリジン種別内の優先順位はもっと細部があります。スタイルはそのオリジン種別のレイヤーに含まれることがあり、作成者スタイルでは、インラインスタイルがカスケード順序のどこに位置するかという問題もあります。

レイヤーを宣言する順序は、優先順位を決定する上で重要です。レイヤー内の通常のスタイルは、前のレイヤーで宣言されたスタイルよりも優先され、どのレイヤーの外側で宣言された通常のスタイルも、仕様書に関係なく通常のレイヤーのスタイルよりも優先されます。

この例では、作成者は CSS の `@import` ルールを使用して、 `<style>` 情報要素内に五つの外部スタイルシートをインポートしています。

```html
<style>
 @import unlayeredStyles.css;
 @import AStyles.css layer(A);
 @import moreUnlayeredStyles.css;
 @import BStyles.css layer(B);
 @import CStyles.css layer(C);
 p {
 color: red;
 padding: 1em !important;
 }
</style>
```

そして、文書の本体にはインラインスタイルがあります。

```html
Hello`
```

 上記の CSS コードブロックでは、 "A", "B", "C" という名前の 3 つのカスケードレイヤーが順に作成されました。 3 つのスタイルシートはレイヤーに直接インポートされ、 2 つはレイヤーを作成またはレイヤーに割り当てずにインポートされました。
 以下の一覧（通常の作成者スタイルの優先順位 - 4 番目）の「すべての非レイヤー化されたスタイル」には、これら 2 つのスタイルシートのスタイルと、追加の非レイヤー化された CSS スタイルブロックのスタイルが含まれています。さらに、 2 つのインラインスタイル、通常の `line-height` 宣言、および重要な `text-decoration` 宣言があります。

| 順序（低い順） | 作成者スタイル | 重要度 |
| --- | --- | --- |
| 1 | A - 最初のレイヤー | 通常 |
| 2 | B - 二番目のレイヤー | 通常 |
| 3 | C - 最後のレイヤー | 通常 |
| 4 | すべてのレイヤー化されていないスタイル | 通常 |
| 5 | インラインスタイル `style` | 通常 |
| 6 | アニメーション |  |
| 7 | すべてのレイヤー化されていないスタイル | `!important` |
| 8 | C - 最後のレイヤー | `!important` |
| 9 | B - 二番目のレイヤー | `!important` |
| 10 | A - 最初のレイヤー | `!important` |
| 11 | インラインスタイル `style` | `!important` |
| 12 | トランジション |  |

すべてのオリジン種別において、レイヤーに含まれる重要でないスタイルが最も低い優先順位をになります。この例では、最初に宣言されたレイヤー (A) に関連する通常のスタイルは、 2 番目に宣言されたレイヤー (B) の通常のスタイルよりも優先度が低く、それは 3 番目に宣言されたレイヤー (C) の通常のスタイルよりも優先度が低くなっています。これらのレイヤー化されたスタイルは、通常のレイヤー化されていないスタイル（`unlayeredStyles.css`, `moreUnlayeredStyles.css`, および `<style>` 自体の `p` の `color` から得られる通常のスタイル）よりも優先度が低くなります。

A、B、C のレイヤー化されたスタイルのいずれかが、`:root body p { color: black;}` のような、要素に一致する、より高い詳細度を持つセレクターを保有している場合、それは問題ではありません。これらの宣言は*オリジン*のために考慮から外されます。通常のレイヤー化されたスタイルは通常のレイヤー化されていないスタイルよりも優先順位が低くなっています。しかし、より具体的なセレクター `:root body p { color: black;}` が `unlayeredStyles.css` に得られた場合、*origin と importance* はどちらも同じ優先順位なので、*詳細度* はより具体的で黒い宣言が勝ると言う意味になります。

レイヤーの優先順位は、`!important`として宣言されたスタイルでは逆転します。あるレイヤーで宣言された重要なスタイルは、レイヤーの外側で宣言された重要なスタイルよりも見なされます。最初に宣言されたレイヤー (A) の重要なスタイルは、レイヤー B で得られる重要な宣言に優先し、レイヤー C に優先し、レイヤー外のスタイルにある重要な宣言に優先します。

### インラインスタイル

作成者スタイルに関係するのは、`style`属性で宣言されたインラインスタイルだけです。通常のインラインスタイルは、セレクターの仕様書に関係なく、他のどの通常の作成者スタイルよりも優先されます。もし、インポートされた 5 つのスタイルシートのどれかの `:root body p` セレクターブロックで `line-height: 2;` が宣言されていたとしても、行の高さは `1.6` のままでしょう。

通常のインラインスタイルは、プロパティが CSS アニメーションによって変更されない限り、他のどの通常の作成者スタイルよりも優先されます。

全ての重要なインラインスタイルは、重要か否か、インラインか否か、レイヤーか否かを問わず、全ての作成者スタイルに優先して見なされます。重要なスタイルはアニメーションするプロパティにも見なされますが、トランジションするプロパティには適用されません。重要なインラインスタイルを上書きできるのは、 1) 重要なユーザースタイル、 2) 重要なユーザーエージェントスタイル、 3) 遷移するプロパティ値の 3 点です。

### 重要度とレイヤー

重要なスタイルでは、オリジン種別の優先順位が逆転します。カスケードレイヤーの外側で宣言された重要なスタイルは、レイヤーの一部として宣言されたスタイルよりも優先順位が低くなります。初期のレイヤーに来る重要な値は、後続のカスケードレイヤーで宣言された重要なスタイルよりも優先されます。

以下の CSS を例に取ってみましょう。

```css
p {
  color: red;
}
@layer B {
  :root p {
    color: blue;
  }
}
```

たとえ赤が最初に宣言され、あまり詳細でないセレクターを持っていても、レイヤーのない CSS は レイヤー化された CSS より優先されるため、段落は赤になります。もし、段落に `<p style="color: black">` のような別の色を設定するインラインスタイルを保有していたら、段落は黒になります。

このCSSの一部に `!important` を追加すると、スタイルシートの優先順位が逆転します。

```css
p {
  color: red !important;
}
@layer B {
  :root p {
    color: blue !important;
  }
}
```

これで段落は青色になります。一番最初に宣言されたレイヤーの `!important` は、それ以降のレイヤーやレイヤーにないimportantの宣言に優先して適用されます。もし、インラインスタイルが、`<p style="color: black !important">`のように !important を含んでいたら、再び、パラグラフは黒になります。インラインのimportantは、仕様書に関係なく、作者が宣言した他のすべての `!important` 宣言より優先されます。

**メモ:** `!important` は、カスケードレイヤーの優先順位を逆転させます。このため、外部スタイルを上書きするために `!important` を使用するのではなく、フレームワーク、サードパーティーのスタイル、ウィジェットのスタイルシートなどをレイヤーにインポートして、優先順位を下げます。important` は、最初の宣言されたレイヤーで、必要なスタイルを後の上書きから守るために、もし使用することがあるならば、控えめに使用すべきです。

トランジションしているスタイルは、誰が、どのように宣言しても、すべての重要なスタイルに優先して見なされます。

完全なカスケード順序
----------

オリジン型とカスケードレイヤーの優先順位をより深く理解した今、カスケード順の表は以下のように表現した方がより正確だったことに気づきました。

| 優先順位（低い順） | スタイルのオリジン | 重要性 |
| --- | --- | --- |
| 1 | ユーザーエージェント - 先に宣言されたレイヤー | 通常 |
| ユーザーエージェント - 後に宣言されたレイヤー |
| ユーザーエージェント - レイヤー化されていないスタイル |
| 2 | ユーザー - 先に宣言されたレイヤー | 通常 |
| ユーザー - 後に宣言されたレイヤー |
| ユーザー - レイヤー化されていないスタイル |
| 3 | 作成者 - 先に宣言されたレイヤー | 通常 |
| 作成者 - 後に宣言されたレイヤー |
| 作成者 - レイヤー化されていないスタイル |
| `style` によるインラインスタイル |
| 4 | アニメーション |  |
| 5 | 作成者 - レイヤー化されていないスタイル | `!important` |
| 作成者 - 後に宣言されたレイヤー |
| 作成者 - 先に宣言されたレイヤー |
| `style` によるインラインスタイル |
| 6 | ユーザー - レイヤー化されていないスタイル | `!important` |
| ユーザー - 後に宣言されたレイヤー |
| ユーザー - 先に宣言されたスタイル |
| 7 | user-agent - レイヤー化されていないスタイル | `!important` |
| ユーザーエージェント - 後に宣言されたレイヤー |
| ユーザーエージェント - 先に宣言されたスタイル |
| 8 | トランジション |  |

どの CSS エンティティがカスケードに関係するか
-------------------------

CSS 宣言のみが、つまりプロパティ/値の組だけが、カスケードに加わります。つまり、宣言以外のエンティティを含むアットルール、例えば*記述子*を含む `@font-face` などは、カスケードには加わりません。

ほとんどの場合、アットルールで定義されたプロパティと記述子はカスケードには参加しません。カスケードには、アットルールだけが全体として参加します。例えば、`@font-face`ルールの中では、フォント名は `font-family` 記述子によって識別されます。同じ記述子を持つ複数の `@font-face` ルールが定義されている場合、全体として最も適切な `@font-face` のみが考慮されます。同じように適切なものが複数ある場合は、アルゴリズムのステップ 1、2、および 4 を使用して `@font-face` 宣言全体が比較されます（アットルールに関しては仕様がありません）。

大部分のアットルール — `@media`、`@document`、`@supports` の中など — に含まれる宣言はカスケードに加わりますが、 `@keyframes` に含まれる宣言は加わりません。 `@font-face` と同様に、アットルール全体のみがカスケードアルゴリズムによって選択されます。

`@keyframes` の中の宣言は、カスケードには参加しません。 `font-face` と同様に、カスケードアルゴリズムによって選択されるのは全体としての `@keyframes` だけです。アニメーションの優先順位は以下に記述します。

`@import` に関しては、 `@import` はカスケードにそれ自身は参加しませんが、インポートされたスタイルは全てに参加します。もし `@import` が名前付きまたは無名のレイヤーを定義していれば、インポートされたスタイルシートのコンテンツはその指定されたレイヤーに所有されます。 `@import` でインポートされた他のすべての CSS は、最後に宣言されたレイヤーとして扱われるものです。これは上で説明したとおりです。

最後に、 `@charset` は特定のアルゴリズムに従っているため、カスケードアルゴリズムには影響を与えないことに注意してください。

CSS アニメーションとカスケード
-----------------

CSS アニメーションは、 `@keyframes` アットルールを使用して、状態間のアニメーションを定義します。キーフレームはカスケードされません。つまり、 CSS は常に単一の `@keyframes` から値を取得し、複数の値を混在させることはありません。

複数のキーフレームアニメーションが同じアニメーション名で定義されている場合、最後に定義された `@keyframes` がオリジンとレイヤーで最も優先されます。たとえ、 `@keyframes` が異なるプロパティをアニメーションさせる場合でも、 1 つの `@keyframes` 定義だけが使用されます。同じ名前の `@keyframes` は決して結合されません。

```css
p {
  animation: infinite 5s alternate repeatedName;
}
@keyframes repeatedName {
  from {
    font-size: 1rem;
  }
  to {
    font-size: 3rem;
  }
}

@layer A {
  @keyframes repeatedName {
    from {
      background-color: yellow;
    }
    to {
      background-color: orange;
    }
  }
}
@layer B {
  @keyframes repeatedName {
    from {
      color: white;
    }
    to {
      color: black;
    }
  }
}
```

この例では、 `repeatedName` という名前の別個のアニメーション宣言が 3 つ存在します。 `animation: infinite 5s alternate repeatedName` が段落に適用されると、 1 つのアニメーションだけが適用されます。レイヤー化されていない CSS で定義されたキーフレームアニメーションは、オリジンとカスケードレイヤーの優先順位に基づいて、レイヤーのキーフレームアニメーション宣言より優先されます。この例では、要素のフォントサイズのみがアニメーション化されます。

**メモ:** 重要なアニメーションはありません。 `@keyframes` ブロック内のプロパティ宣言で、値の一部として `!important` を含むものは無視されるからです。

スタイルの初期化
--------

コンテンツがスタイルの変更を終えた後、スタイルを既知の状態に戻す必要が出てくることがあります。これは、アニメーションやテーマの変更などの場合に起こります。 CSS プロパティの `all` を使うと、 CSS 内の (ほぼ) すべてのものを既知の状態に素早く戻すことができます。

`all` では、すべてのプロパティを、初期状態 (既定)、カスケードの前のレベルから引き継いだ状態、特定のオリジン (ユーザーエージェントスタイルシート、作成者スタイルシート、ユーザースタイルシート)、さらにはプロパティの値を完全にクリアする状態のいずれかにすぐに戻すことができます。

仕様書
---

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

関連情報
----

* とても簡単な CSS カスケードの紹介
* CSS の主要概念:
    + CSS の構文
    + アットルール
    + コメント
    + 詳細度
    + 継承
    + ボックスモデル
    + レイアウトモード
    + 視覚整形モデル
    + マージンの相殺
    + 値
        - 初期値
        - 計算値
        - 使用値
        - 実効値
    + 値の定義構文
    + 一括指定プロパティ
    + 置換要素


:placeholder-shown - CSS: カスケーディングスタイルシート

:placeholder-shown
==================

**`:placeholder-shown`** は CSS の擬似クラスで、プレイスホルダー文字列が表示されている `<input>` または `<textarea>` 要素を表します。

```css
/\* プレイスホルダーが有効な要素を選択 \*/
:placeholder-shown {
  border: 2px solid silver;
}
```

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

構文
--
```

:placeholder-shown
```

例
-

### 基本的な例

この例は、プレイスホルダーが表示されているときに特殊なフォントと境界線を適用します。

#### HTML

```html
<input placeholder="何か入力してください！" />
```

#### CSS

```css
input {
  border: 1px solid black;
  padding: 3px;
}

input:placeholder-shown {
  border-color: teal;
  color: purple;
  font-style: italic;
}
```

#### 結果

### 文字列があふれる場合

スマートフォンのような狭い画面では、検索ボックスやその他の入力欄の幅はとても狭くなります。これにより、プレイスホルダーの文字列が望ましくない形で切り取られることがあります。 `text-overflow` プロパティでこの挙動を修正すると便利です。

#### HTML

```html
<input id="input1" placeholder="Name, Rank, and Serial Number" /> <br /><br />
<input id="input2" placeholder="Name, Rank, and Serial Number" />
```

#### CSS

```css
#input2:placeholder-shown {
  text-overflow: ellipsis;
}
```

#### 結果

### カスタマイズした入力欄

以下の例では部署名と ID コード欄をカスタムスタイルで強調します。

#### HTML

```html
<form id="test">
  <p>
    <label for="name">Enter Student Name:</label>
    <input id="name" placeholder="Student Name" />
  </p>
  <p>
    <label for="branch">Enter Student Branch:</label>
    <input id="branch" placeholder="Student Branch" />
  </p>
  <p>
    <label for="sid">Enter Student ID:</label>
    <input
 type="number"
 pattern="[0-9]{8}"
 title="8 digit ID"
 id="sid"
 class="studentid"
 placeholder="8 digit id" />
  </p>
  <input type="submit" />
</form>
```

#### CSS

```css
input {
  background-color: #e8e8e8;
  color: black;
}

input.studentid:placeholder-shown {
  background-color: yellow;
  color: red;
  font-style: italic;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # placeholder |

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

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

関連情報
----

* `::placeholder` 擬似要素はプレイスホルダー*自身*にスタイルを適用します。
* 関連する HTML 要素: `<input>`, `<textarea>`
* HTML フォーム


overflow-block - CSS: カスケーディングスタイルシート

overflow-block
==============

**`overflow-block`** は CSS プロパティで、内容がブロックの先頭およびブロックの末尾の端をあふれた時にどのように表示するかを設定します。これは表示なし、スクロールバー付き、内容をはみ出させる、のいずれかになります。

**メモ:** `overflow-block` プロパティは、文書の書字方向に応じて、 `overflow-y` または `overflow-x` に対応します。

構文
--

```css
/\* キーワード値 \*/
overflow-block: visible;
overflow-block: hidden;
overflow-block: scroll;
overflow-block: auto;

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

`overflow-block` プロパティは、以下の値の一覧のうち一つのキーワードで指定します。

### 値

`visible`

内容は切り取られず、パディングボックスのブロックの先頭とブロックの末尾の辺よりも外側に表示される可能性があります。

`hidden`

ブロック方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。スクロールバーは表示されません。

`scroll`

ブロック方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。ブラウザーは内容が実際に切り取られるかどうかにかかわらず、スクロールバーを表示します。 (これは内容が変化したときにスクロールバーが表示されたり非表示になったりすることを防ぎます。) プリンターははみ出す内容を印刷するかもしれません。

`auto`

ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は `visible` と同じように表示されますが、新しいブロック整形コンテキストを生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | ブロックコンテナー, フレックスコンテナー, グリッドコンテナー |
| 継承 | なし |
| 計算値 | 指定通り、ただし `overflow-x` と `overflow-y` のどちらかが `visible` でも clip でもない場合は、 `visible`/`clip` はそれぞれ `auto`/`hidden` と計算される |
| アニメーションの種類 | 離散値 |

形式文法
----
```

overflow-block =
  visible  |
  hidden   |
  clip     |
  scroll   |
  auto

```

例
-

### HTML

```html
<ul>
  <li>
    <code>overflow-block:hidden</code> — ボックスの外側のテキストを隠す
    <div id="div1">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-block:scroll</code> — 常にスクロールバーを表示
    <div id="div2">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-block:visible</code> —
    必要に応じてテキストをボックスの外に表示
    <div id="div3">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-block:auto</code> — 多くのブラウザーでは
    <code>scroll</code> と同じ
    <div id="div4">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>
</ul>
```

### CSS

```css
#div1,
#div2,
#div3,
#div4 {
  border: 1px solid black;
  width: 250px;
  height: 100px;
}

#div1 {
  overflow-block: hidden;
  margin-bottom: 120px;
}
#div2 {
  overflow-block: scroll;
  margin-bottom: 120px;
}
#div3 {
  overflow-block: visible;
  margin-bottom: 120px;
}
#div4 {
  overflow-block: auto;
  margin-bottom: 120px;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Overflow Module Level 3 # overflow-control |

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

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

関連情報
----

* 関連する CSS プロパティ: `text-overflow`, `white-space`, `overflow`, `overflow-inline`, `overflow-x`, `overflow-y`, `clip`, `display`
* CSS 論理的プロパティ
* 書字方向


inset-block - CSS: カスケーディングスタイルシート

inset-block
===========

**`inset-block`** は CSS のプロパティで、要素におけるブロック方向の先頭および末尾からの論理的な内部位置を定義し、要素の書字方向やテキストの向きに従って物理的な内部位置に対応付けられます。 `top` と `bottom`、または `right` と `left` のいずれかのプロパティに、 `writing-mode`, `direction`, `text-orientation` で定義された値に従って対応します。

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

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

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

* `inset-block-end`
* `inset-block-start`
構文
--

```css
/\* <length> 値 \*/
inset-block: 3px 10px;
inset-block: 2.4em 3em;
inset-block: 10px; /\* 値が先頭と末尾の両方に適用される \*/

/\* 包含ブロックの幅または高さに対する <percentage> 値 \*/
inset-block: 10% 5%;

/\* キーワード値 \*/
inset-block: auto;

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

### 値

`inset-block` プロパティは `left` プロパティと同じ値を取ります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `inset-block-start`: `auto`
* `inset-block-end`: `auto`
 |
| 適用対象 | 位置指定要素 |
| 継承 | なし |
| パーセント値 | 包含ブロックの論理的な高さ |
| 計算値 | 一括指定の次の各プロパティとして* `inset-block-start`: 方向が論理的である以外はボックスのオフセット、 `top`, `right`, `bottom`, `left` と同じ
* `inset-block-end`: 方向が論理的である以外はボックスのオフセット、 `top`, `right`, `bottom`, `left` と同じ
 |
| アニメーションの種類 | length または パーセント値, calc(); |

形式文法
----
```

inset-block =
  <'top'>{1,2}

```

例
-

### ブロック方向の先頭と末尾のオフセットの設定

#### HTML

```html
<div>
  <p class="exampleText">テキストの例</p>
</div>
```

#### CSS

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

.exampleText {
  writing-mode: vertical-lr;
  position: relative;
  inset-block: 20px 50px;
  background-color: #c8c800;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-inset-block |

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

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

関連情報
----

* 対応する物理的プロパティ: `top`, `right`, `bottom`, `left`
* 対応する物理的な一括指定: `inset`
* 対応するインライン方向の一括指定: `inset-inline`
* `writing-mode`, `direction`, `text-orientation`


:link - CSS: カスケーディングスタイルシート

:link
=====

**`:link`** は CSS の擬似クラスで、まだ訪問されていない要素を表します。 `<a>` または `<area>` など、 `href` 属性を持つ未訪問のすべての要素を選択します。

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

`:link` および `:visited` 擬似クラスによって定義されたスタイルは、以降のユーザー操作の擬似クラス（`:hover` または `:active`）によって上書きされる可能性があります。適切にリンクにスタイルを適用するには、 `:link` ルールを他のすべてのリンク関連ルールの前に置き、 *LVHA 順*: `:link` — `:visited` — `:hover` — `:active` で定義されるようにしてください。 `:visited` 擬似クラスと `:link` 擬似クラスは互いに排他的です。

**メモ:** 訪問済みかどうかにかかわらず要素を選択するには、 `:any-link` を使用してください。

構文
--

```css
:link {
  /\* ... \*/
}
```

例
-

既定では、大半のブラウザーが訪問済みのリンクに特別な `color` の値を適用しています。そのため、この例のリンクは訪問前でしか特別な文字色にならないでしょう（よって、再度確認するにはブラウザーの履歴をクリアする必要があります）。しかし、 `background-color` の値は、大半のブラウザーが既定で訪問済みのリンクに設定していないのでおそらく残ります。

### HTML

```html
<a href="#ordinary-target">これは普通のリンクです。</a><br />
<a href="">このリンクを訪問しました。</a><br />
<a>リンクのプレイスホルダー（スタイルの適用なし）</a>
```

### CSS

```css
a:link {
  background-color: gold;
  color: green;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # selector-link |
| Selectors Level 4 # link |

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

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

関連情報
----

* リンク関連の擬似クラス: `:visited`, `:hover`, `:active`


コメント - CSS: カスケーディングスタイルシート

コメント
====

CSS の**コメント**は、説明的なメモをコードに追加したり、スタイルシートの特定の部分をブラウザーに解釈させないようにしたりするために使用します。設計上、コメントは文書のレイアウトにおいて効果を持ちません。

構文
--

コメントはスタイルシート内で、ホワイトスペースが置ける場所ならばどこでも配置できます。1 行で使用したり、複数行に渡らせたりすることができます。

```css
/\* コメント \*/
```

例
-

```css
/\* 1 行のコメント \*/

/\*
複数行に
またがる
コメント
\*/

/\* 以下のコメントは、特定の
 スタイルを無効にします。 \*/
/\*
span {
 color: blue;
 font-size: 1.5em;
}
\*/
```

メモ
--

`/* */` のコメント構文は、 1 行のコメントにも複数行のコメントにも使用されます。外部のスタイルシートでコメントを指定する方法は他にありません。しかし、推奨されませんが、 `<style>` 要素を使用するときは、古いブラウザーから CSS を隠すために `<!-- -->` を使用することができます。 `/* */` のコメント文法を使用する他のプログラミング言語と同様、コメントは入れ子にすることができません。言い換えれば、 `/*` の後で最初に `*/` が出現すると、コメントが終了します。

仕様書
---

* CSS 2.1 Syntax and basic data types #comments
関連情報
----

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


border-image-slice - CSS: カスケーディングスタイルシート

border-image-slice
==================

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

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

* Learn more
* See full compatibility
* Report feedback
**`border-image-slice`** は CSS のプロパティで、 `border-image-source` で指定された画像を複数の領域に分割します。これらの領域は境界画像の部品を構成します。

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

分割する過程で、4 つの角、4 つの辺、それに中央領域の計 9 つの領域を作成します。それぞれの辺からの距離で設定される 4 本の分割線が、領域の寸法を制御します。

![border-image または border-image-slice プロパティで定義された 9 つの領域](/ja/docs/Web/CSS/border-image-slice/border-image-slice.png)

上の図は、それぞれの領域の位置を説明しています。

* 1-4 の領域は角領域です。それぞれが1回ずつ使用され、最終的な境界画像の中で四隅を形成します。
* 5-8 の領域は辺領域です。これらは最終的な境界画像の中で、要素の寸法に合わせて反復、拡縮、その他の加工が行なわれます。
* 9 の領域は中央領域です。既定では描画されませんが、キーワード `fill` がセットされていれば背景画像のように使用されます。

`border-image-repeat`, `border-image-width`, `border-image-outset` の各プロパティは、最終的な境界画像を構成するためにこれらの領域が使用される方法を指定します。

構文
--

```css
/\* すべての辺 \*/
border-image-slice: 30%;

/\* 上下 | 左右 \*/
border-image-slice: 10% 30%;

/\* 上 | 左右 | 下 \*/
border-image-slice: 30 30% 45;

/\* 上 | 右 | 下 | 左 \*/
border-image-slice: 7 12 14 5;

/\* `fill` キーワードの使用 \*/
border-image-slice: 10% fill;
border-image-slice: fill 10%;

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

`border-image-slice` プロパティは 1 つから 4 つの `<number-percentage>` 値を使用して指定することができます。負の値は無効です。実際の寸法よりも大きい値は `100%` に丸められます。

* 位置が **1 つ**指定された場合、全 4 本の分割線がそれぞれの辺から同じ距離で作成されます。
* 位置が **2 つ**指定された場合、1 つ目の値を**上下**の辺からの距離として、2 つ目を**左右**の辺からの距離として分割線を作成します。
* 位置が **3 つ**指定された場合、1 つ目の値を**上**の辺からの距離として、2 つ目を**左右**の辺からの距離、3 つ目は**下**の辺からの距離として分割線を作成します。
* 位置が **4 つ**指定された場合、**上**、**右**、**下**、**左**の順（時計回り）でそれぞれの辺からの距離として分割線を作成します。

`fill` の値は任意で、使用する場合は、宣言のどこに置いても構いません。

### 値

`<number>`

縁からのオフセットを、ラスター画像の場合はピクセル数で、ベクター画像の場合は座標で表します。ベクター画像の場合、数値は元の画像の寸法ではなく、要素の寸法に対する相対値になるので、この場合は一般にパーセント値の方が適しています。

`<percentage>`

縁からのオフセットを、元の画像の寸法、つまり水平方向のオフセットであれば画像の幅、垂直方向のオフセットであれば画像の高さに対するパーセント値で表します。

`fill`

中央の画像領域を維持し、背景画像のように表示しますが、実際の `background` の上に重ねられます。幅と高さは、画像領域のそれぞれ上と左に一致するように拡縮されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `100%` |
| 適用対象 | すべての要素。ただし `border-collapse` が `collapse` のときはテーブル要素内部にあるものを除く。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| パーセント値 | 境界画像の大きさに対する相対値 |
| 計算値 | 1 つから 4 つのパーセント値 (指定通り) または絶対的な長さ。指定されていれば続けてキーワード `fill` |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

border-image-slice =
  [ <number [0,∞]> | <percentage [0,∞]> ]{1,4}  &&
  fill?

```

例
-

### 調整のできる境界の幅とスライス

次の例は、シンプルな `<div>` に境界画像を設定したものです。境界のソース画像は以下の通りです。

![素敵な複数色のダイヤモンド](/ja/docs/Web/CSS/border-image-slice/border-diamonds.png)

ダイヤモンドの幅は 30px なので、`border-width` と `border-image-slice` の両方に 30 ピクセルを設定すると、ボーダーに完全でかなり鮮明なダイヤモンドが表示されます。

```css
border-width: 30px;
border-image-slice: 30;
```

これらは、この例で使用している既定値です。しかし、上記の 2 つのプロパティの値を動的に変更できるように、2 つのスライダーを用意し、その効果を確認できるようにしています。

`border-image-slice` は、各境界と境界の角 (および `fill` キーワードが使用されている場合はコンテンツ領域) で使用するためにサンプリングされる画像スライスの寸法を変更します。 - これを 30 から遠ざけると、境界が多少不規則に見えますが、面白い効果が得られます。

`border-width`: 境界線の幅を変更します。サンプリングされた画像の大きさは境界線の内側に収まるように拡大縮小されます。つまり、幅がスライスよりも大きい場合、画像が多少ピクセル化して見えるようになります (もちろん、SVG 画像を使用している場合は別です)。

#### HTML

```html
<div class="wrapper">
  <div></div>
</div>

<ul>
  <li>
    <label for="width">スライドして <code>border-width</code> を調整</label>
    <input type="range" min="10" max="45" id="width" />
    <output id="width-output">30px</output>
  </li>
  <li>
    <label for="slice"
 >スライドして <code>border-image-slice</code> を調整</label
 >
    <input type="range" min="10" max="45" id="slice" />
    <output id="slice-output">30</output>
  </li>
</ul>
```

#### CSS

```css
.wrapper {
  width: 400px;
  height: 300px;
}

div > div {
  width: 300px;
  height: 200px;
  border-width: 30px;
  border-style: solid;
  border-image: url(https://interactive-examples.mdn.mozilla.net/media/examples/border-diamonds.png);
  border-image-slice: 30;
  border-image-repeat: round;
}

li {
  display: flex;
  place-content: center;
}
```

#### JavaScript

```js
const widthSlider = document.getElementById("width");
const sliceSlider = document.getElementById("slice");
const widthOutput = document.getElementById("width-output");
const sliceOutput = document.getElementById("slice-output");
const divElem = document.querySelector("div > div");

widthSlider.addEventListener("input", () => {
  const newValue = `${widthSlider.value}px`;
  divElem.style.borderWidth = newValue;
  widthOutput.textContent = newValue;
});

sliceSlider.addEventListener("input", () => {
  const newValue = sliceSlider.value;
  divElem.style.borderImageSlice = newValue;
  sliceOutput.textContent = newValue;
});
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* 1 ～ 4 つの値による構文の図による説明


animation-range-end - CSS: カスケーディングスタイルシート

animation-range-end
===================

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

**`animation-range-end`** は CSS のプロパティで、プロパティは、タイムラインに沿ったアニメーションの適用範囲の末尾、つまり、タイムラインに沿ったアニメーションの末尾を設定するために使用します。

`animation-range-end` および `animation-range-start` のプロパティは、 `animation-range` 一括指定プロパティを使用して設定することもできます。

**メモ:** `animation-range-end` はリセット専用の値として `animation` の一括指定に含まれています。これは、`animation` を記載することで、前回宣言した `animation-range-end` の値が `normal` にリセットされることを意味していますが、`animation` によって固有の値を設定することはできません。 CSS スクロール駆動アニメーション (en-US)を作成する際には、 `animation` の一括指定を宣言した後に `animation-range-end` を宣言しないと、その効果を得ることができません。

構文
--

```css
/\* キーワードまたは長さのパーセント値 \*/
animation-range-end: normal;
animation-range-end: 80%;
animation-range-end: 700px;

/\* 名前付きタイムライン範囲の値 \*/
animation-range-end: cover;
animation-range-end: contain;
animation-range-end: cover 80%;
animation-range-end: contain 700px;
```

### 値

`animation-range-end` に指定できる値は `normal`、`<length-percentage>`、`<timeline-range-name>`、`<timeline-range-name>` のいずれかとそれに続く `<length-percentage>` です。利用できる値の詳細については `animation-range` を参照してください。

また、 View Timeline Ranges Visualizer も調べてみてください。異なる値が意味していることを、簡単なビジュアル形式で正確に表示させることができます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `normal` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| パーセント値 | 名前付きタイムラインが指定されていればその範囲、そうでない場合はタイムライン全体からの相対値 |
| 計算値 | リストで、それぞれの項目は 'normal'、長さのパーセント値、タイムラインの範囲名と長さのパーセント値のいずれか。 |
| アニメーションの種類 | アニメーション不可 |

形式文法
----
```

animation-range-end =
  [ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#

<length-percentage> =
  <length>      |
  <percentage>

```

例
-

### 範囲の終わりを指定した進行タイムラインの作成

`view-timeline` プロパティを `class` が `animation` の主体要素に用いて `--subjectReveal` という名前のビュー進行タイムラインを定義します。
 これを同じ要素のタイムラインとして設定するには `animation-timeline: --subjectReveal;` を使用します。その結果、主体要素は文書をスクロールしながら上方向に移動してアニメーションします。

アニメーションを予定より早く終わらせるために、 `animation-range-end` 宣言も設定します。

#### HTML

この例の HTML は下記の通りです。

```html
<div class="content">
  <h1>Content</h1>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Risus quis varius quam
    quisque id. Et ligula ullamcorper malesuada proin libero nunc consequat
    interdum varius. Elit ullamcorper dignissim cras tincidunt lobortis feugiat
    vivamus at augue.
  </p>

  <p>
    Dolor sed viverra ipsum nunc aliquet. Sed sed risus pretium quam vulputate
    dignissim. Tortor aliquam nulla facilisi cras. A erat nam at lectus urna
    duis convallis convallis. Nibh ipsum consequat nisl vel pretium lectus.
    Sagittis aliquam malesuada bibendum arcu vitae elementum. Malesuada bibendum
    arcu vitae elementum curabitur vitae nunc sed velit.
  </p>

  <div class="subject animation"></div>

  <p>
    Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu
    cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet
    dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non
    tellus orci ac auctor augue mauris. Risus quis varius quam quisque id diam
    vel quam elementum. Nibh praesent tristique magna sit amet purus gravida
    quis. Duis ultricies lacus sed turpis tincidunt id aliquet. In egestas erat
    imperdiet sed euismod nisi. Eget egestas purus viverra accumsan in nisl nisi
    scelerisque. Netus et malesuada fames ac.
  </p>
</div>
```

#### CSS

`subject` 要素とそのコンテンツを含む `content` 要素は最小限のスタイル設定で、テキストコンテンツには基本的なフォント設定がされています。

```css
.subject {
  width: 300px;
  height: 200px;
  margin: 0 auto;
  background-color: deeppink;
}

.content {
  width: 75%;
  max-width: 800px;
  margin: 0 auto;
}

p,
h1 {
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  font-size: 3rem;
}

p {
  font-size: 1.5rem;
  line-height: 1.5;
}
```

`subject` というクラスを持つ `<div>` には `animation` というクラスも指定されています。ここには `view-timeline` が設定されており、ビューの進行タイムラインを定義しています。また、同じ値で `animation-timeline` という名前も指定され、ビュー進行タイムラインが進むにつれてアニメーションする要素であることを宣言します。また、アニメーションが予想よりも早く終わるように `animation-range-end` 宣言も与えます。

最後に、要素の透過率と変倍をアニメーションで指定し、スクロール移動されるたびにフェードインしたり変倍させたりします。

```css
.animation {
  view-timeline: --subjectReveal block;
  animation-timeline: --subjectReveal;

  animation-name: appear;
  animation-range-end: contain 50%;
  animation-fill-mode: both;
  animation-duration: 1ms; /\* Firefox では、アニメーションを適用するために必要 \*/
}

@keyframes appear {
  from {
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    opacity: 1,
    transform: scaleX(1);
  }
}
```

#### 結果

スクロールすると、主体要素のアニメーションを確認することができます。

仕様書
---

| Specification |
| --- |
| Scroll-driven Animations # animation-range-end |

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

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

関連情報
----

* `animation-timeline`
* `animation-range`, `animation-range-start`
* `scroll-timeline`, `scroll-timeline-axis`, `scroll-timeline-name`
* `timeline-scope` (en-US)
* `view-timeline-inset`
* JavaScript の同等のもの: `rangeEnd` （`Element.animate()` 呼び出しで利用可能）
* CSS スクロール駆動アニメーション (en-US)


grid - CSS: カスケーディングスタイルシート

grid
====

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
**`grid`** は CSS のプロパティで、一括指定プロパティとして明示的・暗黙的なすべてのグリッドプロパティを単一の宣言で設定します。

`grid` を使用すると、一方の軸を `grid-template-rows` または `grid-template-columns` を使用して設定し、もう一方の軸でどのように内容物を自動反復させるかを、暗黙のグリッドプロパティである `grid-auto-rows`, `grid-auto-columns`, `grid-auto-flow` で設定します。

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

**メモ:** 指定しないサブプロパティは、通常の一括指定と同様に初期値に設定されます。また、溝に関するプロパティはこの一括指定では初期化されません。

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

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

* `grid-auto-columns`
* `grid-auto-flow`
* `grid-auto-rows`
* `grid-template-areas`
* `grid-template-columns`
* `grid-template-rows`
構文
--

```css
/\* <'grid-template'> 値 \*/
grid: none;
grid: "a" 100px "b" 1fr;
grid: [linename1] "a" 100px [linename2];
grid: "a" 200px "b" min-content;
grid: "a" minmax(100px, max-content) "b" 20%;
grid: 100px / 200px;
grid: minmax(400px, min-content) / repeat(auto-fill, 50px);

/\* <'grid-template-rows'> /
 [ auto-flow && dense? ] <'grid-auto-columns'>? 値 \*/
grid: 200px / auto-flow;
grid: 30% / auto-flow dense;
grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;

/\* [ auto-flow && dense? ] <'grid-auto-rows'>? /
 <'grid-template-columns'> 値 \*/
grid: auto-flow / 200px;
grid: auto-flow dense / 30%;
grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
grid: auto-flow dense 40% / [line1] minmax(20em, max-content);

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

### 値

`<'grid-template'>`

`grid-template` を定義し、これには `grid-template-columns`, `grid-template-rows`, `grid-template-areas` が含まれます。

`<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?`

`grid-template-rows` プロパティを明示的に設定 (および `grid-template-columns` プロパティを `none` に設定) することで行トラックを設定し、 `grid-auto-columns` プロパティを設定 (および `grid-auto-rows` を `auto` に設定) することで列トラックの自動反復方法を設定します。 `dense` が設定されていれば、 `grid-auto-flow` も `column` に設定されます。

ほかの `grid` のサブプロパティはすべて、初期値に初期化されます。

`[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>`

`grid-template-columns` プロパティを明示的に設定 (および `grid-template-rows` プロパティを `none` に設定) することで列トラックを設定し、 `grid-auto-rows` プロパティを設定 (および `grid-auto-columns` を `auto` に設定) することで行トラックの自動反復方法を設定します。 `dense` が設定されていれば、 `grid-auto-flow` も `column` に設定されます。

ほかの `grid` のサブプロパティはすべて、初期値に初期化されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `grid-template-rows`: `none`
* `grid-template-columns`: `none`
* `grid-template-areas`: `none`
* `grid-auto-rows`: `auto`
* `grid-auto-columns`: `auto`
* `grid-auto-flow`: `row`
* `grid-column-gap`: `0`
* `grid-row-gap`: `0`
* `column-gap`: `normal`
* `row-gap`: `normal`
 |
| 適用対象 | グリッドコンテナー |
| 継承 | なし |
| パーセント値 | 一括指定の次の各プロパティとして* `grid-template-rows`: コンテンツ領域の対応する寸法に対する相対値
* `grid-template-columns`: コンテンツ領域の対応する寸法に対する相対値
* `grid-auto-rows`: コンテンツ領域の対応する寸法に対する相対値
* `grid-auto-columns`: コンテンツ領域の対応する寸法に対する相対値
 |
| 計算値 | 一括指定の次の各プロパティとして* `grid-template-rows`: 指定通り。ただし相対的な長さはは絶対的な長さに変換される
* `grid-template-columns`: 指定通り。ただし相対的な長さはは絶対的な長さに変換される
* `grid-template-areas`: 指定通り
* `grid-auto-rows`: 指定されたパーセント値または絶対的な長さ
* `grid-auto-columns`: 指定されたパーセント値または絶対的な長さ
* `grid-auto-flow`: 指定通り
* `grid-column-gap`: 指定されたパーセント値または絶対的な長さ
* `grid-row-gap`: 指定されたパーセント値または絶対的な長さ
* `column-gap`: 指定通りで、 <length> は絶対長になり、 normal の計算値は段組み要素を除き 0 になる
* `row-gap`: 指定通りで、 <length> は絶対長になり、 normal の計算値は段組み要素を除き 0 になる
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `grid-template-rows`: 長さ、パーセント値、 calc の単純なリストであり、唯一の違いはリスト内の長さ、パーセント値、 calc の部分の値のみ
* `grid-template-columns`: 長さ、パーセント値、 calc の単純なリストであり、唯一の違いはリスト内の長さ、パーセント値、 calc の部分の値のみ
* `grid-template-areas`: 離散値
* `grid-auto-rows`: 計算値の型による
* `grid-auto-columns`: 計算値の型による
* `grid-auto-flow`: 離散値
* `grid-column-gap`: length
* `grid-row-gap`: length
* `column-gap`: length または パーセント値, calc();
* `row-gap`: length または パーセント値, calc();
 |

形式文法
----
```

grid =
  <'grid-template'>                                   |
  <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?  |
  [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>

```

例
-

### グリッドレイアウトの作成

#### HTML

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

#### CSS

```css
#container {
  display: grid;
  grid: repeat(2, 60px) / auto-flow 80px;
}

#container > div {
  background-color: #8ca0ff;
  width: 50px;
  height: 50px;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # grid-shorthand |

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

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

関連情報
----

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


:defined - CSS: カスケーディングスタイルシート

:defined
========

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
**`:defined`** は CSS の擬似クラスで、定義されているすべての要素を表します。これにはブラウザーに組み込まれたすべての標準要素と、 (`CustomElementRegistry.define()` メソッドを使用して) 定義に成功したカスタム要素が含まれます。

```css
/\* 定義されたすべての要素を選択 \*/
:defined {
  font-style: italic;
}

/\* 特定の custom 要素のすべてのインスタンスを選択 \*/
simple-custom:defined {
  display: block;
}
```

構文
--
```

:defined
```

例
-

### 定義されるまで要素を非表示にする

以下のスニペットは、 defined-pseudo-class のデモから取ったものです (ライブでも参照してください).

このデモでは、非常にシンプルで些細なカスタム要素を定義しています。

```js
customElements.define(
  "simple-custom",
  class extends HTMLElement {
    constructor() {
      super();

      let divElem = document.createElement("div");
      divElem.textContent = this.getAttribute("text");

      let shadowRoot = this.attachShadow({ mode: "open" }).appendChild(divElem);
    }
  },
);
```

次に、この要素のコピーを、標準的な `<p>` と共に文書に挿入します。

```html
<simple-custom text="Custom element example text"></simple-custom>

<p>Standard paragraph example text</p>
```

CSS では、まず以下のルールを設定します。

```css
/\* 2 つの要素を背景で区別できるようにする \*/
p {
  background: yellow;
}

simple-custom {
  background: cyan;
}

/\* カスタム要素と組み込み要素を両方イタリック体にする \*/
:defined {
  font-style: italic;
}
```

それから、カスタム要素が定義されていないときには非表示にし、定義されていたらブロックレベル要素として定義して表示するという 2 つのルールを設定します。

```css
simple-custom:not(:defined) {
  display: none;
}

simple-custom:defined {
  display: block;
}
```

これは、複雑なカスタム要素があってページの読み込みを待ちたいときに便利です。定義が完了するまで要素のインスタンスを非表示にして、ページ上でスタイル適用前の醜い要素が一瞬現れるのを防ぐことができます。

仕様書
---

| Specification |
| --- |
| HTML Standard # selector-defined |

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

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

関連情報
----

* ウェブコンポーネント