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

widows
======

**`widows`** は CSS のプロパティで、ページ、領域、段の*先頭*に表示されるブロックコンテナーの最小行数を設定します。

```css
/\* <integer> 値 \*/
widows: 2;
widows: 3;

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

組版において、ウィドウ (*widow*) とは (段落が前のページから続いている場合に) 段落の最後の行がページの先頭に単独で現れることです。

|  |  |
| --- | --- |
| 初期値 | `2` |
| 適用対象 | ブロックコンテナー要素 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 計算値の型による |

構文
--

### 値

`<integer>`

区切りの後の新しい断片の先頭に残すことができる最小行数です。値は正の数である必要があります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `2` |
| 適用対象 | ブロックコンテナー要素 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

widows =
  <integer [1,∞]>

```

例
-

### 段のウィドウの制御

#### HTML

```html
<div>
  これは幾らかのテキストを含む最初の段落です。
  これは最初の段落よりも多くのテキストを含む第二の段落です。これはウィドウがどの様に動作するのかを示すために用います。
  これは第三の段落です。これは最初の段落よりも少しだけ長いテキストを含んでいます。
</div>
```

#### CSS

```css
div {
  background-color: #8cffa0;
  columns: 3;
  widows: 2;
}

p {
  background-color: #8ca0ff;
}

p:first-child {
  margin-top: 0;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Fragmentation Module Level 3 # widows-orphans |
| CSS Multi-column Layout Module Level 1 # filling-columns |

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

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

関連情報
----

* `orphans`
* ページ付きメディア


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

@namespace
==========

**`@namespace`** はアットルールで、
 CSS スタイルシート で使用する XML 名前空間を定義します。

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

構文
--

```css
/\* 既定の名前空間 \*/
@namespace url(XML-namespace-URL);
@namespace "XML-namespace-URL";

/\* 接頭辞つきの名前空間 \*/
@namespace prefix url(XML-namespace-URL);
@namespace prefix "XML-namespace-URL";
```

解説
--

定義された名前空間は、全称、型、属性セレクターにおいて、選択する要素をその名前空間に制限するために使用することができます。 `@namespace` ルールは一般に、複数の名前空間を含む文書を扱う場合—例えば、HTML5 でインラインの SVG や MathML を併用する場合や、複数の語彙が混在する XML などでのみ役立ちます。

`@namespace` ルールは、スタイルシート内ですべての `@charset` および `@import` ルールより後、また他のアットルールやスタイル宣言より前に配置しなければなりません。

`@namespace` は、スタイルシートの**既定の名前空間**が定義できます。既定の名前空間を定義するとすべての全称セレクターや要素型セレクター（属性セレクターは除く。後述のメモを参照）は、既定の名前空間内の要素にのみ適用されます。

また、 `@namespace` ルールで**名前空間の接頭辞**が定義できます。全称セレクター、要素型セレクター、属性セレクターに名前空間の接頭辞を付加すると、これらのセレクターは名前空間*および*要素または属性に一致する場合のみ一致します。

HTML5 では、既知の外来要素へ自動的に名前空間が割り当てられます。すなわち、 HTML 要素は文書内に `xmlns` 属性が存在しなくても XHTML 名前空間 (`http://www.w3.org/1999/xhtml`) に含まれているかのように動作します。また <svg> および <math> 要素は、適切な名前空間（`http://www.w3.org/2000/svg` および `http://www.w3.org/1998/Math/MathML`）が割り当てられます。

**メモ:** XML では、属性に直接接頭辞を定義しない限り（*例*: `xlink:href`）、属性は名前空間を持ちません。言い換えると、属性は所属する要素から名前空間を継承しません。この動作に合わせるため、 CSS の既定の名前空間は属性セレクターに適用しません。

形式文法
----
```

@namespace =
  @namespace <namespace-prefix>? [ <string> | <url> ] ;

<namespace-prefix> =
  <ident>

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

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

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

```

例
-

### 既定かつ定義済みの名前空間の指定

```css
@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);

/\* XHTML は既定で接頭辞のない名前空間であるため、これは XHTML のすべての <a> 要素を選択します \*/
a {
}

/\* これはすべての SVG <a> 要素を選択します \*/
svg|a {
}

/\* XHTML と SVG の両方の <a> 要素に一致します \*/
\*|a {
}
```

仕様書
---

| Specification |
| --- |
| CSS Namespaces Module Level 3 # declaration |

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

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

関連情報
----

* 名前空間の集中講座


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

mask-repeat
===========

**`mask-repeat`** は CSS プロパティで、マスク画像をどのように繰り返すかを設定します。マスク画像は水平軸、垂直軸、両方の軸で繰り返すか、まったく繰り返さないようにすることができます。

```css
/\* 1 つの値の構文 \*/
mask-repeat: repeat-x;
mask-repeat: repeat-y;
mask-repeat: repeat;
mask-repeat: space;
mask-repeat: round;
mask-repeat: no-repeat;

/\* 2 つの値の構文: 水平 | 垂直 \*/
mask-repeat: repeat space;
mask-repeat: repeat repeat;
mask-repeat: round space;
mask-repeat: no-repeat round;

/\* 複数の値 \*/
mask-repeat:
  space round,
  no-repeat;
mask-repeat:
  round repeat,
  space,
  repeat-x;

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

既定では、繰り返された画像は要素の寸法でクリッピングされますが、 (`round` を使用して) 大きさが合うように拡大縮小したり、 (`space` を使用して) 端から端まで等分に配分したりすることができます。

構文
--

1 つ以上の `<repeat-style>` 値をカンマ区切りで指定します。

### 値

`<repeat-style>`

単一の値の構文は、2 つの値の構文の一括指定です。

| 単一の値 | 同等の 2 つの値 |
| --- | --- |
| `repeat-x` | `repeat no-repeat` |
| `repeat-y` | `no-repeat repeat` |
| `repeat` | `repeat repeat` |
| `space` | `space space` |
| `round` | `round round` |
| `no-repeat` | `no-repeat no-repeat` |

2 つの値の構文では、1 つ目の値が水平方向の繰り返しの動作を表し、2 つ目の値が垂直方向の動作を表します。それぞれのオプションが各方向にどのように動作するのかを説明します。

|  |  |
| --- | --- |
| `repeat` | 画像がマスク描画領域全体を埋めるのに必要なだけ繰り返されます。最後の画像は合わない時には切り取られます。 |
| `space` | 画像は切り取られずにできる限り繰り返されます。最初と最後の画像は要素の両端に位置し、画像間に均等に余白が配分されます。 `mask-position` プロパティは、1つだけの画像が切り取られずに表示される場合を除いて無視されます。 `space` を使用して切り取りが発生するのは、1つの画像を表示する十分な大きさがない場合だけです。 |
| `round` | 利用できる空間の寸法が拡大した場合、繰り返される画像は (すき間をおかずに) もう一つ追加するだけの余地ができるまで引き伸ばされます。次の画像が追加されるとき、現在の画像は場所を空けるために縮小されます。例えば、元の幅が 260px の画像が3回繰り返されたとき、それぞれの反復の幅は 300px まで拡大する可能性があり、もう一つの画像が追加されると、 225px まで縮小されます。 |
| `no-repeat` | 画像は繰り返されません (また、描画領域のマスクは全体を覆うとは限りません)。繰り返されないマスク画像の位置は `mask-position` CSS プロパティで定義されます。 |

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `repeat` |
| 適用対象 | すべての要素。 SVG の場合は `defs` 要素やすべてのグラフィック要素を除いたコンテナー要素に適用される |
| 継承 | なし |
| 計算値 | 2 つのキーワードから成り、方向ごとに 1 つずつ |
| アニメーションの種類 | 離散値 |

形式文法
----
```

mask-repeat =
  <repeat-style>#

<repeat-style> =
  repeat-x                                     |
  repeat-y                                     |
  [ repeat | space | round | no-repeat ]{1,2}

```

例
-

### 単一のマスクの反復設定

### 複数のマスク画像の対応

それぞれのマスク画像に異なる `<repeat-style>` を、カンマで区切って指定することができます。

```css
.examplethree {
  mask-image: url("mask1.png"), url("mask2.png");
  mask-repeat: repeat-x, repeat-y;
}
```

それぞれの画像は最初のものから最後のものに向けて、それぞれの繰り返しスタイルに対応します。

仕様書
---

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

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

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

関連情報
----

* Clipping and Masking in CSS


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

text-underline-offset
=====================

**`text-underline-offset`** は CSS のプロパティで、 (`text-decoration` を使用して適用された) 下線のテキスト装飾線の本来の位置からのオフセット距離を設定します。

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

`text-underline-offset` は `text-decoration` の一括指定の一部ではありません。一つの要素が複数の `text-decoration` による線を持つため、 `text-underline-offset` は下線のみに影響し、 `overline` や `line-through` などの他の装飾線には影響**しません**。

構文
--

```css
/\* 単一のキーワード \*/
text-underline-offset: auto;

/\* 長さ \*/
text-underline-offset: 0.1em;
text-underline-offset: 3px;

/\* パーセント値 \*/
text-underline-offset: 20%;

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

`text-underline-offset` プロパティは、以下のリストのうち一つの値で指定します。

### 値

`auto`

ブラウザーが下線の適切なオフセットを選択します。

`<length>`

下線のオフセットを `<length>` で指定し、フォントファイルの提案やブラウザーの既定値を上書きします。オフセットがフォントサイズに合わせて変化するように、 `em` 単位を使用することを推奨します。

`<percentage>`

下線のオフセットを、要素のフォントにおける **1 em** に対する `<percentage>` で指定します。パーセント値はは相対値として継承されるため、フォントの変化に応じて変化します。このプロパティを適用した場合、オフセットは、フォントサイズや垂直方向の配置が異なる子要素があっても、下線が適用されているボックス全体で一定となります。

公式定義
----

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

形式文法
----
```

text-underline-offset =
  auto                 |
  <length-percentage>

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

```

例
-

### text-underline-offset のデモ

```html
<p class="oneline">Here's some text with an offset wavy red underline!</p>
<br />
<p class="twolines">
  This text has lines both above and below it. Only the bottom one is offset.
</p>
```

```css
p {
  text-decoration: underline wavy red;
  text-underline-offset: 1em;
}

.twolines {
  text-decoration-color: purple;
  text-decoration-line: underline overline;
}
```

仕様書
---

| Specification |
| --- |
| CSS Text Decoration Module Level 4 # underline-offset |

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

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

関連情報
----

* `text-decoration`
* `text-decoration-thickness`


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

<string>
========

**`<string>`** は CSS のデータ型で、一連の文字列を表します。文字列は `content`, `font-family`, `quotes` など、数々の CSS プロパティで使用されます。

構文
--

`<string>` データ型は任意の数の Unicode 文字を、二重引用符 (`"`) または単一引用符 (`'`) で囲んで構成します。

多くの文字は文字通りに表現されます。またすべての文字は、それぞれの 16 進数の Unicode コードポイントで表現することもできます。例えば、 `\22` は二重引用符を表し、 `\27` は単一引用符 (`'`)、 `\A9` は著作権記号 (`©`) を表します。

重要なことは、文字によっては他の方法として、バックスラッシュでエスケープすることもできます。これらには二重引用符で囲まれた文字列内で使われる二重引用符、単一引用符で囲まれた文字列内で使われる単一引用符、およびバックスラッシュ自身です。例えば、 `\\` は単一のバックスラッシュを生成します。

改行文字を出力するには、 `\A` または `\00000A` のように改行文字としてエスケープする必要があります。しかし、改行を行の末尾の文字として `\` でエスケープすると、コード内で文字列を複数行に渡らせることができます。

ただし、改行を行うためには、`white-space` プロパティに適切な値を設定する必要があります。

**メモ:** HTML エンティティ (` ` や `—` など) は、 CSS の `<string>` の中で使用することはできません。

例
-

### 有効な文字列の例

```js
/\* 単純な文字列 \*/
"This string is demarcated by double quotes."
'This string is demarcated by single quotes.'

/\* 文字のエスケープ \*/
"This is a string with \" an escaped double quote."
"This string also has \22 an escaped double quote."
'This is a string with \' an escaped single quote.'
'This string also has \27 an escaped single quote.'
"This is a string with \\ an escaped backslash."

/\* 文字列内の改行 \*/
"This string has a \Aline break in it."

/\* 2 行にわたる文字列 (これら 2 つの文字列は同じ出力になります) \*/
"A really long \
awesome string"
"A really long awesome string"
```

仕様書
---

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

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

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

関連情報
----

* CSS の単位と値
* CSS の基本データ型
* CSS 入門: 単位と値


CSS 論理的プロパティと値 - CSS: カスケーディングスタイルシート

CSS 論理的プロパティと値
==============

**CSS 論理的プロパティと値** (CSS Logical Properties and Values) は CSS のモジュールの一つで、論理的プロパティと値を導入して、物理的ではなく論理的に方向や寸法をマッピングして、レイアウトを制御することができるようにします。

このモジュールは以前に CSS 2.1 で定義されたプロパティについて、論理的なプロパティと値を定義します。論理的プロパティは方向を定義し、これは対応する物理的なプロパティと相対的に等価になります。

### ブロックとインライン

論理的プロパティと値は、*ブロック*と*インライン*という抽象的な用語を使用して、流れに対する方向を記述します。これらの用語の物理的な意味は、書字方向に依存します。

ブロック方向

行内のテキストの流れとは垂直の方向、つまり、横書きでは垂直方向、縦書きでは水平方向です。標準的な英語のテキストでは、垂直方向になります。

インライン方向

行内のテキストの流れと平行の方向、つまり、横書きでは水平方向、縦書きでは垂直方向です。標準的な英語のテキストでは、水平方向になります。

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

### 寸法のプロパティ

* `block-size`
* `inline-size`
* `max-block-size`
* `max-inline-size`
* `min-block-size`
* `min-inline-size`
### マージン、境界、パディングのプロパティ

* `border-block`
* `border-block-color`
* `border-block-end`
* `border-block-end-color`
* `border-block-end-style`
* `border-block-end-width`
* `border-block-start`
* `border-block-start-color`
* `border-block-start-style`
* `border-block-start-width`
* `border-block-style`
* `border-block-width`
* `border-color`
* `border-inline`
* `border-inline-color`
* `border-inline-end`
* `border-inline-end-color`
* `border-inline-end-style`
* `border-inline-end-width`
* `border-inline-start`
* `border-inline-start-color`
* `border-inline-start-style`
* `border-inline-start-width`
* `border-inline-style`
* `border-inline-width`
* `border-start-start-radius`
* `border-start-end-radius`
* `border-end-start-radius`
* `border-end-end-radius`
* `border-style`
* `border-width`
* `margin` (`logical`
Experimental
 キーワード)
* `margin-block`
* `margin-block-end`
* `margin-block-start`
* `margin-inline`
* `margin-inline-end`
* `margin-inline-start`
* `padding` (`logical`
Experimental
 キーワード)
* `padding-block`
* `padding-block-end`
* `padding-block-start`
* `padding-inline`
* `padding-inline-end`
* `padding-inline-start`
### 浮動と位置指定のプロパティ

* `clear` (`inline-end` および `inline-start` キーワード)
* `float` (`inline-end` および `inline-start` キーワード)
* `inset`
* `inset-block`
* `inset-block-end`
* `inset-block-start`
* `inset-inline`
* `inset-inline-end`
* `inset-inline-start`
### その他のプロパティ

* `caption-side` (`inline-end` および `inline-start` キーワード)
* `overflow-block`
* `overflow-inline`
* `overscroll-behavior-block`
* `overscroll-behavior-inline`
* `resize` (`block` および `inline` キーワード)
* `text-align` (`end` および `start` キーワード)
### 非推奨のプロパティ

* `offset-block-end`
Non-standard

非推奨
 (`inset-block-end` に置き換え)
* `offset-block-start`
Non-standard

非推奨
 (`inset-block-start` に置き換え)
* `offset-inline-end`
Non-standard

非推奨
 (`inset-inline-end` に置き換え)
* `offset-inline-start`
Non-standard

非推奨
 (`inset-inline-start` に置き換え)
### ガイド

* 論理的プロパティと値の基本概念
* 寸法の論理的プロパティ
* マージン、境界、パディングの論理的プロパティ
* 浮動と位置指定の論理的プロパティ
仕様書
---

| Specification |
| --- |
| CSS Logical Properties and Values Level 1  |

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

完全な互換性情報は、それぞれのプロパティページを参照してください。


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

border-left
===========

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

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

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

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

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

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

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

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

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

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

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

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

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

### 値

`<br-width>`

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

`<br-style>`

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

`<color>`

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

公式定義
----

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

形式文法
----
```

border-left =
  <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-left: 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`
* 背景と境界
* CSS の学習: 背景と境界


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

font
====

**`font`** は CSS の一括指定プロパティで、要素のフォントの様々なプロパティをすべて設定します。また、要素のフォントにシステムフォントを設定することもできます。

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

他の一括指定プロパティ同様、個別の値が指定されなかった場合は、それぞれの初期値が設定されます (おそらく一括指定ではないプロパティを使用して設定された以前の値を上書きします)。 `font` によって直接設定できない個別指定の `font-size-adjust`, `font-kerning` も初期値に設定されます。

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

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

* `font-family`
* `font-size`
* `font-stretch`
* `font-style`
* `font-variant`
* `font-weight`
* `line-height`
構文
--

`font` プロパティはシステムフォントを選択するための単一のキーワード、又は様々なフォント関連プロパティの一括指定のどちらかで指定することができます。

`font` をシステムキーワードとして指定する場合は、 `caption`, `icon`, `menu`, `message-box`, `small-caption`, `status-bar` のうちの一つでなければなりません。

`font` を様々なフォント関連プロパティの一括指定とする場合は、次のようになります。

* 次の値を含めなければなりません。
    + `<font-size>`
    + `<font-family>`
* 次の値は任意で含めることができます。
    + `<font-style>`
    + `<font-variant>`
    + `<font-weight>`
    + `<font-stretch>`
    + `<line-height>`
* `font-style`, `font-variant`, `font-weight` は `font-size` よりも前になければなりません。
* `font-variant` は CSS 2.1 で定義された値、つまり `normal` および `small-caps` のみ指定できます。
* `font-stretch` は単一のキーワード値のみを指定することができます。
* `line-height` は `font-size` の直後に、 "/" で区切って、 "`16px/3`" のように指定します。
* `font-family` は指定される最後の値である必要があります。
### 値

`<'font-style'>`

`font-style` プロパティを参照。

`<'font-variant'>`

`font-variant` プロパティを参照。

`<'font-weight'>`

`font-weight` プロパティを参照。

`<'font-stretch'>`

`font-stretch` プロパティを参照。

`<'font-size'>`

`font-size` プロパティを参照。

`<'line-height'>`

`line-height` プロパティを参照。

`<'font-family'>`

`font-family` プロパティを参照。

#### システムフォント値

`caption`

キャプション付きコントロールに使われるシステムフォント (ボタン、ドロップダウンなど)。

`icon`

ラベルアイコンに使用されるシステムフォント。

`menu`

メニューに使われるシステムフォント (ドロップダウンメニュー、メニューリストなど)。

`message-box`

ダイアログボックスに使われるシステムフォント。

`small-caption`

小さいコントロールのラベルに使われるシステムフォント。

`status-bar`

ウィンドウのステータスバーに使われるシステムフォント。

接頭辞付きのシステムフォントキーワード

ブラウザーは他にも、接頭辞付きのキーワードをいくつか実装していることがあります。 Gecko は、 `-moz-window`, `-moz-document`, `-moz-desktop`, `-moz-info`, `-moz-dialog`, `-moz-button`, `-moz-pull-down-menu`, `-moz-list`, `-moz-field` を実装しています。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `font-style`: `normal`
* `font-variant`: `normal`
* `font-weight`: `normal`
* `font-stretch`: `normal`
* `font-size`: `medium`
* `line-height`: `normal`
* `font-family`: ユーザエージェントに依存
 |
| 適用対象 | すべての要素とテキスト。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | あり |
| パーセント値 | 一括指定の次の各プロパティとして* `font-size`: 親要素の font-size に対する相対値
* `line-height`: 要素自身のフォントサイズに対する相対値
 |
| 計算値 | 一括指定の次の各プロパティとして* `font-style`: 指定通り
* `font-variant`: 指定通り
* `font-weight`: 指定された通りのキーワードまたは数値であり、 `bolder` および `lighter` は実数に変換される
* `font-stretch`: 指定通り
* `font-size`: 指定通り。ただし相対的な長さはは絶対的な長さに変換される
* `line-height`: パーセンテージか length を指定すると絶対的な値、それ以外は指定通り
* `font-family`: 指定通り
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `font-style`: by computed value type; `normal` animates as `oblique 0deg`
* `font-variant`: 離散値
* `font-weight`: フォントの太さ
* `font-stretch`: フォントの伸長値
* `font-size`: length
* `line-height`: 数値または長さ
* `font-family`: 離散値
 |

形式定義
----
```

font =
  [ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-stretch-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ]  |
  <system-family-name>

<font-variant-css2> =
  normal      |
  small-caps

<font-stretch-css3> =
  normal           |
  ultra-condensed  |
  extra-condensed  |
  condensed        |
  semi-condensed   |
  semi-expanded    |
  expanded         |
  extra-expanded   |
  ultra-expanded

<system-family-name> =
  caption        |
  icon           |
  menu           |
  message-box    |
  small-caption  |
  status-bar

```

例
-

### フォントのプロパティの設定

```css
/\* フォントの大きさを 12px に設定し、行の高さを 14px にする。
 フォントファミリは sans-serif に設定する \*/
p {
  font: 12px/14px sans-serif;
}

/\* フォントの大きさを親要素の 80% または既定値
 (親要素がない場合) に設定する。
 フォントファミリは sans-serif に設定する \*/
p {
  font: 80% sans-serif;
}

/\* フォントの太さを太字に、
 フォントスタイルを斜体に、
 フォントの大きさを large に、
 フォントファミリーは serif に設定する \*/
p {
  font: bold italic large serif;
}

/\* ウィンドウのステータスバーと同じフォントに設定する \*/
p {
  font: status-bar;
}
```

### ライブ例
```

<p>
  下のラジオボタンを変更すると、生成された一括指定とその効果が確認できます。
</p>
<form action="createShortHand()">
  <div class="cf">
    <div class="setPropCont">
      font-style<br />
      <input
 type="radio"
 id="font-style-none"
 name="font\_style"
 checked=""
 value=""
 onchange="setCss()" />
      <label for="font-style-none">none</label><br />
      <input
 type="radio"
 id="font-style-normal"
 name="font\_style"
 value="normal"
 onchange="setCss()" />
      <label for="font-style-normal">normal</label><br />
      <input
 type="radio"
 id="font-style-italic"
 name="font\_style"
 value="italic"
 onchange="setCss()" />
      <label for="font-style-italic">italic</label><br />
      <input
 type="radio"
 id="font-style-oblique"
 name="font\_style"
 value="oblique"
 onchange="setCss()" />
      <label for="font-style-oblique">oblique</label>
    </div>

    <div class="setPropCont">
      font-variant<br />
      <input
 type="radio"
 id="font-variant-none"
 name="font\_variant"
 checked=""
 value=" "
 onchange="setCss()" />
      <label for="font-variant-none">none</label><br />
      <input
 type="radio"
 id="font-variant-normal"
 name="font\_variant"
 value="normal"
 onchange="setCss()" />
      <label for="font-variant-normal">normal</label><br />
      <input
 type="radio"
 id="font-variant-small-caps"
 name="font\_variant"
 value="small-caps"
 onchange="setCss()" />
      <label for="font-variant-small-caps">small-caps</label>
    </div>

    <div class="setPropCont">
      font-weight<br />
      <input
 type="radio"
 id="font-weight-none"
 name="font\_weight"
 value=""
 onchange="setCss()" />
      <label for="font-weight-none">none</label><br />
      <input
 type="radio"
 id="font-weight-normal"
 checked=""
 name="font\_weight"
 value="400"
 onchange="setCss()" />
      <label for="font-weight-normal">normal</label><br />
      <input
 type="radio"
 id="font-weight-bold"
 name="font\_weight"
 value="700"
 onchange="setCss()" />
      <label for="font-weight-bold">bold</label>
    </div>

    <div class="setPropCont">
      font-size<br />
      <input
 type="radio"
 id="font-size-12px"
 name="font\_size"
 value="12px"
 onchange="setCss()" />
      <label for="font-size-12px">12px</label><br />
      <input
 type="radio"
 id="font-size-16px"
 name="font\_size"
 value="16px"
 checked=""
 onchange="setCss()" />
      <label for="font-size-16px">16px</label><br />
      <input
 type="radio"
 id="font-size-24px"
 name="font\_size"
 value="24px"
 onchange="setCss()" />
      <label for="font-size-24px">24px</label>
    </div>

    <div class="setPropCont">
      line-height<br />
      <input
 type="radio"
 id="line-height-none"
 name="line\_height"
 checked=""
 value=""
 onchange="setCss()" />
      <label for="line-height-none">none</label><br />
      <input
 type="radio"
 id="line-height-1.2"
 name="line\_height"
 value="/1.2"
 onchange="setCss()" />
      <label for="line-height-1.2">1.2</label><br />
      <input
 type="radio"
 id="line-height-3"
 name="line\_height"
 value="/3"
 onchange="setCss()" />
      <label for="line-height-3">3</label>
    </div>
    <br />

    <div class="setPropCont fontfamily">
      font-family<br />
      <input
 type="radio"
 id="font-family-courier"
 name="font\_family"
 checked=""
 value="courier"
 onchange="setCss(5,'courier')" />
      <label for="font-family-courier">courier</label><br />
      <input
 type="radio"
 id="font-family-serif"
 name="font\_family"
 value="serif"
 onchange="setCss()" />
      <label for="font-family-serif">serif</label><br />
      <input
 type="radio"
 id="font-family-sans-serif"
 name="font\_family"
 value="sans-serif"
 onchange="setCss()" />
      <label for="font-family-sans-serif">sans-serif</label><br />
      <input
 type="radio"
 id="font-family-arial"
 name="font\_family"
 value="arial"
 onchange="setCss()" />
      <label for="font-family-arial">Arial</label><br />
      <input
 type="radio"
 id="font-family-monospace"
 name="font\_family"
 value="monospace"
 onchange="setCss()" />
      <label for="font-family-monospace">monospace</label><br />
      <input
 type="radio"
 id="font-family-cursive"
 name="font\_family"
 value="cursive"
 onchange="setCss()" />
      <label for="font-family-cursive">cursive</label><br />
      <input
 type="radio"
 id="font-family-fantasy"
 name="font\_family"
 value="fantasy"
 onchange="setCss()" />
      <label for="font-family-fantasy">fantasy</label><br />
      <input
 type="radio"
 id="font-family-system-ui"
 name="font\_family"
 value="system-ui"
 onchange="setCss()" />
      <label for="font-family-system-ui">system-ui</label><br />
    </div>
  </div>

  <div class="cf propInputs">
    <div class="propInputCont tar">font :</div>
    <div class="propInputCont">
      <input type="text" class="curCss" id="input\_font\_style" /><br />
      font-style <br />
      optional
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss" id="input\_font\_variant" /> <br />
      font-variant <br />
      optional
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss" id="input\_font\_weight" /> <br />
      font-weight <br />
      optional
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss mandatory" id="input\_font\_size" /> <br />
      font-size <br />
      mandatory
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss" id="input\_line\_height" /> <br />
      line-height <br />
      optional
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss mandatory" id="input\_font\_family" />
      <br />
      font-family <br />
      mandatory
    </div>
  </div>
</form>

<div class="fontShortHand">This is some sample text.</div>
<br /><br /><br /><br /><br /><br />
```

```
body,
input {
  font: 14px arial;
  overflow: hidden;
}

.propInputCont {
  float: left;
  text-align: center;
  margin-right: 5px;
  width: 80px;
}

.setPropCont {
  float: left;
  margin-right: 5px;
  width: 120px;
}

.propInputs,
.setPropCont {
  margin-bottom: 1em;
}

.curCss {
  border: none;
  border-bottom: 1px solid black;
  text-align: center;
  width: 80px;
}

.mandatory {
  border-bottom-color: red;
}

.cf:before,
.cf:after {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}

.tar {
  width: 40px;
  text-align: right;
}
.fontfamily {
  display: inline-block;
}
```

```
var textAreas = document.getElementsByClassName("curCss"),
  shortText = "",
  getCheckedValue,
  setCss,
  getProperties,
  injectCss;

getProperties = function () {
  shortText =
    getCheckedValue("font\_style") +
    " " +
    getCheckedValue("font\_variant") +
    " " +
    getCheckedValue("font\_weight") +
    " " +
    getCheckedValue("font\_size") +
    getCheckedValue("line\_height") +
    " " +
    getCheckedValue("font\_family");

  return shortText;
};

getCheckedValue = function (radio\_name) {
  oRadio = document.forms[0].elements[radio_name];
  for (var i = 0; i < oRadio.length; i++) {
    if (oRadio[i].checked) {
      var propInput = "input\_" + radio_name,
        curElemName = "input\_" + radio_name,
        curElem = document.getElementById(curElemName);
      curElem.value = oRadio[i].value;

      return oRadio[i].value;
    }
  }
};

setCss = function () {
  getProperties();
  injectCss(shortText);
};

injectCss = function (cssFragment) {
  old = document.body.getElementsByTagName("style");
  if (old.length > 1) {
    old[1].parentElement.removeChild(old[1]);
  }
  css = document.createElement("style");
  css.innerHTML = ".fontShortHand{font: " + cssFragment + "}";
  document.body.appendChild(css);
};

setCss();
```

仕様書
---

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

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

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

関連情報
----

* `font-style`
* `font-weight`
* 基本的なテキストとフォントの装飾


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

env()
=====

**`env()`** は CSS の関数で、ユーザーエージェントが定義した環境変数の値を、 `var()` 関数やカスタムプロパティと同じ方法で CSS に挿入するために使用することができます。異なる点は、ユーザーが定義しているのではなくユーザーエージェントが定義しているものであること、カスタムプロパティは宣言されている要素のスコープであるのに対し、環境変数は文書でグローバルなスコープであることです。

加えて、宣言の外部で使用することができないカスタムプロパティとは異なり、 `env()` 関数はプロパティ値の任意の部分、記述子の任意の部分 (例 メディアクエリールール) で使用することができます。仕様書が発展すると、セレクターなどの他の場所でも使用することができるかもしれません。

もともとは iOS ブラウザーで、開発者が内容物をビューポートの安全な領域に配置できるように提供されていたもので、仕様で定義されている `safe-area-inset-*` の値を使用することで、矩形以外の画面を使用している閲覧者でも、内容物が見えることを保証するのに役立ちます。

例えば、 `env()` によって解決される一般的な問題として、端末の通知がアプリのユーザーインターフェースの一部を覆ってしまうというものがあります。 `env()` を使って固定要素を配置することで、ビューポートの安全な領域に確実に表示させることができます。

`env()` 変数のもう一つの使用例は、アプリケーションのウィンドウの表面積をフルに活用するために、ウィンドウ制御オーバーレイ機能を使用するデスクトップのプログレッシブウェブアプリ (PWA) のためのものです。 `titlebar-area-*` 値を使用すると、タイトルバーがあったであろう場所に要素を配置し、内容物がウィンドウ制御ボタンにかからないようにすることができます。

構文
--

```css
/\* 代替値なしで 4 つの安全な矩形までの寸法値を使用 \*/
env(safe-area-inset-top);
env(safe-area-inset-right);
env(safe-area-inset-bottom);
env(safe-area-inset-left);

/\* 代替値付きで使用 \*/
env(safe-area-inset-top, 20px);
env(safe-area-inset-right, 1em);
env(safe-area-inset-bottom, 0.5vh);
env(safe-area-inset-left, 1.4rem);
```

### 値

`safe-area-inset-top`, `safe-area-inset-right`, `safe-area-inset-bottom`, `safe-area-inset-left`

`safe-area-inset-*` の値は 4 つの環境変数から成り、矩形ではない画面において、ビューポートの縁から、内容物を置いても切り取られる危険がない安全な矩形までの寸法を、上、右、下、左で定義します。一般的なノートパソコンのモニターなどの矩形のビューポートでは、これらの値はゼロに等しくなります。矩形ではない画面 — 例えば円い腕時計の画面 — では、矩形の中のすべての内容物が表示できるような矩形から、ユーザーエージェントが設定します。

`titlebar-area-x`, `titlebar-area-y`, `titlebar-area-width`, `titlebar-area-height`

`titlebar-area-*` 変数は、デスクトップ端末にインストールされた PWA に有用です。デスクトップの PWA が `window-controls-overlay` で display\_override の値を使用すると、 `titlebar-area-*` 変数を使用して内容物がウィンドウの制御ボタン（すなわち、最小化、最大化、閉じるボタン）に重ならないようにすることができます。

**注**: ほかの CSS プロパティとは異なり、ユーザーエージェントの定義するプロパティ名は大文字・小文字が区別されます。

### 形式文法
```

<env()> =
  env( <custom-ident> <integer [0,∞]>\* , <declaration-value>? )

```

使用方法
----

ブラウザーに画面上の利用可能な範囲全体を使用するように指示し、 `env()` 変数を使用できるようにするには、新しいビューポートのメタ値を追加する必要があります。

```html
<meta name="viewport" content="viewport-fit=cover" />
```

You can then use `env()` in your CSS:

```css
body {
  padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) env(
      safe-area-inset-bottom,
      20px
    ) env(safe-area-inset-left, 20px);
}
```

例
-

### env() を使用して端末の UI がボタンに被らないようにする

次の例では、 `env()` を使用して、固定アプリのツールバーのボタンが、画面の下部に表示される端末の通知によって隠れないようにしています。デスクトップでは、 `safe-area-inset-bottom` は `0` です。しかし、 iOS のような画面下部に通知を表示する端末では、通知を表示するためのスペースを残す値が含まれています。これを `padding-bottom` の値として使用することで、その端末で自然に見える隙間を作ることができます。

```html
<main>アプリのメイン内容物はこちらです。</main>
<footer>
  <button>Go here</button>
  <button>Or here</button>
</footer>
```

```css
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font: 1em system-ui;
}

main {
  flex: 1;
  background-color: #eee;
  padding: 1em;
}

footer {
  flex: none;
  display: flex;
  gap: 1em;
  justify-content: space-evenly;
  background: black;
  padding: 1em 1em calc(1em + env(safe-area-inset-bottom));
  /\* safe-area-inset-bottom の値を最初の 1em のパディングに追加します。
 この変数が正の値であるデバイスでは、より大きな黒い領域が表示されます。 \*/
  position: sticky;
  bottom: 0;
}

button {
  padding: 1em;
  background: white;
  color: black;
  margin: 0;
  width: 100%;
  border: none;
  font: 1em system-ui;
}
```

### 代替値の仕様

以下の例では、 `env()` の第 2 引数を使用して、環境変数が利用できなかった場合の代替値を提供しています。

```html
<p>
  お使いのブラウザーが <code>env()</code> 関数に対応している場合、
  この段落のテキストと左の境界の間に 50px のパディングが設定されますが、
  上、右、下には設定されません。 これは、他の CSS
  プロパティとは異なり、ユーザーエージェントプロパティ名は
  大文字・小文字が区別されるため、 <code>padding: 0 0 0 50px</code>
  と同等の CSS になるからです。
</p>
```

```css
p {
  width: 300px;
  border: 2px solid red;
  padding: env(safe-area-inset-top, 50px) env(safe-area-inset-right, 50px) env(
      safe-area-inset-bottom,
      50px
    ) env(SAFE-AREA-INSET-LEFT, 50px);
}
```

### 値の例

```css
padding: env(
  safe-area-inset-bottom,
  50px
); /\* 画面が矩形のユーザーエージェントではゼロ \*/
padding: env(
  Safe-area-inset-bottom,
  50px
); /\* UA プロパティは大文字・小文字を区別するため 50px \*/
padding: env(
  x,
  50px 20px
); /\* x が妥当な環境変数でなければ padding: '50px 20px' が設定される \*/
padding: env(
  x,
  50px,
  20px
); /\* x が妥当な環境変数でなく、 '50px, 20px' が妥当なパディング値でないため無視 \*/
```

代替値の構文は、カスタムプロパティの場合と同様、カンマが許容されます。ただし、プロパティ値がカンマに対応していない場合、値は妥当ではなくなります。

**注**: ユーザーエージェントプロパティは all プロパティでリセットされません。

### env() を使用して、デスクトップの PWA でウィンドウ制御ボタンが内容物に被らないようにする

次の例では、ウィンドウ制御オーバーレイ機能を使用する PWA で表示される内容物が、オペレーティングシステムのウィンドウ制御ボタンで隠れないようにするために `env()` を使用しています。 `titlebar-area-*` の値は、通常タイトルバーが表示されていたであろう矩形を定義します。モバイル端末など、ウィンドウ制御オーバーレイ機能に対応していない端末では、代替値が使用されます。

デスクトップ端末にインストールされた PWA は、通常次のように表示されます。

![デスクトップにインストールされた PWA が通常どのように見えるかを示す図。ウィンドウの操作ボタンとタイトルバー、その下にウェブコンテンツが表示される。](/ja/docs/Web/CSS/env/desktop-pwa-window.png)

ウィンドウ制御オーバーレイ機能では、ウェブコンテンツがアプリのウィンドウ表面全体を覆い、ウィンドウ制御ボタンや PWA ボタンがオーバーレイ表示されます。

![デスクトップにインストールされた PWA がウィンドウ制御オーバーレイ機能により、ウィンドウ制御ボタン、タイトルバーなし、ウィンドウ全体に広がるウェブコンテンツがどのように見えるかの図](/ja/docs/Web/CSS/env/desktop-pwa-window-wco.png)

```html
<header>ここにアプリのタイトルが入る</header>
<main>ここにアプリのメインコンテンツが入る</main>
```

```css
header {
  position: fixed;
  left: env(titlebar-area-x);
  top: env(titlebar-area-y);
  width: env(titlebar-area-width);
  height: env(titlebar-area-height);
}

main {
  margin-top: env(titlebar-area-height);
}
```

仕様書
---

| Specification |
| --- |
| CSS Environment Variables Module Level 1 # env-function |

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

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

関連情報
----

* `var(…)`
* CSS カスタムプロパティと変数のカスケード
* カスタムプロパティ (--\*)
* CSS カスタムプロパティ (変数) の使用
* Customize the window controls overlay of your PWA's title bar
* Display content in the title bar
* Breaking Out of the Box


要素型セレクター - CSS: カスケーディングスタイルシート

要素型セレクター
========

CSS の**要素型セレクター** (type selector) は、ノード名で要素を一致させます。つまり、文書内にある指定された型の要素をすべて選択します。

```css
/\* すべての <a> 要素。 \*/
a {
  color: red;
}
```

要素型セレクターは `@namespace` を使用して名前空間を付けることができます。これは、複数の名前空間を含む文書、例えば HTML5 とインライン SVG または MathML、または複数の語彙が混在した XML などを扱うのに有用です。

* `ns|h1` - 名前空間 *ns* の中で `<h1>` 要素に一致します
* `*|h1` - `<h1>` 要素に一致します
* `|h1` - 名前空間が宣言されていない `<h1>` 要素に一致します
構文
--

```css
要素名 { スタイルプロパティ }
```

例
-

### CSS

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

### HTML

```html
<span>テキストを持つ span です。</span>
<p>テキストを持つ p です。</p>
<span>追加のテキストを持つ span です。</span>
```

### 結果

### 名前空間

この例では、セレクターは example 名前空間内の `<h1>` 要素にのみ一致します。

```css
@namespace example url(http://www.example.com);
example|h1 {
  color: blue;
}
```

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # type-selectors |

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

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

関連情報
----

* CSS セレクター
* CSS の学習: セレクター


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

<percentage>
============

**`<percentage>`** は CSS のデータ型で、パーセント値による割合を表します。要素の親オブジェクトからの相対的な寸法を定義するためによく使われます。 `width`、 `height`, `margin`, `padding`、 `font-size` など、たくさんのプロパティでパーセント値を使うことができます。

**メモ:** 継承されるのは計算値だけです。親要素のプロパティでパーセント値が使われても、継承したプロパティではパーセント値ではなく、実数値 (`<length>` 値に向けたピクセル単位の幅など) にのみアクセスできます。

構文
--

`<percentage>` データ型は、 `<number>` とそれに続くパーセント記号 (`%`) から成ります。任意で、先行して符号 (`+` または `-`) を、負の値が許可されない値であってもすべてのプロパティに付けることができます。他の CSS の数値と同様、記号と数値の間には空白を置きません。

補間
--

アニメーションをする時、 `<percentage>` データ型は浮動小数点の実数として補間が行われます。補間の速度は、アニメーションに関連付けられたタイミング関数で定義します。

例
-

### 幅と左マージン

```html
<div style="background-color:navy;">
  <div style="width:50%; margin-left:20%; background-color:chartreuse;">
    Width: 50%, Left margin: 20%
  </div>
  <div style="width:30%; margin-left:60%; background-color:pink;">
    Width: 30%, Left margin: 60%
  </div>
</div>
```

以上の HTML は以下のような出力になります。

### font-size

```html
<div style="font-size:18px;">
  <p>Full-size text (18px)</p>
  <p><span style="font-size:50%;">50% (9px)</span></p>
  <p><span style="font-size:200%;">200% (36px)</span></p>
</div>
```

以上の HTML は以下のような出力になります。

仕様書
---

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

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

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

関連情報
----

* `<length-percentage>`
* CSS 値と単位


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

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

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

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

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

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

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

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

構文
--

### 値

`<length-percentage>`

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

公式定義
----

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

形式文法
----
```

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

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

```

例
-

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

#### HTML

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

#### CSS Content

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

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

#### 結果

仕様書
---

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

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

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

関連情報
----

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


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

:in-range
=========

**`:in-range`** は CSS の擬似クラスで、現在の値が `min` および `max` 属性による制限範囲内にある `<input>` 要素を表します。

```css
/\* 入力範囲が設定されていて、値がその範囲に該当する
 <input> 要素をすべて選択 \*/
input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
}
```

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

この擬似クラスは、入力欄の現在の値が許可された範囲内にあることをユーザーに視覚的に示すのに便利です。

**メモ:** この擬似クラスは範囲制限を持つ（または設定できる）要素にのみ適用されます。そのような制限がない場合は、要素は "in-range" にも "out-of-range" にもなりません。

構文
--
```

:in-range
```

例
-

### HTML

```html
<form action="" id="form1">
  <ul>
    1 から 10 の間の値が有効です。
    <li>
      <input
 id="value1"
 name="value1"
 type="number"
 placeholder="1 to 10"
 min="1"
 max="10"
 value="12"
 required />
      <label for="value1">あなたの値は</label>
    </li>
  </ul>
</form>
```

### CSS

```css
li {
  list-style: none;
  margin-bottom: 1em;
}

input {
  border: 1px solid black;
}

input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
}

input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
  border: 2px solid red;
}

input:in-range + label::after {
  content: "範囲内です。";
}

input:out-of-range + label::after {
  content: "範囲外です！";
}
```

### 結果

**メモ:** 空の `<input>` は範囲外としてカウントされず、 `:out-of-range` 擬似クラスセレクターで選択されることはありません。空の入力を選択するための `:blank` 擬似クラスがありますが、この記事を書いている時点では、実験的で対応が十分ではありません。また、 `required` 属性と `:invalid` 擬似クラスを使用すると、入力を必須にするためのより一般的なロジックとスタイルを提供できます (`:invalid` は空白*および*範囲外の入力のスタイルを指定します)。

仕様書
---

| Specification |
| --- |
| HTML Standard # selector-in-range |
| Selectors Level 4 # in-range-pseudo |

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

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

関連情報
----

* `:out-of-range`
* フォームデータの検証


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

scroll-snap-stop
================

**`scroll-snap-stop`** は CSS のプロパティで、スクロールコンテナーが可能なスナップ位置を「通り過ぎる」ことを許可するかどうかを定義します。

```css
/\* キーワード値 \*/
scroll-snap-stop: normal;
scroll-snap-stop: always;

/\* グローバル値 \*/
scroll-snap-type: inherit;
scroll-snap-type: initial;
scroll-snap-type: unset;
```

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

構文
--

### 値

`normal`

スクロールコンテナーの視覚ビューポートがスクロールされた時、可能なスナップ位置を「通り過ぎる」ことを許可します。

`always`

スクロールコンテナーは可能なスナップ位置を「通り過ぎる」ことを許可しません。最初の要素のスナップ位置にスナップします。

公式定義
----

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

形式文法
----
```

scroll-snap-stop =
  normal  |
  always

```

例
-

### 様々な軸でのスナップ

この例は `scroll-snap-type` から複製したものに多少の修正を加えたものです。

#### CSS

```css
/\* setup \*/
:root,
body {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: column nowrap;
  font-family: monospace;
}
.container {
  display: flex;
  overflow: auto;
  outline: 1px dashed lightgray;
  flex: none;
}

.container.x {
  width: 100%;
  height: 128px;
  flex-flow: row nowrap;
}

.container.y {
  width: 256px;
  height: 256px;
  flex-flow: column nowrap;
}
/\* definite scroll snap \*/
.mandatory-scroll-snapping > div {
  scroll-snap-stop: always;
}
.proximity-scroll-snapping > div {
  scroll-snap-stop: normal;
}
/\* scroll-snap \*/
.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}

.y.mandatory-scroll-snapping {
  scroll-snap-type: y mandatory;
}

.x.proximity-scroll-snapping {
  scroll-snap-type: x proximity;
}

.y.proximity-scroll-snapping {
  scroll-snap-type: y proximity;
}

.container > div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
}

.x.container > div {
  line-height: 128px;
  font-size: 64px;
  width: 100%;
  height: 128px;
}

.y.container > div {
  line-height: 256px;
  font-size: 128px;
  width: 256px;
  height: 256px;
}
/\* appearance fixes \*/
.y.container > div:first-child {
  line-height: 1.3;
  font-size: 64px;
}
/\* coloration \*/
.container > div:nth-child(even) {
  background-color: #87ea87;
}

.container > div:nth-child(odd) {
  background-color: #87ccea;
}
```

#### HTML

```html
<div class="container x mandatory-scroll-snapping" dir="ltr">
  <div>X Mand. LTR</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="container x proximity-scroll-snapping" dir="ltr">
  <div>X Proximity LTR</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="container y mandatory-scroll-snapping" dir="ltr">
  <div>Y Mand. LTR</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="container y proximity-scroll-snapping" dir="ltr">
  <div>Y Prox. LTR</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="container x mandatory-scroll-snapping" dir="rtl">
  <div>X Mandatory RTL</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="container x proximity-scroll-snapping" dir="rtl">
  <div>X Proximity RTL</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="container y mandatory-scroll-snapping" dir="rtl">
  <div>Y Mand. RTL</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="container y proximity-scroll-snapping" dir="rtl">
  <div>Y Prox. RTL</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # scroll-snap-stop |

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

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

関連情報
----

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


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

scroll-margin-inline-end
========================

`scroll-margin-inline-end` プロパティは、スクロールスナップ領域のインライン方向における末尾側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。

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

構文
--

```css
/\* <length> 値 \*/
scroll-margin-inline-end: 10px;
scroll-margin-inline-end: 1em;

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

### 値

`<length>`

スクロールコンテナーのインライン方向における末尾側の辺からみた外部の距離です。

公式定義
----

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

形式文法
----
```

scroll-margin-inline-end =
  <length>

```

例
-

### 簡単なデモ

この例では、上記のインタラクティブ例と非常によく似たものを実装していますが、ここではその実装方法を説明します。

ここでの目的は、水平方向にスクロールする 4 つのブロックを作成することです。2 つ目と 3 つ目のブロックは、それぞれのブロックの右端に近いところでスナップします。

#### HTML

ブロックを表す HTML はとても簡単です。

```html
<div class="scroller">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
```

#### CSS

外側のコンテナーのスタイルは以下のようになっています。

```css
.scroller {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid #000;
  scroll-snap-type: x mandatory;
}
```

スクロールスナップに関連する主な部品は、`overflow-x: scroll` で、コンテンツがスクロールしても隠れないようにしています。また、`scroll-snap-type: x mandatory` で、スクロールのスナップは水平軸に沿って行わなければならず、スクロールは常にスナップ点で静止するようになっています。

子要素のスタイルは次のようになっています。

```css
.scroller > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: #663399;
  color: #fff;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: end;
}

.scroller > div:nth-child(2n) {
  background-color: #fff;
  color: #663399;
}
```

ここで最も重要なのは `scroll-snap-align: end` で、これは右側の端 (ここでは x 軸に沿った「末尾」) をスナップ点として指定するものです。

最後に、スクロールのマージン値を指定しますが、これは 2 番目と 3 番目の子要素に対して異なる値を指定します。

```css
.scroller > div:nth-child(2) {
  scroll-margin-inline-end: 1rem;
}

.scroller > div:nth-child(3) {
  scroll-margin-inline-end: 2rem;
}
```

つまり、真ん中の子要素を過ぎてスクロールした場合、2 番目の `<div>` のインラインの末尾から `1rem`、3 番目の `<div>` のインラインの末尾から `2rem` のところでスナップすることになります。

#### 結果

自分でやってみましょう。

仕様書
---

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

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

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

関連情報
----

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


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

column-rule-style
=================

**`column-rule-style`** は CSS のプロパティで、段組みレイアウトで段の間に引かれる線 (段間罫) のスタイルを設定します。

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

構文
--

```css
/\* <'border-style'> の値 \*/
column-rule-style: none;
column-rule-style: hidden;
column-rule-style: dotted;
column-rule-style: dashed;
column-rule-style: solid;
column-rule-style: double;
column-rule-style: groove;
column-rule-style: ridge;
column-rule-style: inset;
column-rule-style: outset;

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

`column-rule-style` プロパティは、単一の `<'border-style'>` 値で指定します。

### 値

`<'border-style'>`

`border-style` で定義されているキーワードで、段間罫のスタイルを指定します。スタイルは collasped の境界線モデルで解釈されます。

公式定義
----

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

形式文法
----
```

column-rule-style =
  <line-style>

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

```

例
-

### 破線の段間罫を設定

#### HTML

```html
<p>
  This is a bunch of text split into three columns. The `column-rule-style`
  property is used to change the style of the line that is drawn between
  columns. Don't you think that's wonderful?
</p>
```

#### CSS

```css
p {
  column-count: 3;
  column-rule-style: dashed;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Multi-column Layout Module Level 1 # crs |

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

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

関連情報
----

* 段組みレイアウト
* `column-rule`
* `column-rule-width`
* `column-rule-color`


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

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

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`** は CSS の一括指定プロパティで、グリッド列の中におけるグリッドアイテムの寸法と位置を指定し、線、区間、なし (自動) をグリッド配置に適用することで、グリッド領域の行の先頭と末尾の端を指定します。

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

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

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

* `grid-column-end`
* `grid-column-start`
構文
--

```css
grid-column: auto;

/\* 線番号による \*/
grid-column: 1;
grid-column: 1 / 3;
grid-column: 1 / span 2;

/\* 線の名称による \*/
grid-column: main-start;
grid-column: main-start / main-end;

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

このプロパティは 1 つまたは 2 つの `<grid-line>` の値で指定します。

2 つの `<grid-line>` 値を指定する場合は、 "/" で区切ります。個別指定の `grid-column-start` はスラッシュの前に設定し、個別指定の `grid-column-end` はスラッシュの後に設定します。

それぞれの `<grid-line>` の値は以下の何れかを指定することができます。

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

`auto`

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

`<custom-ident>`

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

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

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

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

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

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

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

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

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

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

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

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `grid-column-start`: `auto`
* `grid-column-end`: `auto`
 |
| 適用対象 | 包含ブロックがグリッドコンテナーであるグリッドアイテムまたは絶対位置指定のボックス |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `grid-column-start`: 指定通り
* `grid-column-end`: 指定通り
 |
| アニメーションの種類 | 離散値 |

形式文法
----
```

grid-column =
  <grid-line> [ / <grid-line> ]?

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

```

例
-

### グリッド列の寸法と位置の設定

#### HTML

```html
<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>
```

#### CSS

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

#item1 {
  background-color: lime;
}

#item2 {
  background-color: yellow;
  grid-column: 2 / 4;
}

#item3 {
  background-color: blue;
  grid-column: span 2 / 7;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

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


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

初期値
===

**初期値 (initial value)** は CSS のプロパティの既定値であり、仕様書の定義表に挙げられているものです。初期値の使い方はプロパティが継承されているかどうかで異なります。

* 継承されるプロパティでは、初期値は*ルート要素に対してのみ*、指定値が指定されていない場合に限り使用されます。
* 継承されないプロパティでは、初期値は*すべての要素*において、指定値が指定されていない場合に限り使用されます。

`initial` キーワードを使用すると、明示的に初期値を指定することができます。

**メモ:** 初期値をブラウザーのスタイルシートで指定された値と混同しないでください。

仕様書
---

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # specified-value |

関連情報
----

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


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

math-style
==========

`math-style` プロパティは、 MathML の数式を通常の高さで表示するか、コンパクトな高さで表示するかを指定します。

構文
--

```css
/\* キーワード値 \*/
math-style: normal;
math-style: compact;

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

### 値

`normal`

初期値であり、通常のレンダリングを示します。

`compact`

子孫の数式のレイアウトの論理高を最小化しようとします。

公式定義
----

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

形式文法
----
```

math-style =
  normal   |
  compact

```

例
-

### 数式のスタイルを compact に変更

#### CSS

```css
math {
  math-style: normal;
}
.compact {
  math-style: compact;
}
```

#### HTML

```html
<p>
  Normal height
  <math>
    <mrow>
      <munderover>
        <mo>∑</mo>
        <mrow>
          <mi>n</mi>
          <mo>=</mo>
          <mn>1</mn>
        </mrow>
        <mrow>
          <mo>+</mo>
          <mn>∞</mn>
        </mrow>
      </munderover>
    </mrow>
  </math>
  and compact height
  <math class="compact">
    <mrow>
      <munderover>
        <mo>∑</mo>
        <mrow>
          <mi>n</mi>
          <mo>=</mo>
          <mn>1</mn>
        </mrow>
        <mrow>
          <mo>+</mo>
          <mn>∞</mn>
        </mrow>
      </munderover>
    </mrow>
  </math>
  equations.
</p>
```

#### 結果

仕様書
---

| Specification |
| --- |
| MathML Core # the-math-style-property |

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

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

関連情報
----

* `math-depth`
* `font-size`


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

列結合子
====

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

**列結合子** (column combinator, `||`) は、2 つの CSS セレクターの間に配置されます。前者のセレクターに一致する列要素に所属する、後者のセレクターに一致する要素に一致します。

```css
/\* 表の "selected" クラスの列に所属するセル \*/
col.selected||td {
  background: gray;
}
```

構文
--

```css
column-selector||cell-selector {
  /\* スタイルプロパティ \*/
}
```

例
-

### HTML

```html
<table border="1">
  <colgroup>
    <col span="2" />
    <col class="selected" />
  </colgroup>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td colspan="2">D</td>
      <td>E</td>
    </tr>
    <tr>
      <td>F</td>
      <td colspan="2">G</td>
    </tr>
  </tbody>
</table>
```

### CSS

```css
col.selected||td {
  background: gray;
  color: white;
  font-weight: bold;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # the-column-combinator |

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

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

関連情報
----

* `<col>`
* `<colgroup>`
* `grid`
* `:nth-col` (en-US)
* `:nth-last-col` (en-US)


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

@page
=====

**`@page`** は CSS のアットルールで、文書を印刷するときに一部の CSS プロパティを変更するために使用します。

構文
--

```css
@page {
  margin: 1cm;
}

@page :first {
  margin: 2cm;
}
```

### 記述子

`size`

対象となるページボックスの包含ブロックの寸法と向きを指定します。一般的な場合、1つのページボックスが1枚の用紙に印刷され、対象となる用紙の寸法を示します。

解説
--

`@page` ですべての CSS プロパティを変更できるわけではありません。変更できるのは、マージン、orphans、widows と、文書のページ区切りだけです。これ以外の CSS プロパティを変えようとしても、無視されます。

`@page` アットルールには、 CSS オブジェクトモデルインターフェイスの `CSSPageRule` からアクセスできます。

**メモ:** W3C は、ビューポートに関する `<length>` の単位、`vh`、`vw`、`vmin`、`vmax` の取り扱い方について議論中です。差し当たっては、これらを `@page` アットルールの中で使わないでください。

形式文法
----
```

@page =
  @page <page-selector-list>? { <declaration-rule-list> }

<page-selector-list> =
  <page-selector>#

<page-selector> =
  [ <ident-token>? <pseudo-page>\* ]!

<pseudo-page> =
  ':' [ left | right | first | blank ]

```

例
-

### @page 擬似クラスの例

さまざまな `@page` の擬似クラスのページにある例を参照してください。

* `:blank`
* `:first`
* `:left`
* `:right`
* `:recto`
Experimental
* `:verso`
Experimental
仕様書
---

| Specification |
| --- |
| CSS Paged Media Module Level 3 # at-page-rule |
| CSS Logical Properties and Values Level 1 # page |

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

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

関連情報
----

* この件 (ページベースのカウンターなど) に関する進捗の追跡は、 Bugzilla のチケット [META] CSS Paged Media Module Level 3 を参照してください。


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

font-variation-settings
=======================

**`font-variation-settings`** は CSS のプロパティで、変更したい特性の 4 文字の軸名と特性の値を指定することにより、可変フォントに対する低水準の制御を提供します。

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

構文
--

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

/\* 可変フォントの軸名の値を設定 \*/
font-variation-settings: "XHGT" 0.7;

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

### 値

このプロパティは 1 つまたは 2 つの形を取ることができます。

`normal`

テキストは既定の設定を使用してレイアウトされます。

`<string> <number>`

テキストを描画する際、フォントの特性を有効または無効にするために可変フォントの軸名のリストがテキストレイアウトエンジンへ渡されます。それぞれの設定は常に、一つ以上の4文字の ASCII 文字の `<string>` と、続いて設定する軸の値を示す `<number>` の組み合わせから成ります。`<string>` の文字が多すぎたり少なすぎたり、文字が U+20 - U+7E のコードポイントの範囲を超えていたりした場合は、プロパティ全体が無効になります。フォントデザイナーによって定義された利用可能な値の範囲次第では、`<number>` は小数や負の数を取ることもできます。

解説
--

このプロパティは、その特性を有効にしたりアクセスしたりするための他の方法がない場合に、可変フォント特性を設定するために設計された低水準の仕組みです。これらの特性 (例えば `font-weight` や `font-style`) を設定するための基本プロパティがない場合にのみ使用してください。

`font-variation-settings` を使用して設定されたフォント特性は、常に `font-weight` などの基本フォントプロパティに関する設定を上書きし、言うまでもなくカスケードに現れます。ブラウザーによっては、 `@font-face` 宣言が `font-weight` の範囲を含んでいる場合のみこれが成り立ちます。

### 登録済みの軸とカスタム軸

可変フォントの軸には、**登録済み**の軸と**カスタム**軸があります。

登録済みの軸は、もっとも頻繁に遭遇するもので、仕様書の著者が標準化する価値があると感じるほど一般的なものです。なお、これは作者がフォントにすべてを入れる必要があることを意味するものではありません。

こちらは関連する CSS プロパティに対応する登録済みの軸です。

| 軸のタグ | CSS プロパティ |
| --- | --- |
| "wght" | `font-weight` |
| "wdth" | `font-stretch` |
| "slnt" (slant) | `font-style`: `oblique + angle` |
| "ital" | `font-style`: `italic` |
| "opsz" | `font-optical-sizing` |

カスタム軸はフォントデザイナーがフォントに変化を付けるためのもの全てがあり得ます。例えばアセンダーまたはデセンダーの高さ、セリフの大きさ、その他想像できるすべてのものです。どの軸も 4 文字の固有の軸名を与えれば使用することができます。一部はもっと有名になっており、そのうち登録されるものもあるかもしれません。

**メモ:** 登録済みの軸のタグは小文字のタグを使用するのに対し、カスタム軸は大文字のタグを使用します。なお、フォントデザイナーはこの慣習に従うことを強制されているわけではなく、従っていないものもあります。ここで重要なことは、軸のタグは大文字と小文字を区別することです。

オペレーティングシステムで可変フォントを使用するためには、最新版であることを確認する必要があります。例えば、 Linux ベースの OS では最新版の Linux Freetype が必要であり、 macOS 10.13 より前では可変フォントに対応していません。オペレーティングシステムが最新版でない場合、ウェブページや Firefox 開発者ツールで可変フォントを使用することができません。

公式定義
----

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

形式文法
----
```

font-variation-settings =
  normal                        |
  [ <opentype-tag> <number> ]#

<opentype-tag> =
  <string>

```

例
-

他にも多数の可変フォントの例が、 可変フォントガイド, v-fonts.com, axis-praxis.org などにあります。

### 太さ (wght)

以下のデモの CSS は、フォントの太さの値を編集することができます。

### 傾き (slnt)

以下のデモの CSS は、フォントの傾きの値を編集することができます。

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-variation-settings-def |

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

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

関連情報
----

* 可変フォントガイド
* OpenType Font Variations Overview
* OpenType Design-Variation Axis Tag Registry


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

appearance
==========

**`appearance`** は CSS のプロパティで、オペレーティングシステムのテーマに基づいた、プラットフォーム固有のスタイル設定で UI 要素を表示するために使用します。

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

標準化以前は、このプロパティによって、ボタンやチェックボックスのような要素をウィジェットとして表示できました。しかし、これは誤った機能であると考えられ、現在では標準的なキーワードのみを使用することが推奨されています。

**メモ:** ウェブサイトでこのプロパティを使いたいのであれば、とても注意深くテストする必要があります。現在のブラウザーのほとんどは対応していますが、その実装は大きく異なります。古いブラウザーでは、 `none` キーワードであっても、ブラウザーによってフォーム要素すべてに同じ効果があるわけではなく、まったく対応していないものもあります。最新のブラウザーでは、その差は小さくなっています。

構文
--

```css
/\* CSS 基本ユーザーインターフェイス Level 4 の値 \*/
appearance: none;
appearance: auto;
appearance: menulist-button;
appearance: textfield;

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

/\* <compat-auto> 値は 'auto' と同じ効果がある \*/
appearance: button;
appearance: checkbox;
```

### 値

 以下のキーワードでは、ユーザーエージェントは要素に基づいて適切なスタイル設定を選択します。
 いくつかの例を指定しましたが、リストは完全ではありません。

`none`

select要素に掲載されている、リストが展開されたことを示す矢印など、ウィジェットの特定の機能を非表示にします。

`auto`

特別なスタイル設定のない要素に対しては `none` として動作します。

`<compat-special>`

`menulist-button` または `textfield` のどちらかです。
 これらの値はどちらも、特別なスタイル設定のない要素では `auto` と等価です。

`<compat-auto>`

 利用可能な値は `button`, `checkbox`, `listbox`, `menulist`, `meter`, `progress-bar`, `push-button`, `radio`, `searchfield`, `slider-horizontal`, `square-button`, `textarea` です。
 古いブラウザーとの互換性を保つための `auto` に相当するキーワードです。

#### 標準外のキーワード

以下の値は **`-moz-appearance`** や **`-webkit-appearance`** 接頭辞を利用して過去のブラウザーで動作可能ですが、標準の **`appearance`** プロパティにはないものです。

標準外の値
* Firefox の項目は `-moz-appearance` で対応していることを示します。
* 下記の Chrome、Edge、Safari の項目は、 `-webkit-appearance` ベンダー接頭辞プロパティで使用する値のリリースバージョン対応を示しています。
* アスタリスク (\*) が付いた値は、除去される意図が明確であることを示します。
* それぞれのセルにはブラウザーのバージョンと値があります。
    + `Y{version}`: `{version}` を含むそれ以降で対応していることを示します
    + `N{version}`: 対応は `{version}` より前のリリースで取り除かれました
    + 空のセルは、対応が追加されていないことを表します

| 値 | Safari | Firefox | Chrome | Edge |
| --- | --- | --- | --- | --- |
| `attachment` | Y(13.1) |  |  |  |
| `borderless-attachment` | Y(13.1) |  |  |  |
| `button-bevel` | Y(13.1) | N(75) |  | N(80) |
| `caps-lock-indicator` | Y(13.1) |  |  | N(80) |
| `caret` | Y(13.1) | N(75) | Y(73) | N(80) |
| `checkbox-container` |  | N(75) |  |  |
| `checkbox-label` |  | N(75) |  |  |
| `checkmenuitem` |  | N(75) |  |  |
| `color-well` | Y(13.1) |  |  |  |
| `continuous-capacity-level-indicator` | Y(13.1) |  |  |  |
| `default-button` | Y(13.1) |  |  | N(80) |
| `discrete-capacity-level-indicator` | Y(13.1) |  |  |  |
| `inner-spin-button` | Y(13.1) | N(75) | Y(118) \* | Y(119) |
| `image-controls-button` | Y(13.1) |  |  |  |
| `list-button` | Y(13.1) |  |  |  |
| `listitem` | Y(13.1) | N(75) | Y(73) | N(80) |
| `media-enter-fullscreen-button` | Y(13.1) |  | Y(73) |  |
| `media-exit-fullscreen-button` | Y(13.1) |  | Y(73) |  |
| `media-fullscreen-volume-slider` | Y(13.1) |  |  |  |
| `media-fullscreen-volume-slider-thumb` | Y(13.1) |  |  |  |
| `media-mute-button` | Y(13.1) |  |  | N(80) |
| `media-play-button` | Y(13.1) |  |  | N(80) |
| `media-overlay-play-button` | Y(13.1) |  | Y(73) |  |
| `media-return-to-realtime-button` | Y(13.1) |  |  |  |
| `media-rewind-button` | Y(13.1) |  |  |  |
| `media-seek-back-button` | Y(13.1) |  | N(73) |  |
| `media-seek-forward-button` | Y(13.1) |  | N(73) |  |
| `media-toggle-closed-captions-button` | Y(13.1) |  | Y(73) |  |
| `media-slider` | Y(13.1) |  | Y(117) | Y(80) |
| `media-sliderthumb` | Y(13.1) |  | Y(117) | Y(80) |
| `media-volume-slider-container` | Y(13.1) |  | Y(73) |  |
| `media-volume-slider-mute-button` | Y(13.1) |  |  |  |
| `media-volume-slider` | Y(13.1) |  | Y(117) | Y(80) |
| `media-volume-sliderthumb` | Y(13.1) |  | Y(117) | Y(80) |
| `media-controls-background` | Y(13.1) |  | Y(73) |  |
| `media-controls-dark-bar-background` | Y(13.1) |  |  |  |
| `media-controls-fullscreen-background` | Y(13.1) |  | Y(73) |  |
| `media-controls-light-bar-background` | Y(13.1) |  |  |  |
| `media-current-time-display` |  |  | Y(73) |  |
| `media-time-remaining-display` | Y(13.1) |  | Y(73) |  |
| `menulist-text` | Y(13.1) | N(75) | Y(73) | N(80) |
| `menulist-textfield` | Y(13.1) | N(75) | Y(73) | N(80) |
| `meterbar` |  | Y(100) |  |  |
| `number-input` |  | Y(75) |  |  |
| `progress-bar-value` | Y(13.1) |  | Y(73) |  |
| `progressbar` |  | Y(100) |  |  |
| `progressbar-vertical` |  | Y(75) |  |  |
| `range` |  | Y(75) |  |  |
| `range-thumb` |  | Y(75) |  |  |
| `rating-level-indicator` | Y(13.1) |  |  |  |
| `relevancy-level-indicator` | Y(13.1) |  |  |  |
| `scale-horizontal` |  | Y(75) |  |  |
| `scalethumbend` |  | Y(75) |  |  |
| `scalethumb-horizontal` |  | Y(75) |  |  |
| `scalethumbstart` |  | Y(75) |  |  |
| `scalethumbtick` |  | Y(75) |  |  |
| `scalethumb-vertical` |  | Y(75) |  |  |
| `scale-vertical` |  | Y(75) |  |  |
| `scrollbarthumb-horizontal` |  | Y(75) |  |  |
| `scrollbarthumb-vertical` |  | Y(75) |  |  |
| `scrollbartrack-horizontal` |  | Y(75) |  |  |
| `scrollbartrack-vertical` |  | Y(75) |  |  |
| `searchfield-decoration` | Y(13.1) |  |  | N(80) |
| `searchfield-results-decoration` | Y(13.1) | N(75) | N(73) | N(80) |
| `searchfield-results-button` | Y(13.1) |  |  | N(80) |
| `searchfield-cancel-button` | Y(13.1) | N(75) | Y(118) \* | Y(119) |
| `snapshotted-plugin-overlay` | Y(13.1) |  |  |  |
| `sheet` |  |  |  |  |
| `slider-vertical` |  |  | Y(118) \* | Y(119) |
| `sliderthumb-horizontal` |  |  | Y(117) | Y(80) |
| `sliderthumb-vertical` |  |  | Y(117) | Y(80) |
| `textfield-multiline` |  | Y(100) |  |  |
| `-apple-pay-button` | Y(13.1) |  |  |  |

公式定義
----

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

形式文法
----
```

appearance =
  none              |
  auto              |
  <compat-auto>     |
  <compat-special>

<compat-auto> =
  searchfield   |
  textarea      |
  checkbox      |
  radio         |
  menulist      |
  listbox       |
  meter         |
  progress-bar  |
  button

<compat-special> =
  textfield        |
  menulist-button

```

例
-

### 独自のスタイル付けの適用

 次の例は、チェックボックスと select 要素から既定のスタイルを除去し、独自のスタイルを適用する方法を示しています。
 チェックボックスの外観を円に変更し、 select 要素はリストが展開されることを示す矢印を除去する方法を示しています。

#### HTML

```html
<input type="checkbox" />
<input type="checkbox" checked />

<select>
  <option>default</option>
  <option>option 2</option>
</select>
<select class="none">
  <option>appearance: none</option>
  <option>option 2</option>
</select>
```

#### CSS

```css
input {
  appearance: none;
  width: 1em;
  height: 1em;
  display: inline-block;
  background: red;
}
input:checked {
  border-radius: 50%;
  background: green;
}

select {
  border: 1px solid black;
  font-size: 1em;
}

select.none {
  appearance: none;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # appearance-switching |

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

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

関連情報
----

* `prefers-color-scheme`


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

-webkit-line-clamp
==================

**`-webkit-line-clamp`** は CSS のプロパティで、ブロックコンテナーの内容を指定した行数に制限することができます。

`display` プロパティに `-webkit-box` もしくは `-webkit-inline-box` が設定されており、かつ `box-orient` プロパティに `vertical` が設定されている組み合わせのときのみ使用できます。

ほとんどの場合、 `overflow` に `hidden` を設定できます。そうしなければ内容は切り取られませんが、省略記号は指定した行数の後に表示されます。

アンカー要素に適用すると、切り捨てがテキストの途中で行われる場合があるかもしれませんが、必ずしも末尾で切り捨てが行われるとは限りません。

**メモ:** このプロパティは元々 WebKit ブラウザーで実装されていたものですが、いくつかの問題があります。レガシーサポートのために標準化されました。 CSS Overflow Module Level 3 の仕様では、このプロパティを置き換えて問題を回避することを目的として `line-clamp` プロパティが定義されています。

構文
--

```css
/\* キーワード値 \*/
-webkit-line-clamp: none;

/\* <integer> 値 \*/
-webkit-line-clamp: 3;
-webkit-line-clamp: 10;

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

`none`

コンテンツの行数を制限しません。

`<integer>`

コンテンツを制限する行数を指定します。 0 より大きい値でなければなりません。

公式定義
----

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

形式文法
----
```

-webkit-line-clamp =
  none             |
  <integer [1,∞]>

```

例
-

### 段落の切り捨て

#### HTML

```html
<p>
  In this example the <code>-webkit-line-clamp</code> property is set to
  <code>3</code>, which means the text is clamped after three lines. An ellipsis
  will be shown at the point where the text is clamped.
</p>
```

#### CSS

```css
p {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Overflow Module Level 4 # propdef--webkit-line-clamp |

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

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

関連情報
----

* Line Clampin' (Truncating Multiple Line Text)
* `line-clamp`


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

break-inside
============

**`break-inside`** は CSS のプロパティで、生成されたボックスの途中で、ページ、段、領域をどのように区切るかを設定します。ボックスが生成されない場合は、このプロパティは無視されます。

```css
/\* キーワード値 \*/
break-inside: auto;
break-inside: avoid;
break-inside: avoid-page;
break-inside: avoid-column;
break-inside: avoid-region;

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

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

区切り位置になる可能性のある場所 (言い換えれば、要素の境界) は、3 つのプロパティに影響されます。前の要素の `break-after` の値、次の要素の `break-before` の値、包含要素の `break-inside` の値です。

区切られるかどうかを判断するために、以下の規則が適用されます。

1. 考慮される三つの値の中の何れかに*区切りを強制する値* (`always`, `left`, `right`, `page`, `column`, `region` の何れか) がある場合、それが優先されます。そのような区切りが複数ある場合は、フローの中で最も後に現れる要素のものが使用されます (つまり、 `break-before` の値は `break-after` の値より優先し、それは更に `break-inside` よりも優先します)。
2. 考慮される三つの値の中に*区切りを防止する値* (`avoid`, `avoid-page`, `avoid-region`, `avoid-column` の何れか) が含まれていた場合は、その場所で区切りは適用されません。

強制的な区切りが適用されると、必要に応じてソフトな区切りが追加される場合がありますが、 `avoid` に関する値に解決される要素の境界には追加されません。

構文
--

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

### 値

`auto`

主ボックスの途中に何らかの (ページ、段、領域の) 区切りを挿入することを許可しますが、強制はしません。

`avoid`

主ボックスの途中に何らかの (ページ、段、領域の) 区切りを挿入することを禁止します。

`avoid-page`

主ボックスの途中の改ページを禁止します。

`avoid-column`

主ボックスの途中の段区切りを禁止します。

`avoid-region`
Experimental

主ボックスの途中の領域区切りを禁止します。

改ページの別名
-------

互換性のため、ブラウザーは古い `page-break-inside` を `break-inside` の別名として扱います。これにより、 `page-break-inside` を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。

| page-break-inside | break-inside |
| --- | --- |
| `auto` | `auto` |
| `avoid` | `avoid` |

公式定義
----

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

形式文法
----
```

break-inside =
  auto          |
  avoid         |
  avoid-page    |
  avoid-column  |
  avoid-region

```

例
-

### 図の中の改行を防ぐ

次の例では、すべての段にまたがる `<h1>` (`column-span: all` を使用して実現) と、 `column-width: 200px` を使用して複数の段に配置された一連の段落を含むコンテナーを用意しています。また、画像とキャプションを含む `<figure>` もあります。

既定では、画像とキャプションの間に改行が入る可能性がありますが、これは私たちが望んでいるものではありません。これを避けるために、 `break-inside: avoid` を `<figure>` に設定しています。

#### HTML

```html
<article>
  <h1>大見出し</h1>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae
    fringilla mauris. Quisque commodo eget nisi sed pretium. Mauris luctus nec
    lacus in ultricies. Mauris vitae hendrerit arcu, ac scelerisque lacus.
    Aliquam lobortis in lacus sit amet posuere. Fusce iaculis urna id neque
    dapibus, eu lacinia lectus dictum.
  </p>

  <figure>
    <img
 src="https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png" />
    <figcaption>The Firefox logo — fox wrapped around the world</figcaption>
  </figure>

  <p>
    Praesent condimentum dui dui, sit amet rutrum diam tincidunt eu. Cras
    suscipit porta leo sit amet rutrum. Sed vehicula ornare tincidunt. Curabitur
    a ipsum ac diam mattis volutpat ac ut elit. Nullam luctus justo non
    vestibulum gravida. Morbi metus libero, pharetra non porttitor a, molestie
    nec nisi.
  </p>

  <p>
    In finibus viverra enim vel suscipit. Quisque consequat velit eu orci
    malesuada, ut interdum tortor molestie. Proin sed pellentesque augue. Nam
    risus justo, faucibus non porta a, congue vel massa. Cras luctus lacus nisl,
    sed tincidunt velit pharetra ac. Duis suscipit faucibus dui sed ultricies.
  </p>
</article>
```

#### CSS

```css
html {
  font-family: helvetica, arial, sans-serif;
}

body {
  width: 80%;
  margin: 0 auto;
}

h1 {
  font-size: 3rem;
  letter-spacing: 2px;
  column-span: all;
}

h1 + p {
  margin-top: 0;
}

p {
  line-height: 1.5;
  break-after: column;
}

figure {
  break-inside: avoid;
}

img {
  max-width: 70%;
  display: block;
  margin: 0 auto;
}

figcaption {
  font-style: italic;
  font-size: 0.8rem;
  width: 70%;
}

article {
  column-width: 200px;
  gap: 20px;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Fragmentation Module Level 3 # break-within |
| CSS Regions Module Level 1 # region-flow-break |
| CSS Multi-column Layout Module Level 1 # break-before-break-after-break-inside |

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

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

関連情報
----

* 段組みレイアウト
* Breaking Boxes With CSS Fragmentation


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

font-style
==========

**`font-style`** は CSS のプロパティで、`font-family` の中で通常体 (normal)、筆記体 (italic)、斜体 (oblique) のどのスタイルにするか設定します。

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

**italic** フォントフェイスは通常、本質的に筆記体であり、装飾されていない書体より水平方向の幅が小さいのが一般的です。一方 **oblique** フェイスはたいてい、通常のフェイスを傾けただけです。 italic と oblique のいずれも、通常のフェイスの字形を人工的に傾けることによってシミュレートされます (この制御については `font-synthesis` をご覧ください)。

構文
--

```css
font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 10deg;

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

`font-style` プロパティは、以下の一覧から選択した単一のキーワードで指定し、キーワードが `oblique` であれば任意で角度を含めることができます。

### 値

`normal`

`font-family` の中で `normal` に分類されているフォントを選択します。

`italic`

`italic` として分類されているフォントを選択します。 italic フェイスが使用できない場合は、代わりに `oblique` に分類されているフォントを選択します。どちらも利用できない場合は、スタイルは人工的にシミュレートされます。

`oblique`

`oblique` として分類されているフォントを選択します。 oblique フェイスが使用できない場合は、代わりに `italic` に分類されているフォントを選択します。どちらも利用できない場合は、スタイルは人工的にシミュレートされます。

`oblique` `<angle>`

`oblique` として分類されているフォントを選択し、加えてテキストの傾きの角度を指定します。選択されたフォントファミリで１つまたは複数の oblique フェイスが利用できる場合、指定した角度に最も近いものが選択されます。 oblique フェイスが利用できない場合、ブラウザーは通常のフェイスを指定した大きさだけ傾けることで、 oblique バージョンを作成します。有効な値は-90以上90以下の角度の値です。角度が指定されない場合、14度の角度が使用されます。正の数では行末に向けて傾け、負の数では行頭に向けて傾けます。

一般に、要求された角度が14度以上の場合、大きな角度が推奨されます。その他の場合は、より小さい角度が推奨されます (アルゴリズムの詳細は、仕様書の font matching section を参照してください)。

### 可変フォント

可変フォントでは、 oblique フェイスをどれだけ傾けるかの角度を細かく制御することができます。 `<angle>` 修飾子を `oblique` キーワードに使用して選択することができます。

TrueType または OpenType の可変フォントでは、 `"slnt"` 変数が oblique の傾く角度を様々に実装するために使用され、 `"ital"` 変数の値が 1 ならば、 italic の値を使用します。 `font-variation-settings` を参照してください。

**メモ:** 次の例を動作させるには、 CSS Fonts Level 4 の `font-style: oblique` が `<angle>` を受け入れる構文に対応したブラウザーが必要です。デモは `font-style: oblique 23deg;` を読み込みます。この値を変更すると、テキストの傾きが変わるのを確認することができます。

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

テキストの長い区間に渡って `font-style` の値を `italic` に設定すると、失読症のような認知問題を抱える人にとって読むのが難しくなる可能性があります。

* MDN "WCAG を理解する ― ガイドライン 1.4 の解説"
* W3C Understanding WCAG 2.1
公式定義
----

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

形式文法
----
```

font-style =
  normal                           |
  italic                           |
  oblique <angle [-90deg,90deg]>?

```

例
-

### フォントスタイル
```

<p class="normal">This paragraph is normal.</p>
<p class="italic">This paragraph is italic.</p>
<p class="oblique">This paragraph is oblique.</p>
```

```css
.normal {
  font-style: normal;
}

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}
```

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-style-prop |

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

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

関連情報
----

* `font-style`
* `font-weight`
* 基本的なテキストとフォントの装飾


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

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

**`border-inline-start`** は CSS のプロパティで、個々の論理的なインライン方向の先頭側境界のプロパティ値を、スタイルシート内の単一の場所で設定するための一括指定プロパティです。

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

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

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

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

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

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

対応づけられる物理的な境界は、書字方向やテキストの向きによって決まります。これは `border-top`、`border-right`、`border-bottom`、`border-left` の何れかに対応し、どれに対応するかは `writing-mode`、`direction`、`text-orientation` で定義された値によって決まります。

関連するプロパティとしては、 `border-block-start`、`border-block-end`、`border-inline-end` が要素の他の境界を定義します。

### 値

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

`<'border-width'>`

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

`<'border-style'>`

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

`<'color'>`

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

公式定義
----

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

形式文法
----
```

border-inline-start =
  <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>
  <p class="exampleText">Example text</p>
</div>
```

### CSS

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

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

仕様書
---

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

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

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

関連情報
----

* このプロパティは `border-top`、`border-right`、`border-bottom`、`border-left` のうちの 1 つに対応づけられます。
* `writing-mode`、`direction`、`text-orientation`


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

CSS 入れ子
=======

**CSS 入れ子** (CSS nesting) モジュールは、セレクターを入れ子にする構文を定義し、親ルールのセレクターに対して子ルールのセレクターを相対的に指定することで、あるスタイルルールを別のスタイルルールの中に入れ子にする機能を提供します。

CSS 入れ子は、 Sass のような CSS プリプロセッサーとは異なり、 CSS プリプロセッサーによって事前にコンパイルされるのではなく、ブラウザーで解釈されます。

CSS 入れ子は、 CSS スタイルシートの可読性、モジュール性、保守性に役立ちます。また、 CSS ファイルのサイズを縮小することで、ユーザーがダウンロードするデータ量を削減できる可能性もあります。

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

### セレクター

* `&` 入れ子セレクター
ガイド
---

CSS 入れ子の使用

CSS 入れ子の使い方を説明します。

CSS 入れ子アットルール

アットルールを入れ子にする方法を説明します。

CSS 入れ子と詳細度

CSS を入れ子にした場合の詳細度の違いを説明します。

関連概念
----

* セレクターと結合子
* 擬似クラス
* CSS プリプロセッサー
仕様書
---

| Specification |
| --- |
| CSS Nesting Module  |

関連情報
----

* 詳細度
* CSS カスケードと継承モジュール
* CSS セレクターモジュール


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

<transform-function>
====================

**`<transform-function>`** は CSS のデータ型で、要素の外見に影響する座標変換を表します。座標変換関数は、 2D または 3D 空間で要素を回転、拡大縮小、歪曲、移動させることができます。これは `transform` プロパティの中で使用されます。

構文
--

`<transform-function>` データ型は、以下に示した変換関数のうちの一つを使用して指定します。各関数は 2D または 3D の座標操作を適用します。

### 行列変換

`matrix()`

2D の同次変換行列を記述します。

`matrix3d()`

3D の変換を 4×4 の同次行列で記述します。

### 視点距離

`perspective()`

ユーザーと z=0 平面との間の距離を設定します。

### 回転

`rotate()`

要素を 2D 平面上で特定の点を中心に回転します。

`rotate3d()`

要素を 3D 空間で特定の軸を中心に回転します。

`rotateX()`

要素を水平軸を中心に回転します。

`rotateY()`

要素を垂直軸を中心に回転します。

`rotateZ()`

要素を Z 軸を中心に回転します。

### 拡大縮小

`scale()`

要素を 2D 平面上で拡大または縮小します。

`scale3d()`

要素を 3D 空間で拡大または縮小します。

`scaleX()`

要素を水平に拡大または縮小します。

`scaleY()`

要素を垂直に拡大または縮小します。

`scaleZ()`

要素を Z 軸方向に拡大または縮小します。

### 歪め

`skew()`

要素を 2D 平面上で歪ませます。

`skewX()`

要素を水平方向に歪ませます。

`skewY()`

要素を垂直方向に歪ませます。

### 平行移動

`translate()`

要素を 2D 平面上で平行移動させます。

`translate3d()`

要素を3D 空間で平行移動させます。

`translateX()`

要素を水平方向に平行移動させます。

`translateY()`

要素を垂直方向に平行移動させます。

`translateZ()`

要素を Z 軸方向に平行移動させます。

解説
--

HTML 要素の寸法や形状を記述するために様々な座標モデルが用いられることがあり、同様に変換にも適用されます。最も一般的なものは、直交座標系ですが、同次座標系が用いられることもあります。

### 直交座標系

直交座標系では、二次元の点は、 X 座標 (横座標) と Y 座標 (縦座標) の二つの値を使用して記述します。これは `(x, y)` のベクトル表記で表現されます。

![X と Y の値に対応する 3 点 P1、P2、P3 と、元から始めるには負の Y 軸と正の X 軸を示す直交平面](/ja/docs/Web/CSS/transform-function/coord_in_r2.png)

CSS (および多くのコンピューターグラフィック) では、原点 `(0, 0)` が各要素の*左上*を表します。正の座標は原点から下および右に向かい、負の座標は上および左に向かいます。従って、右に 2 単位、下に 5 単位では `(2, 5)` となり、左に 3 単位、上に 12 単位では `(-3, -12)` となります。

### 座標変換関数

座標変換関数は、座標の値を操作することによって要素の外見を変更します。線形座標変換関数は、次のように 2×2 の行列で記述されます。

(

a

c

b

d

)

関数は行列の乗算によって要素に適用されます。つまり、それぞれの座標は行列の値に基づいて変化します。

(

a

c

b

d

)

(

x

y

)

=

(

a
x
+
c
y

b
x
+
d
y

)

一行の中で複数の座標変換を適用することもできます。

(

a
1

c
1

b
1

d
1

)

(

a
2

c
2

b
2

d
2

)

=

(

a
1

a
2

+

c
1

b
2

a
1

c
2

+

c
1

d
2

b
1

a
2

+

d
1

b
2

b
1

c
2

+

d
1

d
2

)

この記法で、最もよく使われる回転、拡大縮小、傾斜の座標変換を記述し、合成することができます。 (実際、すべての座標変換が記述できる線形関数です。) 座標変換の合成は右から左の順に効果的に適用されます。

しかし、主要な座標変換のうち平行移動は線形ではなく、従ってこの記法を使用する場合は特例とする必要があります。平行移動のベクトル `(tx, ty)` は、二つの追加の引数で別に表現しなければなりません。

**メモ:** 直交座標よりも難解ですが、射影幾何学の同次座標は 3 × 3 の変換行列を使用するので、線形関数として平行移動をより簡単に表現できます。

**メモ:** 座標変換関数は `transform` プロパティで使用されますが、個々の変換プロパティ（`translate`、`scale`、`rotate`）では使用されません。

例
-

### 座標変換関数の比較

次の例では、DOM 要素と座標変換で作成された 3D 立方体と、立方体を座標変換するための様々な座標変換関数を選択するための選択メニューが用意されており、様々な種類の効果を比較することができます。

選択すると、変換が立方体に適用され、2 秒後に立方体は開始時の状態に戻ります。すべての変換の効果を見ることができるように、`transform3d()` を使って立方体の開始状態をわずかに回転させています。

#### HTML

```html
<main>
  <section id="example-element">
    <div class="face front">1</div>
    <div class="face back">2</div>
    <div class="face right">3</div>
    <div class="face left">4</div>
    <div class="face top">5</div>
    <div class="face bottom">6</div>
  </section>

  <div class="select-form">
    <label for="transfunction">座標変換関数を選択してください</label>
    <select id="transfunction">
      <option selected>座標変換関数を選択</option>
      <option>rotate(360deg)</option>
      <option>rotateX(360deg)</option>
      <option>rotateY(360deg)</option>
      <option>rotateZ(360deg)</option>
      <option>rotate3d(1, 1, 1, 90deg)</option>
      <option>scale(1.5)</option>
      <option>scaleX(1.5)</option>
      <option>scaleY(1.5)</option>
      <option>scaleZ(1.5)</option>
      <option>scale3d(1, 1.5, 1.5)</option>
      <option>skew(17deg, 13deg)</option>
      <option>skewX(17deg)</option>
      <option>skewY(17deg)</option>
      <option>translate(100px, 100px)</option>
      <option>translateX(100px)</option>
      <option>translateY(100px)</option>
      <option>translateZ(100px)</option>
      <option>translate3d(50px, 50px, 50px)</option>
      <option>perspective(200px)</option>
      <option>matrix(1, 2, -1, 1, 80, 80)</option>
      <option>matrix3d(1,0,0,0,0,1,3,0,0,0,1,0,50,100,0,1.1)</option>
    </select>
  </div>
</main>
```

#### CSS

```css
main {
  width: 400px;
  height: 200px;
  padding: 50px;
  background-image: linear-gradient(135deg, white, cyan, white);
}

#example-element {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transition: transform 1.5s;
  transform: rotate3d(1, 1, 1, 30deg);
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: #fff;
}

.front {
  background: rgba(90, 90, 90, 0.7);
  transform: translateZ(50px);
}

.back {
  background: rgba(0, 210, 0, 0.7);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgba(210, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgba(0, 0, 210, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgba(210, 210, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgba(210, 0, 210, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

.select-form {
  margin-top: 50px;
}
```

#### JavaScript

```js
const selectElem = document.querySelector("select");
const example = document.querySelector("#example-element");

selectElem.addEventListener("change", () => {
  if (selectElem.value === "Choose a function") {
    return;
  } else {
    example.style.transform = `rotate3d(1, 1, 1, 30deg) ${selectElem.value}`;
    setTimeout(() => {
      example.style.transform = "rotate3d(1, 1, 1, 30deg)";
    }, 2000);
  }
});
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 1 # transform-functions |
| CSS Transforms Module Level 2 # transform-functions |

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

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

関連情報
----

* CSS の `transform` プロパティ
* 独立した座標変換プロパティ:
    + `translate`
    + `scale`
    + `rotate`


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

:autofill
=========

**`:autofill`** は CSS の擬似クラスで、 `<input>` 要素の値がブラウザーによって自動補完された時に一致します。このクラスはユーザーがフィールドを編集すると一致しなくなります。

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

**メモ:** 多くのブラウザーのユーザーエージェントスタイルシートでは、 `:-webkit-autofill` スタイル定義に `!important` を使用しており、 JavaScript によるハックで解決しない限り、ウェブページから上書きすることができません。例えば、 Chrome では内部スタイルシートで次のようになっています。

```css
background-color: rgb(232, 240, 254) !important;
background-image: none !important;
color: -internal-light-dark(black, white) !important;
```

これは、 `background-color`, `background-image`, `color` に独自のルールを設定できないことを意味します。

構文
--
```

:autofill
```

例
-

次の例は、 `:autofill` 擬似クラスを使用して、ブラウザーによって自動補完されたテキストフィールドの境界線を変更することを示しています。ブラウザーの互換性を保つために、 `:-webkit-autofill` と `:autofill` の両方を使用してください。

```css
input {
  border: 3px solid grey;
  border-radius: 3px;
}

input:-webkit-autofill {
  border: 3px solid blue;
}
input:autofill {
  border: 3px solid blue;
}
```

```html
<form method="post" action="">
  <label for="email">Email</label>
  <input type="email" name="email" id="email" autocomplete="email" />
</form>
```

仕様書
---

| Specification |
| --- |
| HTML Standard # selector-autofill |

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

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

関連情報
----

* Chromium issue 46543: Auto-filled input text box yellow background highlight cannot be turned off!
* WebKit bug 66032: Allow site authors to override autofilled fields' colors.
* Mozilla bug 740979: implement `:-moz-autofill` pseudo-class on input elements with an autofilled value
* new css4-ui features - more selectors


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

<display-inside>
================

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
以下のキーワードは、要素の内部の `display` 種別を指定し、これは要素 (置換要素ではないものとする) の内容物をレイアウトする整形コンテキストの種類を定義します。これらのキーワードは `display` プロパティの値として使用され、単一のキーワードとしては伝統的な目的に、または Level 3 仕様書では `<display-outside>` のキーワードと共に使用されます。

構文
--

有効な `<display-inside>` の値は以下の通りです。

`flow`
Experimental

要素は、フローレイアウト (ブロックおよびインラインのレイアウト) を使用して、内容物をレイアウトします。

外部表示種別が `inline` または `run-in` であり、またブロックまたはインラインの整形コンテキストに関係する場合は、インラインボックスを生成します。そうでない場合は、ブロックコンテナーボックスを生成します。

ほかのプロパティ (`position`, `float`, `overflow` など) の値や、要素自体がブロックまたはインラインの整形コンテキストに関係するかによって、新たなブロック整形コンテキスト (BFC) を生成する、または内容物が親の整形コンテキストに吸収されます。

`flow-root`

要素は、新たなブロック整形コンテキストを確立するブロック要素ボックスを生成し、整形ルートがある場所を定義します。

`table`

HTML の `<table>` 要素と同じように動作します。これは、ブロックレベルボックスを定義します。

`flex`

要素は、ブロック要素のように動作しつつ、そのコンテンツをフレックスボックスモデルに従ってレイアウトします。

`grid`

要素は、ブロック要素のように動作しつつ、そのコンテンツをグリッドモデルに従ってレイアウトします。

`ruby`
Experimental

要素は、インライン要素のように動作しつつ、そのコンテンツをルビ (ruby) モデルに従ってレイアウトします。HTML の `<ruby>` 要素のように動作します。

**メモ:** 二つの値の構文に対応しているブラウザーは、 `display: flex` や `display: grid` などの内部表示種別のみが指定されていると、外部表示種別を `block` に設定します。これで期待通りに動作します。例えば、ある要素を `display: grid` に指定した場合、そのボックスはブロックレベルボックスのグリッドコンテナーとして生成されることが期待されるでしょう。

例
-

この例では、親ボックスは `display: flow-root` となり、新しいブロック整形コンテキストを確立して浮動アイテムを含みます。

### HTML

```html
<div class="box">
  <div class="float">I am a floated box!</div>
  <p>I am content inside the container.</p>
</div>
```

### CSS

```css
.box {
  background-color: rgb(224, 206, 247);
  border: 5px solid rebeccapurple;
  display: flow-root;
}

.float {
  float: left;
  width: 200px;
  height: 150px;
  background-color: white;
  border: 1px solid black;
  padding: 10px;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Display Module Level 3 # typedef-display-inside |

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

### 複数のキーワードの対応

### css.properties.display.multi-keyword\_values

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

### css.properties.display.flow-root

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

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

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

### css.properties.display.grid

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

### css.properties.display.flex

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

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

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

* Chromium のバグ: https://bugs.chromium.org/p/chromium/issues/detail?id=804600
### flow-root の対応

### css.properties.display.multi-keyword\_values

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

### css.properties.display.flow-root

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

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

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

### css.properties.display.grid

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

### css.properties.display.flex

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

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

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

### table の対応

### css.properties.display.multi-keyword\_values

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

### css.properties.display.flow-root

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

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

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

### css.properties.display.grid

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

### css.properties.display.flex

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

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

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

### grid の対応

### css.properties.display.multi-keyword\_values

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

### css.properties.display.flow-root

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

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

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

### css.properties.display.grid

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

### css.properties.display.flex

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

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

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

### flex の対応

### css.properties.display.multi-keyword\_values

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

### css.properties.display.flow-root

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

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

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

### css.properties.display.grid

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

### css.properties.display.flex

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

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

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

### ruby の対応

### css.properties.display.multi-keyword\_values

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

### css.properties.display.flow-root

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

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

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

### css.properties.display.grid

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

### css.properties.display.flex

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

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

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

関連情報
----

* `display`
    + `<display-outside>`
    + `<display-listitem>`
    + `<display-internal>`
    + `<display-box>`
    + `<display-legacy>`
* フレックスボックスの基本概念
* グリッドレイアウトの基本概念


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

align-items
===========

CSS の **`align-items`** プロパティは、すべての直接の子要素に集合として `align-self` の値を設定します。フレックスボックスでは交差軸方向のアイテムの配置を制御します。グリッドレイアウトでは、グリッド領域におけるアイテムのブロック軸方向の配置を制御します。

以下のデモは、グリッドレイアウトを使用して `align-items` のいくつかの値の動作を示しています。

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

構文
--

```css
/\* 基本キーワード \*/
align-items: normal;
align-items: stretch;

/\* 位置による配置 \*/
/\* align-items は左と右の値を取らない \*/
align-items: center; /\* アイテムを中央付近にまとめる \*/
align-items: start; /\* アイテムを先頭にまとめる \*/
align-items: end; /\* アイテムを末尾にまとめる \*/
align-items: flex-start; /\* フレックスアイテムを先頭にまとめる \*/
align-items: flex-end; /\* フレックスアイテムを末尾にまとめる \*/

/\* ベースラインに配置する \*/
align-items: baseline;
align-items: first baseline;
align-items: last baseline; /\* オーバーフロー配置 (位置指定要素のみ) \*/
align-items: safe center;
align-items: unsafe center;

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

### 値

`normal`

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

* 絶対位置指定レイアウトでは、このキーワードは*置換*絶対位置指定ボックスにおける `start` のように動作し、*他のすべての*絶対位置指定ボックスでは `stretch` として動作します。
* 絶対位置指定レイアウトの静的位置では、キーワードは `stretch` として動作します。
* フレックスアイテムについては、このキーワードは `stretch` として動作します。
* グリッドアイテムについては、このキーワードは `stretch` の一つと似た動作をしますが、ボックスにアスペクト比や内部寸法がある場合は `start` のように動作します。
* このプロパティはブロックレベルボックスや、表のセルには適用されません。

`flex-start`

フレックスアイテムの cross-start 側マージンの端は、ラインの cross-start の端に寄せられます。

`flex-end`

フレックスアイテムの cross-end 側マージンの端は、ラインの cross-end の端に寄せられます。

`center`

フレックスアイテムのマージンボックスは、交差軸上の中央に配置されます。アイテムの cross-size がフレックスコンテナより大きい場合は、両方向へ均等にはみ出します。

`start`

そのアイテムは、互いにその軸の配置コンテナーの先頭側の端に寄せられます。

`end`

そのアイテムは、互いにその軸の配置コンテナーの末尾側の端に寄せられます。

`self-start`

そのアイテムは、その軸の配置コンテナーで、そのアイテムの先頭側の端に寄せられます。

`self-end`

そのアイテムは、その軸の配置コンテナーで、そのアイテムの末尾側の端に寄せられます。

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

すべてのフレックスアイテムは、フレックスコンテナーのベースラインに沿って配置されます。 cross-start 側マージンの端とベースラインの間の距離が最大のアイテムが、ラインの cross-start の端に寄せられます。

`stretch`

アイテムのマージンボックスの cross-size が、幅や高さの制約の範囲内でラインと同じになるように拡張されます。

`safe`

配置キーワードと共に使用します。選択されたキーワードによって、アイテムが配置コンテナーをあふれてデータの損失が発生する場合、アイテムは配置モードが `start` であったかのように配置されます。

`unsafe`

配置キーワードと共に使用します。アイテムの寸法と配置コンテナーとの関係、あふれることによってデータの損失が発生するかどうかにかかわらず、指定された値を尊重します。

公式定義
----

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

形式文法
----
```

align-items =
  normal                                    |
  stretch                                   |
  <baseline-position>                       |
  [ <overflow-position>? <self-position> ]  |
  anchor-center

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

<overflow-position> =
  unsafe  |
  safe

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

```

例
-

### CSS

```css
#container {
  height: 200px;
  width: 240px;
  align-items: center; /\* ライブサンプルで変更可能 \*/
  background-color: #8c8c8c;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
}

div > div {
  box-sizing: border-box;
  border: 2px solid #8c8c8c;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#item1 {
  background-color: #8cffa0;
  min-height: 30px;
}

#item2 {
  background-color: #a0c8ff;
  min-height: 50px;
}

#item3 {
  background-color: #ffa08c;
  min-height: 40px;
}

#item4 {
  background-color: #ffff8c;
  min-height: 60px;
}

#item5 {
  background-color: #ff8cff;
  min-height: 70px;
}

#item6 {
  background-color: #8cffff;
  min-height: 50px;
  font-size: 30px;
}

select {
  font-size: 16px;
}

.row {
  margin-top: 10px;
}
```

### HTML

```html
<div id="container" class="flex">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4</div>
  <div id="item5">5</div>
  <div id="item6">6</div>
</div>

<div class="row">
  <label for="display">display: </label>
  <select id="display">
    <option value="flex">flex</option>
    <option value="grid">grid</option>
  </select>
</div>

<div class="row">
  <label for="values">align-items: </label>
  <select id="values">
    <option value="normal">normal</option>
    <option value="flex-start">flex-start</option>
    <option value="flex-end">flex-end</option>
    <option value="center" selected>center</option>
    <option value="baseline">baseline</option>
    <option value="stretch">stretch</option>

    <option value="start">start</option>
    <option value="end">end</option>
    <option value="self-start">self-start</option>
    <option value="self-end">self-end</option>
    <option value="left">left</option>
    <option value="right">right</option>

    <option value="first baseline">first baseline</option>
    <option value="last baseline">last baseline</option>

    <option value="safe center">safe center</option>
    <option value="unsafe center">unsafe center</option>
    <option value="safe right">safe right</option>
    <option value="unsafe right">unsafe right</option>
    <option value="safe end">safe end</option>
    <option value="unsafe end">unsafe end</option>
    <option value="safe self-end">safe self-end</option>
    <option value="unsafe self-end">unsafe self-end</option>
    <option value="safe flex-end">safe flex-end</option>
    <option value="unsafe flex-end">unsafe flex-end</option>
  </select>
</div>
```

```
var values = document.getElementById("values");
var display = document.getElementById("display");
var container = document.getElementById("container");

values.addEventListener("change", function (evt) {
  container.style.alignItems = evt.target.value;
});

display.addEventListener("change", function (evt) {
  container.className = evt.target.value;
});
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # align-items-property |
| CSS Flexible Box Layout Module Level 1 # align-items-property |

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

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

関連情報
----

* CSS フレックスボックスガイド: *フレックスボックスの基本概念*
* CSS フレックスボックスガイド: *フレックスコンテナー内のアイテムの配置*
* CSS グリッドガイド: *グリッドレイアウトのボックス配置*
* CSS ボックス配置
* `align-self` プロパティ