recursal/MDN huggingface dataset:
CSS アニメーション
===========

**CSS アニメーション** (CSS Animations) は CSS のモジュールの一つで、時間の経過とキーフレームによって CSS プロパティの値を動かすことができます。キーフレームアニメーションの動作は、タイミング関数、時間、繰り返し回数、その他の属性によって制御されます。

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

### CSS プロパティ

* `animation`
* `animation-delay`
* `animation-direction`
* `animation-duration`
* `animation-fill-mode`
* `animation-iteration-count`
* `animation-name`
* `animation-play-state`
* `animation-timing-function`
### アットルール

* `@keyframes`
ガイド
---

CSS アニメーション対応の検出

ブラウザーが CSS アニメーションに対応しているかを検出するテクニックを説明します。

CSS アニメーションの使用

CSS を使用してアニメーションを作成する方法についての一歩一歩進むチュートリアルです。この記事では、関連する CSS プロパティとアットルール、それに互いにどのように関係するのかを説明します。

CSS アニメーションのコツとトリック

CSS アニメーションを引き出すのに役立つコツやトリックです。現在、 API に対応が備わっていない、すでに完了に向けて実行されているアニメーションを再び再生するテクニックを紹介しています。

仕様書
---

| Specification |
| --- |
| CSS Animations Level 2  |
| CSS Animations Level 1  |

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

### `animation` プロパティ

{{Compat}}関連情報
----

* CSS アニメーションに関連して、 CSS トランジションは、ユーザーの操作に基づいてアニメーションを起動することができます。
print-color-adjust
==================

**`print-color-adjust`** は CSS のプロパティで、ユーザーエージェントが出力端末上で要素の外観を最適化するために、何らかの調整を行うことができるかを設定します。
 既定では、ブラウザーは、出力端末の種類や能力を得た上で、必要かつ賢明であると判断した要素の外観に対する調整を行うことができます。

構文
--


```css
print-color-adjust: economy;
print-color-adjust: exact;

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


`print-color-adjust` プロパティは以下のキーワード値のうちの一つで指定します。

### 値

`economy`

 ユーザーエージェントは、レンダリングされる端末に合わせて出力を最適化するために、適切かつ賢明と思われるように要素を調整することができます。
 例えば、印刷する場合、ブラウザーは背景画像をすべて取り除き、白い紙で読むためにコントラストが最適化されるようにテキストの色を調整することを選ぶかもしれません。
 これが既定値です。


`exact`

 要素のコンテンツは、色、画像、スタイルを慎重かつ重要な方法で使用するように固有かつ慎重に作成されており、ブラウザーによって変更されることは、事態を良くするどころかむしろ悪くするかもしれません。
 コンテンツの外観は、ユーザーからのリクエスト以外では変えてはいけません。
 例えば、あるページに、背景色が白と薄い灰色の間で交互に変化する行を持つ情報のリストを記載することがあります。
 背景色が除去されると、コンテンツの可読性が低下します。


使用上の注意
------

ブラウザーが指定した外観を変更したい理由はいくつかあります。

* コンテンツが出力端末上で近すぎるテキストと背景色を使用しているため、読みやすさが損なわれています。
* 出力端末がプリンターの場合、インクを節約するために、暗い画像や極端に濃い背景画像が除去されることがあります。
* ページを印刷するとき、ブラウザーは暗い背景の明るい色のテキストを白い背景の暗い色のテキストに置き換えたくなるかもしれません。

 ユーザーエージェントが色や画像の使用を制御するためにユーザーに提供するオプションは `print-color-adjust` の値よりも優先されます。
 言い換えれば、 `print-color-adjust` が何らかの動作をするという保証はありません。
 ユーザーがその動作を上書きすることができるだけでなく、それぞれのユーザーエージェントが、どのような状況で `print-color-adjust` をどのように処理するかを自分で決めることができます。

公式定義
----

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

形式文法
----
```

print-color-adjust =   
  economy  |  
  exact      
  
```

例
-

### 低コントラストの維持

 この例では、 `background-image` と半透明の `linear-gradient()` 関数を黒の背景色の上に用いて、中程度の赤のテキストの後ろに濃い青のグラデーションがあるボックスを表示しています。
 理由はともあれ、これは紙の上も含め、どのようなレンダリング環境でも望ましい外観なので、 `print-color-adjust: exact` も使用して、ボックスをレンダリングするときに色やスタイル設定を行わないようにブラウザーに指示しています。

#### CSS


```css
.my-box {
  background-color: black;
  background-image: linear-gradient(
    rgba(0, 0, 180, 0.5),
    rgba(70, 140, 220, 0.5)
  );
  color: #900;
  width: 15rem;
  height: 6rem;
  text-align: center;
  font:
    24px "Helvetica",
    sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  print-color-adjust: exact;
}
```


#### HTML


```html
<div class="my-box">
  <p>もっとコントラストが必要です！</p>
</div>
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Color Adjustment Module Level 1 # propdef-print-color-adjust |

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

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

関連情報
----

* CSS を使った HTML の要素への色の適用
* その他の色に関するプロパティ: `color`, `background-color`, `border-color`, `outline-color`, `text-decoration-color`, `text-emphasis-color`, `text-shadow`, `caret-color`, `column-rule-color`
* `background-image`
::cue-region
============

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

**`::cue-region`** は CSSの擬似要素で、選択された要素内にある WebVTT キューに一致します。これは VTT トラックのアルメディアで字幕とその他のキューのスタイル付けに利用できます。


```css
::cue-region {
  color: yellow;
  font-weight: bold;
}
```


プロパティは、キューのセット全体に対して、あたかも 1 つのユニットであるかのように適用されます。唯一の例外として、 `background` とその個別指定プロパティは各キューに個別に適用されるので、ボックスを作成したり、メディアの予期せぬ大きな領域を覆ったりすることを避けることができます。

構文
--

Error: could not find syntax for this item許可されているプロパティ
------------

この要素を含むセレクターを持つルールには、以下の CSS プロパティのみが使用できます。

* `background`
* `background-attachment`
* `background-clip`
* `background-color`
* `background-image`
* `background-origin`
* `background-position`
* `background-repeat`
* `background-size`
* `color`
* `font`
* `font-family`
* `font-size`
* `font-stretch`
* `font-style`
* `font-variant`
* `font-weight`
* `line-height`
* `opacity`
* `outline`
* `outline-color`
* `outline-style`
* `outline-width`
* `ruby-position`
* `text-combine-upright`
* `text-decoration`
* `text-decoration-color`
* `text-decoration-line`
* `text-decoration-style`
* `text-decoration-thickness`
* `text-shadow`
* `visibility`
* `white-space`
仕様書
---

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # the-cue-region-pseudo-element |

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

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

関連情報
----

* その他の WebVTT に関するセレクター:
    + `::cue`
    + `:past` (en-US)
    + `:future` (en-US)
:where()
========

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

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

* Learn more
* See full compatibility
* Report feedback
**`:where()`** は CSS の擬似クラス関数で、セレクターリストを引数として取り、列挙されたセレクターのうちの何れかに当てはまるすべての要素を選択します。

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

`:where()` と `:is()` の違いは、 `:where()` は詳細度が常に 0 であるのに対して、 `:is()` は引数内で最も詳細度の高いセレクターの詳細度を取ります。

### 寛容なセレクター解釈

仕様では、`:is()` と `:where()` が寛容なセレクターリストを受け入れると定義されています。

CSS では、セレクターリストを使用する場合、いずれかのセレクターが無効であれば、リスト全体が無効であると判断されます。 `is()` や `:where()` を使用する場合、 1 つでも解釈に失敗するとセレクターリスト全体が無効とみなされるのではなく、不正確または対応していないセレクターは無視され、他のものが使用されます。


```css
:where(:valid, :unsupported) {
  /\* … \*/
}
```


は `:unsupported` の部分に対応していないブラウザーでも `:valid` の部分が有効となり正しく解釈されます。一方で


```css
:valid,
:unsupported {
  /\* … \*/
}
```


では、`:unsupported` に対応していないブラウザーでは、`:valid` に対応している場合でも全体が無視されます。

例
-

### :where() と :is() の比較

この例では `:where()` がどのように作用するのかを示し、 `:where()` と `:is()` の違いも説明しています。

以下のような HTML を想定してください。


```html
<article>
  <h2>:is() でスタイル付けしたリンク</h2>
  <section class="is-styling">
    <p>
      こちらがメインコンテンツです。これは<a href="https://mozilla.org"
 >リンクを含んでいます</a
 >。
    </p>
  </section>

  <aside class="is-styling">
    <p>
      こちらが脇コンテンツです。これも<a href="https://developer.mozilla.org"
 >リンクを含んでいます</a
 >。
    </p>
  </aside>

  <footer class="is-styling">
    <p>
      こちらがフッターです。これも<a href="https://github.com/mdn">リンク</a
 >を含んでいます。
    </p>
  </footer>
</article>

<article>
  <h2>:where() でスタイル付けしたリンク</h2>
  <section class="where-styling">
    <p>
      こちらがメインコンテンツです。これは<a href="https://mozilla.org"
 >リンクを含んでいます</a
 >。
    </p>
  </section>

  <aside class="where-styling">
    <p>
      こちらが脇コンテンツです。これも<a href="https://developer.mozilla.org"
 >リンクを含んでいます</a
 >。
    </p>
  </aside>

  <footer class="where-styling">
    <p>
      こちらがフッターです。これも<a href="https://github.com/mdn">リンク</a
 >を含んでいます。
    </p>
  </footer>
</article>
```


このややわざとらしい例では、2 つの article 要素がそれぞれ section、aside、footer 要素を含んでいます。2つの article は、子要素をマークするために使われるクラスが異なります。

中のリンクの選択をより簡単にしながらも、区別できるようにするために、次のように `:is()` や `:where()` を使うことができます。


```css
html {
  font-family: sans-serif;
  font-size: 150%;
}

:is(section.is-styling, aside.is-styling, footer.is-styling) a {
  color: red;
}

:where(section.where-styling, aside.where-styling, footer.where-styling) a {
  color: orange;
}
```


しかし、後からシンプルなセレクターを使ってフッターのリンクの色を上書きしたい場合はどうすればいいのでしょうか？


```css
footer a {
  color: blue;
}
```


これは赤いリンクに作用しません。 `:is()` の中のセレクターは全体のセレクターの詳細度で算出され、クラスセレクターは要素セレクターよりも高い詳細度を持っているからです。

しかし、 `:where()` 内のセレクターは詳細度が 0 なので、オレンジ色のフッターリンクは単純セレクターによって上書きされます。

**メモ:** この例は GitHub からも見ることができます。 is-where を参照してください。

構文
--


```css
:where(<complex-selector-list>) {
  /\* ... \*/
}
```

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # zero-matches |

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

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

関連情報
----

* `:is()`
* セレクターリスト
* ウェブコンポーネント
::part()
========

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
**`::part`** は CSS の擬似要素で、一致する `part` 属性を持つシャドウツリー内の要素を表します。


```css
custom-element::part(foo) {
  /\* `foo` の部分に適用するスタイル \*/
}
```

構文
--

Error: could not find syntax for this item例
-

### HTML


```html
<template id="tabbed-custom-element">
  <style type="text/css">
 \*,
 ::before,
 ::after {
 box-sizing: border-box;
 padding: 1rem;
 }
 :host {
 display: flex;
 }
 </style>
  <div part="tab active">Tab 1</div>
  <div part="tab">Tab 2</div>
  <div part="tab">Tab 3</div>
</template>

<tabbed-custom-element></tabbed-custom-element>
```

### CSS


```css
tabbed-custom-element::part(tab) {
  color: #0c0dcc;
  border-bottom: transparent solid 2px;
}

tabbed-custom-element::part(tab):hover {
  background-color: #0c0d19;
  border-color: #0c0d33;
}

tabbed-custom-element::part(tab):hover:active {
  background-color: #0c0d33;
}

tabbed-custom-element::part(tab):focus {
  box-shadow:
    0 0 0 1px #0a84ff inset,
    0 0 0 1px #0a84ff,
    0 0 0 4px rgba(10, 132, 255, 0.3);
}

tabbed-custom-element::part(active) {
  color: #0060df;
  border-color: #0a84ff !important;
}
```

### JavaScript


```js
let template = document.querySelector("#tabbed-custom-element");
globalThis.customElements.define(
  template.id,
  class extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: "open" });
      this.shadowRoot.appendChild(template.content);
    }
  },
);
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Shadow Parts # part |

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

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

関連情報
----

* `part` 属性 - `::part()` セレクタで選択できるパーツを定義するために使用されます
* `exportparts` 属性 - ネストされたシャドウツリーにシャドウパーツを推移的にエクスポートするために使用されます。
* Explainer: CSS Shadow ::part and ::theme
<angle-percentage>
==================

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

構文
--

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

calc() での使用
-----------

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

仕様書
---

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

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

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

関連情報
----

* CSS データ型
* CSS グラデーションの使用
* `conic-gradient()` および `repeating-conic-gradient()`
CSS スクロールバー
===========

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

**CSS スクロールバー** (CSS Scrollbars) は、 2000 年に Windows の IE 5.5 で導入され、廃止されたスクロールバーの色のプロパティを標準化するためのものです。

基本的な例
-----

この例では、緑色のトラックと紫色のつまみを持った細いスクロールバーを使用してみました。


```css
.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: rebeccapurple green;
  scrollbar-width: thin;
}
```

### HTML


```html
<div class="scroller">
  Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
  daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
  corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
  fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
  earthnut pea peanut soko zucchini.
</div>
```

### 結果

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

### CSS プロパティ

* `scrollbar-width`
* `scrollbar-color`
仕様書
---

| Specification |
| --- |
| CSS Scrollbars Styling Module Level 1  |

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

スクロールバーをカスタマイズする場合は、十分なコントラストがあることと、ヒット領域がタッチ入力を使っている人が操作できるだけ大きいかどうかを考慮してください。

* Baseline Rules for Scrollbar Usability | Adrian Roselli
ブラウザーの互換性
---------

### scrollbar-width

### css.properties.scrollbar-color

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

### css.properties.scrollbar-width

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

### scrollbar-color

### css.properties.scrollbar-color

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

### css.properties.scrollbar-width

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

関連情報
----

* `::-webkit-scrollbar`
* `-ms-overflow-style`
<dimension>
===========

**`<dimension>`** は CSS のデータ型で、 `<number>` とそれに添付された単位を表します (`10px` など)。

CSS は `<dimension>` を使用して、長さ (`<length>`)、時間 (`<time>`)、周期 (`<frequency>`)、解像度 (`<resolution>`)、その他の量を指定します。

構文
--

`<dimension>` の構文は、 `<number>` とすぐ後に識別子である単位を続けます。単位の識別子は、大文字小文字の区別がありません。

例
-

### 有効な dimension


```css
12px      12 ピクセル
1rem      1rem
1.2pt     1.2 ポイント
2200ms    2200 ミリ秒
5s        5 秒
200hz     200 ヘルツ
200Hz     200 ヘルツ (値は大文字小文字の区別なし)
```

### 無効な dimension


```css
12 px       単位は数値の直後に来る必要がある。
12"px"      単位は識別子であり、引用符で囲まない。
3sec        秒の単位は "s" であり "sec" ではない。
```

仕様書
---

| Specification |
| --- |
| CSS Values and Units Module Level 4 # dimensions |

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

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

関連情報
----

* CSS データ型
* CSS を使用した HTML のスタイル付けの学習
* CSS の長さ (`<length>`), 時間 (`<time>`), 周期 (`<frequency>`), 解像度 (`<resolution>`)
padding
=======

**`padding`** は CSS の一括指定プロパティで、要素の全四辺のパディング領域を一度に設定します。

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

要素のパディング領域とは、コンテンツと境界との間の領域のことです。

**メモ:** パディングは要素の内部に追加の領域を作成します。それに対して、 `margin` は要素の*周り*に追加の領域を作成します。

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

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

* `padding-top`
* `padding-right`
* `padding-bottom`
* `padding-left`
構文
--


```css
/\* 四辺すべてに適用 \*/
padding: 1em;

/\* 上下 | 左右 \*/
padding: 5% 10%;

/\* 上 | 左右 | 下 \*/
padding: 1em 2em 2em;

/\* 上 | 右 | 下 | 左 \*/
padding: 5px 1em 0 1em;

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


`padding` プロパティは 1 つ、2 つ、3 つ、4 つの値を使って指定することができます。それぞれの値は `<length>` または `<percentage>` です。負の数は無効です。

* 値が **1 つ**指定された場合、**全四辺**に同じパディングが適用される。
* 値が **2 つ**指定された場合、1 つ目のパディングは**上下**、2 つ目は**左右**の辺に適用される。
* 値が **3 つ**指定された場合、1 つ目のパディングは**上**、2 つ目は**左右**、3 つ目は**下**の辺に適用される。
* 値が **4 つ**指定された場合、パディングはそれぞれ**上**、**右**、**下**、**左**の順 (時計回り) に適用される。
### 値

`<length>`

パディングの寸法を固定値で表したものです。

`<percentage>`

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

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `padding-bottom`: `0`
* `padding-left`: `0`
* `padding-right`: `0`
* `padding-top`: `0`
 |
| 適用対象 | `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group`, `table-column` を除くすべての要素。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | なし |
| パーセント値 | 包含ブロックの幅に対する相対値 |
| 計算値 | 一括指定の次の各プロパティとして* `padding-bottom`: 指定されたパーセント値または絶対的な長さ
* `padding-left`: 指定されたパーセント値または絶対的な長さ
* `padding-right`: 指定されたパーセント値または絶対的な長さ
* `padding-top`: 指定されたパーセント値または絶対的な長さ
 |
| アニメーションの種類 | length |

形式文法
----
```

padding =   
  <'padding-top'>{1,4}    
  
```

例
-

### パディングをピクセル数で設定

#### HTML


```html
<h4>This element has moderate padding.</h4>
<h3>The padding is huge in this element!</h3>
```


#### CSS


```css
h4 {
  background-color: lime;
  padding: 20px 50px;
}

h3 {
  background-color: cyan;
  padding: 110px 50px 50px 110px;
}
```


#### 結果

### パディングをピクセル数とパーセント値で設定


```css
padding: 5%; /\* 全辺: 5% のパディング \*/

padding: 10px; /\* 全辺: 10px のパディング \*/

padding: 10px 20px; /\* 上と下: 10px のパディング \*/
/\* 左と右: 20px のパディング \*/

padding: 10px 3% 20px; /\* 上: 10px のパディング \*/
/\* 左と右: 3% のパディング \*/
/\* 下: 20px のパディング \*/

padding: 1em 3px 30px 5px; /\* 上: 1em のパディング \*/
/\* 右: 3px のパディング \*/
/\* 下: 30px のパディング \*/
/\* 左: 5px のパディング \*/
```

仕様書
---

| Specification |
| --- |
| CSS Box Model Module Level 3 # padding-shorthand |

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

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

関連情報
----

* CSS 基本ボックスモデル入門
* `padding-top`, `padding-right`, `padding-bottom`, `padding-left`
* 対応付けられる論理的プロパティ: `padding-block-start`, `padding-block-end`, `padding-inline-start`, `padding-inline-end` および一括指定の `padding-block` と `padding-inline`
::first-line (:first-line)
==========================

**`::first-line`** は CSS の擬似要素で、ブロックレベル要素の最初の行にスタイルを適用します。なお、最初の行の長さは要素の幅、文書の幅、文字列のフォントの大きさなど、様々な要因に左右されます。


```css
/\* <p> の最初の行を選択 \*/
p::first-line {
  color: red;
}
```

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

**メモ:** CSS3 では `::first-line` という (二重コロン付き) 表記が、擬似クラスと擬似要素を見分けやすくするために導入されました。ブラウザーでは CSS2 で導入された `:first-line` も使用できます。

利用可能なプロパティ
----------

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

* フォントに関する全プロパティ: `font`, `font-kerning`, `font-style`, `font-variant`, `font-variant-numeric`, `font-variant-position`, `font-variant-east-asian`, `font-variant-caps`, `font-variant-alternates`, `font-variant-ligatures`, `font-synthesis`, `font-feature-settings`, `font-language-override`, `font-weight`, `font-size`, `font-size-adjust`, `font-stretch`, `font-family`
* 背景に関する全プロパティ: `background-color`, `background-clip`, `background-image`, `background-origin`, `background-position`, `background-repeat`, `background-size`, `background-attachment`, `background-blend-mode`
* `color` プロパティ
* `word-spacing`, `letter-spacing`, `text-decoration`, `text-transform`, `line-height`
* `text-shadow`, `text-decoration`, `text-decoration-color`, `text-decoration-line`, `text-decoration-style`, `vertical-align`
構文
--

Error: could not find syntax for this item例
-

### HTML


```html
<p>
  スタイルはこの段落の最初の行にのみ適用されます。
  その後のすべての文字列は普通のスタイルになります。分かりますか？
</p>

<span
 >ブロックレベル要素ではないので、この文字列の最初の行は、
  特殊なスタイルになりません。</span
>
```

### CSS


```css
::first-line {
  color: blue;
  text-transform: uppercase;

  /\* 警告: これらを使用しないでください \*/
  /\* ::first-line 擬似要素では多くのプロパティが無効になります \*/
  margin-left: 20px;
  text-indent: 20px;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # first-line-pseudo |

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

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

関連情報
----

* `::first-letter`
scroll-padding-left
===================

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

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

構文
--


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

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

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

### 値

`<length-percentage>`

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

`auto`

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

公式定義
----

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

形式文法
----
```

scroll-padding-left =   
  auto                       |  
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

仕様書
---

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # padding-longhands-physical |

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

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

関連情報
----

* CSS スクロールスナップ
* Well-Controlled Scrolling with CSS Scroll Snap
CSS 画像
======

**CSS 画像** (CSS Images) は CSS のモジュールの一つで、どのような種類の画像が利用できるか (`<image>` 型、その中の URL、グラデーション、その他の種類の画像)、どのように大きさを変更するか、様々なレイアウトモデルで画像やその他の置換コンテンツが応答するかを定義します。

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

### プロパティ

* `image-orientation`
* `image-rendering`
* `image-resolution`
* `object-fit`
* `object-position`
### 関数

* `linear-gradient()`
* `radial-gradient()`
* `repeating-linear-gradient()`
* `repeating-radial-gradient()`
* `conic-gradient()`
* `repeating-conic-gradient()`
* `url()`
* `element()`
* `image()`
* `cross-fade()`
### データ型

* `<gradient>`
* `<image>`
ガイド
---

CSS グラデーションの使用

特殊な CSS 画像型である*グラデーション*と、その作り方や使い方を紹介します。

CSS での画像スプライトの実装

単一の文書でいくつかの画像をグループ化して、ダウロードリクエストを節約し、ページのスピードを上げることができる共通のテクニックを説明します。

仕様書
---

| Specification |
| --- |
| CSS Images Module Level 3  |
| Compatibility Standard # css-%3Cimage%3E-type |
| CSS Values and Units Module Level 4 # urls |
CSS 背景と境界
=========

**CSS 背景と境界**モジュールでスタイル付けをすると、背景を色や画像で埋めたり (クリッピングや寸法の変更も) 他の加工を行ったりすることができます。これらのスタイルでは、境界を線や画像で装飾したり、四角くしたり丸くしたりすることもできます。(さらに、要素ボックスに影をつけて装飾することもできます)。

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

### プロパティ

* `background`
* `background-attachment`
* `background-clip`
* `background-color`
* `background-image`
* `background-origin`
* `background-position`
* `background-position-x`
* `background-position-y`
* `background-repeat`
* `background-size`
* `border`
* `border-bottom`
* `border-bottom-color`
* `border-bottom-left-radius`
* `border-bottom-right-radius`
* `border-bottom-style`
* `border-bottom-width`
* `border-collapse`
* `border-color`
* `border-image`
* `border-image-outset`
* `border-image-repeat`
* `border-image-slice`
* `border-image-source`
* `border-image-width`
* `border-left`
* `border-left-color`
* `border-left-style`
* `border-left-width`
* `border-radius`
* `border-right`
* `border-right-color`
* `border-right-style`
* `border-right-width`
* `border-style`
* `border-top`
* `border-top-color`
* `border-top-left-radius`
* `border-top-right-radius`
* `border-top-style`
* `border-top-width`
* `border-width`
* `box-shadow`
ツール
---

複数の背景の使用

要素に 1 つまたは複数の背景を設定する方法を説明します。

背景画像の拡縮

背景画像の拡大縮小や繰り返しを変更する方法を説明します。

CSS を使った HTML の要素への色の適用

CSS の色が境界を含む HTML でどのように使われるかを概観します。

境界画像作成ツール

境界画像 (`border-image` プロパティ) を見ながら作ることができる対話型のツールです。

境界角丸作成ツール

角の丸み (`border-radius` プロパティ) を見ながら作ることができる対話型のツールです。

ボックスの影作成ツール

要素の背後の影 (`box-shadow` プロパティ) を見ながら作ることができる対話型のツールです。

仕様書
---

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3  |
メディアクエリー
========

**メディアクエリー**によって、サイトやアプリを様々な引数や端末の特性に基づいて合わせることができます。

これはレスポンシブデザインのキーコンポーネントです。例えば、メディアクエリーでは小さい端末でフォントの大きさを縮小したり、ページが縦長モードで表示されたときに段落の間隔を広げたり、タッチ画面でボタンを拡大したりすることができます。

CSS では、 `@media` アットルールを使用して、メディアクエリーの結果に基づいて条件付きでスタイルの一部を適用することができます。 `@import` を使用すると、条件付きでスタイルシート全体を適用することもできます。

### HTML でのメディアクエリー

HTML でも、メディアクエリーは様々な要素に適用することができます。

* `<link>` 要素の `media` 属性では、リンクされたリソース (ふつうは CSS) が適用されるメディアを定義します。
* `<source>` 要素の `media` 属性では、ソースが適用されるメディアを定義します。 (これは `<picture>` 要素内でのみ有効です。)
* `<style>` 要素の `media` 属性では、スタイルが適用されるメディアを定義します。
### JavaScript でのメディアクエリー

JavaScript では、ウィンドウがメディアクエリーに合うかどうかをテストするために `Window.matchMedia()` メソッドを利用することができます。また、 `MediaQueryList.addListener()` (en-US) を使用して、クエリーの状態が変更されたときに通知を受け取ることもできます。この機能により、サイトやアプリが端末の設定、方向、状態が変化したときに応答することができます。

プログラムからのメディアクエリーの使用については、メディアクエリーのテストで知ることができます。

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

### アットルール

* `@import`
* `@media`
ガイド
---

メディアクエリーの使用

メディアクエリーと、その構文や演算子、メディアクエリー式を構築するために使用するメディア機能を紹介します。

プログラムからのメディアクエリーのテスト

JavaScript の中でメディアクエリーを使用して端末の状態を特定する方法、メディアクエリーの結果が変化したとき (ユーザーが画面を回転させたり、ブラウザーの大きさを変更したりしたとき) にコードに通知されるよう、リスナーをセットアップする方法を説明します。

アクセシビリティのためのメディアクエリーの使用

ユーザーがウェブサイトをより理解できるように、メディアクエリーが支援できることを学びます。

仕様書
---

| Specification |
| --- |
| Media Queries Level 4  |
| CSS Conditional Rules Module Level 3  |

関連情報
----

* `@supports` を使用すると、ブラウザーのさまざまな CSS の技術への対応状況に応じてスタイルを適用することができます。