border-start-end-radius - CSS: カスケーディングスタイルシート

border-start-end-radius
=======================

**`border-start-end-radius`** は CSS のプロパティで、要素の論理的な境界の半径を定義します。これは要素の `writing-mode`, `direction`, `text-orientation` に応じて、物理的な境界の半径に対応づけられます。これはテキストの方向や書字方向に依存せずにスタイルを構築する際に便利です。

```css
/\* <length> 値 \*/
/\* 値 1 つの場合は角を円にする \*/
border-start-end-radius: 10px;
border-start-end-radius: 1em;

/\* 値 2 つの場合は角を楕円にする \*/
border-start-end-radius: 1em 2em;

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

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

このプロパティは、要素の block-start と inline-end の間の角に影響します。すなわち、書字方向が `horizontal-tb` で `ltr` の方向であれば、 `border-top-right-radius` プロパティに対応します。

構文
--

### 値

`<length-percentage>`

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

公式定義
----

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

形式文法
----
```

border-start-end-radius =
  <length-percentage [0,∞]>{1,2}

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

```

例
-

### 縦書きの時の境界の丸め

#### HTML

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

#### CSS

```css
div {
  background-color: rebeccapurple;
  width: 120px;
  height: 120px;
  border-start-end-radius: 10px;
}

.exampleText {
  writing-mode: vertical-rl;
  padding: 10px;
  background-color: #fff;
  border-start-end-radius: 10px;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* 対応する物理的プロパティ: `border-bottom-left-radius`
* `writing-mode`, `direction`, `text-orientation`


-moz-force-broken-image-icon - CSS: カスケーディングスタイルシート

-moz-force-broken-image-icon
============================

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

**`-moz-force-broken-image-icon`** は拡張 CSS プロパティで、壊れた画像に `alt` 属性が付いていても、壊れた画像のアイコンを強制的に表示することができます。

構文
--

### 値

`<integer>`

プロパティの値に `1` を指定した場合、その画像が `alt` 属性を持っていたとしても、壊れた画像アイコンが表示されます。`0` を指定した場合、通常通り `alt` 属性のみが表示されます。

**メモ:** プロパティの値に `1` を指定した場合もなお、 `alt` 属性は壊れた画像アイコンの隣に同時に表示されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | 画像 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----

Error: could not find syntax for this item例
-

### HTML

```html
<img src="/broken/image/link.png" alt="Broken image link" />
```

### CSS

```css
img {
  -moz-force-broken-image-icon: 1;
  height: 100px;
  width: 100px;
}
```

### 結果

| Screenshot | Live sample |
| --- | --- |
|  |  |

**メモ:** `-moz-force-broken-image-icon` の値に `1` を指定した場合、その画像に width と height を明示的に指定しない限り、壊れた画像アイコンは表示されず、 `alt` 属性も非表示になります。

メモ
--

* このプロパティは Geckoベースのブラウザでのみ使用できます。
* このプロパティの使用は非推奨です。代わりに適切な `alt` 属性を使用してください。
仕様書
---

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

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

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

関連情報
----

* Firefox バグ 58646


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

backdrop-filter
===============

**`backdrop-filter`** は CSS のプロパティで、要素の背後の領域に、ぼかしや色変化のようなグラフィック効果を適用することができます。要素の*背後*のすべてに適用されるため、効果を見るためには少なくとも一部が透明な要素またはその背景を作成する必要があります。

```css
/\* キーワード値 \*/
backdrop-filter: none;

/\* SVG フィルターへの URL \*/
backdrop-filter: url(commonfilters.svg#filter);

/\* <filter-function> 値 \*/
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

/\* 複数のフィルター \*/
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

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

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

構文
--

### 値

`none`

背後にフィルターを適用しません。

`<filter-function-list>`

背景に適用する `<filter-function>` または SVG フィルター (en-US)の空白区切りのリストです。

公式定義
----

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

形式文法
----
```

backdrop-filter =
  none                 |
  <filter-value-list>

<filter-value-list> =
  [ <filter-function> | <url> ]+

<filter-function> =
  <blur()>         |
  <brightness()>   |
  <contrast()>     |
  <drop-shadow()>  |
  <grayscale()>    |
  <hue-rotate()>   |
  <invert()>       |
  <opacity()>      |
  <sepia()>        |
  <saturate()>

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

<blur()> =
  blur( <length>? )

<brightness()> =
  brightness( [ <number> | <percentage> ]? )

<contrast()> =
  contrast( [ <number> | <percentage> ]? )

<drop-shadow()> =
  drop-shadow( [ <color>? && <length>{2,3} ] )

<grayscale()> =
  grayscale( [ <number> | <percentage> ]? )

<hue-rotate()> =
  hue-rotate( [ <angle> | <zero> ]? )

<invert()> =
  invert( [ <number> | <percentage> ]? )

<opacity()> =
  opacity( [ <number> | <percentage> ]? )

<sepia()> =
  sepia( [ <number> | <percentage> ]? )

<saturate()> =
  saturate( [ <number> | <percentage> ]? )

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

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

```

例
-

### CSS

```css
.box {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  font-family: sans-serif;
  text-align: center;
  line-height: 1;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  max-width: 50%;
  max-height: 50%;
  padding: 20px 40px;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  background-image: url(https://picsum.photos/id/1080/6858/4574),
    linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.container {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
}
```

### HTML

```html
<div class="container">
  <div class="box">
    <p>backdrop-filter: blur(10px)</p>
  </div>
</div>
```

### 結果

仕様書
---

| Specification |
| --- |
| Filter Effects Module Level 2 # BackdropFilterProperty |

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

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

関連情報
----

* `filter`


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

shape-image-threshold
=====================

**`shape-image-threshold`** は CSS のプロパティで、 `shape-outside` の値に指定された画像によってシェイプを抽出するために使用するアルファチャネルのしきい値を設定します。

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

アルファコンポーネントの値がしきい値よりも大きいピクセルはすべて、境界を特定するためのシェイプの一部とみなされます。例えば、 `0.5` の値は不透過度が 50% よりも大きいピクセルをすべて含めた図形になるという意味です。

構文
--

```css
/\* <number> 値 \*/
shape-image-threshold: 0.7;

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

### 値

`<alpha-value>`

画像からシェイプを抽出するために使用されるしきい値を設定します。シェイプはアルファ値がしきい値より大きいピクセルによって定義されます。 0.0 (完全に透過) から 1.0 (完全に不透過) の範囲を外れた値は、この範囲に収められます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0.0` |
| 適用対象 | 浮動要素 |
| 継承 | なし |
| 計算値 | 指定値の `number` が [0.0, 1.0] の範囲内にクリップされたものと同じ |
| アニメーションの種類 | 数値 |

形式文法
----
```

shape-image-threshold =
  <alpha-value>

<alpha-value> =
  <number>      |
  <percentage>

```

例
-

### グラデーションへのテキストの配置

この例では、グラデーションの背景画像を持つ `<div>` ブロックを作成します。グラデーションは `shape-outside` を使用して CSS シェイプとして確立されているので、グラデーションの中のピクセルのうち 20% よりも大きい不透過度 (つまり、アルファコンポーネントが 0.2 よりも大きいピクセル) はシェイプの一部とみなされます。

#### HTML

```html
<div id="gradient-shape"></div>

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel at commodi
  voluptates enim, distinctio officia. Saepe optio accusamus doloribus sint
  facilis itaque ab nulla, dolor molestiae assumenda cum sit placeat adipisci,
  libero quae nihil porro debitis laboriosam inventore animi impedit nostrum
  nesciunt quisquam expedita! Dolores consectetur iure atque a mollitia dicta
  repudiandae illum exercitationem aliquam repellendus ipsum porro modi, id nemo
  eligendi, architecto ratione quibusdam iusto nisi soluta? Totam inventore ea
  eum sed velit et eligendi suscipit accusamus iusto dolore, at provident eius
  alias maxime pariatur non deleniti ipsum sequi rem eveniet laboriosam magni
  expedita?
</p>
```

#### CSS

```css
#gradient-shape {
  width: 150px;
  height: 150px;
  float: left;
  background-image: linear-gradient(30deg, black, transparent 80%, transparent);
  shape-outside: linear-gradient(30deg, black, transparent 80%, transparent);
  shape-image-threshold: 0.2;
}
```

シェイプは画像ファイルではなく、線形グラデーションの `background-image` を使用して定義されています。同じグラデーションが、 `shape-outside` プロパティを使用して、浮動領域を設定するためにシェイプが取得される画像としても使用されます。

シェイプの部分として扱うグラデーション内のピクセルは 20% の不透過度がしきい値なので、 `shape-image-threadhold` の値を `0.2` にして使用して作成しています。

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Shapes Module Level 1 # shape-image-threshold-property |

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

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

関連情報
----

* CSS シェイプ
* CSS シェイプの概要
* `<basic-shape>`
* `shape-outside`
* `shape-margin`


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

:playing
========

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

**`:playing`** は CSS の擬似クラスセレクターで、「再生中」または「停止中」の状態を持つ音声、動画、その他のリソースの要素が「再生中」である場合に一致する、リソース状態擬似クラスです。

バッファリング状態にある場合や、ユーザーの操作以外で停止している状態の場合も、リソースが再生中として扱われます。

```css
:playing {
}
```

構文
--
```

:playing
```

例
-

### CSS

```css
:playing {
  border: 5px solid green;
}
```

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # selectordef-playing |

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

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

関連情報
----

* `:paused`


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

scroll-padding-block-end
========================

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

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

構文
--

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

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

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

### 値

`<length-percentage>`

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

`auto`

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

公式定義
----

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

形式文法
----
```

scroll-padding-block-end =
  auto                       |
  <length-percentage [0,∞]>

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

```

仕様書
---

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

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

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

関連情報
----

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


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

container
=========

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

Newly availableSince February 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
**container** は CSS の一括指定プロパティで、この要素をクエリーコンテナーとして確立し、コンテナークエリーで使用される格納コンテキストの名前を指定します。

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

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

* `container-name`
* `container-type`
構文
--

```css
/\* <container-name> \*/
container: my-layout;

/\* <container-name> / <container-type> \*/
container: my-layout / size;

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

### 値

`<container-name>`

 格納コンテキストの大文字小文字を区別した名前です。
 構文の詳細は、 `container-name` プロパティのページにあります。

`<container-type>`

 格納コンテキストの種類です。
 構文の詳細は、 `container-type` プロパティのページにあります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `container-name`: `none`
* `container-type`: `normal`
 |
| 適用対象 | すべての要素 |
| 継承 | なし |
| パーセント値 | 一括指定の次の各プロパティとして* `container-name`: なし
* `container-type`: なし
 |
| 計算値 | 一括指定の次の各プロパティとして* `container-name`: `none` または識別子の順序付きリスト
* `container-type`: 指定通り
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `container-name`: アニメーション不可
* `container-type`: 色
 |

形式文法
----
```

container =
  <'container-name'> [ / <'container-type'> ]?

```

例
-

### インラインサイズ抑制の確立

以下の HTML の例があったとします。これは画像、タイトル、いくつかのテキストによるカード部品です。

```html
<div class="post">
  <div class="card">
    <h2>カードのタイトル</h2>
    <p>カードのコンテンツ</p>
  </div>
</div>
```

コンテナーコンテキストを作成する明示的な方法は、 `container-name` をオプションとして `container-type` を宣言することです。

```css
.post {
  container-type: inline-size;
  container-name: sidebar;
}
```

`container` の一括指定は、これを単一の宣言で定義しやすくするためのものです。

```css
.post {
  container: sidebar / inline-size;
}
```

そして、 `@container` アットルールを用いて、そのコンテナーの名前をターゲットにすることができます。

```css
@container sidebar (min-width: 400px) {
  /\* <stylesheet> \*/
}
```

仕様書
---

| Specification |
| --- |
| CSS Containment Module Level 3 # container-shorthand |

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

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

関連情報
----

* CSS コンテナークエリー
* `@container` アットルール
* CSS `contain` 一括指定プロパティ
* CSS `container-type` プロパティ
* CSS `container-name` プロパティ
* CSS `content-visibility` プロパティ


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

counter-set
===========

**`counter-set`** は CSS のプロパティで、CSS カウンターを指定された値に設定します。これは既存のカウンターの値を操作し、その要素に指定された名前のカウンターがまだ存在しない場合は新しいカウンターを生成します。

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

**メモ:** カウンターの値は `counter-increment` プロパティを使用して増減させることができます。

構文
--

```css
/\* "my-counter" を 0 に設定 \*/
counter-set: my-counter;

/\* "my-counter" を -1 に設定 \*/
counter-set: my-counter -1;

/\* "counter1" を 1 に、 "counter2" を 4 に設定 \*/
counter-set: counter1 1 counter2 4;

/\* より詳細度が低いルールで設定されたカウンターをすべて消去 \*/
counter-set: none;

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

`counter-set` プロパティは、以下のうちの何れかで指定します。

* カウンターの名前を指定する `<custom-ident>` と、それに続く任意の `<integer>`。カウンターはいくつでも指定することができ、それぞれの名前や名前と数値の組は空白で区切ります。
* キーワード値 `none`。
### 値

`<custom-ident>`

設定するカウンターの名前です。

`<integer>`

この要素が現れるたびにカウンターに設定する値です。指定されなかった場合の既定値は `0` です。現在、この要素に指定された名前のカウンターが存在しない場合、この要素は指定された名前の新しいカウンターを、開始値 0 で指定します（ただし、その後で直ちに異なる値に設定されたり増加したりする可能性があります）。

`none`

カウンターの設定は行われません。これはより詳細度の低い規則によって定義された `counter-set` を上書きするために使用することができます。

公式定義
----

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

形式文法
----
```

counter-set =
  [ <counter-name> <integer>? ]+  |
  none

```

例
-

### 名前付きカウンターの設定

```css
h1 {
  counter-set: chapter section 1 page;
  /\* chapter および page のカウンターを 0 に、
 section カウンターを 1 に設定 \*/
}
```

仕様書
---

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # propdef-counter-set |

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

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

関連情報
----

* CSS カウンターの使用
* `counter-increment`
* `counter-reset`
* `@counter-style`
* `counter()` および `counters()` 関数
* `content` プロパティ


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

::-moz-range-track
==================

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

**`::-moz-range-track`** は CSS の擬似要素で、 Mozilla 拡張であり、 `type="range"` の `<input>` でインジケーターがスライドする*トラック* (すなわち、溝) を表します。

**メモ:** `::-moz-range-track` を `<input type="range">` 以外で使用すると、何にも一致せず、効果がありません。

構文
--

Error: could not find syntax for this item例
-

### HTML

```html
<input type="range" min="0" max="100" step="5" value="50" />
```

### CSS

```css
input[type="range"]::-moz-range-track {
  background-color: green;
}
```

### 結果

このスタイルを使用するプログレスバーは、次のようになります。

![A range with the track green](/ja/docs/Web/CSS/::-moz-range-track/screen_shot_2015-12-04_at_10.14.34.png)

仕様書
---

標準の一部ではありません。

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

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

関連情報
----

* Gecko で使われる他の range 型の入力の他の部品をスタイル付けする擬似要素:
    + `::-moz-range-thumb` (en-US) は溝をスライドするインジケーターを表します。
    + `::-moz-range-progress` (en-US) はトラックの下の部分を表します。
* 他のブラウザーで使われる同様の擬似要素:
    + `::-webkit-slider-runnable-track` WebKit および Blink (Safari, Chrome, Opera) が対応している擬似要素
    + `::-ms-track` Internet Explorer および Edge が対応している擬似要素
* CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS
* QuirksMode: Styling and scripting sliders


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

@font-face
==========

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

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

* Learn more
* See full compatibility
* Report feedback
**`@font-face`** は CSS のアットルールで、テキストを表示するための独自フォントを指定します。フォントはリモートサーバーまたはユーザー自身のコンピューターにローカルにインストールされたフォントのどちらかから読み込むことができます。

構文
--

```css
@font-face {
  font-family: "Open Sans";
  src:
    url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
    url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
```

### 記述子

`ascent-override`

フォントのアセンダーの寸法を定義します。

`descent-override`

フォントのディセンダーの寸法を定義します。

`font-display`

フォントのダウンロードおよび準備状況に応じて、どのようにフォントフェイスを表示するかを特定します。

`font-family`

font プロパティのフォントフェイス値で使われる名前を指定します。

`font-stretch`

`font-stretch` 値です。 font-face で対応する範囲を指定するために、 `font-stretch: 50% 200%;` のように 2 つの値を受け付けます。

`font-style`

`font-style` 値です。 font-face で対応する範囲を指定するために、 `font-style: oblique 20deg 50deg;` のように 2 つの値を受け付けます。

`font-weight`

`font-weight` 値です。 font-face で対応する範囲を指定するために、 `font-weight: 100 400;` のように 2 つの値を受け付けます。

`font-variant`

`font-variant` 値です。

`font-feature-settings`

OpenType フォントで高度な印刷機能を制御することができるようにします。

`font-variation-settings`

OpenType または TrueType フォントの種類を低レベルで制御するために、変化形の特徴を表す 4 文字の軸名を、種類の値と共に指定します。

`line-gap-override`

フォントの行間の寸法を定義します。

`size-adjust`
Experimental

このフォントに関連するグリフのアウトラインとメトリックの倍率を定義します。これにより、同じフォントサイズでレンダリングしたときに、さまざまなフォントのデザインを調和させることが容易になります。

`src`

フォントデータを含むリソースを指定します。これでリモートのフォントファイルの位置又はユーザーのコンピューターのフォント名を指定することができます。

ブラウザーにフォントのリソースがどの形式であるかのヒントを提供するために — それで最適なものを選択できます — `format()` 関数の中に形式を含めることができます。

```css
src:
  url(ideal-sans-serif.woff) format("woff"),
  url(basic-sans-serif.ttf) format("truetype");
```

利用可能な形式は、`"woff"`, `"woff2"`, `"truetype"`, `"opentype"`, `"embedded-opentype"`, `"svg"` です。

`unicode-range`

フォントで使用される Unicode コードポイントの範囲です。

解説
--

`local()` 関数が与えられると、ユーザーのコンピューターで探すフォント名を指定し、ユーザーエージェントがそれを見つけることができれば、そのローカルフォントを使用します。そうでなければ、 `url()` 関数を使用して指定されたフォントリソースをダウンロードして使用します。

`@font-face` で独自のフォントを提供できるようになることで、 "web-safe" フォント (つまり、広く利用できると考えられるほど一般的なフォント) と呼ばれる制限なしにコンテンツをデザインすることができます。ローカルにインストールされているフォントを、名前を指定して検索し使用することができる機能により、インターネット接続に頼らなくてもフォントを基本的なものからカスタマイズすることができるようになります。

`url()` と `local()` を両方とも使用することは一般的であり、そうすることでユーザーのインストールされたフォントのコピーが利用できればそれを利用し、ユーザーの端末に見つからない場合はフォントのコピーを代替としてダウンロードすることができます。

`@font-face` アットルールは、 CSS の最上位だけでなく、 CSS の条件付きアットルールグループの中でも使用することができます。

### フォントの MIME タイプ

| 形式 | MIME タイプ |
| --- | --- |
| TrueType | `font/ttf` |
| OpenType | `font/otf` |
| Web Open Font Format | `font/woff` |
| Web Open Font Format 2 | `font/woff2` |

### メモ

* ウェブフォントは同一ドメイン制約の対象となります（フォントファイルはそれを使用するページと同じドメインに存在しなければなりません）。ただし、 HTTP アクセス制御を使用するとこの制限を緩和することができます。
* `@font-face` は CSS セレクターの中で宣言することはできません。例えば、以下の例は動作しません。

```css
.className {
  @font-face {
    font-family: MyHelvetica;
    src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
      url(MgOpenModernaBold.ttf);
    font-weight: bold;
  }
}
```

形式文法
----
```

@font-face =
  @font-face { <declaration-list> }

```

例
-

### ダウンロード可能なフォントを定義

この例は使用するダウンロード可能なフォントを指定し、文書の本文全体に適用します。

```html
<html>
  <head>
    <title>Web Font Sample</title>
    <style type="text/css" media="screen, print">
 @font-face {
 font-family: "Bitstream Vera Serif Bold";
 src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf");
 }

 body {
 font-family: "Bitstream Vera Serif Bold", serif;
 }
 </style>
  </head>
  <body>
    This is Bitstream Vera Serif Bold.
  </body>
</html>
```

この例の出力結果は次のようになります。

### ローカルフォントの代替を指定

この例では、ユーザーのローカルにある "Helvetica Neue Bold" が使用されます。もしユーザーがそのフォントをインストールしていない場合は (2 つの異なる名前が試されます)、代わりに "MgOpenModernaBold.ttf" という名前のダウンロードフォントが使用されます。

```css
@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
    url(MgOpenModernaBold.ttf);
  font-weight: bold;
}
```

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-face-rule |

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

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

関連情報
----

* WOFF について
* FontSquirrel @font-face generator
* Beautiful fonts with @font-face
* Font Library


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

overflow-y
==========

Baseline 2022
-------------

Newly availableSince September 2022, 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
**`overflow-y`** は CSS のプロパティで、ブロックレベル要素の内容が上下の境界からあふれた場合、どのように表示するのかを設定します。表示しないか、スクロールバーを表示するか、あふれさせるかを設定できます。

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

構文
--

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

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

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

`overflow-x` が `hidden`, `scroll`, `auto` であり、このプロパティが `visible` (既定値) である場合は、暗黙的に `auto` と計算されます。

### 値

`visible`

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

`hidden`

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

`clip`
Experimental

`hidden` と同様に、コンテンツは要素のパディングボックスに合わせて切り取られます。 `clip` と `hidden` の違いは、 `clip` キーワードがプログラム的なスクロールも含め、すべてのスクロールを禁止することです。ボックスはスクロールコンテナーにはならず、新しい整形コンテキストを始めることもありません。新しい整形コンテキストを始めたいのであれば、 `display: flow-root` を使用して実現することができます。

`scroll`

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

`auto`

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

公式定義
----

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

形式文法
----
```

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

```

例
-

### overflow-y の動作を設定

#### HTML

```html
<ul>
 - <code>overflow-y: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>

 - <code>overflow-y: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>

 - <code>overflow-y: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>

 - <code>overflow-y: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-y: hidden;
  margin-bottom: 12px;
}
#div2 {
  overflow-y: scroll;
  margin-bottom: 12px;
}
#div3 {
  overflow-y: visible;
  margin-bottom: 120px;
}
#div4 {
  overflow-y: auto;
  margin-bottom: 120px;
}
```

### 結果

仕様書
---

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

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

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

関連情報
----

* 関連する CSS プロパティ: `text-overflow`, `white-space`, `overflow`, `overflow-x`, `clip`, `display`


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

@layer
======

Baseline 2022
-------------

Newly availableSince March 2022, 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
**`@layer`** は CSS のアットルールで、カスケードレイヤーを宣言するために使用し、また複数のカスケードレイヤーがある場合に、優先順位を定義するためにも使用することができます。

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

構文
--

```css
@layer layer-name {rules}
@layer layer-name;
@layer layer-name, layer-name, layer-name;
@layer {rules}
```

ここで次のようになります。

*layer-name*

カスケードレイヤーの名前です。

*rules*

そのカスケードレイヤーに含まれる一連の CSS ルールです。

解説
--

カスケードレイヤー内のルールは、一緒にカスケードされ、ウェブ開発者がカスケードをより制御できるようにします。レイヤーの中にないスタイルは一斉に集められ、宣言されたレイヤー、名前付きまたは無名のレイヤーのすべて後に来る単一の無名のレイヤーに配置されます。この意味は、レイヤーの外で宣言されたスタイルは、レイヤーの中で宣言されたスタイルよりも優先されるということです。

`@layer` アットルールは 3 つの方法のいずれかでカスケードレイヤーを作成するために使用します。

最初の方法は、次のようにして名前付きカスケードレイヤーを作成し、 CSS ルールをその中に入れることです。

```css
@layer utilities {
  .padding-sm {
    padding: 0.5rem;
  }

  .padding-lg {
    padding: 0.8rem;
  }
}
```

2 つ目は、スタイルを割り当てずに名前付きのカスケードレイヤーを作成する方法です。これは下記のように単一のレイヤーとすることができます。

```css
@layer utilities;
```

次のようにして複数のレイヤーを一度に定義することもできます。

```css
@layer theme, layout, utilities;
```

これは、レイヤーを宣言する最初の順序が、どのレイヤーが優先されるかを示すので便利です。宣言の場合と同様に、複数のレイヤーで宣言が見つかった場合は、最後にリストアップされたレイヤーが優先されます。したがって、先ほどの例では、`theme` と `utilities` で競合するルールがあった場合、 `utilities` にあるルールが優先的に適用されるでしょう。

`utilities` のルールの方が `theme` ルールよりも詳細度が低くても適用されます。これは、レイヤーの順序が決まれば、詳細度や見た目の順序は無視されるからです。これは、セレクターが競合するルールを上書きするのに十分な高い詳細度を持つことを保証する必要がなく、後のレイヤーに表示されることだけを保証すればよいため、よりシンプルな CSS セレクターを作成することが可能になるのです。

**メモ:** レイヤー名を宣言して順番を決めたら、名前を宣言し直してレイヤーに CSS ルールを追加してください。すると、スタイルがレイヤーに追加され、レイヤーの順序は変更されません。

3 つ目は、次のように名前のないカスケードレイヤーを作成する方法です。

```css
@layer {
  p {
    margin-block: 1rem;
  }
}
```

これは無名カスケードレイヤーを作成します。このレイヤーは名前付きレイヤーと同じように機能しますが、後でルールを割り当てることはできません。無名レイヤーの優先順位は、名前付きまたは無名のレイヤーが宣言された順番であり、レイヤーの外側で宣言されたスタイル設定よりも下になります。

カスケードレイヤーを作成するもう一つの方法は、 `@import` を使用することです。この場合、ルールはインポートされたスタイルシートの中にあることになります。 `@import` アットルールは、 `@charset` ルールと `@layer` ルールを除く、他のすべての種類のルールに先立って入力しなければならないことを覚えておいてください。

```css
@import "theme.css" layer(utilities);
```

### レイヤーの入れ子

次のように、レイヤーは入れ子にすることができます。

```css
@layer framework {
  @layer layout {
  }
}
```

`framework` の中にある `layout` レイヤーにルールを追加するには、 2 つの名前を `.` でつないでください。

```css
@layer framework.layout {
  p {
    margin-block: 1rem;
  }
}
```

形式文法
----
```

@layer =
  @layer <layer-name>? { <rule-list> }  |
  @layer <layer-name># ;

<layer-name> =
  <ident> [ '.' <ident> ]\*

```

例
-

### 単純な例

次の例では、 2 つの CSS ルールが作成されています。 1 つはレイヤーの外にある `<p>` 要素に対して、もう一つは `.box p` に対して `type` というレイヤーの内側にあります。

レイヤーがなければ、セレクター `.box p` が最も高い詳細度を持つので、テキスト `Hello, world!` は緑色で表示されます。 `type` レイヤーはレイヤー以外のコンテンツを保持するために作成された無名レイヤーの前にあるため、テキストは紫色で表示されます。

また、順序にも注意してください。レイヤー以外のスタイルを最初に宣言しても、それはレイヤーのスタイルの後に適用されます。

#### HTML

```html
<div class="box">
  <p>Hello, world!</p>
</div>
```

#### CSS

```css
p {
  color: rebeccapurple;
}

@layer type {
  .box p {
    font-weight: bold;
    font-size: 1.3em;
    color: green;
  }
}
```

#### 結果

### 既存のレイヤーにルールを割り当てる

次の例では、ルールが適用されていない 2 つのレイヤーを作成し、その 2 つのレイヤーに CSS ルールを適用しています。ベースとなるレイヤーは、色、ボーダー、フォントサイズ、パディングを定義しています。 `special` レイヤーでは、別の色を定義しています。 `special` はレイヤーを定義する際に最後に来るので、それが提供する色が使用され、テキストは `rebeccapurple` を使用して表示されます。その他のルールは `base` のものがそのまま適用されます。

#### HTML

```html
<div class="item">
  I am displayed in <code>color: rebeccapurple</code> because the
  <code>special</code> layer comes after the <code>base</code> layer. My green
  border, font-size, and padding come from the <code>base</code> layer.
</div>
```

#### CSS

```css
@layer base, special;

@layer special {
  .item {
    color: rebeccapurple;
  }
}

@layer base {
  .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
  }
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Cascading and Inheritance Level 5 # layering |

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

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

関連情報
----

* `@import`
* `CSSLayerBlockRule`
* `CSSLayerStatementRule`
* `!important`
* `revert-layer`
* CSS カスケード入門
* カスケード、詳細度、継承
* カスケードレイヤー
* The future of CSS: Cascade layers (bram.us (2021))


<display-internal> - CSS: カスケーディングスタイルシート

<display-internal>
==================

`table` や `ruby` のような一部のレイアウトモデルでは、複雑な内部構造があり、様々なその子要素や子孫要素が担う様々な役割があります。このページではこれらを「内部の」表示値として定義し、特定のレイアウトモードでのみ意味を持ちます。

構文
--

有効な `<display-internal>` の値は次の通りです。

`table-row-group`

これらの要素は HTML の `<tbody>` 要素のように動作します。

`table-header-group`

これらの要素は HTML の `<thead>` 要素のように動作します。

`table-footer-group`

これらの要素は HTML の `<tfoot>` 要素のように動作します。

`table-row`

これらの要素は HTML の `<tr>` 要素のように動作します。

`table-cell`

これらの要素は HTML の `<td>` 要素のように動作します。

`table-column-group`

これらの要素は HTML の `<colgroup>` 要素のように動作します。

`table-column`

これらの要素は HTML の `<col>` 要素のように動作します。

`table-caption`

これらの要素は HTML の `<caption>` 要素のように動作します。

`ruby-base`
Experimental

これらの要素は HTML の `<rb>` 要素のように動作します。

`ruby-text`
Experimental

これらの要素は HTML の `<rt>` 要素のように動作します。

`ruby-base-container`
Experimental

これらの要素は無名のボックスとして生成された HTML の `<rbc>` 要素のように動作します。

`ruby-text-container`
Experimental

これらの要素は HTML の `<rtc>` 要素のように動作します。

例
-

### CSS テーブルの例

以下の例は、 CSS テーブルレイアウトを使用した単純なフォームのレイアウトを紹介します。

#### HTML

```html
<main>
  <div>
    <label for="name">Name</label>
    <input type="text" id="name" name="name" />
  </div>
  <div>
    <label for="age">Age</label>
    <input type="text" id="age" name="age" />
  </div>
</main>
```

#### CSS

```css
main {
  display: table;
}

div {
  display: table-row;
}

label,
input {
  display: table-cell;
  margin: 5px;
}
```

#### 結果

仕様書
---

#### No specification found

No specification data found for `css.properties.display.table_values,css.properties.display.ruby_values`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

### 対応している table の値

`table`, `table-cell`, `table-column`, `table-column-group`, `table-footer-group`, `table-header-group`, `table-row`, `table-row-group`

### css.properties.display.table\_values

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

### css.properties.display.ruby\_values

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

### 対応している ruby の値

`ruby`, `ruby-base`, `ruby-base-container`, `ruby-text`, `ruby-text-container`

### css.properties.display.table\_values

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

### css.properties.display.ruby\_values

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

関連情報
----

* `display`
    + `<display-outside>`
    + `<display-inside>`
    + `<display-listitem>`
    + `<display-box>`
    + `<display-legacy>`


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

::-webkit-scrollbar
===================

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

`::-webkit-scrollbar` は CSS の擬似要素で、要素のスクロールバーに `overflow:scroll;` が設定されている場合、そのスタイルに影響を与えます。

**メモ:** `overflow:scroll;` が設定されていなければ、スクロールバーは表示されません。

**メモ:** `::-webkit-scrollbar` は Blink および WebKit ベースのブラウザー（例えば、Chrome、Edge、Opera、Safari、iOS のすべてのブラウザー、その他）でのみ利用できます。スクロールバーのスタイル設定の標準化された方法は、 `scrollbar-color` と `scrollbar-width` が利用できます。

CSS スクロールバーのセレクター
-----------------

以下の擬似要素を使用することで、WebKit ブラウザーのスクロールバーのさまざまな部分をカスタマイズすることができます。

* `::-webkit-scrollbar` — スクロールバー全体。
* `::-webkit-scrollbar-button` — スクロールバーのボタン（上下の矢印で一度に一行ずつスクロールします）。
* `::-webkit-scrollbar:horizontal{}` — 水平スクロールバー。
* `::-webkit-scrollbar-thumb` — ドラッグ可能なスクロールハンドル。
* `::-webkit-scrollbar-track` — スクロールバーのトラック（プログレスバー）で、白いバーの上にグレーのバーがあるところ。
* `::-webkit-scrollbar-track-piece` — トラック（プログレスバー）のハンドルで覆われていない部分。
* `::-webkit-scrollbar:vertical{}` — 垂直スクロールバー。
* `::-webkit-scrollbar-corner` — スクロールバーの一番下の角で、水平スクロールバーと垂直スクロールバーの両方が合わさるところ。これは多くの場合、ブラウザーウィンドウの右下隅になります。
* `::-webkit-resizer` — いくつかの要素の下隅に現れる、ドラッグ可能なサイズ変更ハンドルです。
例
-

### CSS

```css
.visible-scrollbar,
.invisible-scrollbar,
.mostly-customized-scrollbar {
  display: block;
  width: 10em;
  overflow: auto;
  height: 2em;
}

.invisible-scrollbar::-webkit-scrollbar {
  display: none;
}

/\* 「ほぼカスタマイズされた」スクロールバーをデモする
 \* （幅と高さを指定した場合は表示されません） \*/
.mostly-customized-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #aaa; /\* またはトラックに追加 \*/
}

/\* つまみを追加 \*/
.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
  background: #000;
}
```

### HTML

```html
<div class="visible-scrollbar">
  Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor. Proin at nulla
  elementum, consectetur ex eget, commodo ante. Sed eros mi, bibendum ut
  dignissim et, maximus eget nibh. Phasellus blandit quam turpis, at mollis
  velit pretium ut. Nunc consequat efficitur ultrices. Nullam hendrerit posuere
  est. Nulla libero sapien, egestas ac felis porta, cursus ultricies quam.
  Vestibulum tincidunt accumsan sapien, a fringilla dui semper in. Vivamus
  consectetur ipsum a ornare blandit. Aenean tempus at lorem sit amet faucibus.
  Curabitur nibh justo, faucibus sed velit cursus, mattis cursus dolor.
  Pellentesque id pretium est. Quisque convallis nisi a diam malesuada mollis.
  Aliquam at enim ligula.
</div>

<div class="invisible-scrollbar">
  Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword
</div>

<div class="mostly-customized-scrollbar">
  Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword<br />
  And pretty tall<br />
  thing with weird scrollbars.<br />
  Who thought scrollbars could be made weird?
</div>
```

### 結果

仕様書
---

規格の一部ではありません。

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

### css.selectors.-webkit-scrollbar

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

### css.selectors.-webkit-scrollbar-button

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

### css.selectors.-webkit-scrollbar-thumb

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

### css.selectors.-webkit-scrollbar-track

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

### css.selectors.-webkit-scrollbar-track-piece

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

### css.selectors.-webkit-scrollbar-corner

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

### css.selectors.-webkit-resizer

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

関連情報
----

* WebKit ブログの Styling Scrollbars
* `scrollbar-width`
* `scrollbar-color`


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

font-smooth
===========

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

**`font-smooth`** は CSS のプロパティで、フォントが描画されるときのアンチエイリアスの適用を制御します。

構文
--

```css
/\* キーワード値 \*/
font-smooth: auto;
font-smooth: never;
font-smooth: always;

/\* <length> 値 \*/
font-smooth: 2em;

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

**メモ:** WebKit は同様のプロパティを別な値 **`-webkit-font-smoothing`** として実装しています。これは Mac OS X/macOS でのみ動作します。

* `auto` - ブラウザーの決定に任せる (利用可能であればアンチエイリアスのサブピクセルを使用します。これが既定値)
* `none` - フォントを滑らかにする処理をオフにします。表示されるテキストの辺はギザギザで鮮明になります。
* `antialiased` - サブピクセルではなく、ピクセルレベルでフォントを滑らかにします。暗い背景に明るい文字の場合、サブピクセルレンダリングからアンチエイリアスに切り替えることで、より明るく見えるようになります。
* `subpixel-antialiased` - 多くの非 Retina ディスプレイでは、これが最も鮮明なテキストになります。

**メモ:** Firefox は同様のプロパティを別な値 **`-moz-osx-font-smoothing`** として実装しています。これは Mac OS X/macOS でのみ動作します。

* `auto` - フォントを滑らかにする処理の最適化をブラウザーが選択します。ふつうは `grayscale` です。
* `grayscale` - サブピクセルではなくグレースケールのアンチエイリアスで、テキストを描画します。暗い背景に明るいテキストを表示する際に、サブピクセルレンダリングからアンチエイリアシングに切り替えることで、より明るく見えるようになります。

公式定義
----

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

形式文法
----

Error: could not find syntax for this item例
-

### 基本的な使い方の例

次の例は、macOS でフォントの円滑化をオンにした Safari/Chromium と Firefox に相当するものです。いずれの場合も円滑化されたフォントは、わずかに細くなったように見えるはずです。

macOS システムをお使いでない方のために、スクリーンショットをご紹介します (ライブバージョンは後ほど登場します)。

![](/ja/docs/Web/CSS/font-smooth/smoothing.png)

#### HTML

```html
<p>Without font smoothing</p>

<p class="smoothed">With font smoothing</p>
```

#### CSS

```css
html {
  background-color: black;
  color: white;
  font-size: 3rem;
}

p {
  text-align: center;
}

.smoothed {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
```

#### 結果

仕様書
---

どの仕様書にも定義されていません。

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

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

関連情報
----

* Please Stop "Fixing" Font Smoothing – UsabilityPost
* Laissez-faire font smoothing and anti-aliasing


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

:invalid
========

**`:invalid`** は CSS の擬似クラスで、 `<input>` 要素や `<form>` 要素のうち内容が検証に失敗したものを表します。

```css
/\* 無効な <input> を選択 \*/
input:invalid {
  background-color: pink;
}
```

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

この擬似クラスは、フィールドのエラーをユーザーに強調表示するのに便利です。

構文
--
```

:invalid
```

例
-

### 要素が検証に成功すると緑色に、失敗すると赤色に着色されるフォーム

### HTML

```html
<form>
  <div class="field">
    <label for="url\_input">URL を入力して下さい:</label>
    <input type="url" id="url\_input" />
  </div>

  <div class="field">
    <label for="email\_input">メールアドレスを入力して下さい:</label>
    <input type="email" id="email\_input" required />
  </div>
</form>
```

#### CSS

```css
label {
  display: block;
  margin: 1px;
  padding: 1px;
}

.field {
  margin: 1px;
  padding: 1px;
}

input:invalid {
  background-color: #ffdddd;
}

form:invalid {
  border: 5px solid #ffdddd;
}

input:valid {
  background-color: #ddffdd;
}

form:valid {
  border: 5px solid #ddffdd;
}

input:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:invalid {
  border-color: #c00000;
}
```

### 結果

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

赤は入力が無効であることを示すためによく使われます。色盲の人によっては、それ以外の色によらない識別方法を伴わないと、入力状態が判別できないことがあります。通常、文字列やアイコンを使用して説明します。

* MDN "WCAG を理解する ― ガイドライン 1.4 の解説"
* Understanding Success Criterion 1.4.1 | W3C Understanding WCAG 2.0
注
-

### ラジオボタン

グループのラジオボタンの 1 つが `required` の場合、 `:invalid` 擬似クラスはグループ内のボタンが 1 つも選択されていない時に選択されます。（グループ化されたラジオボタンは同じ `name` 属性を共有しています。）

### Gecko の既定値

既定で Gecko は `:invalid` 擬似クラスのスタイルを適用しません。しかし、 `:invalid` の場合のサブセットに適用される `:-moz-ui-invalid` (en-US) 擬似クラスにスタイル（`box-shadow` プロパティを用いて赤く「伸びる」スタイル）を適用します。

仕様書
---

| Specification |
| --- |
| HTML Standard # selector-invalid |
| Selectors Level 4 # validity-pseudos |

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

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

関連情報
----

* 検証に関する他の擬似クラス: `:required`, `:optional`, `:valid`
* 関連する Mozilla の擬似クラス: `:user-invalid`, `:-moz-submit-invalid`
* フォームデータの検証
* JavaScript からの validity state へのアクセス


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

max-block-size
==============

**`max-block-size`** は CSS のプロパティで、 `writing-mode` で指定された書字方向とは逆の向きの要素の最大寸法を指定します。すなわち、書字方向が水平 (横書き) であれば、 `max-block-size` は `max-height` と等価になります。書字方向が垂直 (縦書き) であれば、 `max-block-size` は `max-width` と同じになります。

もう一方の方向の最大長は、 `max-inline-size` プロパティを使用して指定します。

`max-width` は常に水平方向の寸法に使われ、 `max-height` は常に垂直方向の寸法に使われるため、このプロパティはテキストコンテンツの寸法に基づいて寸法を設定する必要がある場合、書字方向を意識して指定する必要がある場合に便利です。

ふつう `max-height` または `max-width` を使用する場面でいつでも、代わりに `max-block-size` をコンテンツの最大の「高さ」を設定するために使用し (これは垂直の値ではない可能性がありますが)、 `max-inline-size`をコンテンツの最大の「幅」を設定するために使用してください (これが横書きではなく縦書きである場合であっても)。様々な書字方向を表す `writing-mode` の 例をご覧ください。

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

構文
--

```css
/\* <length> 値 \*/
max-block-size: 300px;
max-block-size: 25em;

/\* <percentage> 値 \*/
max-block-size: 75%;

/\* キーワード値 \*/
max-block-size: none;
max-block-size: max-content;
max-block-size: min-content;
max-block-size: fit-content(20em);

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

### 値

`max-block-size` プロパティの値は、 `max-width` および `max-height` プロパティで有効なすべての値を取ることができます。

`<length>`

`max-block-size` を絶対的な値で定義します。

`<percentage>`

`max-block-size` を包含ブロックの幅に対するパーセント値で定義します。

`none`

ボックスの寸法を制限しません。

`max-content`

内容物が推奨する `max-block-size` です。

`min-content`

内容物の最小の `max-block-size` です。

`fit-content(`<length-percentage>`)`

利用可能な空白を指定された引数で置き換えた `fit-content` 式を使用します。すなわち、 `min(max-content, max(min-content, 引数))` です。

### 書字方向が方向にどう影響するのか

`writing-mode` の値は次のように `max-block-size` から `max-width` または `max-height` への対応付けに影響します。

| `writing-mode` の値 | `max-block-size` が等価になるもの |
| --- | --- |
| `horizontal-tb`, `lr`
非推奨
, `lr-tb`
非推奨
, `rl`
非推奨
, `rb`
非推奨
, `rb-rl`
非推奨
 | `max-height` |
| `vertical-rl`, `vertical-lr`, `sideways-rl`
Experimental
, `sideways-lr`
Experimental
, `tb`
非推奨
, `tb-rl`
非推奨
 | `max-width` |

**メモ:** `writing-mode` の値のうち `sideways-lr` および `sideways-rl` は設計プロセスの後期に CSS 書字方向s Level 3 仕様書から削除されました。これらは Level 4 で復活する可能性があります。

**メモ:** 書字方向の `lr`, `lr-tb`, `rl`, `rb`, `rb-tl` は HTML のコンテキストでは許可されなくなりました。 SVG 1.x コンテキストでのみ利用できる可能性があります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | `width` および `height` と同じ |
| 継承 | なし |
| パーセント値 | 包含ブロックの block-size |
| 計算値 | `max-width` および `max-height` と同じ |
| アニメーションの種類 | length または パーセント値, calc(); |

形式文法
----
```

max-block-size =
  <'max-width'>

```

例
-

### 横書きおよび縦書きでの max-block-size の設定

この例では、同じテキスト (Herman Melville の小説 *Moby-Dick* の冒頭部分) が `horizontal-tb` および `vertical-rl` の両方の書字方向で表示されます。

二つのボックスついてそれ以外の部分はすべて、 `max-block-size` に使われている値を含めて同じです。

#### HTML

この HTML では、単純に二つの `<div>` ブロックを作成し、それぞれの `writing-mode` を `horizontal` および `vertical` クラスを用いて設定しています。両方のボックスで `standard-box` クラスを共有しており、こちらで単純に色、パディング、それぞれの `max-block-size` の値を設定しています。

```html
<p>書字方向 <code>horizontal-tb</code> (既定値):</p>
<div class="standard-box horizontal">
  Call me Ishmael. Some years ago—never mind how long precisely—having little or
  no money in my purse, and nothing particular to interest me on shore, I
  thought I would sail about a little and see the watery part of the world. It
  is a way I have of driving off the spleen and regulating the circulation.
</div>

<p>書字方向 <code>vertical-rl</code>:</p>
<div class="standard-box vertical">
  Call me Ishmael. Some years ago—never mind how long precisely—having little or
  no money in my purse, and nothing particular to interest me on shore, I
  thought I would sail about a little and see the watery part of the world. It
  is a way I have of driving off the spleen and regulating the circulation.
</div>
```

#### CSS

この CSS では3つのクラスを定義しています。最初は `standard-box` で、両方のボックスに適用され、上にあるものです。これはブロックの最小および最大の寸法、フォントの大きさ、などを指定します。

その後にくるクラス `horizontal` および `vertical` は、ボックスに `writing-mode` プロパティを追加し、値を使われるクラスに応じて `horizontal-tb` または `vertical-rl` に設定します。

```css
.standard-box {
  padding: 4px;
  background-color: #abcdef;
  color: #000;
  font:
    16px "Open Sans",
    "Helvetica",
    "Arial",
    sans-serif;
  max-block-size: 160px;
  min-block-size: 100px;
}

.horizontal {
  writing-mode: horizontal-tb;
}

.vertical {
  writing-mode: vertical-rl;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-max-block-size |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

関連情報
----

* 対応する物理的プロパティ: `max-width` と `max-height`
* 他の方向の最大寸法の設定: `max-inline-size`
* `writing-mode`


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

:-moz-last-node
===============

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

**`:-moz-last-node`** は CSS の擬似クラスで、 Mozilla 拡張であり、他の要素の最後の子要素であるあらゆる要素を表します。 `:last-child` とは異なり、最後の子要素の後に（ホワイトスペース以外の）テキストがあると一致しません。

**メモ:** 要素の末尾にあるホワイトスペースは `:-moz-last-node` の決定において無視されます。

構文
--

```css
:-moz-last-node {}
```

例
-

### CSS

```css
span:-moz-last-node {
  background-color: lime;
}
```

### HTML

```html
<p>
  <span>This does not match.</span>
  <span>This matches!</span>
</p>

<p>
  <span>This doesn't match because it's followed by text.</span>
  Blahblah.
</p>
```

### 結果

仕様書
---

どの仕様にも含まれていません。

関連情報
----

* `:-moz-first-node`
* `:last-child`


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

border-color
============

**`border-color`** は一括指定を行う CSS のプロパティで、要素の境界の色を設定します。

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

各辺を個々に設定する場合は、 `border-top-color`、 `border-right-color`、 `border-bottom-color`、 `border-left-color`、 または書字方向を意識した`border-block-start-color`、 `border-block-end-color`、 `border-inline-start-color`、 `border-inline-end-color` を使用します。

境界線の色についての詳細な情報は、 CSS colors にあります。

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

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

* `border-bottom-color`
* `border-left-color`
* `border-right-color`
* `border-top-color`
構文
--

```css
/\* <color> 値 \*/
border-color: red;

/\* 水平線 | 垂直線 \*/
border-color: red #f015ca;

/\* 上辺 | 垂直線 | 下辺 \*/
border-color: red rgb(240, 30, 50, 0.7) green;

/\* 上辺 | 右辺 | 下辺 | 左辺 \*/
border-color: red yellow green blue;

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

`border-color` プロパティは 1 ～ 4 つの値を使って指定することができます。

* 値が **1 つ**指定された場合、**全 4 辺**に同じ色が適用される。
* 値が **2 つ**指定された場合、1 つ目の色は**上下**、2 つ目は**左右**の辺に適用される。
* 値が **3 つ**指定された場合、1 つ目の色**上**、2 つ目は**左右**、3 つ目は**下**の辺に適用される。
* 値が **4 つ**指定された場合、それぞれ**上**、**右**、**下**、**左**の順（時計回り）に適用される。
### 値

`<color>`

境界線の色を定義します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `border-top-color`: `currentcolor`
* `border-right-color`: `currentcolor`
* `border-bottom-color`: `currentcolor`
* `border-left-color`: `currentcolor`
 |
| 適用対象 | すべての要素。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `border-bottom-color`: 色の計算値
* `border-left-color`: 色の計算値
* `border-right-color`: 色の計算値
* `border-top-color`: 色の計算値
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `border-bottom-color`: 色
* `border-left-color`: 色
* `border-right-color`: 色
* `border-top-color`: 色
 |

形式文法
----
```

border-color =
  [ <color> | <image-1D> ]{1,4}

<image-1D> =
  <stripes()>

<stripes()> =
  stripes( <color-stripe># )

<color-stripe> =
  <color>                            &&
  [ <length-percentage> | <flex> ]?

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

```

例
-

### 完全な border-color の使用法

#### HTML

```html
<div id="justone">
  <p><code>border-color: red;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: red;</code></li>
    <li><code>border-bottom-color: red;</code></li>
    <li><code>border-left-color: red;</code></li>
  </ul>
</div>
<div id="horzvert">
  <p><code>border-color: gold red;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: gold;</code></li>
    <li><code>border-right-color: red;</code></li>
    <li><code>border-bottom-color: gold;</code></li>
    <li><code>border-left-color: red;</code></li>
  </ul>
</div>
<div id="topvertbott">
  <p><code>border-color: red cyan gold;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: cyan;</code></li>
    <li><code>border-bottom-color: gold;</code></li>
    <li><code>border-left-color: cyan;</code></li>
  </ul>
</div>
<div id="trbl">
  <p><code>border-color: red cyan black gold;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: cyan;</code></li>
    <li><code>border-bottom-color: black;</code></li>
    <li><code>border-left-color: gold;</code></li>
  </ul>
</div>
```

#### CSS

```css
#justone {
  border-color: red;
}

#horzvert {
  border-color: gold red;
}

#topvertbott {
  border-color: red cyan gold;
}

#trbl {
  border-color: red cyan black gold;
}

/\* すべての div に幅とスタイルを設定 \*/
div {
  border: solid 0.3em;
  width: auto;
  margin: 0.5em;
  padding: 0.5em;
}

ul {
  margin: 0;
  list-style: none;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # logical-shorthand-keyword |
| CSS Backgrounds and Borders Module Level 3 # border-color |

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

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

関連情報
----

* 境界線の色関係の CSS プロパティ: `border`, `border-top-color`, `border-right-color`, `border-bottom-color`, `border-left-color`,
* その他の境界線に関する CSS プロパティ: `border-width`, `border-style`
* `<color>` データ型
* その他の色に関するプロパティ: `color`, `background-color`, `outline-color`, `text-decoration-color`, `text-emphasis-color`, `text-shadow`, `caret-color`, and `column-rule-color`
* CSS を使用した HTML の要素への色の適用


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

text-decoration-thickness
=========================

**`text-decoration-thickness`** は CSS のプロパティで、要素内のテキストに用いられる装飾線、例えば取り消し線、下線、上線の太さを設定します。

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

構文
--

```css
/\* 単独のキーワード \*/
text-decoration-thickness: auto;
text-decoration-thickness: from-font;

/\* 長さ \*/
text-decoration-thickness: 0.1em;
text-decoration-thickness: 3px;

/\* パーセント値 \*/
text-decoration-thickness: 10%;

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

### 値

`auto`

ブラウザーがテキスト装飾線の適切な太さを選択します。

`from-font`

フォントファイルに推奨する太さの情報が含まれている場合は、その値を使用します。フォントファイルにこの情報が含まれていない場合は、 `auto` が設定されているのと同様に動作し、ブラウザーが適切な太さを選択します。

`<length>`

テキスト装飾線の太さを `<length>` として指定し、フォントファイルの推奨値やブラウザーの既定値を無視します。

`<percentage>`

テキスト装飾線の太さを現在のフォントの **1em** に対する `<percentage>` で指定します。パーセント値は相対値として継承されるので、フォントが変わるとそれに合わせて変わります。ブラウザーは最小でも 1 デバイスピクセルを使用しなければなりません。このプロパティを適用した場合、フォントの大きさが異なる子要素があっても、適用されたボックス全体で太さが一定になります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | すべての要素。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | なし |
| パーセント値 | 要素自身のフォントサイズに対する相対値 |
| 計算値 | 指定通り |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

text-decoration-thickness =
  auto                 |
  from-font            |
  <length-percentage>

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

```

例
-

### 様々な太さ

#### HTML

```html
<p class="thin">赤い 1px の下線を引いたテキストです。</p>
<p class="thick">赤い 5px の下線を引いたテキストです。</p>
<p class="shorthand">これは同等の一括指定を使用しています。</p>
```

#### CSS

```css
.thin {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
  text-decoration-thickness: 1px;
}

.thick {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
  text-decoration-thickness: 5px;
}

.shorthand {
  text-decoration: underline solid red 5px;
}
```

#### 結果

仕様書
---

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

**メモ:** このプロパティは `text-decoration-width` と呼ばれていましたが、 2019 年に `text-decoration-thickness` に更新されました。

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

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

関連情報
----

* `text-decoration`
* `text-underline-offset`


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

border-inline
=============

**`border-inline`** は CSS のプロパティで、論理的なインライン方向のそれぞれの境界プロパティをスタイルシートの 1 ヶ所で設定する一括指定プロパティです。

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

`border-inline` の割り当て先の物理的な境界は、要素の書字方向によって決まります。 `border-top` と `border-bottom`、または `border-right` と `border-left` のどちらかの組み合わせに対して、 `writing-mode`、`direction`、`text-orientation` に設定された値に応じて対応づけられます。

他の方向の境界については、 `border-block` によって、 `border-block-start` と `border-block-end` の両方を設定することができます。

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

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

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

```css
border-inline: 1px;
border-inline: 2px dotted;
border-inline: medium dashed blue;

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

### 値

`border-inline` は以下の値のうちの1つ以上を任意の順序で指定します。

`<'border-width'>`

境界の幅です。 `border-width` を参照してください。

`<'border-style'>`

境界線のスタイルです。 `border-style` を参照してください。

`<'color'>`

境界の色です。 `color` を参照してください。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `border-inline-width`: `medium`
* `border-inline-style`: `none`
* `border-inline-color`: `currentcolor`
 |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `border-inline-width`: 絶対的な長さ、境界スタイルが `none` または `hidden` であれば `0`
* `border-inline-style`: 指定通り
* `border-inline-color`: 色の計算値
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `border-inline-color`: 計算値の型による
* `border-inline-style`: 離散値
* `border-inline-width`: 計算値の型による
 |

形式文法
----
```

border-inline =
  <'border-block-start'>

```

例
-

### テキストが垂直の場合の境界

#### HTML

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

#### CSS

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

.exampleText {
  writing-mode: vertical-rl;
  border-inline: 5px dashed blue;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-border-inline |

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

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

関連情報
----

* このプロパティは物理的な境界プロパティである `border-top`、`border-right`、`border-bottom`、`border-left` の何れかに対応づけられます。
* `writing-mode`、`direction`、`text-orientation`


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

background-color
================

CSS の **`background-color`** プロパティは、要素の背景色を設定します。

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

構文
--

```css
/\* キーワード値 \*/
background-color: red;
background-color: indigo;

/\* 16 進の値 \*/
background-color: #bbff00; /\* 完全不透過 \*/
background-color: #bf0; /\* 完全不透過の短縮形 \*/
background-color: #11ffee00; /\* 完全透過 \*/
background-color: #1fe0; /\* 完全透過の短縮形 \*/
background-color: #11ffeeff; /\* 完全不透過 \*/
background-color: #1fef; /\* 完全不透過の短縮形 \*/

/\* RGB 値 \*/
background-color: rgb(255, 255, 128); /\* 不透過 \*/
background-color: rgba(117, 190, 218, 0.5); /\* 50% 不透過 \*/

/\* HSL 値 \*/
background-color: hsl(50, 33%, 25%); /\* 不透過 \*/
background-color: hsla(50, 33%, 25%, 0.75); /\* 75% 不透過 \*/

/\* 特殊なキーワード値 \*/
background-color: currentcolor;
background-color: transparent;

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

`background-color` プロパティは単一の `<color>` 値で指定します。

### 値

`<color>`

背景の単一色 (uniform color) を表します。指定されていれば `background-image` の背後に描画されますが、画像に透明な部分があれば色が見えます。

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

背景色とその上に配置されたテキストの色のコントラスト比が、弱視の人がページのコンテンツを読むことができる程度の高さであることを確認することが重要です。

色のコントラスト比は、テキスト及び背景色の明度の値を比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。

* WebAIM: Color Contrast Checker
* MDN "WCAG を理解する ― ガイドライン 1.4 の解説"
* Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
公式定義
----

|  |  |
| --- | --- |
| 初期値 | `transparent` |
| 適用対象 | すべての要素。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | なし |
| 計算値 | 色の計算値 |
| アニメーションの種類 | 色 |

形式文法
----
```

background-color =
  <color>

```

例
-

### HTML

```html
<div class="exampleone">Lorem ipsum dolor sit amet, consectetuer</div>

<div class="exampletwo">Lorem ipsum dolor sit amet, consectetuer</div>

<div class="examplethree">Lorem ipsum dolor sit amet, consectetuer</div>
```

### CSS

```css
.exampleone {
  background-color: transparent;
}

.exampletwo {
  background-color: rgb(153, 102, 153);
  color: rgb(255, 255, 204);
}

.examplethree {
  background-color: #777799;
  color: #ffffff;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # background-color |

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

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

関連情報
----

* 複数の背景
* `<color>` データ型
* その他の色に関するプロパティ: `color`, `border-color`, `outline-color`, `text-decoration-color`, `text-emphasis-color`, `text-shadow`, `caret-color`, `column-rule-color`
* CSS を使用した HTML の要素への色の適用


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

transform-origin
================

**`transform-origin`** は CSS のプロパティで、要素の座標変換 (transform) における原点を設定します。

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

座標変換の原点とは、それを中心に座標変換が適用される点です。例えば、 `rotate()` 関数における座標変換の原点は、回転の中心です。

実際には、このプロパティは一対の座標変換で、その要素の他の座標変換の周りを囲みます。最初の座標変換は、原点を真の原点である

(
0
,
0
)

 に移動させます。その後、他の座標変換が適用されますが、座標変換の原点は

(
0
,
0
)

 にあるので、これらの座標変換はその原点の周りで作用します。最後に逆方向の変換を行い，座標変換の原点を元の位置に戻します。したがって，この定義は 次のようになります。

```css
transform-origin: -100% 50%;
transform: rotate(45deg);
```

この定義は以下の座標変換と同じです。

```css
transform-origin: 0 0;
transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%);
```

右から左に読むと、`translate(100%, -50%)` は変換の原点を進の原点に移動するもので、`rotate(45deg)` は本来の座標変換であり、`translate(-100%, 50%)` は変換の原点をもとの場所に戻す変換です。

既定で、座標変換の原点は `center` です。

構文
--

```css
/\* 値１つの構文 \*/
transform-origin: 2px;
transform-origin: bottom;

/\* x-offset | y-offset \*/
transform-origin: 3cm 2px;

/\* x-offset-keyword | y-offset \*/
transform-origin: left 2px;

/\* x-offset-keyword | y-offset-keyword \*/
transform-origin: right top;

/\* y-offset-keyword | x-offset-keyword \*/
transform-origin: top right;

/\* x-offset | y-offset | z-offset \*/
transform-origin: 2px 30% 10px;

/\* x-offset-keyword | y-offset | z-offset \*/
transform-origin: left 5px -3px;

/\* x-offset-keyword | y-offset-keyword | z-offset \*/
transform-origin: right bottom 2cm;

/\* y-offset-keyword | x-offset-keyword | z-offset \*/
transform-origin: bottom right 2cm;

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

`transform-origin` プロパティは、オフセットを表す 1 ～ 3 つの値を使用して指定することができます。明示的に定義されなかったオフセットは、それぞれの対応する初期値にリセットされます。

単一の `<length>` または `<percentage>` が定義された場合、これは水平方向のオフセットを表します。

2 つ以上の値が定義され、どちらもの値もキーワードでない場合、または使われているキーワードが `center` だけであった場合、最初の値は水平方向のオフセットであり、二番目の値は垂直方向のオフセットです。

* 値 1 つの構文:
    + 値は `<length>`, `<percentage>`, または `left`, `center`, `right`, `top`, `bottom` のいずれかでなければなりません。
* 値 2 つの構文:
    + 一方の値は `<length>`, `<percentage>`, またはキーワードの `left`, `center`, `right` のいずれかでなければなりません。
    + もう一方の値は、 `<length>`, `<percentage>`, またはキーワードの `top`, `center`, `bottom` のいずれかでなければなりません。
* 値 3 つの構文:
    + 1 番目と 2 番目の値は、値 2 つの構文と同じです。
    + 3 番目の値は `<length>` でなければなりません。これは常に Z オフセットを表します。
### 値

*x-offset*

`<length>` または `<percentage>` の、ボックスの左端から座標変換の原点までの距離を示す値です。

*offset-keyword*

`left`, `right`, `top`, `bottom`, `center` のいずれかのキーワードで、対応するオフセットを表します。

*y-offset*

`<length>` または `<percentage>` の、ボックスの右端から座標変換の原点までの距離を示す値です。

*x-offset-keyword*

`left`, `right`, `center` のいずれかのキーワードで、ボックスの左端から座標変換の原点までの距離を示します。

*y-offset-keyword*

`top`, `bottom`, `center` のいずれかのキーワードで、ボックスの上端から座標変換の原点までの距離を示します。

*z-offset*

`<length>` 値 (`<percentage>` を指定すると文が無効になります) で、ユーザーの視点と z=0 原点の距離を示します。

キーワードは便利な速記形であり、次の `<percentage>` 値に相当します。

| Keyword | Value |
| --- | --- |
| `left` | `0%` |
| `center` | `50%` |
| `right` | `100%` |
| `top` | `0%` |
| `bottom` | `100%` |

公式定義
----

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

**メモ:** `transform-origin` の初期値は、ルートの `<svg>` 要素と foreignObject の直接の子である `<svg>` 要素を除いたすべての SVG 要素では `0 0` です。また、 `transform-origin` は他の CSS 要素と同様に `50% 50%` です。詳しくは SVG の transform-origin (en-US) 属性を参照してください。

形式文法
----
```

transform-origin =
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] <length>?  |
  [ [ center | left | right ] && [ center | top | bottom ] ] <length>?

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

```

例
-

### 様々な座標変換値のデモ

この例は、様々な変換関数で様々なt `transform-origin` の値を選択した場合の効果を表します。
```

<div class="container">
  <div class="example">
    <div class="box box1"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: none;
  </pre>

  <div class="example">
    <div class="box box2"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: rotate(30deg);
  </pre>

  <div class="example">
    <div class="box box3"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: rotate(30deg);
transform-origin: 0 0;
  </pre>

  <div class="example">
    <div class="box box4"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: rotate(30deg);
transform-origin: 100% 100%;
  </pre>

  <div class="example">
    <div class="box box5"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: rotate(30deg);
transform-origin: -1em -3em;
  </pre>

  <div class="example">
    <div class="box box6"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: scale(1.7);
  </pre>

  <div class="example">
    <div class="box box7"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: scale(1.7);
transform-origin: 0 0;
  </pre>

  <div class="example">
    <div class="box box8"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: scale(1.7);
transform-origin: 100% -30%;
  </pre>

  <div class="example">
    <div class="box box9"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: skewX(50deg);
transform-origin: 100% -30%;
  </pre>

  <div class="example">
    <div class="box box10"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: skewY(50deg);
transform-origin: 100% -30%;
  </pre>
</div>
```

```
.container {
  display: grid;
  grid-template-columns: 200px 100px;
  gap: 20px;
}

.example {
  position: relative;
  margin: 0 2em 4em 5em;
}

.box {
  display: inline-block;
  width: 3em;
  height: 3em;
  border: solid 1px;
  background-color: palegreen;
}

.original {
  position: absolute;
  left: 0;
  opacity: 20%;
}

.box1 {
  transform: none;
}

.box2 {
  transform: rotate(30deg);
}

.box3 {
  transform: rotate(30deg);
  transform-origin: 0 0;
}

.box4 {
  transform: rotate(30deg);
  transform-origin: 100% 100%;
}

.box5 {
  transform: rotate(30deg);
  transform-origin: -1em -3em;
}

.box6 {
  transform: scale(1.7);
}

.box7 {
  transform: scale(1.7);
  transform-origin: 0 0;
}

.box8 {
  transform: scale(1.7);
  transform-origin: 100% -30%;
}

.box9 {
  transform: skewX(50deg);
  transform-origin: 100% -30%;
}

.box10 {
  transform: skewY(50deg);
  transform-origin: 100% -30%;
}
```

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 1 # transform-origin-property |

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

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

関連情報
----

* CSS 座標変換の使用
* https://css-tricks.com/almanac/properties/t/transform-origin/


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

justify-tracks
==============

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

**`align-tracks`** は CSS のプロパティで、インライン軸が組積であるグリッドコンテナーの組積軸の配置を設定します。

構文
--

```css
/\* キーワード値 \*/
justify-tracks: start;
justify-tracks: space-between;
justify-tracks: center;
justify-tracks: start, center, end;

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

このプロパティは単一の値を取ることができ、その場合はすべてのトラックが同じように整列されます。値のリストが使用された場合、最初の値はグリッド軸の最初のトラックに適用され、2 番目は次のトラックに適用され、以下同様となります。

値がトラックより少ない場合は、最後の値が残りすべてのトラックに使用されます。トラックよりも値が多い場合、追加の値は無視されます。

### 値

`start`

アイテムは、組積軸の配置コンテナーの先頭の端に向かって、互いに詰められます。

`end`

アイテムは、組積軸の配置コンテナーの末尾の端に向かって、互いに詰められます。

`center`

アイテムは、組積軸に沿って配置コンテナーの中心に向かって、互いに詰められます。

`normal`

`start` として動作します。

`space-between`

アイテムは配置コンテナー内で組積軸に沿って均等に配置されます。隣接するアイテム同士の間の間隔は同じです。先頭のアイテムは、コンテナーの先頭の端に詰められ、末尾のアイテムは、コンテナーの末尾の端に詰められます。

`space-around`

アイテムは配置コンテナー内で組積軸に沿って均等に配置されます。隣接するアイテム同士の間の間隔は同じです。先頭のアイテムの前と末尾のアイテムの後の空き空間は、隣接するアイテム同士の空間の半分に等しくなります。

`space-evenly`

アイテムは組積軸に沿って配置コンテナー内に均等に配置されます。隣接するアイテム同士の間隔、コンテナーの先頭の端と先頭のアイテム、およびコンテナーの末尾の端と末尾のアイテムは、すべて正確に同じです。

`stretch`

アイテムは組積の軸に沿って伸び、コンテンツボックスを満たします。確定したサイズのアイテムは引き伸ばされません。

`left`

配置コンテナーの左端に向かって、アイテム同士が互いに詰められます。

`right`

配置コンテナーの右端に向かって、アイテム同士が互いに詰められます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `normal` |
| 適用対象 | インライン軸がマソンリーレイアウトのグリッドコンテナー |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----

Error: could not find syntax for this item例
-

### justify-tracks に複数の値がある組積レイアウト

仕様書
---

| Specification |
| --- |
| CSS Grid Layout Module Level 3 # tracks-alignment |

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

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

関連情報
----

* 関連する CSS プロパティ: `align-tracks`, `masonry-auto-flow`


CSS 位置指定レイアウト - CSS: カスケーディングスタイルシート

CSS 位置指定レイアウト
=============

**CSS 位置指定レイアウト** (CSS positioned layout) モジュールは、ウェブページ上での要素の位置指定方法を定義します。

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

### プロパティ

* `top`
* `right`
* `bottom`
* `left`
* `inset`
* `inset-inline`
* `inset-inline-start`
* `inset-inline-end`
* `inset-block`
* `inset-block-start`
* `inset-block-end`
* `float`
* `clear`
* `position`
* `z-index`
* `transform`
ガイド
---

CSS の z-index を理解する

重ね合わせコンテキストの記述法と Z 順の動作方法の説明を、いくつかの例と共に紹介します。

仕様書
---

| Specification |
| --- |
| CSS Positioned Layout Module Level 3  |


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

::-webkit-slider-thumb
======================

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

**`::-webkit-slider-thumb`** は CSS の擬似要素で、 `<input>` の `type="range"` でユーザーが数値を変更するために「溝」の中を動かすことができる「つまみ」を表します。

構文
--

```css
::-webkit-slider-thumb {}
```

仕様書
---

どの仕様書でも定義されていません。これは WebKit/Blink に固有の私有擬似要素です。

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

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

関連情報
----

* `::-webkit-slider-runnable-track`
* 他のブラウザーで使われている類似の擬似要素:
    + `::-moz-range-thumb` (en-US)
    + `::-ms-thumb`
* CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS
* QuirksMode: Styling and scripting sliders
* Couple of Gotchas to Watch-out For


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

-webkit-box-reflect
===================

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

**`-webkit-box-reflect`** は CSS のプロパティで、要素の内容を特定の方向に反射させることができます。

```css
/\* 方向の値 \*/
-webkit-box-reflect: above;
-webkit-box-reflect: below;
-webkit-box-reflect: left;
-webkit-box-reflect: right;

/\* オフセット値 \*/
-webkit-box-reflect: below 10px;

/\* マスク値 \*/
-webkit-box-reflect: below 0 linear-gradient(transparent, white);

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

**警告:** この機能は**ウェブサイトで使うためのものではありません**。ウェブで反射効果を実現する上で、標準の方法は CSS の `element()` 関数を使用することです。

構文
--

### 値

`above`*,* `below`*,* `right`*,* `left`

どの方向に反射するかを示すキーワードです。

`<length>`

反射の大きさを示します。

`<image>`

反射に適用されるマスクを記述します。

公式定義
----

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

形式文法
----

Error: could not find syntax for this item仕様書
---

標準には含まれていません。反射効果を CSS で実現する標準の方法は、 CSS の `element()` 関数を使用することです。

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

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

関連情報
----

* Apple のドキュメント
* Webkit の仕様書.
* Lea Verou's article on reflection using CSS features on the standard track.


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

outline-style
=============

CSS の **`outline-style`** プロパティは、要素の輪郭線のスタイルを設定します。輪郭線とは要素の周りに描かれる線のことで、 `border` よりも外側です。

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

たいていの場合、輪郭線の見た目を定義するときは一括指定プロパティ `outline` を使ったほうが便利です。

構文
--

```css
/\* キーワード値 \*/
outline-style: auto;
outline-style: none;
outline-style: dotted;
outline-style: dashed;
outline-style: solid;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset;
outline-style: outset;

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

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

### 値

`auto`

ユーザーエージェントに輪郭線の描画を任せます。

`none`

輪郭線を描きません。`outline-width` は `0` です。

`dotted`

点線の輪郭線です。

`dashed`

破線の輪郭線です。

`solid`

1 本の実線の輪郭線です。

`double`

2 本の実線の輪郭線です。`outline-width` は 2 本の線とその隙間の合計です。

`groove`

ページに刻まれたかのように見える輪郭線です。

`ridge`

`groove` の逆で、ページから押し出されたように見える輪郭線です。

`inset`

領域がページに埋め込まれたかのように見える輪郭線です。

`outset`

`inset` の逆で、領域がページから隆起しているように見える輪郭線です。

公式定義
----

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

形式文法
----
```

outline-style =
  auto                  |
  <outline-line-style>

```

例
-

### 輪郭線のスタイルを auto に設定

`auto` の値は、輪郭線のスタイルが独自のものであることを表します。仕様書によれば、「典型的には、プラットフォーム用のユーザーインターフェイスの既定のスタイル、または、CSS で詳細に記述できるスタイルよりも表現豊かなスタイル 、例えば、輝いて見える半透明の外郭を持つ、輪郭の丸い輪郭線」となっています。

#### HTML

```html
<div>
  <p class="auto">Outline デモ</p>
</div>
```

#### CSS

```css
.auto {
  outline-style: auto; /\* "outline: auto" と同じ \*/
}

/\* デモを見やすく \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```

#### 結果

### 輪郭線を dashed と dotted に設定

#### HTML

```html
<div>
  <div class="dotted">
    <p class="dashed">Outline Demo</p>
  </div>
</div>
```

#### CSS

```css
.dotted {
  outline-style: dotted; /\* "outline: dotted" と同じ \*/
}
.dashed {
  outline-style: dashed;
}

/\* デモを見やすく \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```

#### 結果

### 輪郭線のスタイルを solid と double に設定

#### HTML

```html
<div>
  <div class="solid">
    <p class="double">Outline Demo</p>
  </div>
</div>
```

#### CSS

```css
.solid {
  outline-style: solid;
}
.double {
  outline-style: double;
}

/\* デモを見やすく \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```

#### 結果

### 輪郭線のスタイルを groove と ridge に設定

#### HTML

```html
<div>
  <div class="groove">
    <p class="ridge">Outline Demo</p>
  </div>
</div>
```

#### CSS

```css
.groove {
  outline-style: groove;
}
.ridge {
  outline-style: ridge;
}

/\* デモを見やすく \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```

#### 結果

### 輪郭線のスタイルを inset と outset に設定

#### HTML

```html
<div>
  <div class="inset">
    <p class="outset">Outline Demo</p>
  </div>
</div>
```

#### CSS

```css
.inset {
  outline-style: inset;
}
.outset {
  outline-style: outset;
}

/\* デモを見やすく \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # outline-style |

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

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

関連情報
----

* `outline`
* `outline-color`
* `outline-width`


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

mask-border-width
=================

**`mask-border-width`** は CSS のプロパティで、要素のマスク境界の幅を設定します。

構文
--

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

/\* <length> 値 \*/
mask-border-width: 1rem;

/\* <percentage> 値 \*/
mask-border-width: 25%;

/\* <number> 値 \*/
mask-border-width: 3;

/\* 上下 | 左右 \*/
mask-border-width: 2em 3em;

/\* 上 | 左右 | 下 \*/
mask-border-width: 5% 15% 10%;

/\* 上 | 右 | 下 | 左 \*/
mask-border-width: 5% 2em 10% auto;

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

`mask-border-width` プロパティは、以下の値のリストの中から 1 ～ 4 つの値を使って指定することができます。

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

`<length-percentage>`

マスク境界の幅を、 `<length>` または `<percentage>` で指定します。パーセント値は左右のオフセットについては境界領域の*幅*に対する相対値、上下のオフセットについては境界領域の*高さ*に対する相対値です。負の数であってはなりません。

`<number>`

マスク境界の幅を、対応する `border-width` の倍数で指定します。負の数であってはなりません。

`auto`

マスク境界の幅は、対応する `mask-border-slice` の固有の幅または高さ (適切な方) と等しくなります。画像が要求された固有の寸法を持っていない場合は、対応する `border-width` が代わりに使用されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | すべての要素。 SVG の場合は `defs` 要素やすべてのグラフィック要素を除いたコンテナー要素に適用される |
| 継承 | なし |
| パーセント値 | 境界マスク画像領域の幅/高さに対する相対値 |
| 計算値 | 指定通り。ただし相対的な長さはは絶対的な長さに変換される |
| アニメーションの種類 | 離散値 |

形式文法
----
```

mask-border-width =
  [ <length-percentage> | <number> | auto ]{1,4}

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

```

例
-

### 基本的な使用

このプロパティは、まだどこでも対応されていないようです。このプロパティが対応されるようになれば、境界マスクの幅を定義することになります。このプロパティを `mask-border-slice` と異なる値に設定すると、スライスは境界マスクに合わせて拡大縮小されます。

```css
mask-border-width: 30 fill;
```

Chromium ベースのブラウザーは、このプロパティの古い版 — `mask-box-image-width` — に接頭辞つきで対応しています。

```css
-webkit-mask-box-image-width: 20px;
```

**メモ:** `mask-border` ページでは動作する例を (Chromium で対応している古い接頭辞つきの境界マスクプロパティを使用して) 挙げていますので、効果について分かるでしょう。

仕様書
---

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask-border-width |

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

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

関連情報
----

* `mask-border`
* `mask-border-mode`
* `mask-border-outset`
* `mask-border-repeat`
* `mask-border-source`


:-moz-locale-dir(ltr) - CSS: カスケーディングスタイルシート

:-moz-locale-dir(ltr)
=====================

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

**`:-moz-locale-dir(ltr)`** は CSS の擬似クラスで、 Mozilla 拡張であり、ユーザーインターフェイスが左から右へ向けて表示される要素に一致します。これは設定の `intl.uidirection.locale` （*`locale`* は現在のロケール）が "ltr" に設定されていることで特定されます。

**メモ:** 擬似クラスは、主に拡張機能およびテーマをユーザーのロケールに基づいて適合させるために使用されます。 (これは、ウィンドウとウィンドウ、またタブとタブの間でも変えることができます。) また、拡張機能がユーザーの既定のロケールに対応しなくても動作させることができるため、ロケールの仕様を気にしなくても、左から右方向、右から左方向の両方のレイアウトに対応できます。

**警告:** このセレクターは HTML では正しく機能しません。ユーザーインターフェイスのロケールが右方向か左方向かに関わらず、常に一致します。

構文
--

```css
:-moz-locale-dir(ltr) {}
```

例
-

この例は、Firefoxを使用していない場合は動作しません。また、セレクタがHTMLコンテンツで正しく動作しない問題があるため、Firefoxでも動作しない場合があります。XUL](/ja/docs/Archive/Mozilla/XUL)で使用するために設計されています。

### HTML

```html
<p>If you're using a left-to-right interface, this should be red.</p>
```

### CSS

```css
p:-moz-locale-dir(ltr) {
  color: red;
}
```

### 結果

仕様書
---

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

関連情報
----

* `:dir(…)`
* `:-moz-locale-dir(rtl)`


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

column-fill
===========

**`column-fill`** は CSS のプロパティで、段組みレイアウトで要素の内容物が複数の段に分割されるとき、どのようにバランスを取るのかを制御します。

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

構文
--

```css
/\* キーワード値 \*/
column-fill: auto;
column-fill: balance;
column-fill: balance-all;

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

`column-fill` プロパティは、以下に挙げたキーワード値のうちの 1 つで指定します。初期値は `balance` で、コンテンツは段の間で均等になります。

### 値

`auto`

段は順に埋められます。コンテンツは必要な余地があるときだけ分割されるので、一部の段は空になることがあります。

`balance`

コンテンツは各段に均等に分割されます。ページ付きメディアなどの断片化されたコンテキストでは、最後の断片のみが均等に分割されます。従ってページ付きメディアでは、最後のページのみが均等に分割されます。

`balance-all`

コンテンツは格段に均等に分割されます。ページ付きメディアなどの断片化されたコンテキストでは、すべての断片が均等になります。

公式定義
----

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

形式文法
----
```

column-fill =
  auto         |
  balance      |
  balance-all

```

例
-

### 段の内容を均等にする

#### HTML

```html
<p class="fill-auto">
  この段落では、段を 1 つずつ埋めていきます。すべてのテキストが最初の段に収まるので、他の段は空白になります。
</p>

<p class="fill-balance">
  この段落では、それぞれの段で内容量のバランスを取ろうとします。
</p>
```

#### CSS

```css
p {
  height: 7em;
  background: #ff9;
  columns: 3;
  column-rule: 1px solid;
}

p.fill-auto {
  column-fill: auto;
}

p.fill-balance {
  column-fill: balance;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Multi-column Layout Module Level 1 # cf |

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

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

**警告:** 仕様上の未解決の問題により、 `column-fill` にはブラウザ－間の相互運用性の問題やバグがあることに注意してください。

特に、 `column-fill: auto` を使用して連続的に段を埋める場合、 Chrome は、段組みコンテナーにブロック方向の寸法 (例: 横書きモードならば高さ) がある場合にのみこの値を参照します。 Firefox は常にこのプロパティを参照するため、寸法がない場合は最初の段をすべての内容物で埋めます。

関連情報
----

* 段組みレイアウト
* `column-count`
* `column-width`


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

scroll-padding-bottom
=====================

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

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

構文
--

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

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

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

### 値

`<length-percentage>`

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

`auto`

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

公式定義
----

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

形式文法
----
```

scroll-padding-bottom =
  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


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

scroll-margin-block
===================

`scroll-margin-block` は一括指定プロパティで、ブロック方向のスクロールマージンを設定します。

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

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

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

* `scroll-margin-block-end`
* `scroll-margin-block-start`
構文
--

```css
/\* <length> 値 \*/
scroll-margin-block: 10px;
scroll-margin-block: 1em 0.5em;

/\* Global values \*/
scroll-margin-block: inherit;
scroll-margin-block: initial;
scroll-margin-block: revert;
scroll-margin-block: unset;
```

### 値

`<length>`

スクロールコンテナーの対応する辺からの距離です。

解説
--

`scroll-margin` の値はこのボックスをスナップポートに割り当てるために使用されるスクロールスナップ領域の定義の張り出し部分を表します。スクロールスナップ領域は、変換された境界ボックスを取り、その矩形の境界ボックス (スクロールコンテナーの座標空間内で軸方向に配置) を割り当てて、指定された張り出し部分を追加することによって決定されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `scroll-margin-block-start`: `0`
* `scroll-margin-block-end`: `0`
 |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `scroll-margin-block-start`: 指定通り
* `scroll-margin-block-end`: 指定通り
 |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

scroll-margin-block =
  <length>{1,2}

```

仕様書
---

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # propdef-scroll-margin-block |

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

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 変数
========================

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

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

* Learn more
* See full compatibility
* Report feedback
接頭辞 `--` が付いたプロパティ名、例えば `--example-name` は、*カスタムプロパティ*を表し、 `var()` 関数を用いて他の宣言の中で使用することができる値を持ちます。

カスタムプロパティは宣言された要素のスコープになり、カスケードに関連します。そのようなカスタムプロパティの値は、カスケードのアルゴリズムによって決められた宣言から取られます。

|  |  |
| --- | --- |
| 初期値 | 本文を参照 |
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | 変数を代入して指定した通り |
| アニメーションの種類 | 離散値 |

構文
--

```css
--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 3px 6px rgb(20, 32, 54);
```

`<declaration-value>`

この並びに許可されていないトークンが含まれていない限り、この値は 1 つ以上のトークンの並びに一致します。つまり、有効な宣言がその値として保持できるものすべてを意味します。

**メモ:** カスタムプロパティ名は大文字・小文字の区別があります。 `--my-color` は `--My-color` とは別なカスタムプロパティとして扱われます。

### 形式文法

Error: could not find syntax for this item例
-

### HTML

```html
<p id="firstParagraph">この段落は青色の背景で黄色のテキストとなります。</p>
<p id="secondParagraph">この段落は黄色の背景で青色のテキストとなります。</p>
<div id="container">
  <p id="thirdParagraph">この段落は緑色の背景で黄色のテキストとなります。</p>
</div>
```

### CSS

```css
:root {
  --first-color: #16f;
  --second-color: #ff7;
}

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

#secondParagraph {
  background-color: var(--second-color);
  color: var(--first-color);
}

#container {
  --first-color: #290;
}

#thirdParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Custom Properties for Cascading Variables Module Level 1 # defining-variables |

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

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

関連情報
----

* CSS 変数の使用
* `var()` 関数


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

CSS 構文
======

**CSS 構文**モジュールは、一般的な用語として、カスケーディングスタイルシート (CSS) の構造と構文について記述しています。 CSS は、ウェブや他の場所での構造化文書（HTML や XML など）のレンダリングを記述するための言語として定義されています。

このモジュールはプロパティ、データ型、関数、アットルールを定義していません。むしろ、これらの機能すべてがどのように定義されるべきか、そしてユーザーエージェントがどのように CSS を構文解析すべきかを詳しく説明しています。

### アットルール

* なし

**メモ:** このモジュールは、 `@charset` は実際のアットルールではなく、スタイルシートが文法チェックされるときに省略されるべき認識されない古いルールであると明示しています。

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

### 主要概念

* `アットルール`
* 文字エスケープ
* CSS コメント
* CSS 宣言
* CSS 宣言ブロック
* CSS 関数
* 無効なもの
* スタイルルール
### 用語集の用語

* CSS 記述子
* 構文解析
* スタイルシート
* ホワイトスペース
ガイド
---

構文

CSS 宣言、宣言ブロック、ルールセット、文などの CSS 構文の概要です。

値の定義構文

CSS プロパティと関数の有効な値を定義するための正式な文法を、意味づけ制約とともに説明します。 CSS の成分値の型、結合子、乗算子を理解するためのガイドです。

CSS 構文のエラー処理

ユーザーエージェントが不正な CSS を処理する方法の概要です。

CSS 第一歩の学習: CSS の構文

CSS の構文入門を含む CSS 入門ガイドです。

関連概念
----

CSS セレクターモジュール:

* CSS 詳細度

CSS カスケードモジュール:

* `@import` アットルール
* `important` フラグ
* 初期値
* 計算値
* 使用値
* 実効値
* CSS 継承
* CSS プロパティ

変数のカスケードのための CSS カスタムプロパティモジュール:

* カスタムプロパティ (`--*`)
* `var()` 関数

CSS 条件付きルール モジュール:

* `@media` アットルール
* `@supports` アットルール

CSS オブジェクトモデル (CSSOM) API:

* `cssText` プロパティ
* `insertRule(rule)` メソッド
* `replace(text)` メソッド

WHATWG 仕様書:

* `<style>` 要素
* `<link>` 要素
* `class` 属性
* `rel` 属性
仕様書
---

| Specification |
| --- |
| Unknown specification  |

関連情報
----

* CSS セレクターモジュール
* CSS 値と単位モジュール


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

scroll-timeline-name
====================

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

**`scroll-timeline-name`** は CSS のプロパティで、スクロール可能な要素（*スクローラー*）を上下（または左右）にスクロールすることで進行する名前付きスクロール進行タイムラインの名前を定義するために使用します。 `scroll-timeline-name` はタイムラインを提供するスクローラーに設定します。

この名前はその後、 `animation-timeline` 宣言で参照され、スクロールアクションを通してアニメーションの進行を使用するコンテナーの要素を示します。

**メモ:** 要素が軸方向の寸法においてそのコンテナーをオーバーフローしない場合、またはオーバーフローが非表示またはクリップされる場合、タイムラインは作成されません。

`scroll-timeline-axis` および `scroll-timeline-name` プロパティは `scroll-timeline` 一括指定プロパティを使用して設定することもできます。

構文
--

```css
scroll-timeline-name: none;
scroll-timeline-name: --custom_name_for_timeline;
```

### 値

`scroll-timeline-name` で許可されている値は次の通りです。

`none`

このタイムラインには名前がありません。

`<dashed-ident>`

Aスクロール進行タイムラインの名前を定義する任意のカスタム識別子で、 `animation-timeline` プロパティで参照することができます。

**メモ:** `<dashed-ident>` の値は `--` から始める必要があり、これによって CSS の標準キーワードとの名前の衝突を避けることができます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | スクロールコンテナー |
| 継承 | なし |
| 計算値 | `none` または識別子の順序付きリスト |
| アニメーションの種類 | アニメーション不可 |

形式文法
----
```

scroll-timeline-name =
  [ none | <dashed-ident> ]#

```

例
-

### 名前付きスクロール進行タイムラインのアニメーションの作成

 この例では、`--squareTimeline` という名前のスクロールタイムラインを `container` という ID の要素に `scroll-timeline-name` プロパティを使用して定義しています。
 これを `#square` 要素のアニメーションに適用するには、 `animation-timeline: --squareTimeline` を使用します。

#### HTML

この例の HTML は次の通りです。

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

#### CSS

コンテナー用の CSS では、`--squareTimeline` という名前のスクロールタイムラインのソースとして、`scroll-timeline-name` プロパティを使用して設定します。既定で縦軸を使用するので、スクロールバー軸は定義しません。

コンテナーの高さは `300px` に設定し、コンテナーがはみ出した場合は垂直スクロールバーを作成するように設定します（下記の `stretcher` 要素の CSS `height` ルールはコンテンツをコンテナーからはみ出させます）。

```css
#container {
  height: 300px;
  overflow-y: scroll;
  scroll-timeline-name: --squareTimeline;
  position: relative;
}
```

下記の CSS は `animation-timeline` プロパティで指定されたタイムラインに従って回転する正方形を定義しています（このプロパティは上記の `--squareTimeline` タイムラインに設定されています）。

```css
#square {
  background-color: deeppink;
  width: 100px;
  height: 100px;
  margin-top: 100px;
  animation-name: rotateAnimation;
  animation-duration: 1ms; /\* Firefox では、アニメーションを適用するために必要 \*/
  animation-timeline: --squareTimeline;
  position: absolute;
  bottom: 0;
}

#stretcher {
  height: 600px;
  background: #dedede;
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
```

`stretcher` の CSS ルールでは、ブロックの高さを `600px` に設定します。これにより、コンテナー要素をはみ出すコンテンツが作成され、スクロールバーが作成されます。
 この要素がなければ、コンテナーからコンテンツがはみ出さないので、スクロールバーが存在せず、したがってアニメーションタイムラインに関連付けるスクロールタイムラインも存在しません。

#### 結果

垂直バーをスクロールすると、正方形がアニメーションします。

仕様書
---

| Specification |
| --- |
| Scroll-driven Animations # scroll-timeline-name |

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

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

関連情報
----

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


CSS 条件付き規則 - CSS: カスケーディングスタイルシート

CSS 条件付き規則
==========

**CSS 条件付き規則** (CSS Conditional Rules) は CSS のモジュールの一つで、プロセッサーの能力やスタイルシートが適用される文書の条件などに基づいて一連の規則を定義することができます。

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

### アットルール

* `@document`
* `@media`
* `@supports`
* `@import`
仕様書
---

| Specification |
| --- |
| CSS Conditional Rules Module Level 5  |
| CSS Conditional Rules Module Level 4  |
| CSS Conditional Rules Module Level 3  |

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

### `@document` ルール

{{Compat}}### `@import` ルール

{{Compat}}### `@media` ルール

{{Compat}}### `@supports` ルール

{{Compat}}


一括指定プロパティ - CSS: カスケーディングスタイルシート

一括指定プロパティ
=========

**一括指定プロパティ** (shorthand property) は、他の幾つかの CSS プロパティを一度に設定できる CSS プロパティです。一括指定プロパティを用いると、もっと簡単に (そして普通はもっと読みやすく) スタイルシートが書け、時間や労力を節約することができます。

CSS 仕様書では、同じ主題に作用する共通のプロパティの定義をグループ化するために、一括指定プロパティを定義しています。例えば、 `background` プロパティは `background-color`、 `background-image`、 `background-repeat`、`background-position` の値を定義することができる一括指定プロパティです。同様に、フォントに関連したプロパティは一括指定の `font` を使用して定義することができ、ボックスの周囲のマージンは一括指定の `margin` を使用して定義することができます。

注意するべき場合
--------

一括指定プロパティを使用する際には、いくつかの留意すべきエッジケースがあります。

### プロパティの省略

指定されなかった値は初期値に設定されます。つまり、以前設定した値を**上書き**することになります。例を見てください。

```css
p {
  background-color: red;
  background: url(images/bg.gif) no-repeat left top;
}
```

この場合、背景の色は `red` ではなく、 `background-color` の既定値である `transparent` に設定されます。

継承 (inherit) は個別プロパティのみで行うことができます。一括指定では欠けている値が初期値に置き換えられるため、省略することで個別のプロパティを継承させることはできません。 `inherit` キーワードをプロパティに適用することはできますが、全体に対して適用できるのみで、 1 つ 1 つに対するキーワードではありません。つまり、いくつか特定の値のみを継承させたい場合は、個別指定 (longhand) プロパティで `inherit` キーワードを指定するしかありません。

### プロパティの順序

一括指定プロパティは、置き換えるプロパティの指定順序をなるべく強制しないようにしています。ただしこれは、順序が重要ではないとき、プロパティがそれぞれ異なる型の値を使用する場合はうまく機能しますが、いくつかのプロパティが同じ値を持つことができるときは簡単ではありません。このような場合の扱い方は、いくつかに分類されます。

ここで重要なのは 2 つのケースです。

* `border-style`, `margin`, `padding` など、ボックスの辺に関連したプロパティ。
* `border-radius` のように、ボックスの角に関連するプロパティ

#### ボックスの辺

ボックスの境界に関するプロパティを扱う一括指定 (`border-style`, `margin`, `padding`) は、それぞれの辺を表すために、一貫して 1 ～ 4 つの値の構文を使用します。

* **値 1 つの構文:** `border-width: 1em` — 1 つの値ですべての辺を表します。
 ![Box edges with one-value syntax](/ja/docs/Web/CSS/Shorthand_properties/border1.png)
* **値 2 つの構文:** `border-width: 1em 2em` — 最初の値は垂直、すなわち上下の辺を、次の値は水平、すなわち左右の辺を表します。
 ![Box edges with two-value syntax](/ja/docs/Web/CSS/Shorthand_properties/border2.png)
* **値 3 つの構文:** `border-width: 1em 2em 3em` — 最初の値は上辺、 2 番目の値は水平、すなわち左右の辺、 3 番目の値は下辺を表します。
 ![Box edges with three-value syntax](/ja/docs/Web/CSS/Shorthand_properties/border3.png)
* **値 4 つの構文:** `border-width: 1em 2em 3em 4em` — 4 つの値がそれぞれ上、右、下、左の辺を表し、これは上を起点に時計回りの順です。
 ![Box edges with four-value syntax](/ja/docs/Web/CSS/Shorthand_properties/border4.png) Top-Right-Bottom-Left の頭文字は、 *trouble* の子音 TRBL の順と一致します。また、時計の上で針が回転する順番として覚えることもできます。 `1em` は 12 時の位置で始まり、 3 時の位置で `2em`、それから 6 時の位置で `3em`、そして 9 時の位置で `4em` です。

#### ボックスの角

同様に、ボックスの角に関する一括指定プロパティ (`border-radius` など) は、それぞれの角を表すために一貫して 1 ～ 4 つの値を使用します。

* **値 1 つの構文:** `border-radius: 1em` — 1 つの値がすべての角を表現します。
 ![Box corners with one-value syntax](/ja/docs/Web/CSS/Shorthand_properties/corner1.png)
* **値 2 つの構文:** `border-radius: 1em 2em` — 最初の値は左上と右下の角、 2 番目の値は右上と左下の角を表します。
 ![Box corners with two-value syntax](/ja/docs/Web/CSS/Shorthand_properties/corner2.png)
* **値 3 つの構文:** `border-radius: 1em 2em 3em` — 最初の値は左上、 2 番目の値は右上と左下、 3 番目の値は右下の角をそれぞれ表します。
 ![Box corners with three-value syntax](/ja/docs/Web/CSS/Shorthand_properties/corner3.png)
* **値 4 つの構文:**
`border-radius: 1em 2em 3em 4em` — 4 つの値がそれぞれ左上、右上、右下、左下を表し、これは左上を起点にした時計回りの順です。
 ![Box corners with four-value syntax](/ja/docs/Web/CSS/Shorthand_properties/corner4.png)
background プロパティ
----------------

以下のようなプロパティを持つ背景を考えてみましょう。

```css
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: left top;
```

この 4 つの宣言は、たった 1 つに短縮することができます。

```css
background: #000 url(images/bg.gif) no-repeat left top;
```

(一括指定の形式は、実際は上記の個別指定に加えて、 `background-attachment: scroll` や、 CSS3 ではいくつかの追加プロパティと等価になります。)

CSS3 のプロパティを含む詳しい情報は、 `background` をご覧ください。

font プロパティ
----------

以下のような宣言を考えてみましょう。

```css
font-style: italic;
font-weight: bold;
font-size: 0.8em;
line-height: 1.2;
font-family: Arial, sans-serif;
```

この 5 つの発言は、以下のように短くまとめることができます。

```css
font:
  italic bold 0.8em/1.2 Arial,
  sans-serif;
```

この一括指定宣言は、実際には上記の個別指定宣言に加えて、 `font-variant: normal` と `font-size-adjust: none` (CSS2.0 / CSS3), `font-stretch: normal` (CSS3) と等価になります。

border プロパティ
------------

境界の幅、色、スタイルについては 1 つの宣言にまとめることができます。例えば、以下の CSS を考えてみてください。

```css
border-width: 1px;
border-style: solid;
border-color: #000;
```

これは、以下のように簡略化できます。

```css
border: 1px solid #000;
```

margin プロパティと padding プロパティ
---------------------------

`margin` と `padding` の一括指定も同様に動作します。 `margin` プロパティでは、1 つ、2 つ、3 つ、または 4 つの値を使用して短縮値を指定することができます。以下の CSS 宣言はを考えてみてください。

```css
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
```

これらは以下の値 4 つの一括指定を使用した宣言と同じです。なお、値は上から始まって時計回りに、上、右、下、左の順になります (TRBL、 "trouble" の子音)。

```css
margin: 10px 5px 10px 5px;
```

マージンの値 1 つ、 2 つ、 3 つ、 4 つの一括指定宣言は次の通りです。

* 値が **1 つ**指定された場合、**全 4 辺**に同じマージンが適用される。
* 値が **2 つ**指定された場合、 1 つ目のマージンは**上下**、 2 つ目は**左右**の辺に適用される。
* 値が **3 つ**指定された場合、 1 つ目のマージンは**上**、 2 つ目は**左右**、 3 つ目は**下**の辺に適用される。
* 値が **4 つ**指定された場合、マージンはそれぞれ**上**、**右**、**下**、**左**の順 (時計回り) に適用される。
全体一括指定プロパティ
-----------

CSS は全体の一括指定プロパティとして `all` を提供しており、値を文書中のすべてのプロパティに適用させます。これは、プロパティの継承モデルを変更するためのものです。

CSS の継承がどのように動作するかについての詳細については、カスケードと継承または CSS カスケード入門をご覧ください。

関連情報
----

* CSS の主要概念:
    + CSS の構文
    + アットルール
    + コメント
    + 詳細度
    + 継承
    + ボックスモデル
    + レイアウトモード
    + 視覚整形モデル
    + マージンの相殺
    + 値
        - 初期値
        - 計算値
        - 使用値
        - 実効値
    + 値の定義構文
    + 置換要素
* 一括指定プロパティ: `all`, `animation`, `background`, `border`, `border-block-end`, `border-block-start`, `border-bottom`, `border-color`, `border-image`, `border-inline-end`, `border-inline-start`, `border-left`, `border-radius`, `border-right`, `border-style`, `border-top`, `border-width`, `column-rule`, `columns`, `flex`, `flex-flow`, `font`, `gap`, `grid`, `grid-area`, `grid-column`, `grid-row`, `grid-template`, `list-style`, `margin`, `mask`, `offset`, `outline`, `overflow`, `padding`, `place-content`, `place-items`, `place-self`, `scroll-margin`, `scroll-padding`, `text-decoration`, `text-emphasis`, `transition`


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

box-ordinal-group
=================

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

**警告:** これはオリジナルの CSS フレックスボックスレイアウトモジュールの草稿のプロパティで、より新しい標準に置き換えられました。現在の標準についての情報はフレックスボックスを参照してください。

**`box-ordinal-group`** は CSS のプロパティで、フレックスボックスの子要素を順序付きグループに割り当てます。

```css
/\* <integer> 値 \*/
box-ordinal-group: 1;
box-ordinal-group: 5;

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

順序付きグループは、ボックスの直接の子が現れる順序を制御するために、 `box-direction` プロパティとの組み合わせで使用されることがあります。 `box-direction` の計算値が normal である場合、ボックスは小さい番号が付いた順序付きグループから要素を表示し、それらの要素がコンテナーの左 (水平ボックスの場合) または上端 (垂直ボックスの場合) に現れます。同じ順序付きグループの要素は、ソースの文書ツリーに現れる順序で流れます。逆の方向では、順序付きグループは要素が逆に現れた場合を除き、順序付きグループは同じ順序で現れようとします。

構文
--

`box-ordinal-group` プロパティは任意の正の `<integer>` で指定されます。

公式定義
----

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

形式文法
----

Error: could not find syntax for this item例
-

### 基本的な使用方法の例

古いバージョンの仕様では、 `box-ordinal-group` はフレックスコンテナー内の子の表ジュ順序を変更するために含まれていました。

```css
article:nth-child(1) {
  -webkit-box-ordinal-group: 2
  -moz-box-ordinal-group: 2
  box-ordinal-group: 2
}

article:nth-child(2) {
  -webkit-box-ordinal-group: 1
  -moz-box-ordinal-group: 1
  box-ordinal-group: 1
}
```

現在のフレックスボックスの同等の機能は `order` です。

仕様書
---

どの仕様書にも含まれていません。

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

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

関連情報
----

* `box-flex`
* `box-flex-group`
* `box-pack`


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

text-emphasis-style
===================

**`text-emphasis-style`** は CSS のプロパティで、圏点の表示を設定します。設定やリセットに一括指定の `text-emphasis` を使用することもできます。

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

構文
--

```css
/\* 初期値 \*/
text-emphasis-style: none; /\* 圏点なし \*/

/\* <string> 値 \*/
text-emphasis-style: "x";
text-emphasis-style: "点";
text-emphasis-style: "\25B2";
text-emphasis-style: "\*";
text-emphasis-style: "foo"; /\* 使用するべきではない。計算されるか 'f' のみが表示される \*/

/\* キーワード値 \*/
text-emphasis-style: filled;
text-emphasis-style: open;
text-emphasis-style: dot;
text-emphasis-style: circle;
text-emphasis-style: double-circle;
text-emphasis-style: triangle;
text-emphasis-style: filled sesame;
text-emphasis-style: open sesame;

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

### 値

`none`

圏点なし。

`filled`

図形は単色で塗りつぶされます。 `filled` も `open` も指定されない場合は、これが既定値です。

`open`

図形は中抜きになります。

`dot`

記号として小さな円を表示します。 filled dot は `'•'` (`U+2022`)、 open dot は `'◦'` (`U+25E6`) です。

`circle`

記号として大きな円を表示します。 filled circle は `'●'` (`U+25CF`)、 open circle は `'○'` (`U+25CB`) です。

`double-circle`

記号として二重丸を表示します。 filled double-circle は `'◉'` (`U+25C9`)、 open double-circle は `'◎'` (`U+25CE`) です。

`triangle`

記号として三角形を表示します。 filled triangle は `'▲'` (`U+25B2`)、 open triangle は `'△'` (`U+25B3`) です。

`sesame`

記号としてゴマを表示します。 filled sesame は `'﹅'` (`U+FE45`)、 open sesame は `'﹆'` (`U+FE46`) です。

`<string>`

記号として文字列を表示します。`<string>` には 1 *文字*を超える文字列を指定しないでください。ユーザーエージェントは、2 文字以上の書記素クラスターから構成される文字列を短縮したり無視したりする可能性があります。

公式定義
----

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

形式文法
----
```

text-emphasis-style =
  none                                                |
  [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ]  |
  <string>

```

例
-

### 基本的な例

```css
h2 {
  -webkit-text-emphasis-style: sesame;
  text-emphasis-style: sesame;
}
```

仕様書
---

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-emphasis-style-property |

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

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

関連情報
----

* 関連プロパティ: `text-emphasis-color`, `text-emphasis`
* 圏点の位置の定義を可能にする `text-emphasis-position` プロパティ