CSS ボックス配置 - CSS: カスケーディングスタイルシート

CSS ボックス配置
==========

CSS ボックス配置 (CSS Box Alignment) モジュールは、ブロックレイアウト、表レイアウト、フレックスレイアウト、グリッドレイアウトなどの様々な CSS ボックスレイアウトにおける、ボックスの配置に関する機能を定義します。このモジュールは CSS 全体において一貫性のある配置方法を作成することを目指しています。この文書はこの仕様書にある全般的な概念を解説します。

**メモ:** ボックス配置がどのように適用されるかは、各レイアウト方式のドキュメントに詳しく記載されています。

古い配置方法
------

CSS は伝統的に、配置機能がとても制約されていました。`text-align` を使用してテキストの配置を指定したり、`margin` に auto を使用してブロックを中央揃えしたり、`vertical-align` を使用して表やインラインブロックをレイアウトしたりしていました。テキストの配置はインラインレイアウトおよび CSS テキストモジュールによってカバーされるようになり、ボックス配置の初期に、完全な水平方向と垂直方向の配置の機能を持ちました。

先にフレックスボックスを学んでいるのであれば、これらのプロパティはフレックスボックスの仕様の一部と思うかもしれませんし、一部のプロパティは実際に、フレックスボックスのレベル 1 に並べられています。しかし仕様書では、現在フレックスボックスにある以上の追加の機能が追加される可能性があるため、ボックス配置仕様書を参照するよう注記しています。

基本的な例
-----

次の例は、ボックス配置のプロパティの一部がグリッドとフレックスボックスにどのように適用されるかを示しています。

CSS グリッドレイアウトの配置の例
------------------

グリッドレイアウトを使用したこの例では、固定幅のグリッドトラックをインライン (主) 軸上にレイアウトした後に、グリッドコンテナー内に余分な空間が残っています。この空間は `justify-content` を使って分配されます。ブロック (交差) 軸上では、グリッド領域内のアイテムの配置は `align-items` で制御されます。最初のアイテムは `align-self` を `center` に設定して、グループに設定された `align-items` 値を上書きしています。

### フレックスボックスの配置の例

この例では、3 つのフレックスアイテムが `justify-content` を使用して主軸上に配置され、 `align-items` を使用して交差軸上に配置されています。 最初のアイテムはグループに設定された `align-items` を、 `align-self` を `center` に設定することで上書きしています。

主要概念と用語
-------

この仕様書では、個別のレイアウト方式の実装以外でこれらの整列プロパティを簡単に説明できるように、整列に関する用語を詳しく説明しています。すべてのレイアウト方式に共通する、いくつかの重要な概念もあります。

書字方向との関連
--------

配置は書字方向と結びついており、アイテムを配置するとき、物理的な寸法である上下左右に配置するかどうかを考慮しません。代わりに、作業している特定の方向の先頭や末尾によって配置を記述します。これにより、これにより、文書がどのような書字方向であっても、配置が同じように動作することを保証します。

### 二次元の配置

ボックス配置プロパティを使用すると、コンテンツは 2 本の軸 — インライン (主) 軸、およびブロック (交差) 軸 — のうちの 1 本の上に配置されます。インライン軸は書字方向が使用され、文の語がこの軸に沿って流れます。 — 例えば英語では、インライン軸は水平です。ブロック軸は、段落要素などのブロックの方向の軸で、インライン軸と交差する向きにレイアウトされます。

![](/ja/docs/Web/CSS/CSS_box_alignment/two-axes.png)

インライン軸上でアイテムを整列するときは、 `justify-` で始まるプロパティを使用します。

* `justify-items`
* `justify-self`
* `justify-content`

ブロック軸上でアイテムを整列するときは、 `align-` で始まるプロパティを使用します。

* `align-items`
* `align-self`
* `align-content`

フレックスボックスはさらに複雑であり、上記のことが言えるのは `flex-direction` が `row` に設定されている場合です。フレックスボックスが `column` に設定されている場合、プロパティは逆になります。したがって、フレックスボックスを使用するときは、インライン軸とブロック軸よりも、主軸と交差軸について考えるほうが簡単です。`justify-` プロパティは常に主軸上で、`align-` プロパティは交差軸上で配置するために使用されます。

### 配置対象物

**配置対象物** (alignment subject) とは、配置が行われるもののことです。`justify-self` または `align-self` の場合、あるいは `justify-items` または `align-items` によってこれらの値をグループとして設定する場合に、このプロパティが使用されている要素のマージンボックスになります。`justify-content` および `align-content` プロパティはレイアウト方式ごとに異なります。

### 配置コンテナー

**配置コンテナー** (alignment container) は、内側で対象物を整列させるボックスです。これはふつう、配置対象物を包含するブロックになります。配置コンテナーには 1 つまたは多数の配置対象物を含めることができます。

下の画像は、内側に 2 つの配置対象物がある配置コンテナーの例です。

![](/ja/docs/Web/CSS/CSS_box_alignment/align-container-subjects.png)

### 代替配置

実現できない配置を設定した場合、**代替配置**が有効になり、利用可能な空間を扱います。この代替配置はレイアウト方式ごとに個別に定義されており、それぞれのページで詳しく説明されています。

配置の種類
-----

この仕様書が詳述している配置には、3 つの異なる種類があります。これらはキーワード値を使用します。

* **位置指定配置** (Positional alignment): 配置対象物の位置を、配置コンテナーからの相対で指定します。
* **ベースライン配置** (Baseline alignment): これらのキーワードは、配置コンテナー内にある複数の配置対象物のベースラインの関係で配置を定義します。
* **分配配置** (Distributed alignment): これらのキーワードは、配置対象物間の空間の分配で配置を定義します。
### 位置指定配置のキーワード値

以下の値は位置指定配置のために定義されており、`justify-content` および `align-content` による内容の配置、そして `justify-self` および `align-self` による自己配置の値として使用することができます。

* `center`
* `start`
* `end`
* `self-start`
* `self-end`
* `flex-start` フレックスボックスのみ
* `flex-end` フレックスボックスのみ
* `left`
* `right`

画面の物理的な属性に関連する `left` と `right` の物理値を除いて、他のすべての値は論理値であり、内容物の書字方向に関連します。

たとえば、 CSS グリッドレイアウトで作業しているとき、英語で作業していて `justify-content` に `start` を設定すると、アイテムはインライン方向の先頭、すなわち英語の文は左端から始まるので左に移動します。右書きの言語であるアラビア語では、同じ `start` の値は、アラビア語の文がページの右側から始まるので、右に移動します。

どちらの例も `justify-content: start` ですが、開始位置は書字方向によって異なります。

![](/ja/docs/Web/CSS/CSS_box_alignment/writing-mode-start.png)

### ベースライン配置

ベースライン配置キーワードは、配置対象物のグループ間でボックスのベースラインを整列するために使用されます。これらは `justify-content` および `align-content` による内容の配置、そして `justify-self` および `align-self` による自己配置の値として使用することができます。

* `baseline`
* `first baseline`
* `last baseline`

`justify-content` または `align-content` のためのベースライン配置の値を指定するベースラインのコンテンツ配置は、アイテムを行単位で整列するレイアウト方式で機能します。ボックスの内側にパディングを追加することによって、配置対象物のベースラインを相互に揃えます。

ベースラインの自己配置では、ベースラインで配列するために、ボックスの外側にマージンを追加することによってボックスをずらします。自己配置は `justify-self` または `align-self` を使用する場合、あるいは `justify-items` または `align-items` を使用してこれらの値をグループとして設定する場合に行われます。

### 分配配置

**分配配置キーワード** は `align-content` および `justify-content` で使用するプロパティです。これらのキーワードは、配置対象物を描画したあと、残りの空間をどう扱うか定義します。値は以下のとおりです。

* `stretch`
* `space-between`
* `space-around`
* `space-evenly`

たとえばフレックスレイアウトでは、初期値の場合アイテムを `flex-start` で整列します。英語のように水平方向で上から下への書字方向で動作する場合、 `flex-direction` が `row` のときにはアイテムは左端から始まり、アイテムを描画した余白はすべてアイテムの後に配置されます。

![](/ja/docs/Web/CSS/CSS_box_alignment/justify-content-start.png)

フレックスコンテナーに `justify-content: space-between` を設定すると、余白はアイテム間に分配されます。

![](/ja/docs/Web/CSS/CSS_box_alignment/justify-content-space-between.png)

これらのキーワードを有効にするには、アイテムを配置する領域に余白が必要です。余白が存在しないと、分配されることはありません。

配置があふれた場合
---------

`safe` および `unsafe` キーワードは、配置コンテナーより配置対象物のほうが大きい場合の振る舞いを指定します。 `safe` キーワードを指定すると、指定された配置によりあふれが発生する場合、アイテムの一部が境界の外側に出て配置コンテナーがスクロールできないという「データ損失」を防ぐために、 `start` で配置します。

`unsafe` を指定した場合、データ損失が発生する可能性があっても配置が尊重されます。

ボックス間のギャップ
----------

ボックス配置仕様書には、 `gap`, `row-gap`, `column-gap` も含まれています。これらのプロパティは、アイテムが配置されているあらゆるレイアウト方式で、行または列内のアイテム間で一貫したギャップを設定します。

`gap` プロパティは `row-gap` と `column-gap` の一括指定で、以下のプロパティを一度に設定することができます。

* `row-gap`
* `column-gap`
* `gap`

以下の例では、グリッドレイアウトで `gap` の一括指定を使用して、行トラック間に `10px` のギャップと列トラック間に `2em` のギャップを設定します。

**メモ:** 初期のグリッドの実装は `-gap` プロパティに `grid-` 接頭辞を付けていました。すべてのブラウザーが接頭辞なしのプロパティに対応していますが、例やチュートリアルでは古いプロパティである `grid-row-gap`, `grid-column-gap`, `grid-gap` を見かけることがあるかもしれません。接頭辞つきのものは接頭辞なしの物の別名として保持される予定です。

また、スペース配分キーワードを使用したり、アイテムに余白を設けたりすると、表示される視覚的な溝が大きくなる場合がありますので注意してください。

レイアウト別の配置詳細ページ
--------------

CSS ボックス配置のプロパティは、相互作用する仕様に応じて様々な方法で実装されています。レイアウトの種類ごとの使用方法の詳細は、それぞれのページを参照してください。

* フレックスボックスでのボックス配置
* CSS グリッドレイアウトでのボックス配置
* 段組みレイアウトでのボックス配置
* ブロック、絶対配置、表レイアウトのブロック配置
リファレンス
------

CSS プロパティ
---------

* `justify-content`
* `align-content`
* `place-content`
* `justify-items`
* `align-items`
* `place-items`
* `justify-self`
* `align-self`
* `place-self`
* `row-gap`
* `column-gap`
* `gap`
### 用語集の項目

* 交差軸
* 主軸
* 配置コンテナー
* 配置対象物
* 代替配置
ガイド
---

* CSS フレックスボックスガイド: *フレックスボックスの基本概念*
* CSS フレックスボックスガイド: *フレックスコンテナー内のアイテムの配置*
* CSS グリッドガイド: *グリッドレイアウトのボックス配置*
外部リソース
------

* Box alignment cheatsheet
* CSS Grid, Flexbox and Box alignment
* Thoughts on partial implementations of Box alignment


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

overflow
========

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` は CSS の一括指定プロパティで、要素のオーバーフロー時、すなわち、要素の内容が多すぎてブロック整形コンテキストに収まらない場合の望ましい動作を両方向について設定します。

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

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

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

* `overflow-x`
* `overflow-y`
構文
--

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

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

`overflow` プロパティは、以下の値の一覧のうち一つまたは二つのキーワードで指定します。二つのキーワードが指定された場合、最初の値が `overflow-x` で、二つ目の値が `overflow-y` になります。それ以外の場合、 `overflow-x` および `overflow-y` は同じ値に設定されます。

### 値

`visible`

内容はクリッピングされず、パディングボックスの外側に表示されることがあります。

`hidden`

内容は、必要に応じてパディングボックスに合わせて切り取られます。スクロールバーは表示されず、ユーザーがスクロールできるようにするための対応 (ドラッグやスクロールホイールによる方法) もありません。内容はプログラム的に (例えば、 `offsetLeft` のようなプロパティの値を設定する方法などで) スクロールすることが*できます*ので、要素はスクロールコンテナーになります。

`clip`

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

`scroll`

内容は、必要に応じてパディングボックスに合わせて切り取られます。コンテンツが変化したときに、スクロールバーが現れたり消えたりするのを防ぐため、ブラウザーは内容がクリッピングされるかどうかに関わらず、スクロールバーを常に表示します。プリンターはあふれた部分の内容を印刷する可能性があります。

`auto`

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

`overlay`
非推奨

`auto` と同じ動作をしますが、場所を取る代わりに内容の先頭にスクロールバーを表示します。 WebKit ベース (例えば Safari) 及び Blink ベース (例えば Chrome 又は Opera) のブラウザーでのみ対応しています。

#### Mozilla 拡張

`-moz-scrollbars-none`
非推奨

代わりに `overflow: hidden` を使ってください。

`-moz-scrollbars-horizontal`
非推奨

``overflow-x`: scroll` および ``overflow-y`: hidden`、または `overflow: scroll hidden` を代わりに使用してください。

`-moz-scrollbars-vertical`
非推奨

``overflow-x`: hidden` および ``overflow-y`: scroll`、または `overflow: hidden scroll` を代わりに使用してください。

`-moz-hidden-unscrollable`
非推奨

代わりに `overflow: clip` を使用してください。

Firefox 63 において、 `-moz-scrollbars-none`, `-moz-scrollbars-horizontal`, `-moz-scrollbars-vertical` は機能設定で隠されています。 about:config の中で `layout.css.overflow.moz-scrollbars.enabled` を `true` に設定してください。

解説
--

オーバーフローの選択肢としては、クリッピング、スクロールバーの表示、コンテナーの外側にはみ出して周囲の領域に表示するものがあります。

値を (既定値の) `visible` 以外の値に指定すると、新たなブロック整形コンテキストを生成します。これは技術的な理由で必要なものです。そうでなければ、もしスクロールする要素に浮動要素が交差している時、スクロールするごとに強制的に折り返し処理をやり直すことになり、スクロール操作が遅くなる原因になるからです。

`overflow` の効果を得るには、ブロックレベルコンテナーに高さ (`height` または `max-height`) を設定するか、 `white-space` を `nowrap` に設定することが必要です。

一方の軸を`visible` (既定値) に設定して、もう一方を*他の*値に設定すると、 `visible` は `auto` として動作する結果になります。

JavaScript の `Element.scrollTop` プロパティは、 `overflow` が `hidden` に設定されている場合でも HTML 要素をスクロールさせるために使うことができます。

公式定義
----

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

形式文法
----
```

overflow =
  <'overflow-block'>{1,2}

```

例
-

### テキストに様々な overflow の値を設定

#### HTML

```html
<div>
  <code>visible</code>
  <p class="visible">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
    doloremque laudantium.
  </p>
</div>

<div>
  <code>hidden</code>
  <p class="hidden">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
    doloremque laudantium.
  </p>
</div>

<div>
  <code>scroll</code>
  <p class="scroll">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
    doloremque laudantium.
  </p>
</div>

<div>
  <code>auto</code>
  <p class="auto">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
    doloremque laudantium.
  </p>
</div>
```

#### CSS

```css
body {
  display: flex;
  justify-content: space-around;
}

div {
  margin: 1em;
  font-size: 1.2em;
}

p {
  width: 8em;
  height: 5em;
  border: dotted;
}

p.visible {
  overflow: visible;
}

p.hidden {
  overflow: hidden;
}

p.scroll {
  overflow: scroll;
}

p.auto {
  overflow: auto;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* 関連 CSS プロパティ: `text-overflow`, `white-space`, `overflow-x`, `overflow-y`, `overflow-inline`, `overflow-block`, `clip`, `display`
* CSS オーバーフロー および スクロール可能なオーバーフローのデバッグ (en-US)


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

column-gap (grid-column-gap)
============================

**`column-gap`** は CSS のプロパティで、要素の段または列の間の隙間 (溝) の寸法を設定します。

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

当初は段組みレイアウトの一部でしたが、`column-gap` の定義は複数のレイアウト方式を含めるように拡張されました。現在はボックス配置の中で定義され、段組みレイアウト、フレキシブルボックス、グリッドレイアウトで使用されることがあります。

構文
--

```css
/\* キーワード値 \*/
column-gap: normal;

/\* <length> 値 \*/
column-gap: 3px;
column-gap: 2.5em;

/\* <percentage> 値 \*/
column-gap: 3%;

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

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

### 値

`normal`

列間 (段間) にはブラウザー既定の幅が使われます。段組みレイアウトでは `1em` と指定され、他の種類のレイアウトでは 0 になります。

`<length>`

列間 (段間) の寸法を `<length>` として定義します。 `<length>` のプロパティ値は負の数であってはいけません。

`<percentage>`

列間 (段間) の寸法を `<percentage>` として定義します。 `<percentage>` のプロパティ値は負の数であってはいけません。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `normal` |
| 適用対象 | 段組み要素、フレックスコンテナー、グリッドコンテナー |
| 継承 | なし |
| パーセント値 | コンテンツ領域の対応する寸法に対する相対値 |
| 計算値 | 指定通りで、 <length> は絶対長になり、 normal の計算値は段組み要素を除き 0 になる |
| アニメーションの種類 | length または パーセント値, calc(); |

形式文法
----
```

column-gap =
  normal                     |
  <length-percentage [0,∞]>

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

```

例
-

### フレックスレイアウト

#### HTML

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

#### CSS

```css
#flexbox {
  display: flex;
  height: 100px;
  column-gap: 20px;
}

#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: auto;
}
```

#### 結果

### グリッドレイアウト

#### HTML

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

#### CSS

```css
#grid {
  display: grid;
  height: 100px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px;
  column-gap: 20px;
}

#grid > div {
  border: 1px solid green;
  background-color: lime;
}
```

#### 結果

### 段組みレイアウト

#### HTML

```html
<p class="content-box">
  This is some multi-column text with a 40px column gap created with the CSS
  `column-gap` property. Don't you think that's fun and exciting? I sure do!
</p>
```

#### CSS

```css
.content-box {
  column-count: 3;
  column-gap: 40px;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # column-row-gap |
| CSS Grid Layout Module Level 2 # gutters |
| CSS Multi-column Layout Module Level 1 # column-gap |

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

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

関連情報
----

* 関連する CSS プロパティ: `row-gap`, `gap`
* グリッドレイアウトのガイド: グリッドレイアウトの基本概念 - 溝
* 段組みレイアウトのガイド: 段組みのスタイル付け


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

position
========

**`position`** は CSS のプロパティで、文書内で要素がどのように配置されるかを設定します。 `top`, `right`, `bottom`, `left` の各プロパティが、配置された要素の最終的な位置を決めます。

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

構文
--

```css
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

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

### 値

`static`

要素は文書の通常のフローに従って配置されます。 `top`, `right`, `bottom`, `left`, `z-index` プロパティは*効果がありません*。これが既定値です。

`relative`

要素は文書の通常のフローに従って配置され、 `top`, `right`, `bottom`, `left` の値に基づいて*自分自身からの相対*オフセットで配置されます。オフセットは他の要素の配置には影響を与えません。つまり、ページレイアウト内で要素に与えられる空間は、位置が `static` であった時と同じです。

`z-index` の値が `auto` でない場合、新しい重ね合わせコンテキストを生成します。 `table-*-group`, `table-row`, `table-column`, `table-cell`, `table-caption` の要素における効果は未定義です。

`absolute`

要素は文書の通常のフローから除外され、ページレイアウト内にこの要素のための空間が作成されません。この要素に直近の位置指定されている祖先があればそれに対して、そうでなければ、初期の包含ブロックに対して相対配置されます。最終的な位置は `top`, `right`, `bottom`, `left` の値によって決定されます。

この値では、 `z-index` の値が `auto` ではない場合、新しい重ね合わせコンテキストを作成します。絶対位置指定ボックスのマージンは、他の要素のマージンと相殺されません。

`fixed`

要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。要素は最初の包含ブロック（視覚メディア要素の場合はビューポート）から相対的に配置されます。最終的な位置は `top`、`right`、`bottom`、`left` の値によって決まります。

この値は、常に新しい重ね合わせコンテキストを作成します。印刷文書の場合、要素は*各ページ*の同じ位置に配置されます。

`sticky`

要素は文書の通常のフローに従って配置され、*直近のスクロールする祖先*および包含ブロック（直近のブロックレベル祖先、表関連要素を含む）に対して `top`, `right`, `bottom`, `left` の値に基づいて相対配置されます。このオフセットは他の要素の配置には影響を与えません。

この値は、常に新しい重ね合わせコンテキストを生成します。なお粘着要素は、直近の祖先がスクロールしない場合でも、「スクロールの仕組み」を持つ直近の祖先（`overflow` が `hidden`, `scroll`, `auto`, `overlay` として作成されたもの）に「粘着」します。

**メモ:** 要素を粘着させる必要がある軸に対して、少なくとも 1 つの inset プロパティ（`top`, `inset-block-start`, `right`, `inset-inline-end` など）を `auto` 以外の値に設定する必要があります。軸の `inset` プロパティが両方とも `auto` に設定されている場合、その軸では `sticky` 値は `relative` として動作します。

解説
--

### 位置指定の種類

* **位置指定要素** (positioned element) とは、 `position` の計算値が `relative`, `absolute`, `fixed`, `sticky` のいずれかである要素です。 (言い換えれば、 `static` 以外の全てです。)
* **相対位置指定要素** (relatively positioned element) とは、 `position` の計算値が `relative` である要素です。 `top` および `bottom` プロパティは、通常の位置からの垂直方向のオフセットを指定します。 `left` および `right` プロパティは、水平方向のオフセットを指定します。
* **絶対位置指定要素** (absolutely positioned element) とは、 `position` の計算値が `absolute` または `fixed` である要素です。 `top`, `right`, `bottom`, `left` の各プロパティは、この要素の包含ブロックの端からのオフセットを指定します。 (包含ブロックは配置される要素の祖先です。) 要素にマージンがある場合は、オフセットにマージンが追加されます。この要素は内容のために新しい ブロック整形コンテキスト (BFC) を生成します。
* **粘着位置指定要素** (stickily positioned element) とは、 `position` の計算値が `sticky` である要素です。これは包含ブロックがフロールート (またはその中でスクロールするコンテナー) 内の指定されたしきい値 (例えば `top` に設定された auto 以外の値など) を達するまでは相対的な配置として扱われ、包含ブロックの反対の端が来るまでその位置に「粘着」するものとして扱われます。

ほとんどの場合、絶対位置指定要素に `height` および `width` が `auto` が設定されると、内容に合うように大きさが調整されます。しかし、非置換要素で絶対位置指定要素は、 `top` および `bottom` を指定して `height` を指定しない (つまり `auto` の) ままにすることで、利用できる垂直の空間を埋めることができます。同様に、 `left` および `right` を指定して `width` を `auto` のままにすることで、利用できる水平の空間を埋めることができます。

以下に記述された場合を除きます (絶対位置指定要素で利用できる空間を埋める場合)。

* `top` と `bottom` の両方を指定すると (`auto`ではなく)、 `top` が優先されます。
* `left` と `right` の両方を指定すると、 `direction` が `ltr` (英語、横書き日本語、など) の場合は `left` が優先され、 `direction` が `rtl` (ペルシャ語、アラビア語、ヘブライ語、 など)の場合は `right` が優先されます。
アクセシビリティの考慮
-----------

`absolute` または `fixed` の値で配置された要素は、ページがズームしてテキストの大きさを大きくしたら、その他の要素を妨害していないかどうかを確認してください。

* MDN "WCAG を理解する ― ガイドライン 1.4 の解説"
* Visual Presentation: Understanding SC 1.4.8 | Understanding WCAG 2.0
### パフォーマンスとアクセシビリティ

`fixed` または `sticky` を含む要素の内容をスクロールすると、パフォーマンスやアクセシビリティの問題を引き起こす可能性があります。ユーザーがスクロールする際、ブラウザーは sticky や fixed のコンテンツを新しい場所に再描画しなければなりません。再描画する必要があるコンテンツ、ブラウザーの性能や、端末の処理速度によっては、ブラウザーは 60 fps で再描画を管理することができず、敏感な人々にアクセシビリティの問題を起こし、誰からも汚く見えることになります。一つの解決方法として、位置指定要素に `will-change: transform` を追加して要素を独自のレイヤーで描画させるようにすると、再描画の速度が上がり、性能問題やアクセシビリティを改善することができます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `static` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
| 重ね合わせコンテキストの生成 | あり |

形式文法
----
```

position =
  static       |
  relative     |
  absolute     |
  sticky       |
  fixed        |
  <running()>

<running()> =
  running( <custom-ident> )

```

例
-

### 相対位置指定

相対位置指定の要素は文書中の通常の配置から、指定された量だけオフセットしますが、ほかの要素にはオフセットの影響を与えません。以下の例では、 "Two" が通常の位置に空間を得ているように他の要素が配置されることに注意してください。

#### HTML

```html
<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>
```

#### CSS

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

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}
```

### 絶対位置指定

相対位置指定の要素も、文書の通常のフローの中に配置されます。それに対して、絶対位置指定の要素はフローから除外されます。つまり、他の要素はこの要素が存在しないかのように配置されます。絶対位置指定の要素は*配置された直近の祖先*（つまり、 `static` ではない直近の祖先) に対して相対的に配置されます。配置された祖先がない場合は、 ICB (initial containing block — W3C の定義も参照）すなわち文書のルート要素の包含ブロックに対する相対的な配置になります。

#### HTML

```html
<h1>Absolute positioning</h1>

<p>
  I am a basic block level element. My adjacent block level elements sit on new
  lines below me.
</p>

<p class="positioned">
  By default we span 100% of the width of our parent element, and we are as tall
  as our child content. Our total width and height is our content + padding +
  border width/height.
</p>

<p>
  We are separated by our margins. Because of margin collapsing, we are
  separated by the width of one of our margins, not both.
</p>

<p>
  inline elements <span>like this one</span> and <span>this one</span> sit on
  the same line as one another, and adjacent text nodes, if there is space on
  the same line. Overflowing inline elements
  <span>wrap onto a new line if possible — like this one containing text</span>,
  or just go on to a new line if not, much like this image will do:
  <img src="long.jpg" />
</p>
```

#### CSS

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

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}
```

#### 結果

### 固定位置指定

固定位置指定は絶対位置指定に似ていますが、要素の包含ブロックが*ビューポート*によって定義される初期包含ブロックであるという点が異なり、祖先の一つに `transform`, `perspective`, `filter` の何れかのプロパティが `none` 以外 (CSS Transforms Spec を参照) に設定されている場合は例外で、その場合は祖先が包含ブロックとしてふるまいます。これはよく、ページをスクロールしても同位置に留まり続けるような「浮く」要素 ("floating" element) を作るのに使われます。下の例ではボックス "One" はページの上から 80px、左から 10px の位置に固定されます。スクロールしても、ビューポートに対して同じ位置に留まり続けます。また、 `will-change` プロパティに `transform` を設定すると、新しい包含ブロックが設定されます。

#### HTML

```html
<div class="outer">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
    eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
    et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
    laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut
    arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam
    sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem
    aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id
    maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam
    finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id
    ultrices ultrices, tempor et tellus.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
    eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
    et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
    laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut
    arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam
    sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem
    aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id
    maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam
    finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id
    ultrices ultrices, tempor et tellus.
  </p>
  <div class="box" id="one">One</div>
</div>
```

#### CSS

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

.box {
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#one {
  position: fixed;
  top: 80px;
  left: 10px;
  background: blue;
}

.outer {
  width: 500px;
  height: 300px;
  overflow: scroll;
  padding-left: 150px;
}
```

#### 結果

### 粘着位置指定

粘着位置指定は、直近のスクロールする祖先がビューポート内にある場合に、相対位置指定と固定位置指定を組み合わせたものです。粘着位置指定された要素は、指定したしきい値に達するまでは相対位置指定として、しきい値に達したら固定位置指定として扱われます。例えば次のようになっていたとします。

```css
#one {
  position: sticky;
  top: 10px;
}
```

上記の CSS ルールはは、ビューポートをスクロールして要素の位置が上端から 10px より小さくなるまでは、相対位置指定の要素としてふるまいます。それ以降はしきい値を超えるほどビューポートのスクロールを戻すまで、上端から 10px で固定位置指定になります。

粘着位置指定は一般的に、アルファベット順や五十音順のリストの見出しに使用されます。見出し A の項目をスクリーン外にスクロールするまで、見出し B は A の項目の後ろに表示されています。見出し B はコンテンツの残りの部分とともにスクリーン外に移動するのではなく、見出し B のすべての項目をスクリーン外にスクロールして見出し C に含まれる部分に達するまで、ビューポートの上部に固定されます。

粘着位置指定を想定したとおりに動作させるためには、 `top`, `right`, `bottom`, `left` のうち少なくとも一つでしきい値を指定しなければなりません。しきい値を指定しなければ、相対位置指定との違いがなくなるでしょう。

#### HTML

```html
<dl>
  <div>
    <dt>A</dt>
    <dd>Andrew W.K.</dd>
    <dd>Apparat</dd>
    <dd>Arcade Fire</dd>
    <dd>At The Drive-In</dd>
    <dd>Aziz Ansari</dd>
  </div>
  <div>
    <dt>C</dt>
    <dd>Chromeo</dd>
    <dd>Common</dd>
    <dd>Converge</dd>
    <dd>Crystal Castles</dd>
    <dd>Cursive</dd>
  </div>
  <div>
    <dt>E</dt>
    <dd>Explosions In The Sky</dd>
  </div>
  <div>
    <dt>T</dt>
    <dd>Ted Leo & The Pharmacists</dd>
    <dd>T-Pain</dd>
    <dd>Thrice</dd>
    <dd>TV On The Radio</dd>
    <dd>Two Gallants</dd>
  </div>
</dl>
```

#### CSS

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

dl > div {
  background: #fff;
  padding: 24px 0 0 0;
}

dt {
  background: #b8c1c8;
  border-bottom: 1px solid #989ea4;
  border-top: 1px solid #717d85;
  color: #fff;
  font:
    bold 18px/21px Helvetica,
    Arial,
    sans-serif;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}

dd {
  font:
    bold 20px/45px Helvetica,
    Arial,
    sans-serif;
  margin: 0;
  padding: 0 0 0 12px;
  white-space: nowrap;
}

dd + dd {
  border-top: 1px solid #ccc;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Positioned Layout Module Level 3 # position-property |

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

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

関連情報
----

* CSS の学習: 位置指定


fit-content() - CSS: カスケーディングスタイルシート

fit-content()
=============

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

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

* Learn more
* See full compatibility
* Report feedback
**`fit-content()`** は CSS の関数で、指定された寸法を `min(最小サイズ, max(最小サイズ, 引数))` の式に従って有効な範囲の寸法に収めます。

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

この関数は CSS グリッドのプロパティにおいて、トラックの寸法を `max-content` で定義された最大寸法と `auto` で定義された最小寸法との間で、 `auto` と似た方法（すなわち `minmax(auto, max-content)`）で計算しますが、 `auto` の最小値よりも大きい場合は*引数*がトラックの寸法になるという点が異なります。

`max-content` および `auto` キーワードについての詳細は、 `grid-template-columns` ページを参照してください。

`fit-content()` 関数は `width`, `height`, `min-width`, `min-height`, `max-width`, `max-height` のレイアウトボックスの寸法としても使用され、最大寸法は内容物の最大寸法、最小寸法は内容物の最小寸法になります。

構文
--

引数として `<length>` または `<percentage>` を受け付ける関数です。

```css
/\* <length> 値 \*/
fit-content(200px)
fit-content(5cm)
fit-content(30vw)
fit-content(100ch)

/\* <percentage> 値 \*/
fit-content(40%)
```

### 値

`<length>`

絶対的な長さです。

`<percentage>`

指定された軸で有効な空間に対する相対的なパーセント値です。

グリッドプロパティでは、行トラックにおける列内のグリッドコンテナーのインライン方向の寸法およびグリッドコンテナーのブロック方向の寸法の相対値です。それ以外では、書字方向に応じてレイアウトボックスの有効なインライン方向の寸法またはブロック方向の寸法に対する相対値になります。

例
-

### グリッドカラムの大きさを fit-content で指定

#### HTML

```html
<div id="container">
  <div>コンテンツの幅のアイテム。</div>
  <div>
    テキストが多いアイテムです。コンテンツが最大幅より広いため、 300 ピクセルで固定されています。
  </div>
  <div>柔軟なアイテム</div>
</div>
```

#### CSS

```css
#container {
  display: grid;
  grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # sizing-values |

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

### css.properties.grid-template-columns.fit-content

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

### css.properties.width.fit-content\_function

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

関連情報
----

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


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

::view-transition-new
=====================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

**`::view-transition-new`** は CSS の擬似要素で、ビュートランジションの「新しい」ビュー状態を表します。これは新しいビューのライブ表現で、トランジションの後を表します。

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

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

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

```css
@keyframes -ua-view-transition-fade-in {
  from {
    opacity: 0;
  }
}

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

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

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

構文
--

```css
::view-transition-new(<pt-name-selector>) {
  /\* ... \*/
}
```

`<pt-name-selector>` は以下の値のうちのいずれかです。

`*`

擬似要素が、すべてのビュートランジショングループに一致するようにします。

`root`

擬似要素が、ページ全体のビュートランジションを含むためにユーザエージェントによって作成された既定の `root` ビュートランジショングループに一致するようにします。すなわち、 `view-transition-name` プロパティによって自分自身を固有のビュートランジショングループに割り当てていない要素を意味します）。

`<custom-ident>`

擬似要素が、指定された `<custom-ident>` を `view-transition-name` プロパティを通して要素に割り当てることによって作成された固有のビュートランジショングループに一致するようにします。

例
-

```css
figcaption {
  view-transition-name: figure-caption;
}

@keyframes grow-x {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes shrink-x {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

::view-transition-old(figure-caption),
::view-transition-new(figure-caption) {
  height: auto;
  right: 0;
  left: auto;
  transform-origin: right center;
}

::view-transition-old(figure-caption) {
  animation: 0.25s linear both shrink-x;
}

::view-transition-new(figure-caption) {
  animation: 0.25s 0.25s linear both grow-x;
}
```

仕様書
---

| Specification |
| --- |
| CSS View Transitions Module Level 1 # ::view-transition-new |

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

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

関連情報
----

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


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

text-emphasis
=============

**`text-emphasis`** は CSS のプロパティで、 (空白や制御文字を除く) テキストに圏点を適用します。これは `text-emphasis-style` と `text-emphasis-color` の一括指定です。

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

`text-emphasis` プロパティは、 `text-decoration` とは大きく異なります。 `text-decoration` プロパティは継承されず、指定される装飾は要素全体にわたって適用されます。しかし、 `text-emphasis` は継承されます。これは、子孫に対して圏点を変更できることを意味します。

圏点の大きさは、ルビと同様にフォントの大きさの約 50% であり、 `text-emphasis` は現在の行間隔が圏点を表示するのに十分でない場合、行の高さに影響を与えることがあります。

**メモ:** `text-emphasis` は、 `text-emphasis-position` の値をリセットしません。これは、圏点のスタイルと色がテキストで異なる場合に、圏点の位置を要求することがほとんど見込まれないためです。珍しくもこれを必要とするような場合は、プロパティ `text-emphasis-position` を使用してください。

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

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

* `text-emphasis-color`
* `text-emphasis-style`
構文
--

```css
/\* 初期値 \*/
text-emphasis: none; /\* 圏点なし \*/

/\* <string> 値 \*/
text-emphasis: "x";
text-emphasis: "点";
text-emphasis: "\25B2";
text-emphasis: "\*" #555;
text-emphasis: "foo"; /\* 使用するべきではない。 'f' のみとして計算や表示が行われる \*/

/\* キーワード値 \*/
text-emphasis: filled;
text-emphasis: open;
text-emphasis: filled sesame;
text-emphasis: open sesame;

/\* 色と組み合わせたキーワード値 \*/
text-emphasis: filled sesame #555;

/\* グローバル値 \*/
text-emphasis: inherit;
text-emphasis: initial;
text-emphasis: revert;
text-emphasis: revert-layer;
text-emphasis: 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 *文字*を超える文字列を指定しないでください。ユーザーエージェントは、 1 つより多い書記素クラスターから構成される文字列を短縮したり無視したりする可能性があります。

`<color>`

記号の色を定義します。 color を指定しない場合、既定では `currentcolor` です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `text-emphasis-style`: `none`
* `text-emphasis-color`: `currentcolor`
 |
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | 一括指定の次の各プロパティとして* `text-emphasis-style`: 指定通り
* `text-emphasis-color`: 色の計算値
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `text-emphasis-color`: 色
* `text-emphasis-style`: 離散値
 |

形式文法
----
```

text-emphasis =
  <'text-emphasis-style'>  ||
  <'text-emphasis-color'>

```

例
-

### 強調して色を付けた見出し

この例は、見出しの各文字に三角形の圏点を付けて描画します。

#### CSS

```css
h2 {
  text-emphasis: triangle #d55;
}
```

#### HTML

```html
<h2>これは重要です！</h2>
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-emphasis-property |

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

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

関連情報
----

* 個別指定プロパティ: `text-emphasis-style`, `text-emphasis-color`
* 圏点の位置の定義を可能にする `text-emphasis-position` プロパティ


合成と混合 - CSS: カスケーディングスタイルシート

合成と混合
=====

**合成と混合** (Compositing and Blending) は CSS モジュールの一つで、様々な要素のシェイプを単一の画像に合成する方法を定義します。

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

### プロパティ

* `background-blend-mode`
* `isolation`
* `mix-blend-mode`
### データ型

* `<blend-mode>`
仕様書
---

| Specification |
| --- |
| Compositing and Blending Level 2  |
| Compositing and Blending Level 1  |

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

### `background-blend-mode` プロパティ

{{Compat}}### `isolation` プロパティ

{{Compat}}### `mix-blend-mode` プロパティ

{{Compat}}


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

background-clip
===============

**`background-clip`** は CSS のプロパティで、要素の背景を境界ボックス、パディングボックス、コンテンツボックスのどれまで拡張するかを設定します。

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

要素に `background-image` または `background-color` がない場合、このプロパティは (`border-style` または `border-image` によって) 境界に透明な領域や部分的に不透明な領域がある場合のみ視覚効果があります。そうでなければ、境界は異なるマスク方法になります。

**メモ:** ルート要素は異なる背景の描画領域を持っているため、その要素に `background-clip` プロパティが指定されても効果はありません。「特殊要素の背景」を参照してください。

**メモ:** ルート要素が HTML 要素である文書の場合、ルート要素上の `background-image` の計算値が `none` であり、その `background-color` が `transparent` であると、ユーザーエージェントは代わりに、 `background` プロパティの計算値をその要素の HTML の `<body>` の子要素から伝搬させなければなりません。その `<body>` 要素の `background` プロパティの使用値はその初期値であり、伝搬された値は、それらがルート要素上で指定されたかのように扱われます。 HTML 文書を作成するときは、 HTML 要素ではなく、 `<body>` 要素にキャンバスの背景を指定することを推奨します。

構文
--

```css
/\* キーワード値 \*/
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;

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

### 値

`border-box`

背景を境界の外側の辺まで拡張します (但し、境界の下に重ね合わせられます)。

`padding-box`

背景をパディングの外側の辺まで拡張します。境界の下には背景が描かれません。

`content-box`

背景をコンテンツボックスの中に (切り取って) 表示します。

`text`

背景を前景のテキストの中に (切り取って) 表示します。

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

`background-clip: text` を使用する際には、背景色とその上に配置されたテキストの色のコントラスト比が、弱視の人がページの内容を読むことができる程度に高いことを確認してください。

背景画像が読み込まれないと、テキストが読めなくなることがあります。これを防ぐために、代替の `background-color` を追加し、画像なしでテストしてください。

`@supports` で機能クエリの使用し、`background-clip: text` に対応しているかどうかをテストして、対応していない場合はアクセス可能な代替手段を提供することを検討してください。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `border-box` |
| 適用対象 | すべての要素。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 反復可能リスト |

形式文法
----
```

background-clip =
  <visual-box>#

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

```

例
-

### HTML

```html
<p class="border-box">背景が境界の裏まで拡張されます。</p>
<p class="padding-box">背景が境界の内側の縁まで拡張されます。</p>
<p class="content-box">背景がコンテンツボックスの縁までだけ表示されます。</p>
<p class="text">背景が前景のテキストで切り取られます。</p>
```

### CSS

```css
p {
  border: 0.8em darkviolet;
  border-style: dotted double;
  margin: 1em 0;
  padding: 1.4em;
  background: linear-gradient(60deg, red, yellow, red, yellow, red);
  font: 900 1.2em sans-serif;
  text-decoration: underline;
}

.border-box {
  background-clip: border-box;
}
.padding-box {
  background-clip: padding-box;
}
.content-box {
  background-clip: content-box;
}

.text {
  background-clip: text;
  -webkit-background-clip: text;
  color: rgba(0, 0, 0, 0.2);
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* `clip-path` プロパティは*要素全体*を表示する部分を定義するクリッピング領域を作成します。
* 背景のプロパティ: `background`, `background-color`, `background-image`, `background-origin`
* CSS ボックスモデルの紹介


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

<frequency-percentage>
======================

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

**`<frequency-percentage>`** は CSS のデータ型で、 `<frequency>` または `<percentage>` が取りうる値を表します。周波数の値、例えば音声の高さは、現在どの CSS プロパティでも使用されていません。

構文
--

`<frequency-percentage>` の値は `<frequency>` または `<percentage>` です。それぞれの構文についての詳細はそれぞれのリファレンスページを参照してください。

解説
--

### calc() での使用

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

例
-

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

90% 正のパーセント値
+90% 先頭に + が付いた正のパーセント値
-90% 負のパーセント値 — パーセント値を使用するすべてのプロパティで有効とは限らない
```

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

90 % 数値と単位の間に空白を入れてはいけない。
```

### 有効な周波数値
```

12Hz     正の整数
4.3Hz    整数以外
14KhZ    単位は大文字小文字の区別がないが、 SI 以外の大文字小文字の使い分けは推奨しない。
+0Hz     先頭に + が付いた単位付きのゼロ
-0kHz    先頭に - が付いた単位付きのゼロ
```

### 無効な周波数値
```

12.0     これは単位がないため <number> であり <frequency> ではない。
7 Hz     数値と単位の間に空白を入れてはいけない。
0        単位のないゼロは <length> では許可されることがあるが、<frequency> では無効。
```

仕様書
---

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

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

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

関連情報
----

* CSS データ型
* CSS 値と単位
* 関連する CSS データ型:
    + `<frequency>`
    + `<percentage>`


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

<integer>
=========

**`<integer>`** は CSS のデータ型で、 `<number>` の特殊型であり、正と負の整数を表現します。整数は `column-count`, `counter-increment`, `grid-column`, `grid-row`, `z-index` など、数多くの CSS プロパティで使用することができます。

構文
--

`<integer>` データ型は 1 桁から数桁の 10 進数、 0 から 9 までを含み、任意でその前に単一の `+` または `-` の符号が付きます。整数に関連付けられた単位はありません。

**メモ:** 公式には、有効な `<integer>` 値の範囲は決められていません。 Opera では 2^15 - 1、 IE では2^20 - 1 まで、その他のブラウザーではそれ以上の値に対応しています。 CSS3 Values の策定中には対応すべき最小範囲について多くの議論がありました。 LC 段階の 2012 年 4 月の最新の決定では、 [-2^27 - 1; 2^27 - 1] でしたが、しかし 2^24 - 1 や 2^30 - 1 のような他の値も提案されていました。しかし、最新の仕様書では範囲を定めなくなりました。

補間
--

アニメーション時には、 `<integer>` データ型の値は離散的に整数を使用して補間されます。実数、すなわち浮動小数点で計算が行われた場合、離散値は floor 関数を使って求められます。補間の速度は、アニメーションに結びつけられたタイミング関数で決められます。

例
-

### 有効な整数
```

12          正の整数 (先頭の + なし)
+123        正の整数 (先頭の + あり)
-456        負の整数
0           ゼロ
+0          ゼロ、先頭の + つき
-0          ゼロ、先頭の - なし
```

### 無効な整数
```

12.0        整数を表していますが、これは <number> であり、<integer> ではありません。
12.         小数点を含んではいけません。
+---12      先頭に置ける +/- は 1 つだけです。
ten         文字は使えません。
_5          記号は使えません。
\35         エスケープを使った Unicode 文字は、それが整数を表す場合でも (これは 5 です) 使えません。
\4E94       アラビア数字以外の数字は使えません (これは日本語の「五」です)。
3e4         指数表記は使えません。
```

仕様書
---

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

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

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

関連情報
----

* `<number>`


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

CSS リスト
=======

**CSS リスト** (CSS List) は CSS モジュールの一つで、リストのレイアウトとスタイル付け方法を定義します。

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

プロパティ
-----

* `list-style-image`
* `list-style-type`
* `list-style-position`
* `list-style`
ガイド
---

一貫したリストのインデント

異なるブラウザー同士でも一貫したリストのインデントを実現する方法を説明します。

CSS カウンターの使用

リストのカウンターを制御するために CSS カウンタープロパティを使用する方法を説明します。

仕様書
---

| Specification |
| --- |
| CSS Lists and Counters Module Level 3  |


SVG の背景の拡大縮小 - CSS: カスケーディングスタイルシート

SVG の背景の拡大縮小
============

SVG 画像の柔軟性を踏まえると、`background-image` プロパティで背景画像として使用する際に注意すべき点はまだありますし、`background-size` プロパティで拡大縮小する際にもさらに注意すべき点があります。この記事では、これらのプロパティを使用する際に SVG 画像の拡大縮小がどのように処理されるか説明します。

アルゴリズムの概要
---------

アルゴリズムの大部分は、これらの 4 つのルールに要約することができます。これらのルールによらない例外的なケースもありますが、大半のケースはこれでカバーできます。

1. `background-size` で固定された寸法を指定した場合（つまり、パーセントや相対的な単位はコンテキストによって固定されています）、その寸法が優先されます。
2. 画像に内在的な比率がある場合（幅と高さの比率が一定であること、例えば 16:9、4:3、2.39:1、1:1 など）、レンダリングされるサイズはその比率を維持します。
3. 画像がサイズを指定しており、 constrain や cover によってサイズが変更されなければ、その指定したサイズが勝ちます。
4. 上記のいずれのケースにも当てはまらない場合、画像は背景領域と同じサイズでレンダリングされます。

注目すべきは、サイズ調整アルゴリズムは画像の寸法と比率、あるいはその有無にしか注意を払わないということです。固定された寸法の SVG 画像は、同じサイズのラスター画像と同じように扱われます。

**メモ:** CSS で SVG を異なる縦横比に引き伸ばそうとする場合、例えばページの背景に引き伸ばそうとする場合、 SVG に `preserveAspectRatio="none"` が含まれていることを確認してください。詳しくは `preserveAspectRatio (en-US)` を探して下さい。

ソース画像の例
-------

様々な種類のソース画像を使用し、 `background-size` で使用した場合にどのように見えるかを見るために掘り下げる前に、寸法とサイズ設定の異なるいくつかのソース画像の例を見ていただくと参考になると思います。

それぞれの場合において、 150x150 のボックスでレンダリングされたソース画像がどのように見えるかを示し、 SVG のソースへのリンクを提供します。

### 寸法なし、比率なし

この画像は寸法も比率もありません。大きさを気にせず、特定の縦横比も気にしません。これは、画面の大きさや縦横比に関係なく作業することができる、良いグラデーションのデスクトップ背景になるでしょう。

![no-dimensions-or-ratio.png](/ja/docs/Web/CSS/Scaling_of_SVG_backgrounds/no-dimensions-or-ratio.png)

SVG ソース

### 一方の寸法が指定され、比率なし

この画像は幅 100 ピクセルを指定していますが、高さや縦横比は指定しません。これは基本的なもので、ブロックの高さ全体に伸ばせる細い帯状の壁紙です。

![100px-wide-no-height-or-ratio.png](/ja/docs/Web/CSS/Scaling_of_SVG_backgrounds/100px-wide-no-height-or-ratio.png)

SVG ソース

### 一方の比率が指定され、内在的な比率あり

この画像は高さを 100 ピクセルに指定していますが、幅は指定していません。また、内在的なアスペクト比を 3:4 に指定しています。これにより、意図的に不釣り合いな大きさに拡大縮小しない限り（つまり、縦横比が一致しない幅と高さを明示的に指定しない限り）、幅と高さの比が常に 3:4 になることが確実に維持されます。

この例は、幅と高さを指定するのととても似ています。というのも、 1 つの寸法と比率があれば、他にも寸法があることが暗示されるからです。

![100px-height-3x4-ratio.png](/ja/docs/Web/CSS/Scaling_of_SVG_backgrounds/100px-height-3x4-ratio.png)

SVG ソース

### 幅または高さがなく、内在的な比率あり

この画像は幅も高さも指定してありませんが、代わりに 1:1 の比率を指定します。これはプログラムのアイコンのようなものです。常に正方形で、例えば 32x32、128x128、512x512 など、どんなサイズでも使えます。

![no-dimensions-1x1-ratio.png](/ja/docs/Web/CSS/Scaling_of_SVG_backgrounds/no-dimensions-1x1-ratio.png)

SVG ソース

拡大縮小の例
------

これで、この画像に異なる拡大縮小をするとどうなるかの例を見てみましょう。下記の例では、長方形は幅 300 ピクセル、高さ 200 ピクセルです。また、背景には `background-repeat` があり、わかりやすくするために no-repeat に設定されています。

**メモ:** 下記のスクリーンショットは、**期待される**レンダリングを示しています。現在、すべてのブラウザーで正しく表示されるわけではありません。

### 両方の寸法が固定長に指定されている場合

`background-size` を使って両方の寸法が固定長に指定されている場合、上記のルール 1 に従って、常にその長さが使用されます。言い換えれば、ソース画像が寸法や縦横比を指定しているかどうかに関わらず、画像は常に指定した寸法に引き伸ばされます。

#### ソース: 寸法や内在的な比率なし

この CSS が与えらえると、

```css
background: url(no-dimensions-or-ratio.svg);
background-size: 125px 175px;
```

レンダリングされた出力結果は次のようになります。

![fixed-no-dimensions-or-ratio.png](/ja/docs/Web/CSS/Scaling_of_SVG_backgrounds/fixed-no-dimensions-or-ratio.png)

#### ソース: 一方の寸法が指定され、内在的な比率なし

この CSS が与えられると、

```css
background: url(100px-wide-no-height-or-ratio.svg);
background-size: 250px 150px;
```

レンダリングされた出力結果は次のようになります。

![fixed-100px-wide-no-height-or-ratio.png](/ja/docs/Web/CSS/Scaling_of_SVG_backgrounds/fixed-100px-wide-no-height-or-ratio.png)

#### ソース: 一方の寸法が指定され、内在的な比率あり

この CSS が与えられると、

```css
background: url(100px-height-3x4-ratio.svg);
background-size: 275px 125px;
```

レンダリングされた出力結果は次のようになります。

![fixed-100px-height-3x4-ratio.png](/ja/docs/Web/CSS/Scaling_of_SVG_backgrounds/fixed-100px-height-3x4-ratio.png)

#### ソース: 幅または高さがなく、内在的な比率あり

この CSS が与えられると、

```css
background: url(no-dimensions-1x1-ratio.svg);
background-size: 250px 100px;
```

レンダリングされた出力結果は次のようになります。

![fixed-no-dimensions-1x1-ratio.png](/ja/docs/Web/CSS/Scaling_of_SVG_backgrounds/fixed-no-dimensions-1x1-ratio.png)

### contain や cover の使用

`cover` を `background-size` に指定すると、背景領域全体を覆いながら、画像を可能な限り小さく使用することができます。他にも `contain` を指定すると、背景領域で切り取られることなく、可能な限り画像を大きくすることができます。

内在的な比率を持つ画像の場合、ちょうど 1 つのサイズが `cover`/fit の基準だけに照合します。しかし、内在的な比率が指定されていない場合は、`cover`/fit だけでは不十分なので、large/small 制約が結果のサイズを選びます。

#### ソース: 寸法や内在的な比率なし

画像が寸法も内在的な比率も指定されていない場合、ルール 2 もルール 3 も適用されないので、ルール 4 が採用されます。背景画像は背景領域全体を覆うようにレンダリングされます。これは最大か最小かの制約を満たします。

```css
background: url(no-dimensions-or-ratio.svg);
background-size: contain;
```

レンダリングされた出力結果は次のようになります。

![no-dimensions-or-ratio-contain.png](/ja/docs/Web/CSS/Scaling_of_SVG_backgrounds/no-dimensions-or-ratio-contain.png)

#### ソース: 一方の寸法が指定され、内在的な比率なし

同様に、画像に 1 つの寸法が指定されているが内在的な比率がない場合、ルール 4 が適用され、画像は背景領域全体に拡大縮小されます。

```css
background: url(100px-wide-no-height-or-ratio.svg);
background-size: contain;
```

レンダリングされた出力結果は次のようになります。

![100px-wide-no-height-or-ratio-contain.png](/ja/docs/Web/CSS/Scaling_of_SVG_backgrounds/100px-wide-no-height-or-ratio-contain.png)

#### ソース: 一方の寸法が指定され、内在的な比率あり

内在的な比率を指定すると、状況が変わります。この場合、ルール 1 は関係ないので、ルール 2 が適用されます。（`contain` または `cover` を尊重しながら）あらゆる内在的な比率を維持しようとします。例えば、縦横比を 3:4 に保ちつつ、 300x200 のボックスに `contain` を使用すると、 150x200 の背景を描画するという意味になります。

##### contain の場合

```css
background: url(100px-height-3x4-ratio.svg);
background-size: contain;
```

レンダリングされた出力結果は次のようになります。

![100px-height-3x4-ratio-contain.png](/ja/docs/Web/CSS/Scaling_of_SVG_backgrounds/100px-height-3x4-ratio-contain.png)

画像全体がどのようにレンダリングされるかに注目してください。画像の一部が切り取られることなく、可能な限りボックスに収まります。

##### cover の場合

```css
background: url(100px-height-3x4-ratio.svg);
background-size: cover;
```

レンダリングされた出力結果は次のようになります。

![100px-height-3x4-ratio-cover.png](/ja/docs/Web/CSS/Scaling_of_SVG_backgrounds/100px-height-3x4-ratio-cover.png)

ここでは、 3:4 の比率を維持しながら、画像がボックス全体に引き伸ばされます。そのため、画像の下部が切り取られる現象が発生します。

#### ソース: 寸法の指定がなく、内在的な比率あり

内在的な寸法を持たず、内在的な比率を持つ画像を使用する場合も、同じように動作します。

##### contain の場合

```css
background: url(no-dimensions-1x1-ratio.svg);
background-size: contain;
```

レンダリングされた出力結果は次のようになります。

![no-dimensions-1x1-ratio-contain.png](/ja/docs/Web/CSS/Scaling_of_SVG_backgrounds/no-dimensions-1x1-ratio-contain.png)

画像は 1:1 のアスペクト比を保ちながら、最小の寸法に合うようにサイズ調整されていることに注目してください。

##### cover の場合

```css
background: url(no-dimensions-1x1-ratio.svg);
background-size: cover;
```

レンダリングされた出力結果は次のようになります。

![no-dimensions-1x1-ratio-cover.png](/ja/docs/Web/CSS/Scaling_of_SVG_backgrounds/no-dimensions-1x1-ratio-cover.png)

ここでは、画像が最大の寸法を満たすようにサイズ調整されています。 1:1 のアスペクト比が保たれますが、この画像ではそれがわかりにくいかもしれません。

### 両方の寸法に "auto" を使用した自動サイズ設定

`background-size`が `auto` または `auto auto` に設定されていた場合、指定された内在的な比率を維持するようにレンダリングしなければならないとルール 2 は言っています。

#### ソース: 寸法や内在的な比率なし

内在的な比率や寸法が元画像で指定されていない場合、ルール 4 が有効になり、画像は背景領域を埋めるようにレンダリングされます。

```css
background: url(no-dimensions-or-ratio.svg);
background-size: auto auto;
```

レンダリングされた出力結果は次のようになります。

![auto-no-dimensions-or-ratio.png](/ja/docs/Web/CSS/Scaling_of_SVG_backgrounds/auto-no-dimensions-or-ratio.png)

#### ソース: 一方の寸法があり、内在的な比率なし

内在的な比率が指定されず、少なくとも 1 つの寸法が指定された場合、ルール 3 が有効になり、その寸法に従った画像をレンダリングします。

```css
background: url(100px-wide-no-height-or-ratio.svg);
background-size: auto auto;
```

レンダリングされた出力結果は次のようになります。

![auto-100px-wide-no-height-or-ratio.png](/ja/docs/Web/CSS/Scaling_of_SVG_backgrounds/auto-100px-wide-no-height-or-ratio.png)

ここでは、幅はソース SVG で 100 ピクセルと指定されているのでそれに従いますが、高さは（明示的か内在的な比率で）指定されていないので背景領域を埋めます。

#### ソース: 一方の寸法と内在的な比率あり

固定された寸法と内在的な比率があれば、両方の寸法が固定されます。一方の寸法と比率を指定することは、すでに述べたように、両方の次元を明示的に指定することと同じです。

```css
background: url(100px-height-3x4-ratio.svg);
background-size: auto auto;
```

レンダリングされた出力結果は次のようになります。

![auto-100px-height-3x4-ratio.png](/ja/docs/Web/CSS/Scaling_of_SVG_backgrounds/auto-100px-height-3x4-ratio.png)

この画像は明示的に 100 ピクセルの高さがあるので、比率が 3:4 だと明示的に幅を 75 ピクセルに設定し、 `auto` の場合はそのようにレンダリングされます。

#### ソース: 固定された寸法がなく、内在的な比率あり

内在的な比率を指定していて、寸法を指定していない場合は、ルール 4 が適用されます。ただし、ルール 2 も適用されます。したがって、画像は `contain` の場合と同様にレンダリングされます。

```css
background: url(no-dimensions-1x1-ratio.svg);
background-size: auto auto;
```

レンダリングされた出力結果は次のようになります。

![auto-no-dimensions-1x1-ratio.png](/ja/docs/Web/CSS/Scaling_of_SVG_backgrounds/auto-no-dimensions-1x1-ratio.png)

### "auto" と一方の長さの組み合わせ

ルール 1 が指定された場合、常に指定の寸法が用いられるので、 2 つ目の寸法を決定するためだけにルールを使用する必要があります。

#### ソース: 寸法や内在的な比率なし

画像に寸法や内在的な比率がない場合は、ルール 4 が適用され、背景領域の寸法を使用して `auto` 次元の値を決定します。

```css
background: url(no-dimensions-or-ratio.svg);
background-size: auto 150px;
```

![1auto-no-dimensions-or-ratio.png](/ja/docs/Web/CSS/Scaling_of_SVG_backgrounds/1auto-no-dimensions-or-ratio.png)

ここでは、幅はルール 4 に従って背景領域の幅を使用して決定し、高さは CSS で指定した 140px が使用されます。

#### ソース: 一方の寸法を指定し、内在的な比率なし

画像の一方の寸法が指定されており、内在的な比率がない場合、その寸法が CSS で `auto` に設定されていれば、ルール 3 に従ってその指定した寸法を使用します。

```css
background: url(100px-wide-no-height-or-ratio.svg);
background-size: 200px auto;
```

![100px-wide-no-height-or-ratio-length-auto.png](/ja/docs/Web/CSS/Scaling_of_SVG_backgrounds/100px-wide-no-height-or-ratio-length-auto.png)

ここでは、CSS で指定した 200px が、ルール 1 に従って SVG で指定した 100px の幅を上書きしています。内在的な比率や高さが指定されていないので、`auto`は背景領域の高さをレンダリング画像の高さとして選択します。

```css
background: url(100px-wide-no-height-or-ratio.svg);
background-size: auto 125px;
```

![100px-wide-no-height-or-ratio-auto-length.png](/ja/docs/Web/CSS/Scaling_of_SVG_backgrounds/100px-wide-no-height-or-ratio-auto-length.png)

この場合、幅は CSS で auto と指定されているので、ルール 3 に従って、 SVG で指定した 100px の幅が選択されます。高さは CSS で 125px に設定されているので、ルール 1 に従って選択されます。

#### ソース: 一方の寸法が指定され、内在的な比率あり

寸法が指定された場合、ルール 1 は、CSS によって特に上書きされない限り、SVG からレンダリングされた背景にその寸法を適用します。内在的な比率も指定された場合、もう一方のｐ寸法を決定するために使用されます。

```css
background: url(100px-height-3x4-ratio.svg);
background-size: 150px auto;
```

![1auto-100px-height-3x4-ratio.png](/ja/docs/Web/CSS/Scaling_of_SVG_backgrounds/1auto-100px-height-3x4-ratio.png)

この場合、 CSS で 150px に設定された画像の幅を使用しますので、ルール 1 が適用されます。そして、内在的な 3:4 の縦横比が `auto` の場合の高さを決定します。

#### ソース: 寸法の指定がなく、内在的な比率あり

SVG で寸法が指定されていない場合は、CSS で指定された寸法が適用され、ルール 2 に従って内在的な比率を使用してもう一方の寸法が選択されます。

```css
background: url(no-dimensions-1x1-ratio.svg);
background-size: 150px auto;
```

![1auto-no-dimensions-1x1-ratio.png](/ja/docs/Web/CSS/Scaling_of_SVG_backgrounds/1auto-no-dimensions-1x1-ratio.png)

幅は CSS で 150px に設定されています。高さの `auto` 値は、その幅と 1:1 の縦横比を使用して計算され、 150px になります。

関連情報
----

* `background-size`
* ブログ記事: Properly resizing vector image backgrounds


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

border-image-width
==================

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

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

* Learn more
* See full compatibility
* Report feedback
**`border-image-width`** は CSS のプロパティで、要素の境界画像の幅を設定します。

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

このプロパティの値が要素の `border-width` よりも大きい場合、境界画像はパディング領域 (またはコンテンツ領域) の縁に向けて拡張されます。

構文
--

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

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

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

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

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

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

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

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

`border-image-width` プロパティは下記の値のリストにある 1 つから 4 つの値を使用して指定することができます。

* 値が **1 つ**指定された場合、**全 4 辺**に同じ幅が適用されます。
* 値が **2 つ**指定された場合、1 つ目の幅が**上下**に、2 つ目が**左右**に適用されます。
* 値が **3 つ**指定された場合、1 つ目の幅が**上**に、2 つ目が**左右**に、3 つ目が**下**に適用されます。
* 値が **4 つ**指定された場合、幅は**上**、**右**、**下**、**左**の順 (時計回り) で適用されます。
### 値

`<length-percentage>`

境界の幅を、 `<length>` または `<percentage>` で指定します。パーセント値は水平オフセットにおいては境界画像の領域の*幅*、また垂直オフセットにおいては境界画像の領域の*高さ*です。負の値であってはいけません。

`<number>`

境界の幅を、対応する `border-width` に対する倍率として指定します。負の値であってはいけません。

`auto`

境界の幅が、対応する `border-image-slice` の本質的な幅と高さ (もしあれば) と等しくなるようにします。画像が本質的な寸法を持っていないのであれば、対応する `border-width` が代わりに使用されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `1` |
| 適用対象 | すべての要素。ただし `border-collapse` が `collapse` のときはテーブル要素内部にあるものを除く。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| パーセント値 | 境界画像領域の幅または高さに対する相対値 |
| 計算値 | 指定通り。ただし相対的な長さはは絶対的な長さに変換される |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

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

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

```

例
-

### 境界画像のタイリング

この例は以下の 90 × 90 ピクセルの ".png" ファイルを使用して境界画像を作成します。

![8 つの円を含む正方形の画像。各コーナーの円は薄紫色。 4 つの辺の円は青。真ん中の 9 つ目の円が入る部分は空白。](/ja/docs/Web/CSS/border-image-width/border.png)

そして、元の画像内のそれぞれの円は 30 × 30 ピクセルです。

#### HTML

```html
<p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
  kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
```

#### CSS

```css
p {
  border: 20px solid;
  border-image: url("border.png") 30 round;
  border-image-width: 16px;
  padding: 40px;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* 背景と境界
* CSS の学習: 背景と境界


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

table-layout
============

**`table-layout`** は CSS のプロパティで、`<table>` のセル、行、列のレイアウトに使用されるアルゴリズムを設定します。

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

構文
--

```css
/\* キーワード値 \*/
table-layout: auto;
table-layout: fixed;

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

### 値

`auto`

既定値で、ほとんどのブラウザーが表の自動レイアウトアルゴリズムを使用します。表とセルの幅は中身に合うように調整されます。

`fixed`

表と列の幅は `table` 要素と `col` 要素の幅によって、または最初の行のセルの幅によって設定されます。後続する行のセルは列の幅に影響しません。

「固定」("fixed") レイアウト方式においては、表の 1 行目がダウンロードされ解析された時点で表全体がレンダリングできるようになります。これは「自動」レイアウト方式よりもレンダリング時間を高速にすることができますが、後続するセルのコンテンツが列の幅に合わなくなる可能性があります。各セルでは表の幅が分かっている場合、`overflow` プロパティを使用して、はみ出すコンテンツを切り取るかどうかを決めます。それ以外の場合、セルからはみ出すことはありません。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | `table` および `inline-table` 要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

table-layout =
  auto   |
  fixed

```

例
-

### 固定幅の表に text-overflow を付けた場合

この例は表の固定レイアウトを使用し、`width` プロパティとの組み合わせで、表の幅を制限しています。`text-overflow` プロパティを使用して、語が長すぎる場合は省略記号を使用するようにしています。表のレイアウトが `auto` である場合、表は指定された `width` よりも内容に合わせて広がります。

#### HTML

```html
<table>
  <tr>
    <td>Ed</td>
    <td>Wood</td>
  </tr>
  <tr>
    <td>Albert</td>
    <td>Schweitzer</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Fonda</td>
  </tr>
  <tr>
    <td>William</td>
    <td>Shakespeare</td>
  </tr>
</table>
```

#### CSS

```css
table {
  table-layout: fixed;
  width: 120px;
  border: 1px solid red;
}

td {
  border: 1px solid blue;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # width-layout |

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

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

関連情報
----

* `<table>`


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

grid-column-start
=================

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

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

* Learn more
* See full compatibility
* Report feedback
**`grid-column-start`** は CSS のプロパティで、グリッドの配置に線または区間を使用したり、使用しなかったりして (自動)、グリッド列内のグリッドアイテムの先頭位置を指定します。この開始位置は、グリッド領域のブロックの開始側の端を指定します。

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

構文
--

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

/\* <custom-ident> 値 \*/
grid-column-start: somegridarea;

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

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

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

このプロパティは単一の `<grid-line>` 値で指定します。 `<grid-line>` 値は次のように指定します。

* `auto` キーワード
* `<custom-ident>` 値
* `<integer>` 値
* `<custom-ident>` および `<integer>` を空白で区切ったもの
* `span` キーワードと `<custom-ident>` または `<integer>` またはその両方。
### 値

`auto`

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

`<custom-ident>`

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

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

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

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

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

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

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

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

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

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

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

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

公式定義
----

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

形式文法
----
```

grid-column-start =
  <grid-line>

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

```

例
-

### グリッドアイテムの列の開始位置の設定

#### HTML

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

#### CSS

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

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

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

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

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

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

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

#### 結果

仕様書
---

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

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

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

関連情報
----

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


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

justify-self
============

CSS の **`justify-self`** プロパティは、配置コンテナーの適切な軸に沿って内部でボックスの位置合わせをする方法を設定します。

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

このプロパティの効果は、現在のレイアウトモードに依存します。

* ブロックレベルレイアウトでは、包含ブロック内のアイテムをインライン軸で配置します。
* 絶対位置指定の要素では、 top, left, bottom, right の各オフセット値を反映して、包含ブロック内のアイテムをインライン軸で配置します。
* 表のセルレイアウトでは、このプロパティは*無視されます* (絶対位置指定および表レイアウトのブロック内の配置についてはこちら)
* フレックスボックスレイアウトでは、このプロパティは*無視されます* (フレックスボックス内での配置についてはこちら)
* グリッドレイアウトでは、グリッド領域内のアイテムをインライン軸に配置します (グリッドレイアウト内での配置についてはこちら)
構文
--

```css
/\* 基本キーワード \*/
justify-self: auto;
justify-self: normal;
justify-self: stretch;

/\* 位置による配置 \*/
justify-self: center; /\* 中央付近にアイテムを集める \*/
justify-self: start; /\* 開始側にアイテムを集める \*/
justify-self: end; /\* 終端側にアイテムを集める \*/
justify-self: flex-start; /\* 開始側にフレックスアイテムを集める \*/
justify-self: flex-end; /\* 終端側にフレックスアイテムを集める \*/
justify-self: self-start;
justify-self: self-end;
justify-self: left; /\* 左側にアイテムを集める \*/
justify-self: right; /\* 右側にアイテムを集める \*/

/\* ベースラインの配置 \*/
justify-self: baseline;
justify-self: first baseline;
justify-self: last baseline;

/\* あふれたときの配置 (位置による配置時のみ) \*/
justify-self: safe center;
justify-self: unsafe center;

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

このプロパティは 3 つの異なる形式のうち 1 つを取ることができます。

* 基本キーワード: キーワード値 `normal`, `auto`, `stretch` のうちの一つ。
* ベースラインによる配置: `baseline` キーワードに加えて、任意で `first` または `last` のどちらか。
* 位置による配置:
    + `center`, `start`, `end`, `flex-start`, `flex-end`, `self-start`, `self-end`, `left`, `right` のうちの一つ。
    + 加えて任意で `safe` または `unsafe`。
### 値

`auto`

使用される値は、ボックスに親があれば、親ボックスの `justify-items` プロパティ、そうでなければ絶対位置であり、このような場合、 `auto` は `normal` を表します。

`normal`

このキーワードの効果は、レイアウトモードに依存します。

* ブロックレベルレイアウトでは、このキーワードは `start` の別名です。
* 絶対位置のレイアウトでは、このキーワードは*置換*の絶対位置ボックスには `start` のように振舞い、*その他*の絶対位置ボックスには `stretch` のように振舞います。
* 表のセルレイアウトでは、このキーワードは意味を持たず、*無視*されます。
* フレックスボックスレイアウトでは、このキーワードは意味を持たず、*無視*されます。
* グリッドレイアウトでは、このキーワードは `stretch` のうちの一つと似た動作をしますが、アスペクト比や固有の寸法を持つボックスは `start` のように振舞います。

`start`

アイテムは適切な軸で配置コンテナーの開始側に向かって、互いに接するように詰められます。

`end`

アイテムは適切な軸で配置コンテナーの終端側に向かって、互いに接するように詰められます。

`flex-start`

フレックスコンテナーの子ではないアイテムにおいては、この値は `start` のように扱われます。

`flex-end`

フレックスコンテナーの子ではないアイテムにおいては、この値は `end` のように扱われます。

`self-start`

アイテムは適切な軸で、アイテムの開始側にある配置コンテナーの辺に向けて、互いに接するよう詰められます。

`self-end`

アイテムは適切な軸で、アイテムの終端側にある配置コンテナーの辺に向けて、互いに接するよう詰められます。

`center`

アイテムは配置コンテナーの中央で、互いに接するように詰められます。

`left`

アイテムは配置コンテナーの左端に向かって、互いに接するように詰められます。プロパティの軸がインライン軸に平行でない場合は、この値は `start` のように動作します。

`right`

アイテムは配置コンテナーの右端に向かって、互いに接するように詰められます。プロパティの軸がインライン軸に平行ではない場合は、この値は `start` のように動作します。

`baseline`, `first baseline`, `last baseline`

 first- または last-baseline 配置への参加を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。
 `first baseline` の代替配置は `start`、 `last baseline` の代替配置は `end` です。

`stretch`

アイテムの寸法の合計が配置コンテナーの寸法より小さい場合に、寸法が `auto` であるすべてのアイテムは (比例的にではなく) 均等に引き伸ばされます。ただし、 `max-height`/`max-width` (あるいは同等の機能) による制限は尊重します。これにより、寸法の合計が配置コンテナーを主軸に沿って完全に埋めるようになります。

`safe`

アイテムの寸法が配置コンテナーをあふれた場合、アイテムは配置モードが `start` であったかのように配置されます。

`unsafe`

アイテムのと配置コンテナーの寸法の関係にかかわらず、指定した値を尊重します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | block-level boxes, absolutely-positioned boxes, and grid items |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

justify-self =
  auto                                                |
  normal                                              |
  stretch                                             |
  <baseline-position>                                 |
  <overflow-position>? [ <self-position> | left | right ]  |
  anchor-center

<baseline-position> =
  [ first | last ]?  &&
  baseline

<overflow-position> =
  unsafe  |
  safe

<self-position> =
  center      |
  start       |
  end         |
  self-start  |
  self-end    |
  flex-start  |
  flex-end

```

例
-

### 簡単なデモ

以下の例では簡単な 2 x 2 のグリッドレイアウトを用意しました。最初にグリッドコンテナーには `justify-items` の値を `stretch` に — 既定値に — 設定し、グリッドアイテムがセルの幅全体に広がるようにしています。

2 番目、3 番目、4 番目のグリッドアイテムは、別々な `justify-self` の値を指定し、これらが `justify-items` の値をオーバーライドする様子を表示します。これらの値はグリッドアイテムを内容物の幅に設定し、セルごとに異なる位置に配置しています。

#### HTML

```html
<article class="container">
  <span>First child</span>
  <span>Second child</span>
  <span>Third child</span>
  <span>Fourth child</span>
</article>
```

#### CSS

```css
html {
  font-family: helvetica, arial, sans-serif;
  letter-spacing: 1px;
}

article {
  background-color: red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 40px;
  grid-gap: 10px;
  width: 300px;
  justify-items: stretch;
}

span:nth-child(2) {
  justify-self: start;
}

span:nth-child(3) {
  justify-self: center;
}

span:nth-child(4) {
  justify-self: end;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
  text-align: center;
}

article,
span {
  padding: 10px;
  border-radius: 7px;
}

article {
  margin: 20px;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # justify-self-property |

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

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

関連情報
----

* CSS グリッドガイド: *グリッドレイアウトのボックス配置*
* CSS ボックス配置
* `justify-items` プロパティ


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

:left
=====

**`:left`** は CSS の擬似クラスで、`@page` アットルールで使われ、印刷文書の左側のページすべてを表します。

```css
/\* 印刷時に左側のページを選択 \*/
@page :left {
  margin: 2in 3in;
}
```

そのページが左側か右側かは、文書の主な書字方向によって決まります。例えば、最初のページの主な書字方向が左から右であれば `:right` ページになります。書字方向が右から左であれば `:left` ページになります。

**メモ:** この擬似クラスは、*ページボックス*の `margin`, `padding`, `border`, `background` の各プロパティのみを変更するために使用することができます。他のすべてのプロパティは無視され、ページ内の文書コンテンツではなく、ページボックスにのみ影響します。

構文
--
```

:left
```

例
-

### 左側のページのマージンを設定

```css
@page :left {
  margin: 2in 3in;
}
```

仕様書
---

| Specification |
| --- |
| CSS Paged Media Module Level 3 # left-right-first |

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

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

関連情報
----

* `@page`
* ページに関する他の擬似クラス: `:first`, `:right`


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

transition
==========

**`transition`** は CSS のプロパティで、 `transition-property`、 `transition-duration`、 `transition-timing-function`、 `transition-delay` の一括指定プロパティです。

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

トランジション (transition) は、要素の 2 つの状態間の変化を定義するためのものです。それぞれの状態は `:hover` や `:active` のような擬似クラスで定義されたり、 JavaScript を使用して動的に設定されたりします。

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

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

* `transition-delay`
* `transition-duration`
* `transition-property`
* `transition-timing-function`
構文
--

```css
/\* 1 つのプロパティへの適用 \*/
/\* プロパティ名 | 所要時間 \*/
transition: margin-right 4s;

/\* プロパティ名 | 所要時間 | 待ち時間 \*/
transition: margin-right 4s 1s;

/\* プロパティ名 | 所要時間 | イージング関数 \*/
transition: margin-right 4s ease-in-out;

/\* プロパティ名 | 所要時間 | イージング関数 | 待ち時間 \*/
transition: margin-right 4s ease-in-out 1s;

/\* 2 つのプロパティへの適用 \*/
transition:
  margin-right 4s,
  color 1s;

/\* 変化するすべてのプロパティへの適用 \*/
transition: all 0.5s ease-out;

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

`transition` プロパティは、 1 つまたは複数の単体プロパティによるトランジションを、カンマで区切って指定します。

それぞれの単体プロパティのトランジションでは、単体のプロパティ (または特別な値である `all` および `none`) に適用されるトランジションを記述します。記述は以下の通りです。

* トランジションを適用するプロパティを表す 0 ～ 1 個の値。以下のうちの一つです。
    + `none` キーワード
    + `all` キーワード
    + CSS プロパティの名前である `<custom-ident>`
* 使用するイージング関数を表す 0 または 1 個の `<easing-function>` の値
* 0 ～ 2 個の `<time>` の値。 1 番目の値は `transition-duration` に割り当てられる所要時間として解釈され、 2 番目の値は `transition-delay` に割り当てられる待ち時間として解釈されます。

プロパティ値の一覧が同じ長さではない場合については、プロパティ値のリストの長さが異なる場合を参照してください。つまり、実際にアニメーション化されているプロパティの数を超える余分なトランジションの記述は無視されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `transition-delay`: `0s`
* `transition-duration`: `0s`
* `transition-property`: すべて
* `transition-timing-function`: `ease`
* `transition-behavior` (en-US): `normal`
 |
| 適用対象 | すべての要素、`::before` / `::after` 擬似要素 |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `transition-delay`: 指定通り
* `transition-duration`: 指定通り
* `transition-property`: 指定通り
* `transition-timing-function`: 指定通り
* `transition-behavior` (en-US): 指定通り
 |
| アニメーションの種類 | アニメーション不可 |

形式文法
----
```

transition =
  <single-transition>#

<single-transition> =
  [ none | <single-transition-property> ]  ||
  <time>                                   ||
  <easing-function>                        ||
  <time>

<single-transition-property> =
  all             |
  <custom-ident>

<easing-function> =
  linear                          |
  <linear-easing-function>        |
  <cubic-bezier-easing-function>  |
  <step-easing-function>

<linear-easing-function> =
  linear( <linear-stop-list> )

<cubic-bezier-easing-function> =
  ease                                                |
  ease-in                                             |
  ease-out                                            |
  ease-in-out                                         |
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )

<step-easing-function> =
  step-start                             |
  step-end                               |
  steps( <integer> , <step-position>? )

<linear-stop-list> =
  [ <linear-stop> ]#

<step-position> =
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end

<linear-stop> =
  <number>               &&
  <linear-stop-length>?

<linear-stop-length> =
  <percentage>{1,2}

```

例
-

### 単純な例

この例では、ユーザーが要素の上にカーソルを置いたときに、 1 秒間の遅延をつけて 4 秒間でフォントサイズの遷移を行います。

#### HTML

```html
<a class="target">この上にポインターを移動してください</a>
```

#### CSS

```css
.target {
  font-size: 14px;
  transition: font-size 4s 1s;
}

.target:hover {
  font-size: 36px;
}
```

#### 結果

CSS トランジションの使用 の記事に、 CSS トランジションの例がいくつかあります。

仕様書
---

| Specification |
| --- |
| CSS Transitions # transition-shorthand-property |

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

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

関連情報
----

* CSS トランジションの使用
* `TransitionEvent`


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

border-top
==========

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

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

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

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

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

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

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

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

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

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

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

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

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

### 値

`<br-width>`

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

`<br-style>`

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

`<color>`

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

公式定義
----

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

形式文法
----
```

border-top =
  <line-width>  ||
  <line-style>  ||
  <color>

<line-width> =
  <length [0,∞]>  |
  thin            |
  medium          |
  thick

<line-style> =
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

```

例
-

### 上側の境界の適用

#### HTML

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

#### CSS

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

#### 結果

仕様書
---

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

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

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

関連情報
----

* `border`
* `border-block`
* `outline`


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

font-feature-settings
=====================

**`font-feature-settings`** は CSS のプロパティで、 OpenType フォントの拡張書体の特性を制御します。

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

構文
--

```css
/\* 既定の設定を使用する \*/
font-feature-settings: normal;

/\* OpenType の特性タグの値を設定する \*/
font-feature-settings: "smcp";
font-feature-settings: "smcp" on;
font-feature-settings: "swsh" 2;
font-feature-settings:
  "smcp",
  "swsh" 2;

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

可能な限り、ウェブの作者は代わりに `font-variant` 一括指定プロパティ、または関連する個別指定プロパティである `font-variant-ligatures`, `font-variant-caps`, `font-variant-east-asian`, `font-variant-alternates`, `font-variant-numeric`, `font-variant-position` プロパティを使うべきです。

これらは `font-feature-settings` よりも、もっと効率的で、予想でき、理解できる結果をもたらし、 `font-feature-settings` は、 OpenType フォント特性を有効またはアクセスするための他の方法が存在しない特殊なケースを処理するように設計された低レベルの機能です。特に、スモールキャップの表現に `font-feature-settings` を使うべきではありません。

### 値

`normal`

テキストは既定の設定で配置されます。

`<feature-tag-value>`

テキストの描画時、 OpenType の特性タグ値のリストがテキストレイアウトエンジンに渡され、フォントの機能を有効化または無効化します。タグは常に 4 文字の ASCII 文字の `<string>` です。文字数がこれより少ないか多い場合、もしくはコードポイント U+20 - U+7E の範囲外の文字を含む場合、プロパティ全体が無効になります。
値は正の整数です。キーワード `on` と `off` はそれぞれ `1` と `0` の別名です。値が設定されていなければ、既定値は `1` です。 論理値ではない OpenType 特性 (例: stylistic alternates) では、この値は選ばれる特定の字形を意味します。論理値の特性はオンとオフを切り替えます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `normal` |
| 適用対象 | すべての要素とテキスト。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式定義
----
```

font-feature-settings =
  normal                |
  <feature-tag-value>#

<feature-tag-value> =
  <opentype-tag> [ <integer [0,∞]> | on | off ]?

<opentype-tag> =
  <string>

```

例
-

### 様々なフォント特性を有効にする

```css
/\* スモールキャップ代替字形 \*/
.smallcaps {
  font-feature-settings: "smcp" on;
}

/\* 大文字と小文字の両方をスモールキャップに変換 (記号も) \*/
.allsmallcaps {
  font-feature-settings: "c2sc", "smcp";
}

/\* スラッシュのついたゼロを使用して "O" と区別する \*/

.nicezero {
  font-feature-settings: "zero";
}

/\* 歴史的な書体を有効に \*/
.hist {
  font-feature-settings: "hist";
}

/\* よくある合字を無効にする (既定ではオン) \*/
.noligs {
  font-feature-settings: "liga" 0;
}

/\* 表内の数字を有効にする (等幅) \*/
td.tabular {
  font-feature-settings: "tnum";
}

/\* 自動的に分数化する \*/
.fractions {
  font-feature-settings: "frac";
}

/\* 利用可能な2番目のスウォッシュ文字を使用 \*/
.swash {
  font-feature-settings: "swsh" 2;
}

/\* スタイリッシュセット 7 を有効にする \*/
.fancystyle {
  font-family: Gabriola; /\* available on Windows 7, and on Mac OS \*/
  font-feature-settings: "ss07";
}
```

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-feature-settings-prop |

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

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

関連情報
----

* `font-display`
* `font-family`
* `font-stretch`
* `font-style`
* `font-weight`
* `font-variant`
* `font-variation-settings`
* `src`
* `unicode-range`
* OpenType 特性タグのリスト


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

min-inline-size
===============

**`min-inline-size`** は CSS のプロパティで、書字方向に応じて要素ブロックの水平または垂直方向の最小の寸法を定義します。これは `min-width` または `min-height` のどちらかのプロパティと、 `writing-mode` の値に応じて対応します。

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

構文
--

```css
/\* <length> 値 \*/
min-inline-size: 100px;
min-inline-size: 5em;

/\* <percentage> 値 \*/
min-inline-size: 10%;

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

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

書字方向が垂直方向であった場合、 `min-inline-size` の値は要素の最小の高さに対応します。そうでなければ、要素の最小幅に対応します。関連プロパティの `min-block-size` が要素のもう一方の寸法を定義します。

### 値

`min-inline-size` プロパティは `min-width` および `min-height` の各プロパティと同じ値を取ります。

公式定義
----

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

形式文法
----
```

min-inline-size =
  <'min-width'>

```

例
-

### 縦書きでインライン方向の最小寸法を設定

#### HTML

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

#### CSS

```css
.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  block-size: 5%;
  min-inline-size: 200px;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* 対応付けされる物理的プロパティ: `min-width` および `min-height`
* `writing-mode`


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

font-variant-alternates
=======================

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

Newly availableSince March 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
**`font-variant-alternates`** は CSS のプロパティで、代替書体の使用を制御します。代替書体は `@font-feature-values` で定義された代替名で参照される可能性があります。

```css
/\* キーワード値 \*/
font-variant-alternates: normal;
font-variant-alternates: historical-forms;

/\* 関数表記値 \*/
font-variant-alternates: stylistic(user-defined-ident);
font-variant-alternates: styleset(user-defined-ident);
font-variant-alternates: character-variant(user-defined-ident);
font-variant-alternates: swash(user-defined-ident);
font-variant-alternates: ornaments(user-defined-ident);
font-variant-alternates: annotation(user-defined-ident);
font-variant-alternates: swash(ident1) annotation(ident2);

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

`@font-feature-values` アット規則は、代替書体関数 (`stylistic`, `styleset`, `character-variant`, `swash`, `ornament`, `annotation`) の名前を定義し、その名前を OpenType の引数と関連付けることができます。このプロパティはスタイルシート内で (`@font-feature-values` で定義された) 人間が読める名前を利用できるようにします。

構文
--

このプロパティは二つの形式のうち一つを取ります。

* キーワード `normal`
* または、その他の下記のキーワードおよび関数を空白区切り、順不同で 1 つ以上
### 値

`normal`

このキーワードは代替書体を無効にします。

`historical-forms`

このキーワードは歴史的形式 — 過去には一般的だったけれども今日そうではない書体を有効にします。 OpenType の `hist` の値に対応します。

`stylistic()`

この関数は、個々の文字に対して表現の変更を可能にします。この引数は、フォント固有の名前を数値に対応づけたものです。 OpenType の `salt` の値に相当します (例: `salt 2`)。

`styleset()`

この関数は、一連の文字に対するスタイルの代替を可能にします。この引数は、フォント固有の名前を数値に対応づけたものです。 OpenType の `ssXY` の値に相当します (例: `ss02`)。

`character-variant()`

この関数は、文字に対して特定のスタイルの選択肢を有効にします。 `styleset()` に似ていますが、一連の文字に対してまとまった書体を作成するわけではありませんので、個々の文字は独立した、整合が取れているとは限らないスタイルになります。この引数は、フォント固有の名前を数値に対応づけたものです。 OpenType の `cvXY` の値に相当します (例: `cv02`)。

`swash()`

この関数は、先端装飾書体を有効にします。この引数は、フォント固有の名前を数値に対応づけたものです。 OpenType の `swsh` および `cswh` の値に相当します (例: `swsh 2` および `cswh 2`)。

`ornaments()`

この関数は、フルーロンおよびその他の飾り書体などの装飾を有効にします。 OpenType の `ornm` の値に相当します (例: `ornm 2`)。

**メモ:** テキストの意味を保持するために、フォントデザイナーは、 Unicode のディングバット文字に一致しない装飾を、ビュレット文字 (U+2022) の装飾的な変種として含めるべきです。既存のフォントの中には、このアドバイスに従わないものもあるので注意が必要です。

`annotation()`

この関数は、丸数字や鏡文字などの注釈表記を有効にします。この函数は丸数字又は鏡文字などの表記を有効にします。この引数は、フォント固有の名前を数値に対応づけたものです。 OpenType の `nalt` の値に相当します (例: `nalt 2`)。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `normal` |
| 適用対象 | すべての要素とテキスト。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

font-variant-alternates =
  normal                                              |
  [ stylistic( <feature-value-name> ) || historical-forms || styleset( <feature-value-name># ) || character-variant( <feature-value-name># ) || swash( <feature-value-name> ) || ornaments( <feature-value-name> ) || annotation( <feature-value-name> ) ]

<feature-value-name> =
  <ident>

```

例
-

### 先端装飾書体を有効化

#### HTML

```html
<p>Firefox rocks!</p>
<p class="variant">Firefox rocks!</p>
```

#### CSS

```css
@font-feature-values "Leitura Display Swashes" {
  @swash {
    fancy: 1;
  }
}

p {
  font-size: 1.5rem;
}

.variant {
  font-family: Leitura Display Swashes;
  font-variant-alternates: swash(fancy);
}
```

### 結果

**メモ:** この例を有効にするには、 OpenType フォントの *Leitura Display Swashes* をインストールする必要があります。試験用途の無償版が、 fontsgeek.com などにあります。

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-variant-alternates-prop |

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

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

関連情報
----

* `font-variant`
* `font-variant-caps`
* `font-variant-east-asian`
* `font-variant-ligatures`
* `font-variant-numeric`
* `@font-feature-values`


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

text-emphasis-color
===================

**`text-emphasis-color`** は CSS のプロパティで、圏点の色を設定します。この値は一括指定の `text-emphasis` を使用して設定することもできます。

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

構文
--

```css
/\* 初期値 \*/
text-emphasis-color: currentcolor;

/\* <color> \*/
text-emphasis-color: #555;
text-emphasis-color: blue;
text-emphasis-color: rgba(90, 200, 160, 0.8);
text-emphasis-color: transparent;

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

### 値

`<color>`

記号の色を定義します。 color が存在しない場合、既定で `currentcolor` になります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `currentcolor` |
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | 色の計算値 |
| アニメーションの種類 | 色 |

形式文法
----
```

text-emphasis-color =
  <color>

```

例
-

### 色と固有の文字で強調

#### CSS

```css
em {
  text-emphasis-color: green;
  text-emphasis-style: "\*";
}
```

#### HTML

```html
<p>例:</p>

<em>これには圏点があります！</em>
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-emphasis-color-property |

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

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

関連情報
----

* `<color>` データ型
* 他の強調記号に関するプロパティ: `text-emphasis-style`, `text-emphasis`, `text-emphasis-position`.
* 色に関する他のプロパティ: `color`, `background-color`, `border-color`, `outline-color`, `text-emphasis-color`, `text-shadow`, `caret-color`, `column-rule-color`
* CSS を使用した HTML 要素への色の適用


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

-moz-user-focus
===============

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

**`-moz-user-focus`** は CSS のプロパティで、ある要素がフォーカスを持つことができるかどうかを示すために使用されます。

```css
/\* キーワード値 \*/
-moz-user-focus: normal;
-moz-user-focus: ignore;

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

この値を `ignore` に設定することで、その要素のフォーカスを無効にすることができます。その要素はタブ順で飛ばされます。

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

構文
--

### 値

`ignore`

その要素は、キーボードフォーカスを受け付けず、タブ順でスキップされます。

`normal`

要素がキーボードフォーカスを受けられるようになります。

`select-after`

?

`select-before`

?

`select-menu`

?

`select-same`

?

`select-all`

?

`none`

?

公式定義
----

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

形式文法
----

Error: could not find syntax for this item例
-

### HTML

```html
<input class="ignored" value="The user cannot focus on this element." />
```

### CSS

```css
.ignored {
  -moz-user-focus: ignore;
}
```

仕様書
---

どの標準にも含まれていません。同様のプロパティである `user-focus` は、CSS3 UI 仕様の前身の初期草稿で提案されましたが、ワーキンググループで却下されました。

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

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

関連情報
----

* `-moz-user-input`
* `-moz-user-modify`
* `-moz-user-select`


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

filter
======

**`filter`** は CSS のプロパティで、ぼかしや色変化などのグラフィック効果を要素に適用します。フィルターは画像、背景、境界の描画を調整するためによく使われます。

いくつかの関数、例えば `blur()` や `contrast()` などが利用でき、あらかじめ定義された効果を実現するのに役立てることができます。

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

構文
--

```css
/\* <filter-function> 値 \*/
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/\* URL \*/
filter: url("filters.svg#filter-id");

/\* 複数のフィルター \*/
filter: contrast(175%) brightness(3%);
filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px blue);

/\* フィルターを使用しない \*/
filter: none;

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

次のように関数と共に使用してください。

```css
filter: <filter-function> [<filter-function>]* | none;
```

`url()` を使用して SVG の filter 要素 (en-US)を参照することができます。 SVG の `<filter>` (en-US) 要素を参照するには、次のような構文を使用してください。

```css
filter: url(file.svg#filter-element-id);
```

関数
--

`filter` プロパティは `none` または以下にある関数を一つ以上使って指定します。いずれかの関数の引数が妥当でない場合、関数は `none` を返します。特に示す場合を除いて、パーセント記号付きの値（`34%` など）を取る関数は、 10 進数の値（`0.34` など）も受け付けます。

`filter` プロパティ値に複数の関数が指定されている場合、フィルターは順番通りに適用されます。

`blur()`

入力画像にガウスぼかしを適用します。

```css
filter: blur(5px);
```

`brightness()`

関数は、入力画像に線形乗数を適用して明るさを明るくしたり暗くしたりします。 `0%` の値を設定すると、完全な黒の画像が作成されます。 `100%` の値を指定すると、入力は変更されません。 `100%` を超える値が許されており、より明るい結果が得られます。

```css
filter: brightness(2);
```

`contrast()`

入力画像のコントラストを調整します。 `0%` の値を指定するとグレーの画像が作成されます。 `100%` の値を指定すると、入力画像は変更されません。 `100%` を超える値を指定すると、コントラストを増加させます。

```css
filter: contrast(200%);
```

`drop-shadow()`

引数 `<shadow>` を画像の輪郭に沿ってドロップシャドウとして適用します。影の構文は `<box-shadow>` （CSS 背景と境界モジュールで定義されています）と似ていますが、`inset` キーワードと `spread` 引数は使用できません。すべての `filter` プロパティ値と同様に、`drop-shadow()` 以降のフィルターが影に適用されます。

```css
filter: drop-shadow(16px 16px 10px black);
```

`grayscale()`

画像をグレースケールに変換します。値 `100%` は完全にグレースケールです。初期値の `0%` は入力を変更しません。 `0%` と `100%` の間の値は、効果に対する線形乗数です。

```css
filter: grayscale(100%);
```

`hue-rotate()`

色相の角度を回転させます。 `<angle>` の値は、入力サンプルが調整される色相環の度数を定義します。 `0deg` の値では入力は変更されません。

```css
filter: hue-rotate(90deg);
```

`invert()`

入力画像のサンプルを反転します。 `100%` の値を指定すると、完全に反転されます。 `0%` では入力画像が変化しないままになります。 `0%` と `100%` の間は効果の線形乗数になります。

```css
filter: invert(100%);
```

`opacity()`

透過率を適用します。 `0%` は画像を完全に透明にし、 `100%` は画像をそのままにします。

```css
filter: opacity(50%);
```

`saturate()`

画像の彩度を設定します。 `0%` は完全に彩度をなくし、 `100%` はそのまま、 `100%` 以上の値は彩度を上げます。

```css
filter: saturate(200%);
```

`sepia()`

画像をセピア調にします。値を `100%` にすると画像は完全にセピアになり、`0%` にすると何も変わりません。

```css
filter: sepia(100%);
```

関数の組み合わせ
--------

関数をいくつでも組み合わせてレンダリングを操作できます。フィルターは宣言順に適用されます。次の例は画像のコントラストと明るさを強調します。

```css
filter: contrast(175%) brightness(103%);
```

### 補間

アニメーション時、最初のフィルターと最後のフィルターの両方が同じ長さの関数リストであり、 `url()` を持たない場合、それぞれのフィルター関数は、その特有の規則に従って補間されます。

フィルターリストが異なる形で掲載されている場合、長い方のリストに欠けている同等のフィルター関数が、短い方のリストの終わりに追加されます。追加された関数は、フィルターを変更していない初期値を使用します。掲載されているすべてのフィルターは、フィルター関数特有の仕様に従って補間されます。それ以外の場合は離散補間を用います。

公式定義
----

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

形式文法
----
```

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>\* )

```

例
-

### フィルター関数の適用

`filter` プロパティは 2 つ目の画像に適用され、画像とその境界の両方を灰色にして不鮮明にします。

```css
img {
  border: 5px solid yellow;
}
/\* 2 番目の画像を 40% グレー化、 5px でぼかす \*/
img:nth-of-type(2) {
  filter: grayscale(0.4) blur(5px);
}
```

```html
<img src="pencil.jpg" alt="元画像はシャープ" />
<img src="pencil.jpg" alt="画像と境界は不鮮明でミュートされています。" />
```

### 繰り返しフィルター機能

フィルター機能は現れる順に適用されます。同じフィルター関数を繰り返すことができます。

```css
#MDN-logo {
  border: 1px solid blue;
  filter: drop-shadow(5px 5px 0 red) hue-rotate(180deg) drop-shadow(5px 5px 0
        red);
}
```

```
<svg
 id="MDN-logo"
 xmlns="http://www.w3.org/2000/svg"
 viewBox="0 0 361 104.2"
 xml:space="preserve"
 role="img">
  <title>MDN Web Docs</title>
  <path
 d="M197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z"
 style="fill: var(--text-primary);"></path>
  <g style="fill:blue;">
    <path
 d="M42 .2 13.4 92.3H1.7L30.2.2H42zM52.4.2v92.1H42V.2h10.4zm40.3 0L64.2 92.3H52.5L81 .2h11.7zM103.1.2v92.1H92.7V.2h10.4zM294 95h67v8.8h-67V95z"></path>
  </g>
</svg>
```

フィルターは順番に適用されます。最初のドロップシャドウの色相は `hue-rotate()` と関数によって変更されますが、 2 つ目のドロップシャドウの色相は変更されません。

仕様書
---

| Specification |
| --- |
| Filter Effects Module Level 1 # FilterProperty |

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

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

関連情報
----

* CSS `backdrop-filter` プロパティ
* CSS 合成と混合モジュール（CSS の `background-blend-mode` および `mix-blend-mode` プロパティを含む）
* CSS の `mask` プロパティ
* SVG （SVG の `<filter>` (en-US) 要素や `filter (en-US)` 属性を含む）
* HTML コンテンツへの SVG 効果の適用


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

flex-wrap
=========

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

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

* Learn more
* See full compatibility
* Report feedback
**`flex-wrap`** は CSS のプロパティで、フレックスアイテムを単一行に押し込むか、あるいは複数行に折り返してもよいかを指定します。折り返しを許可する場合は、行を積み重ねる方向の制御も可能です。

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

他のプロパティや詳細情報については フレックスボックスの基本概念をご覧ください。

構文
--

```css
flex-wrap: nowrap; /\* 既定値 \*/
flex-wrap: wrap;
flex-wrap: wrap-reverse;

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

`flex-wrap` プロパティは次の値のリストから選択した単一のキーワードで指定します。

### 値

以下の値を利用することができます。

`nowrap`

フレックスアイテムは単一行に配置され、フレックスコンテナーからあふれることもあります。 `cross-start` は、 `flex-direction` の値に応じて `start` または `before` と同一になります。

`wrap`

フレックスアイテムは複数行に分割されます。 `cross-start` は `flex-direction` の値に応じて `start` または `before` と同一になり、 `cross-end` は、指定された `cross-start` の反対側になります。

`wrap-reverse`

`wrap` と同様に動作しますが、 `cross-start` と `cross-end` が入れ替わります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `nowrap` |
| 適用対象 | フレックスコンテナー |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

flex-wrap =
  nowrap        |
  wrap          |
  wrap-reverse

```

例
-

### フレックスコンテナーの wrap 値の設定

#### HTML

```html
<h4>This is an example for flex-wrap:wrap</h4>
<div class="content">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:nowrap</h4>
<div class="content1">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:wrap-reverse</h4>
<div class="content2">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
```

#### CSS

```css
/\* Common Styles \*/
.content,
.content1,
.content2 {
  color: #fff;
  font: 100 24px/100px sans-serif;
  height: 150px;
  width: 897px;
  text-align: center;
}

.content div,
.content1 div,
.content2 div {
  height: 50%;
  width: 300px;
}
.red {
  background: orangered;
}
.green {
  background: yellowgreen;
}
.blue {
  background: steelblue;
}

/\* Flexbox Styles \*/
.content {
  display: flex;
  flex-wrap: wrap;
}
.content1 {
  display: flex;
  flex-wrap: nowrap;
}
.content2 {
  display: flex;
  flex-wrap: wrap-reverse;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-wrap-property |

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

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

関連情報
----

* `flex-flow` は `flex-wrap` および `flex-direction` プロパティの一括指定プロパティです。
* CSS フレックスボックスガイド: *フレックスボックスの基本概念*
* CSS フレックスボックスガイド: *フレックスアイテムの折り返しをマスターする*


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

page-break-after
================

**警告:** このプロパティは `break-after` プロパティで置き換えられました。

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

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

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

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

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

構文
--

### 値

`auto`

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

`always`

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

`avoid`

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

`left`

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

`right`

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

`recto`
Experimental

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

`verso`
Experimental

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

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

`page-break-after` プロパティは古いプロパティとなり、 `break-after` で置き換えられました。

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

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

公式定義
----

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

形式文法
----
```

page-break-after =
  auto     |
  always   |
  avoid    |
  left     |
  right    |
  inherit

```

例
-

### 脚注の後にページ区切りを設定

```css
/\* 脚注の後で新しいページに移ります \*/
div.footnotes {
  page-break-after: always;
}
```

仕様書
---

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

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

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

関連情報
----

* `break-before`, `break-after`, `break-inside`
* `page-break-before`, `page-break-inside`
* `orphans`, `widows`