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

!important
==========

区切り文字 `!` に続く `important` キーワードは、その宣言が重要であることを示します。 `important` フラグはカスケード内の宣言を選択するルールを変更します。 *important* ではない宣言は *normal* と呼ばれます。

宣言を重要なものにするには、宣言の値の後に *important フラグ* (`!important`) を追加します。区切り文字とキーワードの間には空白を入れることができますが、一般的にフラグは空白を入れずに `!important` と書きます。

```css
selector {
  property: value; /\* 通常宣言 \*/
  property: value !important; /\* 重要宣言（推奨） \*/
  property: value ! important; /\* 重要宣言（非推奨） \*/
}
```

`!important` はプロパティ値のペア宣言の値の後に来ます。 important フラグは宣言の最後のトークンでなければなりません。言い換えれば、フラグと宣言の終わりのセミコロンの間には空白とコメントがあってもかまいませんが、それ以外はありません。

カスケード上の影響
---------

重要な宣言に関しては、カスケード元とレイヤーの順序が逆になります。 important フラグがないと、作者スタイルシートの宣言がユーザーのスタイルシートの宣言を上書きし、ユーザーエージェントの既定のスタイルシートの宣言を上書きします。

宣言が重要な場合、優先順位は逆になります。ユーザーエージェントスタイルシートで重要であるとマーク付けされた宣言は、ユーザースタイルシートでのすべての重要な宣言を上書きします。同様に、ユーザースタイルシートにおけるすべての重要な宣言は、作者スタイルシートにおけるすべての重要な宣言を上書きします。最後に、すべての重要な宣言は、すべてのアニメーションよりも引き継がれます。

**メモ:** important 宣言はすべてアニメーションに引き継がれます。@keyframes アニメーション宣言内では `!important` は無効です。

重要な宣言の優先順位を逆転させることで、パーソナライズされた配色や大きなフォントなどの特別なニーズを持つユーザーが、そのユーザーのスタイルシートでいくつかの宣言を重要なものとしてマークすることにより、必要に応じて作者スタイルを上書きできることを確実に保持します。また、悪意のある拡張機能が重要なユーザーエージェントスタイルを上書きできないようにすることで、機能を破壊したり、セキュリティに悪影響を与えたりしないことも保証します。

重要な宣言に優先するものはあるのでしょうか。はい、トランジションです。 CSS の遷移は、プロパティがある値から別の値に変化する速度を制御する方法です。ある値から別の値へ遷移する間、プロパティは固有の重要宣言と一致しません。

```css
a {
  color: red !important;
  background-color: yellow;
  transition: all 2s linear;
}
a:hover {
  color: blue !important;
  background-color: orange !important;
}
```

この例では、 `color` と `background-color` プロパティは 2 つ目でホバー状態にトランジションします。たとえ既定値が通常の宣言で、ホバー状態が `!important` 宣言であっても、トランジションは発生します。

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

スタイルシートの 3 つのオリジン（作成者、ユーザー、ユーザーエージェント）のそれぞれの中で、レイヤー外のスタイルの通常の宣言は、レイヤーのスタイル宣言を上書きし、最後に宣言されたものがその前に宣言されたレイヤーよりも優先されます。重要な宣言は優先順位を逆にします。最初のレイヤーの重要な宣言は次のレイヤーの重要な宣言に引き継ぎます。また、すべての重要な宣言は、どのレイヤーの外側で行われた重要な宣言よりも優先されます。

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

インラインスタイルは `style` 属性を使用して定義するスタイルです。これらは通常または重要にもなりえます。インラインの *normal* スタイルは、元に関係なく、すべての *normal* 宣言よりも引き継がれます。インラインの *important* スタイルは、レイヤーに関係なく、他のすべての *important* 作成者スタイルよりも優先されますが、ユーザーやユーザーエージェントのスタイルシートやトランジションからの重要なスタイルは、それらを引き継ぎます。

### !important と詳細度

`!important` は詳細度に影響しませんが、関係があります。重要な宣言は、同じオリジンとカスケードレイヤーにある他の宣言をすべて上書きします。

```css
#myElement#myElement#myElement .myClass.myClass p:hover {
  color: blue;
}

p {
  color: red !important;
}
```

この例では、セレクターを過剰に指定します。セレクターの詳細度が通常の宣言にどれだけ一致しても、同じソースとカスケードレイヤーからの重要な宣言が常に優先されます。この場合、段落は常に赤になります。

同じオリジン、同じレイヤーの 2 つの重要な宣言が同じ要素に適用される場合、ブラウザーは最も詳細度の高い宣言を選択して使用します。

```css
#myElement p {
  color: green !important;
}

p {
  color: purple !important;
}
```

この場合、セレクターの詳細度が問題になります。セレクターの詳細度が同じであれば、ソースの順番が問題になります。

一括指定プロパティの影響
------------

`important` で一括指定プロパティを宣言すると、サブプロパティをすべて `important` に設定します。以下の 2 つのセレクタースタイルブロックは等価です。

```css
p {
  background: blue !important;
}

p {
  background-image: none !important;
  background-position: 0 0 !important;
  background-size: auto auto !important;
  background-repeat: repeat !important;
  background-origin: padding-box !important;
  background-clip: border-box !important;
  background-attachment: scroll !important;
  background-color: blue !important;
}
```

この例は、一般的に important フラグを避けることが推奨されるいくつかの理由の一つを示しています。

カスタムプロパティへの影響
-------------

`!important` フラグがカスタムプロパティの値宣言に追加されると、その値の割り当てを important にします。 `!important` フラグはカスタムプロパティ値から取り除かれます。 `!important` フラグはカスタムプロパティの値の一部として `var()` 関数に渡されません。

```css
:root {
  --myColor: red !important;
  --myColor: blue;
}
p {
  color: var(--myColor);
}
blockquote {
  color: var(--myColor);
  color: purple;
}
```

```
<p>これは段落です</p>
<blockquote>これはブロック引用です</blockquote>
```

この例では、カスタムプロパティの値の割り当てが重要なので、段落は青ではなく赤になります。 blockquote は紫色になりますが、これは紫色の通常宣言が通常の赤宣言の後に来るためです。

ベストプラクティス
---------

`!important` を使用して詳細度を上書きすることは避けてください。 UI 要件のために意図的に important 宣言を作成する場合は、 CSS コードをコメント入れて、その機能を上書きしてはいけない理由を保守担当者に説明してください。

id セレクターで宣言されたサードパーティープラグインのスタイルのように、あなたの支配下にない詳細度の高いスタイルを上書きする作業をする場合でも、 `!important` を使用する必要はありません。代わりに、最初のカスケードレイヤーとして名前付きまたは無名のレイヤーにサードパーティのスタイルシートスクリプトをインポートすることを検討してください。外部スタイルに important 宣言が含まれていない限り、固有の度合いに関係なく、あなたのスタイルがウィジェットのスタイルよりも優先されます。

重要な宣言を含む外部スタイルシートを上書きする必要がある場合は、必要なオーバーライドを含むカスケードレイヤーを作成し、そのレイヤーを最初に宣言してください。

### アクセシビリティ

ユーザースタイルシートからの重要なスタイルは、作成者スタイルシートの重要な宣言よりも優先されます。つまり、サイトのスタイルに `!important` フラグを追加しても、大きなフォントなど特別な要求をされる個々のユーザーが、自分自身のユーザースタイルシートに重要なスタイルを追加してスタイルを引き継ぐことを防ぐことはできません。

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

この機能はすべてのブラウザーで対応しています。

関連情報
----

* CSS 詳細度
* CSS カスケード


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

:has()
======

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

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

* Learn more
* See full compatibility
* Report feedback
**`:has()`** は CSS の疑似クラス関数で、引数として渡される相対セレクターのいずれかが、その要素から辿ってアンカーとして少なくとも一つの要素とマッチする場合に、その要素を表します。この疑似クラスは、相対セレクターリストを引数として取ることで、参照している要素に関して親要素や前の兄弟要素を選択する方法を提供します。

```css
/\* 直後に p 要素があるような h1 要素に対して、スタイルを適用します \*/
h1:has(+ p) {
  margin-bottom: 0;
}
```

`:has()` 疑似クラスは `:is()` や `:not()` と同様に、引数の中で最も大きい詳細度が `:has()` の詳細度として与えられます。

構文
--

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

`:has()` 疑似クラス自体がブラウザーでサポートされていない場合、`:has()` が `:is()` や `:where()` のような寛容なセレクターリストの中にない限り、セレクターブロック全体が失敗します。

`:has()` 疑似クラスは他の `:has()` の中に入れ子にすることはできません。これは、多くの疑似要素が祖先のスタイリングに基づいて条件付きで存在しているため、`:has()` によるクエリーを許可してしまうと循環クエリーが発生する可能性があるためです。

また、疑似要素は `:has()` 内では有効なセレクターではなく、疑似要素は `:has()` のアンカーとしても有効ではありません。

例
-

### 兄弟結合子との組み合わせ

次の例の `:has()` スタイル宣言は、`<h1>` 見出しの直後に `<h2>` 見出しがある場合、その `<h1>` 見出しの後の間隔を調整します。

#### HTML

```html
<section>
  <article>
    <h1>Morning Times</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </article>
  <article>
    <h1>Morning Times</h1>
    <h2>Delivering you news every morning</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </article>
</section>
```

#### CSS
```

section {
  display: flex;
  align-items: start;
  justify-content: space-around;
}

article {
  display: inline-block;
  width: 40%;
}

h1,
h2 {
  font-size: 1.2em;
}

h2 {
  font-size: 1em;
  color: rgb(150, 149, 149);
}
```

```css
h1,
h2 {
  margin: 0 0 1rem 0;
}

h1:has(+ h2) {
  margin: 0 0 0.25rem 0;
}
```

#### 結果

この例では、比較のために 2 つの類似したテキストを並べて示しています。左は `h1` 見出しの後に段落が続くもので、右は `h1` 見出しの後に `h2` 見出しが続き、段落が続くものです。右の例では、`:has()` は、`h2` 要素（次兄弟結合子 `+` で示される）が直後に続く `h1` 要素をセレクターとして選択するのに役立ち、この CSS ルールでは、その `h1` 要素の後の間隔を狭めています。`:has()` 疑似クラスがなければ、CSS セレクターを使って異なる型の先行兄弟や親要素を選択することはできません。

### :is() 疑似クラスとの組み合わせ

この例では、前の例を基に `:has()` で複数の要素を選択する方法を示します。

#### HTML

```html
<section>
  <article>
    <h1>Morning Times</h1>
    <h2>Delivering you news every morning</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </article>
  <article>
    <h1>Morning Times</h1>
    <h2>Delivering you news every morning</h2>
    <h3>8:00 am</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </article>
</section>
```

#### CSS
```

section {
  display: flex;
  align-items: start;
  justify-content: space-around;
}

article {
  display: inline-block;
  width: 40%;
}

h1 {
  font-size: 1.2em;
}

h2 {
  font-size: 1em;
  color: rgb(150, 149, 149);
}

h3 {
  font-size: 0.9em;
  color: darkgrey;
}
```

```css
h1,
h2,
h3 {
  margin: 0 0 1rem 0;
}

:is(h1, h2, h3):has(+ :is(h2, h3, h4)) {
  margin: 0 0 0.25rem 0;
}
```

#### 結果

ここでは、最初の `:is()` 疑似クラスは、リスト内の見出し要素のいずれかを選択するために使用されます。2 番目の `:is()` 疑似クラスは、`:has()` の引数として次兄弟セレクターのリストを渡すために使用されます。`:has()` 疑似クラスは、h2, h3, h4 要素を直後に持つ h1, h2, h3 要素を選択するのに役立ち、この CSS ルールでは、そのような h1, h2, h3 要素の後の間隔を狭めています。

なお、このセレクターはこのように書くこともできます。

```css
:is(h1, h2, h3):has(+ h2, + h3, + h4) {
  margin: 0 0 0.25rem 0;
}
```

### 論理演算

`:has()` 関係セレクターは、引数の複数のセレクターのうちの 1 つが真であるか、あるいはすべてのセレクターが真であるかをチェックするために使うことができます。

`:has()` 関係セレクターの中でカンマで区切られた値を使うことで、いずれかのパラメータが存在するかどうかをチェックすることができます。`x:has(a, b)` は、子孫 `a` または `b` が存在すれば `x` をスタイルします。

複数の `:has()` 関係セレクターを連結することで、すべてのパラメータが存在するかどうかをチェックすることができます。`x:has(a):has(b)` は、子孫 `a` および `b` が存在する場合に `x` をスタイルします。

```css
body:has(video, audio) {
  /\* body が video または audio を含むとき、body にスタイルが当たります \*/
}
body:has(video):has(audio) {
  /\* body が video および audio を含むとき、body にスタイルが当たります \*/
}
```

:has() と正規表現の類似性
----------------

興味深いことに、CSS の `:has()` と正規表現の先読みアサーションを関連付けることができます。どちらも、要素（または文字列）そのものにマッチする条件を実際に選択することなく、条件に基づいて要素（または正規表現における文字列）を選択できるからです。

### 肯定先読み (?=pattern)

正規表現 `abc(?=xyz)` では、文字列 `abc` の直後に `xyz` が続く場合のみマッチする。これは先読み操作なので、`xyz` はマッチに含まれない。

CSS における類似の構成は `.abc:has(+ .xyz)` です。これは、次兄弟要素 `.xyz` がある場合にのみ要素 `.abc` を選択します。要素 `.abc` が選択され `.xyz` は選択されないため、`:has(+ .xyz)` の部分は先読み操作として機能します。

### 否定先読み (?!pattern)

同様に、否定先読みの場合、正規表現 `abc(?!xyz)` では文字列 `abc` の後に `xyz` が続かない場合にのみマッチします。CSS における類似の構成は `.abc:has(+ :not(.xyz))` です。これは直後の要素が `.xyz` の場合、要素 `.abc` を選択しません。

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # relational |

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

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

関連情報
----

* `:is()`, `:where()`, `:not()`
* CSS セレクターと結合子
* CSS セレクターの構造
* セレクターリスト
* CSS セレクター
* セレクターを使用した DOM 要素の特定


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

touch-action
============

**`touch-action`** は CSS のプロパティで、タッチ画面のユーザーが要素のある領域をどのように操作できるか（例えば、ブラウザー内に組み込まれたパンまたはズーム機能）を設定します。

```css
/\* キーワード値 \*/
touch-action: auto;
touch-action: none;
touch-action: pan-x;
touch-action: pan-left;
touch-action: pan-right;
touch-action: pan-y;
touch-action: pan-up;
touch-action: pan-down;
touch-action: pinch-zoom;
touch-action: manipulation;

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

既定では、パン（スクロール）およびピンチ操作はブラウザーとは独立して別に扱われます。ポインターイベントを使用するアプリケーションは、ブラウザーがタッチジェスチャーの扱いを始めるときに `pointercancel` イベントを受け取ります。ブラウザーがどのジェスチャーを扱うかについての具体的に定義することによって、アプリケーションはジェスチャーを記憶するために `pointermove` および `pointerup` リスナーの中で独自の振る舞いを提供することができます。タッチイベントを使用するアプリケーションは、 `preventDefault()` を呼び出すことでブラウザーがジェスチャーを扱うのを無効にすることができますが、イベントリスナーが呼び出される前に、 `touch-action` を使用してブラウザーにアプリケーションの目的を知らせるようにもしてください。

ジェスチャーが開始されると、ブラウザーはタッチ要素の `touch-action` の値を、祖先のうちジェスチャーを実装しているもの (言い換えれば、最初のスクロールを含む要素) まで交差させます。つまり実際には、 `touch-action` は通常、その要素の子孫のいずれかに `touch-action` を明示的に指定する必要なく、独自の動作を持つ最上位の要素にのみ適用されます。

**メモ:** ジェスチャーが開始された後、 `touch-action` の値を変更しても、現在のジェスチャーの動作には影響を与えません。

構文
--

`touch-action` プロパティは次の何れかの形で指定することができます。

* キーワード `auto`, `none`, `manipulation` のうち一つ、*または*
* キーワード `pan-x`, `pan-left`, `pan-right` のうち一つと、キーワード `pan-y`, `pan-up`, `pan-down` のうち一つと、加えて任意のキーワード `pinch-zoom`。
### 値

`auto`

ブラウザーがすべてのパンやズームのジェスチャーを扱うことを有効にします。

`none`

ブラウザーがすべてのパンやズームのジェスチャーを扱うことを無効にします。

`pan-x`

指 1 本で水平にパンするジェスチャーを有効にします。 **pan-y**, **pan-up**, **pan-down**, **pinch-zoom** と組み合わせることができます。

`pan-y`

指 1 本で垂直にパンするジェスチャーを有効にします。 **pan-x**, **pan-left**, **pan-right**, **pinch-zoom** と組み合わせることができます。

`manipulation`

パンおよびズームのジェスチャーは有効にしますが、ダブルタップでのズームなど、標準外の追加的なジェスチャーを無効します。ダブルタップでズームすることを無効にすることで、ユーザーが画面をタップしたとき、ブラウザーが**クリック**イベントの生成を待つ必要がなくなります。これは "**pan-x pan-y pinch-zoom**" の別名です (互換性のために、これも有効です)。

`pan-left`, `pan-right`, `pan-up`, `pan-down`
Experimental

指定された方向へのスクロールを始める指 1 本のジェスチャーを有効にします。スクロールが始まると、その方向が予約されることがあります。なお、「上」にスクロールすること (**pan-up**) は、ユーザーが画面の表面を指で下方向にドラッグすることを意味し、同様に **pan-left** はユーザーが指で右にドラッグすることを意味します。より単純な表現がない限り、複数の方向を組み合わせることができます (例えば、 "**pan-left pan-right**" は "**pan-x**" の方がより単純なので不正ですが、 "**pan-left pan-down**" 有効です)。

`pinch-zoom`

複数の指でのページのパンやズーム有効にします。これは **pan-** のあらゆる値と組み合わせることができます。

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

`touch-action: none;` の宣言は、ブラウザー内蔵のズーム機能を操作することを阻害することがあります。これは弱視の人がページのコンテンツを読んで理解できるようになることを阻害します。

* MDN "WCAG を理解する ― ガイドライン 1.4 の解説"
* Understanding Success Criterion 1.4.4 | Understanding WCAG 2.0
公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | 非置換インライン要素、表の行、行グループ、表の列、列グループを除くすべての要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | アニメーション不可 |

形式文法
----
```

touch-action =
  auto                                                |
  none                                                |
  [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ]  |
  manipulation

```

例
-

### すべてのジェスチャーの無効化

最も一般的な使い方は、要素（およびスクロールしないその子孫）のすべてのジェスチャーを無効にして、地図やゲームの画面のように、独自のドラッグやズームの振る舞いを提供することです。

#### HTML

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

#### CSS

```css
#map {
  height: 150vh;
  width: 70vw;
  background: linear-gradient(blue, green);
  touch-action: none;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| Compatibility Standard # touch-action |
| Pointer Events # the-touch-action-css-property |

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

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

関連情報
----

* `pointer-events`
* ポインターイベント
* WebKit Blog More Responsive Tapping on iOS
* Google Developers Blog Making touch scrolling fast by default
* スクロールスナップ


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

CSS 雑題
======

このページでは、非常に実験的であるか、他の分類に適合しない CSS プロパティを扱います。

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

### プロパティ

* `all`
* `text-rendering`
ガイド
---

*なし。*

仕様書
---

*これらのプロパティは互いにほとんど無関係です。仕様書については個々の記事を参照して下さい。*

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

*これらのプロパティは互いにほとんど無関係です。ブラウザーで利用できるかどうかは個々の記事を参照して下さい。*


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

column-rule-color
=================

**`column-rule-color`** は CSS のプロパティで、段組みレイアウトで段間に引かれる線（段間罫）の色を設定します。

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

構文
--

```css
/\* <color> 値 \*/
column-rule-color: red;
column-rule-color: rgb(192, 56, 78);
column-rule-color: transparent;
column-rule-color: hsla(0, 100%, 50%, 0.6);

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

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

### 値

`<color>`

段を分割する段間罫の色です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `currentcolor` |
| 適用対象 | 段組み要素 |
| 継承 | なし |
| 計算値 | 色の計算値 |
| アニメーションの種類 | 色 |

形式文法
----
```

column-rule-color =
  <color>

```

例
-

### 青い段間罫を設定

#### HTML

```html
<p>
  This is a bunch of text split into three columns. The `column-rule-color`
  property is used to change the color 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: solid;
  column-rule-color: blue;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

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


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

実効値
===

**実効値** (actual value) は CSS プロパティにおいて、すべての必要な推定が適用された後の 使用値 (used value) です。例えば、境界を整数値のピクセル幅でしか描けないユーザーエージェントは、境界の太さを近似値の整数に丸めるかもしれません。

プロパティの実効値の計算
------------

ユーザーエージェントはプロパティの実効値 (最終値) を 4 段階で計算します。

1. 最初に指定値 (specified value) が、カスケード、継承、初期値の使用の何れかによって決定されます。
2. 次に、仕様に従って計算値 (computed value) が計算されます (例えば、 `span` に `position: absolute` が付いていると、 `display` が計算で `block` に変わります)。
3. それから、レイアウトが計算され、結果として使用値になります。
4. 最後に、使用値がローカルの環境の制約によって変換され、結果として実効値になります。
仕様書
---

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

関連情報
----

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


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

box-flex
========

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

**警告:** このプロパティは XUL ボックスモデルの部品を制御するためのものです。古い CSS Flexible Box Layout Module の草稿の '`box-flex`' (このプロパティの元になったもの) または '`-webkit-box-flex`' (草稿の元になったもの) の動作のどちらとも一致しません。現在の標準についての情報はフレックスボックスを参照してください。

**`-moz-box-flex`** および **`-webkit-box-flex`** は CSS のプロパティで、 `-moz-box` または `-webkit-box` が、これを内包するボックスを、包含ボックスのレイアウトの方向で埋めるまで拡張する方法を指定します。

```css
/\* <number> 値 \*/
-moz-box-flex: 0;
-moz-box-flex: 2;
-moz-box-flex: 3.5;
-webkit-box-flex: 0;
-webkit-box-flex: 2;
-webkit-box-flex: 3.5;

/\* Global values \*/
-moz-box-flex: inherit;
-moz-box-flex: initial;
-moz-box-flex: unset;
-webkit-box-flex: inherit;
-webkit-box-flex: initial;
-webkit-box-flex: unset;
```

構文
--

`box-flex` プロパティは `<number>` として指定されます。値が 0 の場合、ボックスは拡張されません。値が 0 より大きい場合は、ボックスは利用可能な空間の比率で拡張されます。

メモ
--

包含ボックスは利用可能な空間を、中のそれぞれの要素におけるフレックス値の比率で拡張します。

フレックス値がゼロになっている中の要素は拡張されません。

フレックス値がゼロではない中の要素が一つしかない場合は、有効な空間を埋めるまで拡張されます。

同じフレックス値を持つ中の要素は、同じ絶対量だけ拡張されます。

フレックス値が要素の `flex` 属性を使用して設定された場合は、このスタイルは無視されます。

包含ボックス内で同じ寸法の XUL 要素を作成するには、包含ボックスの `equalsize` 属性を `always` の値に設定してください。この属性には対応する CSS プロパティはありません。

包含ボックス内のすべての中の要素を同じ寸法にするトリックとしては、すべてに対して固定の寸法 (例えば `height: 0`) と、同じゼロより大きい `box-flex` の値 (例えば `-moz-box-flex: 1`) を設定することです。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | CSS の `display` の値が `-moz-box`, `-moz-inline-box`, `-webkit-box`, `-webkit-inline-box` のいずれかである要素の直接の子要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----

Error: could not find syntax for this item例
-

### box-flex の設定

```html
<!doctype html>
<html>
  <head>
    <title>-moz-box-flex example</title>
    <style>
 div.example {
 display: -moz-box;
 display: -webkit-box;
 border: 1px solid black;
 width: 100%;
 }
 div.example > p:nth-child(1) {
 -moz-box-flex: 1; /\* Mozilla \*/
 -webkit-box-flex: 1; /\* WebKit \*/
 border: 1px solid black;
 }
 div.example > p:nth-child(2) {
 -moz-box-flex: 0; /\* Mozilla \*/
 -webkit-box-flex: 0; /\* WebKit \*/
 border: 1px solid black;
 }
 </style>
  </head>
  <body>
    <div class="example">
      <p>I will expand to fill extra space</p>
      <p>I will not expand</p>
    </div>
  </body>
</html>
```

仕様書
---

標準仕様には含まれていません。

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

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

関連情報
----

* `box-orient`
* `box-pack`
* `box-direction`
* `flex`


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

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

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

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

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

**`::view-transition`** は CSS の擬似要素で、ビュートランジションのオーバーレイのルートを表します。これはすべてのビュートランジションを含み、他のすべてのページコンテンツの最上位の上に位置します。

ビュートランジションの間、 `::view-transition` はビュートランジションのプロセスで説明されているように、関連する擬似要素ツリーに含まれます。これはこのツリーの最上位ノードであり、 1 つ以上の `::view-transition-group` を子として持ちます。

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

```css
html::view-transition {
  position: fixed;
  inset: 0;
}
```

すべての `::view-transition-group` 擬似要素は、ビュートランジションルートに対して相対的に配置されます。

構文
--

```css
::view-transition {
  /\* ... \*/
}
```

例
-

```css
::view-transition {
  background-color: rgba(0, 0, 0, 0.25);
}
```

仕様書
---

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

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

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

関連情報
----

* ビュートランジション API
* Smooth and simple transitions with the View Transitions API


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

CSS 色
=====

**CSS 色** (CSS Color) は CSS のモジュールで、色、色の種類、色の混合、透過性、そしてどのようにこれらの色や効果を HTML コンテンツに適用するかを扱います。`<color>` を値として取る CSS プロパティがすべてこのモジュールの一部であるとは限りませんが、このモジュールに依存することがあります。

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

### プロパティ

* `color`
* `color-adjust`
* `opacity`
### データ型

* `<color>`
ガイド
---

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

様々な種類のコンテンツに CSS を使って色を適用するためのガイドです。色に関するすべての CSS プロパティが関係します。

ツール
---

色選択ツール

このツールは独自の色を簡単に作成、調整、実験することができます。

仕様書
---

| Specification |
| --- |
| CSS Color Module Level 4  |
| CSS Color Module Level 5  |

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

### `color` プロパティ

{{Compat}}### `color-adjust` プロパティ

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

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

* 他の仕様書で定義されている色に関するプロパティ: `background-color`, `border-color`, `outline-color`, `text-decoration-color`, `text-emphasis-color`, `text-shadow`, `caret-color`, `column-rule-color`
* CSS では、グラデーションは色ではなく画像です。


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

:host
=====

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

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

* Learn more
* See full compatibility
* Report feedback
**`:host`** は CSS の 擬似クラスで、その CSS を含むシャドウ DOM のシャドウホストを選択します。 — 言い換えれば、シャドウ DOM の中からカスタム要素を選択できるようにします。

**メモ:** これはシャドウ DOM の外で使われたときには効果がありません。

```css
/\* シャドウのルートホストを選択 \*/
:host {
  font-weight: bold;
}
```

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

構文
--
```

:host
```

例
-

### シャドウホストのスタイル付け

以下のスニペットは、 host セレクターの例 (ライブでも参照してください) から取りました。

この例では、テキストの周りを囲むことができる簡単なカスタム要素 — `<context-span>` — を使います。

```html
<h1>
  Host selectors <a href="#"><context-span>example</context-span></a>
</h1>
```

要素のコンストラクターの中で、 `style` および `span` 要素を作成し、 `span` の中をカスタム要素の中身で埋め、 `style` 要素をいくつかの CSS ルールで埋めます。

```js
let style = document.createElement("style");
let span = document.createElement("span");
span.textContent = this.textContent;

const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(style);
shadowRoot.appendChild(span);

style.textContent =
  "span:hover { text-decoration: underline; }" +
  ":host-context(h1) { font-style: italic; }" +
  ':host-context(h1):after { content: " - no links in headers!" }' +
  ":host-context(article, aside) { color: gray; }" +
  ":host(.footer) { color : red; }" +
  ":host { background: rgba(0,0,0,0.1); padding: 2px 5px; }";
```

`:host { background: rgba(0,0,0,0.1); padding: 2px 5px; }` のルールは、文書中の `<context-span>` 要素 (このインスタンスのシャドウホスト) のすべてのインスタンスにスタイル付けします。

仕様書
---

| Specification |
| --- |
| CSS Scoping Module Level 1 # host-selector |

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

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

関連情報
----

* ウェブコンポーネント
* `:host()`
* `:host-context()`


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

:picture-in-picture
===================

**`:picture-in-picture`** は CSS の擬似クラスで、現在ピクチャインピクチャモードの要素に一致します。

構文
--
```

:picture-in-picture
```

使用上のメモ
------

`:picture-in-picture` 擬似クラスを使用すると、動画がピクチャインピクチャと従来の表示モードの間で切り替わるときに、コンテンツの大きさ、スタイル、レイアウトを自動的に調整するようにスタイルシートを設定することができます。

例
-

この例では、動画が浮遊ウィンドウで表示されたときにボックスシャドウ付きになります。

### HTML

このページの HTML は次のようになります。

```html
<h1>MDN Web Docs Demo: :picture-in-picture pseudo-class</h1>

<p>
  This demo uses the <code>:picture-in-picture</code> pseudo-class to
  automatically change the style of a video entirely using CSS.
</p>

<video id="pip-video"></video>
```

ID が `"pip-video"` の `<video>` は、ピクチャインピクチャの浮遊ウィンドウに表示されているかどうかで、赤いボックスシャドウを持つか持たないかが変化します。

### CSS

The magic happens in the CSS.

```css
:picture-in-picture {
  box-shadow: 0 0 0 5px red;
}
```

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # pip-state |

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

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

関連情報
----

* Picture-in-picture API
* `HTMLVideoElement.requestPictureInPicture()`
* `HTMLVideoElement.autoPictureInPicture` (en-US)
* `HTMLVideoElement.disablePictureInPicture`
* `Document.pictureInPictureEnabled`
* `Document.exitPictureInPicture()`
* `Document.pictureInPictureElement`


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

border-right-width
==================

**`border-right-width`** は CSS のプロパティで、要素の右側の境界の幅を設定します。

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

構文
--

```css
/\* キーワード値 \*/
border-right-width: thin;
border-right-width: medium;
border-right-width: thick;

/\* <length> 値 \*/
border-right-width: 10em;
border-right-width: 3vmax;
border-right-width: 6px;

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

### 値

`<line-width>`

明示的な負の値ではない `<length>` またはキーワードで、境界の幅を定義します。キーワードの場合、以下の値のうちの一つでなければなりません。

* `thin`
* `medium`
* `thick`

**メモ:** 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、何れか一つを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `medium` |
| 適用対象 | すべての要素。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| 計算値 | 絶対的な長さ、または `border-right-style` が `none` または `hidden` の場合は `0` |
| アニメーションの種類 | length |

形式文法
----
```

border-right-width =
  <line-width>

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

```

例
-

### 境界線の太さの比較

#### HTML

```html
<div>Element 1</div>
<div>Element 2</div>
```

#### CSS

```css
div {
  border: 1px solid red;
  margin: 1em 0;
}

div:nth-child(1) {
  border-right-width: thick;
}
div:nth-child(2) {
  border-right-width: 2em;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* その他の太さに関する境界の CSS プロパティ: `border-bottom-width`, `border-left-width`, `border-top-width`, `border-width`
* 他の右側の境界に関する CSS プロパティ: `border`, `border-right`, `border-right-style`, `border-right-color`


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

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

`scroll-margin-inline` は一括指定プロパティで、インライン方向のスクロールマージンを設定します。

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

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

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

* `scroll-margin-inline-end`
* `scroll-margin-inline-start`
構文
--

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

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

### 値

`<length>`

スクロールコンテナーの対応する辺からの距離です。

解説
--

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

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `scroll-margin-inline-start`: `0`
* `scroll-margin-inline-end`: `0`
 |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `scroll-margin-inline-start`: 指定通り
* `scroll-margin-inline-end`: 指定通り
 |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

scroll-margin-inline =
  <length>{1,2}

```

例
-

### 簡単なデモ

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

ここでの目的は、水平方向にスクロールする 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: 1rem;
}

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

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

**メモ:** ここでは `scroll-margin` をインライン軸 (この場合は X 軸) の先頭*と*末尾に一度に設定していますが、実際に関係するのは末尾側だけです。例えば `scroll-margin-inline: 0 1rem` や `scroll-margin-inline-end: 1rem` などのように、一辺のみにスクロールマージンを設定しても同様に機能します。

#### 結果

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

仕様書
---

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # propdef-scroll-margin-inline |

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

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

関連情報
----

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


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

scroll-snap-type
================

**`scroll-snap-type`** は CSS のプロパティで、スナップ点が存在する場合にスクロールコンテナーにどれだけ厳密にスナップ点を強制するかを設定します。

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

スナップ点へ強制するために使用する詳細なアニメーションや力学の指定はこのプロパティでは扱わず、ユーザーエージェントに委ねられます。

```css
/\* キーワード値 \*/
scroll-snap-type: none;
scroll-snap-type: x;
scroll-snap-type: y;
scroll-snap-type: block;
scroll-snap-type: inline;
scroll-snap-type: both;

/\* 任意の mandatory | proximity\*/
scroll-snap-type: x mandatory;
scroll-snap-type: y proximity;
scroll-snap-type: both mandatory;

/\* など \*/

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

構文
--

### 値

`none`

このスクロールコンテナーの視覚ビューポートがスクロールする時は、スナップ点を無視しなければなりません。

`x`

スクロールコンテナーは水平軸のみで、スナップ位置に合わせられます。

`y`

スクロールコンテナーは垂直軸のみで、スナップ位置に合わせられます。

`block`

スクロールコンテナーはブロック軸のみで、スナップ位置に合わせられます。

`inline`

スクロールコンテナーはインライン軸のみで、スナップ位置に合わせられます。

`both`

スクロールコンテナーは両方の軸で、個別にスナップ位置に合わせられます (それぞれの軸で異なる要素に位置が合わせられる可能性があります)。

`mandatory`

このスクロールコンテナーの視覚ビューポートは、現在スクロール中でなければスナップ点に合わせられます。これはスクロールアクションが終了した際に、可能であればその点にはまるということを意味しています。内容が追加、移動、削除、リサイズされた場合、スクロール量のオフセットは、そのスナップ点に載り続けるよう調整されます。

`proximity`

このスクロールコンテナーの視覚ビューポートは、現在スクロール中でなければ、ユーザーエージェントのスクロール引数を考慮しつつスナップ点に載るよう動作する可能性があります。コンテンツが追加、移動、削除、リサイズされた場合、スクロール量のオフセットは、そのスナップ点に載り続けるよう調整されることがあります。

公式定義
----

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

形式文法
----
```

scroll-snap-type =
  none                                                |
  [ x | y | block | inline | both ] [ mandatory | proximity ]?

```

例
-

### 様々な軸にスナップ

#### HTML

```html
<div class="holster">
  <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 Prox. 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 Mand. 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 Prox. 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>
</div>
```

#### CSS

```css
/\* setup \*/
html,
body,
.holster {
  height: 100%;
}
.holster {
  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;
}
/\* 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: 100%;
}
/\* 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;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

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


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

mask-border-mode
================

**`mask-border-mode`** は CSS のプロパティで、マスク境界の混合モードを指定します。

構文
--

```css
/\* キーワード値 \*/
mask-border-mode: luminance;
mask-border-mode: alpha;

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

### 値

`luminance`

マスク境界画像の輝度値がマスク値として使用されます。

`alpha`

マスク境界画像のアルファ値がマスク値として使用されます。

公式定義
----

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

形式文法
----
```

mask-border-mode =
  luminance  |
  alpha

```

例
-

### 基本的な使用

このプロパティは、まだどこでも対応されていないようです。このプロパティが対応されるようになれば、マスク境界に使用される混合モードの種類を、輝度値とアルファ値から指定することができるようになります。

```css
mask-border-mode: luminance;
mask-border-mode: alpha;
```

仕様書
---

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

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

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

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


プライバシーと :visited セレクター - CSS: カスケーディングスタイルシート

プライバシーと :visited セレクター
======================

およそ 2010 年よりも前、 CSS の `:visited` セレクターによって、ウェブサイトがユーザーの閲覧履歴を明らかにし、ユーザーがどのサイトを訪問したかを把握することができました。これは `window.getComputedStyle` およびその他の技術を用いて行われていました。この処理はすばやく実行され、ユーザーがどこを訪れたかを特定できるだけでなく、ユーザーの身元に関する多くの情報を推測することも可能になりました。

この問題を緩和するために、ブラウザーは訪問済みリンクから受け取ることができる情報量を制限されるようになりました。

ちょっとした善意の嘘
----------

ユーザーのプライバシーを保護するために、Firefox や他のブラウザーは特定の状況下でウェブアプリケーションに嘘をつきます。

* `window.getComputedStyle` メソッドや、 `element.querySelector` などの類似の関数は、ユーザーがページ上のリンクを訪れたことがないことを示す値を常に返します。
* `:visited + span` のような兄弟結合子を使用した場合、隣接する要素（この例では `span`）は、リンクが未訪問であるかのようにスタイル付けされます。
* 稀なケースですが、入れ子になったリンク要素を使用していて、一致している要素が履歴の中の存在がテストされているリンクとは異なる場合、要素はリンクが未訪問であるかのようにレンダリングされます。
訪問済みリンクスタイルの制限
--------------

訪問済みリンクの視覚的なスタイルづけを行うことはまだできますが、使えるスタイルは制限されています。訪問済みリンクに用いることができるのは以下のプロパティだけです。

* `color`
* `background-color`
* `border-color` （およびそのサブプロパティ）
* `column-rule-color`
* `outline-color`
* `text-decoration-color`
* `text-emphasis-color`
* `fill` および `stroke` プロパティの色の部分

さらに、訪問済みリンクに設定できるプロパティであっても、未訪問リンクと訪問済みリンク間で不透明度を変えることはできません。これは、別の状況なら、`rgb()` や `hsl()` のカラー値、もしくは `transparent` キーワードを使ってできた操作でした。

制限内でスタイルづけをする方法を、次の例で示します。

```css
:link {
  outline: 1px dotted blue;
  background-color: white;
  /\* background-color の既定値は `transparent` です。異なる値を指定しないと
 :visited での変更が適用されません。 \*/
}

:visited {
  outline-color: orange; /\* オレンジのアウトライン \*/
  background-color: green; /\* グリーンの背景 \*/
  color: yellow; /\* 黄色のテキスト \*/
}
```

ウェブ開発者への影響度
-----------

全体として、ウェブ開発者にそれほど大きな影響はないでしょう。しかしながら、サイトの変更が必要になるような特殊なケースが少しだけあります。

* 背景画像を使ってリンクをスタイルづけし、訪問済みかどうかを表示する方法はもう動作しないでしょう。訪問済みリンクのスタイルには色以外は使えないからです。
* それ以外の透明な色は、 `:visited` セレクター内でスタイル付けした場合には表示されません。
関連情報
----

* CSS の :visited に行われるプライバシー対策 on Mozilla Hacks ブログ翻訳
* Plugging the CSS History Leak on the Mozilla Security Blog
* Preventing attacks on a user's history through CSS :visited selectors


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

margin
======

**`margin`** は CSS のプロパティで、要素の全四辺のマージン領域を設定します。

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

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

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

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

```css
/\* 四辺すべてに適用 \*/
margin: 1em;
margin: -3px;

/\* 上下 | 左右 \*/
margin: 5% auto;

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

/\* 上 | 右 | 下 | 左 \*/
margin: 2px 1em 0 auto;

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

`margin` プロパティは 1 ～ 4 つの値を使って指定することができます。それぞれの値は `<length>`、`<percentage>`、 または `auto` キーワードです。負の数を指定すると、要素を既定よりも隣と近づけて描画します。

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

`<length>`

マージンの寸法を固定値で表したものです。

`<percentage>`

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

`auto`

ブラウザーが適切なマージンを選択して使用します。例えば、要素を中央揃えするためにこの値を使用することもあります。

解説
--

このプロパティを使用して、要素の全四辺のマージンを設定することができます。マージンは要素の周りに追加の領域を作成します。それに対して、 `padding` は要素*内部*に追加の領域を作成します。

top および bottom のマージンは、 `<span>` または `<code>` などの置換要素ではないインライン要素には効果がありません。

### 水平方向の中央揃え

最近のブラウザーで何かを中央揃えしたい場合は、`display``: flex;` `justify-content``: center;` を使用することができます。

しかし、 IE8-9 のような古いブラウザーはフレックスボックスレイアウトに対応していないため、これは利用できません。親要素内で要素を中央揃えするのであれば、 `margin: 0 auto;` を使用してください。

### マージンの相殺

要素の上下のマージンは、相殺されて 2 つのマージンのうち大きい方を取る単一のマージンになることがあります。詳しくはマージンの相殺の習得を参照してください。

公式定義
----

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

形式文法
----
```

margin =
  <'margin-top'>{1,4}

```

例
-

### 簡単な例

#### HTML

```html
<div class="center">This element is centered.</div>

<div class="outside">This element is positioned outside of its container.</div>
```

#### CSS

```css
.center {
  margin: auto;
  background: lime;
  width: 66%;
}

.outside {
  margin: 3rem 0 0 -3rem;
  background: cyan;
  width: 66%;
}
```

### その他の例

```css
margin: 5%; /\* 全辺: 5% のマージン \*/

margin: 10px; /\* 全辺: 10px のマージン \*/

margin: 1.6em 20px; /\* 上と下: 1.6em のマージン \*/
/\* 左と右: 20px のマージン \*/

margin: 10px 3% -1em; /\* 上: 10px のマージン \*/
/\* 左と右: 3% のマージン \*/
/\* 下: -1em のマージン \*/

margin: 10px 3px 30px 5px; /\* 上: 10px のマージン \*/
/\* 右: 3px のマージン \*/
/\* 下: 30px のマージン \*/
/\* 左: 5px のマージン \*/

margin: 2em auto; /\* 上と下: 2em のマージン \*/
/\* ボックスは水平方向に中央 \*/

margin: auto; /\* 上と下: 0 のマージン \*/
/\* ボックスは水平方向に中央 \*/
```

仕様書
---

| Specification |
| --- |
| CSS Box Model Module Level 3 # margin |

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

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

関連情報
----

* CSS 基本ボックスモデル入門
* マージンの相殺
* `margin-top`, `margin-right`, `margin-bottom`, `margin-left`
* 対応する論理的プロパティ: `margin-block-start`, `margin-block-end`, `margin-inline-start`, `margin-inline-end` および一括指定の `margin-block` と `margin-inline`


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

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

**`border-left-style`** は CSS のプロパティで、要素の左側の `border` における線の形状を設定します。

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

**メモ:** 仕様書では、異なる形状の境界線を角でどの様に接続するかを定義していません。

構文
--

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

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

`border-left-style` プロパティは、 `border-style` プロパティで利用できるキーワードのうちの一つで指定します。

公式定義
----

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

形式文法
----
```

border-left-style =
  <line-style>

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

```

例
-

### border-left-style の設定

#### HTML

```html
<table>
  <tr>
    <td class="b1">none</td>
    <td class="b2">hidden</td>
    <td class="b3">dotted</td>
    <td class="b4">dashed</td>
  </tr>
  <tr>
    <td class="b5">solid</td>
    <td class="b6">double</td>
    <td class="b7">groove</td>
    <td class="b8">ridge</td>
  </tr>
  <tr>
    <td class="b9">inset</td>
    <td class="b10">outset</td>
  </tr>
</table>
```

#### CSS

```css
/\* 表の外見を定義 \*/
table {
  border-width: 2px;
  background-color: #52e385;
}
tr,
td {
  padding: 3px;
}

/\* border-left-style の例のクラス \*/
.b1 {
  border-left-style: none;
}
.b2 {
  border-left-style: hidden;
}
.b3 {
  border-left-style: dotted;
}
.b4 {
  border-left-style: dashed;
}
.b5 {
  border-left-style: solid;
}
.b6 {
  border-left-style: double;
}
.b7 {
  border-left-style: groove;
}
.b8 {
  border-left-style: ridge;
}
.b9 {
  border-left-style: inset;
}
.b10 {
  border-left-style: outset;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* その他の形状に関する境界のプロパティ: `border-bottom-style`, `border-right-style`, `border-top-style`, `border-style`
* その他の左側の境界に関するプロパティ: `border-left`, `border-left-color`, `border-left-width`


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

クラスセレクター
========

CSS の**クラスセレクター** (class selector) は、 `class` 属性の内容に基づいて要素を選択します。

```css
/\* class="spacious" であるすべての要素 \*/
.spacious {
  margin: 2em;
}

/\* class="spacious" であるすべての <li> 要素 \*/
li.spacious {
  margin: 2em;
}

/\* "spacious" および "elegant" の両方をクラスリストに含む <li> 要素すべて \*/
/\* 例えば、 class="elegant retro spacious" \*/
li.spacious.elegant {
  margin: 2em;
}
```

構文
--

```css
.クラス名 { スタイルプロパティ }
```

なお、これは以下の`属性セレクター`と等価です。

```css
[class~=クラス名] { スタイルプロパティ }
```

例
-

### CSS

```css
.red {
  color: #f33;
}

.yellow-bg {
  background: #ffa;
}

.fancy {
  font-weight: bold;
  text-shadow: 4px 4px 3px #77f;
}
```

### HTML

```html
<p class="red">この段落は赤い文字です。</p>
<p class="red yellow-bg">この段落は黄色の背景に赤い文字です。</p>
<p class="red fancy">この段落は "fancy" スタイルで赤い文字です。</p>
<p>これは単なる普通の段落です。</p>
```

### 結果

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # class-html |

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

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

関連情報
----

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


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

justify-content
===============

CSS の **`justify-content`** プロパティは、フレックスコンテナーの主軸およびグリッドコンテナーのインライン軸に沿って、中身のアイテムの間や周囲に間隔を配置する方法を定義します。

このデモはグリッドレイアウトを用いていくつかの値を紹介します。

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

長さや自動マージンが適用された後に配置が行われることから、フレックスボックスレイアウトで `flex-grow` が `0` ではないフレックス要素が少なくとも 1 つある場合は利用可能な空間がなくなりますので、このプロパティの効果はないでしょう。

構文
--

```css
/\* 位置による配置 \*/
justify-content: center; /\* アイテムを中央に寄せる \*/
justify-content: start; /\* アイテムを先頭に寄せる \*/
justify-content: end; /\* アイテムを末尾に寄せる \*/
justify-content: flex-start; /\* フレックスアイテムを先頭に寄せる \*/
justify-content: flex-end; /\* フレックスアイテムを末尾に寄せる \*/
justify-content: left; /\* アイテムを左端に寄せる \*/
justify-content: right; /\* アイテムを右端に寄せる \*/

/\* ベースラインによる配置 \*/
/\* justify-content はベースラインの値を取りません \*/

/\* 通常の配置 \*/
justify-content: normal;

/\* 均等配置 \*/
justify-content: space-between; /\* 各アイテムを均等に配置し
 最初のアイテムは先頭に寄せ、
 最後のアイテムは末尾に寄せる \*/
justify-content: space-around; /\* 各アイテムを均等に配置し
 各アイテムの両側に半分の大きさの
 間隔を置く \*/
justify-content: space-evenly; /\* 各アイテムを均等に配置し
 各アイテムの周りに同じ大きさの間隔を置く \*/
justify-content: stretch; /\* 各アイテムを均等に配置し
 サイズが 'auto' であるアイテムは、
 コンテナーに合わせて引き伸ばす \*/

/\* あふれた場合の配置 \*/
justify-content: safe center;
justify-content: unsafe center;

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

### 値

`start`

各アイテムは、主軸方向で配置コンテナーの先頭側の端に向けて互いに寄せて配置されます。

`end`

各アイテムは、主軸方向で配置コンテナーの末尾側の端に向けて互いに寄せて配置されます。

`flex-start`

 各アイテムは、フレックスコンテナーに依存して、主軸の先頭側である配置コンテナーの端に向けて互いに寄せて配置されます。
 これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は `start` のように扱われます。

`flex-end`

 各アイテムは、フレックスコンテナーに依存して、主軸の末尾側である配置コンテナーの端に向けて互いに寄せて配置されます。
 これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は `end` のように扱われます。

`center`

各アイテムは、主軸方向で配置コンテナーの中央に向けて互いに寄せて配置されます。

`left`

各アイテムは、主軸方向で配置コンテナーの左側の端に向けて互いに寄せて配置されます。プロパティの軸がインライン軸と平行でない場合は、この値は `start` のように動作します。

`right`

各アイテムは、主軸方向で配置コンテナーの右側の端に向けて互いに寄せて配置されます。プロパティの軸がインライン軸と平行でない場合は、この値は `start` のように動作します。

`normal`

各アイテムは `justify-content` の値が設定されていないかのように、既定の位置に寄せて配置されます。この値はグリッドおよびフレックスコンテナーの `stretch` として動作します。

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

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

`space-between`

各アイテムは、配置コンテナーの中で主軸方向に均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムは主軸の先頭側に寄せられ、最後のアイテムは主軸の末尾側に寄せられます。

`space-around`

各アイテムは、配置コンテナーの中で主軸方向に均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムの前と最後のアイテムの後の余白は、隣接するアイテム同士の間隔の半分の幅になります。

`space-evenly`

各アイテムは、配置コンテナーの中で主軸方向に均等に配置されます。隣接するアイテム同士の間隔、最初のアイテムの前の余白、最後のアイテムの後の余白は、まったく同じ幅になります。

`stretch`

各アイテムの主軸に沿った寸法の合計が配置コンテナーの寸法よりも小さい場合、寸法が `auto` のアイテムは、 `max-height`/`max-width` (または同等の機能) での制約を尊重しつつ、 (比例的にではなく) 均等に引き伸ばされ、主軸方向の寸法の合計が配置コンテナーを満たすようになります。

**メモ:** `stretch` はフレキシブルボックス (フレックスボックス) は対応していません。

`safe`

配置キーワードと共に使用します。選択されたキーワードによって、アイテムが配置コンテナーをあふれてデータの損失が発生する場合、アイテムは配置モードが `start` であったかのように配置されます。

`unsafe`

配置キーワードと共に使用します。アイテムと配置コンテナーの相対的な寸法にかかわらず、またあふれることによってデータの損失が発生するかどうかにかかわらず、指定した値を尊重します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `normal` |
| 適用対象 | フレックスコンテナー |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

justify-content =
  normal                                              |
  <content-distribution>                              |
  <overflow-position>? [ <content-position> | left | right ]

<content-distribution> =
  space-between  |
  space-around   |
  space-evenly   |
  stretch

<overflow-position> =
  unsafe  |
  safe

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

```

例
-

### フレックスアイテムの配分の設定

#### CSS

```css
#container {
  display: flex;
  justify-content: space-between; /\* live sample で変更可能 \*/
}

#container > div {
  width: 100px;
  height: 100px;
  background: linear-gradient(-45deg, #788cff, #b4c8ff);
}
```

```
<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>
<select id="justifyContent">
  <option value="start">start</option>
  <option value="end">end</option>
  <option value="flex-start">flex-start</option>
  <option value="flex-end">flex-end</option>
  <option value="center">center</option>
  <option value="left">left</option>
  <option value="right">right</option>
  <option value="baseline">baseline</option>
  <option value="first baseline">first baseline</option>
  <option value="last baseline">last baseline</option>
  <option value="space-between" selected>space-between</option>
  <option value="space-around">space-around</option>
  <option value="space-evenly">space-evenly</option>
  <option value="stretch">stretch</option>
</select>
```

```
var justifyContent = document.getElementById("justifyContent");
justifyContent.addEventListener("change", function (evt) {
  document.getElementById("container").style.justifyContent = evt.target.value;
});
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # align-justify-content |
| CSS Flexible Box Layout Module Level 1 # justify-content-property |

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

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

関連情報
----

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


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

<filter-function>
=================

**`<filter-function>`** は CSS のデータ型で、入力された画像の表示方法を変更することができるグラフィカル効果を表します。これは `filter` および `backdrop-filter` プロパティで使用します。

構文
--

`<filter-function>` データ型は以下の一覧にあるフィルター関数を使用して指定されます。それぞれの関数には引数が必要であり、無効な場合は、フィルターが適用されません。

`blur()`

画像をぼかします。

`brightness()`

画像を明るくしたり暗くしたりします。

`contrast()`

画像のコントラストを上げたり下げたりします。

`drop-shadow()`

画像の背後にドロップシャドウを適用します。

`grayscale()`

画像をグレイスケールに変換します。

`hue-rotate()`

画像の色相を全体的に変更します。

`invert()`

画像の色を反転させます。

`opacity()`

画像を半透明にします。

`saturate()`

入力画像の彩度を上げたり下げたりします。

`sepia()`

画像をセピア調に変換します。

例
-

### フィルター関数の比較

この例では、シンプルなグラフィックに加えて、さまざまな種類のフィルター機能を選択するための選択メニューと、フィルター機能内で使用される値を変化させるためのスライダーが用意されています。コントロールを更新すると、フィルター効果がリアルタイムで更新されるので、さまざまなフィルターの効果を調べることができます。

#### HTML

```html
<div></div>
<ul>
  <li>
    <label for="filter-select">フィルター関数を選択:</label>
    <select id="filter-select">
      <option selected>blur</option>
      <option>brightness</option>
      <option>contrast</option>
      <option>drop-shadow</option>
      <option>grayscale</option>
      <option>hue-rotate</option>
      <option>invert</option>
      <option>opacity</option>
      <option>saturate</option>
      <option>sepia</option>
    </select>
  </li>
  <li><input type="range" /><output></output></li>
  <li>
    <p>現在の値: <code></code></p>
  </li>
</ul>
```

#### CSS

```css
div {
  width: 300px;
  height: 300px;
  background: url(https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png)
    no-repeat center;
}

li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

input {
  width: 60%;
}

output {
  width: 5%;
  text-align: center;
}

select {
  width: 40%;
  margin-left: 2px;
}
```

#### JavaScript

```js
const selectElem = document.querySelector("select");
const divElem = document.querySelector("div");
const slider = document.querySelector("input");
const output = document.querySelector("output");
const curValue = document.querySelector("p code");

selectElem.addEventListener("change", () => {
  setSlider(selectElem.value);
  setDiv(selectElem.value);
});

slider.addEventListener("input", () => {
  setDiv(selectElem.value);
});

function setSlider(filter) {
  if (filter === "blur") {
    slider.value = 0;
    slider.min = 0;
    slider.max = 30;
    slider.step = 1;
    slider.setAttribute("data-unit", "px");
  } else if (
    filter === "brightness" ||
    filter === "contrast" ||
    filter === "saturate"
  ) {
    slider.value = 1;
    slider.min = 0;
    slider.max = 4;
    slider.step = 0.05;
    slider.setAttribute("data-unit", "");
  } else if (filter === "drop-shadow") {
    slider.value = 0;
    slider.min = -20;
    slider.max = 40;
    slider.step = 1;
    slider.setAttribute("data-unit", "px");
  } else if (filter === "opacity") {
    slider.value = 1;
    slider.min = 0;
    slider.max = 1;
    slider.step = 0.01;
    slider.setAttribute("data-unit", "");
  } else if (
    filter === "grayscale" ||
    filter === "invert" ||
    filter === "sepia"
  ) {
    slider.value = 0;
    slider.min = 0;
    slider.max = 1;
    slider.step = 0.01;
    slider.setAttribute("data-unit", "");
  } else if (filter === "hue-rotate") {
    slider.value = 0;
    slider.min = 0;
    slider.max = 360;
    slider.step = 1;
    slider.setAttribute("data-unit", "deg");
  }
}

function setDiv(filter) {
  if (filter === "drop-shadow") {
    divElem.style.filter = `${selectElem.value}(${Math.round(
 slider.value,
 )}${slider.getAttribute("data-unit")} ${Math.round(
 slider.value,
 )}${slider.getAttribute("data-unit")} ${Math.round(
 Math.abs(slider.value / 2),
 )}${slider.getAttribute("data-unit")})`;
  } else {
    divElem.style.filter = `${selectElem.value}(${
 slider.value
 }${slider.getAttribute("data-unit")}`;
  }

  updateOutput();
  updateCurValue();
}

function updateOutput() {
  output.textContent = slider.value;
}

function updateCurValue() {
  curValue.textContent = `filter: ${divElem.style.filter}`;
}

setSlider(selectElem.value);
setDiv(selectElem.value);
```

#### 結果

仕様書
---

| Specification |
| --- |
| Filter Effects Module Level 1 # typedef-filter-function |

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

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

関連情報
----

* このデータ型を使用するプロパティ: `filter` および `backdrop-filter`


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

max-height
==========

**`max-height`** は CSS のプロパティで、要素の最大高を設定します。これは `height` プロパティの使用値が、 `max-height` に指定した値を上回ることを防ぎます。

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

`max-height` は `height` を上書きしますが、 `min-height` は `max-height` を上書きします。

構文
--

```css
/\* <length> 値 \*/
max-height: 3.5em;

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

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

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

### 値

`<length>`

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

`<percentage>`

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

`none`

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

`max-content`

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

`min-content`

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

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

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

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

テキストを大きくするためにページを拡大したときに、 `max-height` を設定した要素が切り取られたり、他のコンテンツを覆い隠したりしないことを確認してください。

* MDN WCAG を理解する ― ガイドライン 1.4 の解説
* Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | 非置換インライン要素、テーブルの列、列グループを除くすべての要素 |
| 継承 | なし |
| パーセント値 | パーセント値は、生成ボックスの包含ブロックの高さを基準に計算されます。 包含ブロックの高さが明示的に定義されず (すなわち、コンテンツの高さに依存します)、この要素が絶対位置指定されていない場合は、パーセント値は `none` として扱われます。 |
| 計算値 | 指定されたパーセント値または絶対的な長さ、または `none` |
| アニメーションの種類 | length または パーセント値, calc(); |

形式文法
----
```

max-height =
  none                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )

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

```

例
-

### パーセント値とキーワード値を用いた max-height の設定

```css
table {
  max-height: 75%;
}

form {
  max-height: none;
}
```

仕様書
---

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

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

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

関連情報
----

* ボックスモデル、 `box-sizing`
* `height`, `min-height`
* 対応する論理的プロパティ: `max-inline-size`, `max-block-size`


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

font-optical-sizing
===================

**`font-optical-sizing`** は CSS のプロパティで、テキストの描画をそれぞれの大きさでの表示に最適化して表示するかどうかを設定します。

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

構文
--

```css
/\* キーワード値 \*/
font-optical-sizing: none;
font-optical-sizing: auto; /\* default \*/

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

### 値

none

ブラウザーは表示の最適化のために書体の形を変更しません。

auto

ブラウザーは表示の最適化のために書体の形を変更します。

解説
--

オプティカルサイズは、光学的サイズ変化軸を持つフォントに対して既定で有効になります。オプティカルサイズ変化軸は `font-variation-settings` の `opsz` で表されます。

オプティカルサイジングを使用した場合、小さな文字サイズは太いストロークと大きなセリフで表現されることが多く、逆に大きな文字サイズは太いストロークと細いストロークのコントラストが強くなり、より繊細に表現されることが多くなります。

公式定義
----

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

形式文法
----
```

font-optical-sizing =
  auto  |
  none

```

例
-

### オプティカルサイズの変更を無効化

```html
<p class="optical-sizing">
  This paragraph is optically sized. This is the default across browsers.
</p>

<p class="no-optical-sizing">
  This paragraph is not optically sized. You should see a difference in
  supporting browsers.
</p>
```

```css
@font-face {
  src: url("AmstelvarAlpha-VF.ttf");
  font-family: "Amstelvar";
  font-style: normal;
}

p {
  font-size: 36px;
  font-family: Amstelvar;
}

.no-optical-sizing {
  font-optical-sizing: none;
}
```

**メモ:** 上記で参照されているフォント — 光学的サイズを含みライセンスフリーであるもの — がテストに適しています。 GitHub からダウンロードできます。

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-optical-sizing-def |

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

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

関連情報
----

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


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

子孫結合子
=====

**子孫結合子** (descendant combinator) — 通常は単一の空白文字 (" ") で表される — は 2 つの CSS セレクターを結合し、 1 つ目のセレクターに一致する要素が祖先 (親、親の親、親の親の親、など) となっている 2 つ目のセレクターに一致します。子孫結合子を利用したセレクターは *子孫セレクター* と呼ばれます。

```css
/\* "my-things" リストの子孫のリスト項目 \*/
ul.my-things li {
  margin: 2em;
}
```

子孫結合子は、技術的には他の結合子がない 2 つのセレクターの間にある 1 つ以上の CSS のホワイトスペース文字 ― 空白文字や 4 種類の制御文字 (復帰、ページ送り、改行、タブ文字) のうちの 1 つ ― です。さらに、結合子としてのホワイトスペース文字には任意の数の CSS コメントを含めることができます。

構文
--

```css
セレクター1 セレクター2 {
  /\* プロパティ宣言 \*/
}
```

例
-

### CSS

```css
li {
  list-style-type: disc;
}

li li {
  list-style-type: circle;
}
```

### HTML

```html
<ul>
  <li>
    <div>Item 1</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
  <li>
    <div>Item 2</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
</ul>
```

### 結果

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # descendant-combinators |

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

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

関連情報
----

* 子結合子


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

scroll-padding
==============

**`scroll-padding`** は一括指定プロパティで、要素のすべての辺に一度にスクロールパディングを設定します。 `padding` プロパティで要素のパディングを設定するのとよく似ています。

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

`scroll-padding-*` プロパティは、スクロールポートの*最適な表示領域*のオフセットを定義します。これにより、スクロールポートの中で他のコンテンツ (固定配置されたツールバーやサイドバーなど) に隠れてしまう領域を除外したり、ターゲット要素とスクロールポートの縁の間に余裕を持たせたりすることができます。

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

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

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

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

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

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

### 値

`<length-percentage>`

スクロールポートの対応する縁からの内側へのオフセットを、有効な `<length>` または `<percentage>` として指定します。

`auto`

オフセットがユーザーエージェントによって決定されます。これは一般的には `0px` になりますが、ゼロ以外の値がより適切であれば、ユーザエージェントは自由に検出して他の値を取ることができます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `scroll-padding-bottom`: `auto`
* `scroll-padding-left`: `auto`
* `scroll-padding-right`: `auto`
* `scroll-padding-top`: `auto`
 |
| 適用対象 | スクロールコンテナー |
| 継承 | なし |
| パーセント値 | スクロールコンテナーのスクロールポートに対する相対値 |
| 計算値 | 一括指定の次の各プロパティとして* `scroll-padding-bottom`: 指定通り
* `scroll-padding-left`: 指定通り
* `scroll-padding-right`: 指定通り
* `scroll-padding-top`: 指定通り
 |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

scroll-padding =
  [ auto | <length-percentage [0,∞]> ]{1,4}

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

```

仕様書
---

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # scroll-padding |

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

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

関連情報
----

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


CSS 書字方向 - CSS: カスケーディングスタイルシート

CSS 書字方向
========

**CSS 書字方向** (CSS Writing Modes) は CSS モジュールの一つで、様々な国の書字方向、例えば左書き (ラテン系やインド語系の文章)、右書き (ヘブライ語やアラビア語の文章)、双方向 (左書きと右書きが混在する場合)、縦書き (一部のアジアの言語で使用) などを定義します。

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

### プロパティ

* `direction`
* `glyph-orientation-horizontal`
* `text-combine-upright`
* `text-orientation`
* `unicode-bidi`
* `writing-mode`
仕様書
---

| Specification |
| --- |
| CSS Writing Modes Level 4  |


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

@document
=========

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

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

**`@document`** は CSS のアットルールで、文書の URL に基づいて、その中に含まれるスタイルルールを制約します。これは主にユーザー定義スタイルシート用に設計されていますが、独自定義のスタイルシートにも使うことができます。

```css
@document url("https://www.example.com/")
{
  h1 {
    color: green;
  }
}
```

構文
--

`@document` ルールには 1 つ以上の照合関数を指定します。関数が URL に適用されると、ルールがその URL に効果を及ぼします。利用可能な関数は次の通りです。

`url()`

正確な URL に一致します。

`url-prefix()`

文書の URL が指定された値で始まる場合に一致します。

`domain()`

文書の URL が指定されたドメイン（またはそのサブドメイン）にある場合に一致します。

`media-document()`

動画、画像、プラグイン、またはそのすべての引数

`regexp()`

文書の URL が、指定された正規表現に一致する場合に一致します。正規表現は URL 全体に一致する必要があります。

`url()`, `url-prefix()`, `domain()`, `media-document()` 関数に与える値は、単一引用符または二重引用符で囲ムこともできます。 `regexp()` 関数に与える値は、引用符で囲む*必要があります*。

エスケープされた値を `regexp()` 関数に与える場合は、 CSS でさらにエスケープする必要があります。例えば、一つの `.` (ピリオド) は正規表現ではどんな文字にも一致します。リテラルのピリオドに一致させるには、まず正規表現のルールを使ってエスケープし (`\.` にします)、次に CSS のルールを使ってエスケープしなければなりません (`\\.` にします)。

`@document` は現在のところ Firefox のみが対応しています。 Firefox 以外のブラウザーでこの機能を再現したい場合は、このポリフィル (@An-Error94 氏作) を使ってみてください。これは、ユーザースクリプトと data-\* 属性と属性セレクターを組み合わせて使用するものです。

**メモ:** このプロパティの -moz 接頭辞がついたバージョン `@-moz-document` があります。これは Firefox 59 の Nightly および Beta で、潜在的な CSS インジェクション攻撃を緩和するための実験として、ユーザー定義スタイルシートとユーザーエージェントスタイルシートでしか使用できないように制限されました (Firefox バグ 1035091 を参照)。

形式文法
----
```

@document [ <url>                    |
            url-prefix(<string>)     |
            domain(<string>)         |
            media-document(<string>) |
            regexp(<string>)
          ]# {
  <group-rule-body>
}
```

例
-

### CSS ルールで文書を特定

```css
@document url("http://www.w3.org/"),
 url-prefix("http://www.w3.org/Style/"),
 domain("mozilla.org"),
 media-document("video"),
 regexp("https:.\*") {
  /\* ここの CSS ルールは次の場所に適用されます。
 - "http://www.w3.org/" のページ
 - URL が "http://www.w3.org/Style/" で始まるすべてのページ
 - URL のホストが "mozilla.org" である、
 または ".mozilla.org" で終わるすべてのページ
 - スタンドアロンビデオ
 - URL が "https:" で始まるページ \*/

  /\* 上で挙げたページを見辛くする \*/
  body {
    color: purple;
    background: yellow;
  }
}
```

仕様書
---

当初、レベル 3 では `@document` はレベル 4 に延期されましたが、その後で削除されました。

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

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

関連情報
----

* www-style メーリングリストの Per-site user style sheet rules


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

font-variant-caps
=================

**`font-variant-caps`** は CSS のプロパティで、大文字の代替字形の使用を制御します。

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

指定されたフォントに複数の異なる大きさで大文字の字形が含まれている場合、このプロパティは最適なものを選択します。 petite capital (小さなの大文字) の字形が利用できない場合は、スモールキャピタル (小ぶりの大文字) の字形を使用して表示します。これらが存在しない場合、ブラウザーは大文字の字形から合成します。

フォントには、様々な大文字小文字の区別がない文字の特殊な字形が含まれていることがあり (発音記号など)、これらが大文字の文字により一致することがあります。しかし、小さな大文字の字形は大文字小文字の区別がない文字のために合成されることはありません。

### 言語特有の規則

このプロパティは言語特有の一致規則を考慮します。例えば以下のようなものです。

* チュルク語族 (トルコ語 (tr), アゼルバイジャン語 (az), クリミア・タタール語 (crh), ヴォルガ・タタール語 (tt), バシキール語 (ba) など) では、二種類の `i` (点ありと点なし) があり、二種類の大文字小文字の組み合わせ `i`/`İ` と `ı`/`I` があります。
* ドイツ語 (de) では、 `ß` は大文字で `ẞ` (U+1E9E) になることがあります。
* ギリシャ語 (el) では、語全体が大文字の時にアクセント記号がなくなりますが (`ά`/`Α`)、分離型のエタは例外です (`ή`/`Ή`)。また、また、最初の母音にアクセントを付けた二重母音はアクセント記号を失い、二番目の母音に発音区別符号を付けます (`άι`/`ΑΪ`)。
構文
--

```css
/\* キーワード値 \*/
font-variant-caps: normal;
font-variant-caps: small-caps;
font-variant-caps: all-small-caps;
font-variant-caps: petite-caps;
font-variant-caps: all-petite-caps;
font-variant-caps: unicase;
font-variant-caps: titling-caps;

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

`font-variant-caps` プロパティは、以下のリスト内にある単一のキーワード値を使用して指定します。どの場合も、フォントが OpenType 値に対応していなければ、字形は合成によって生成されます。

### 値

`normal`

代替字形の使用を無効にします。

`small-caps`

小さな大文字の表示を有効にします (OpenType 特性: `smcp`)。スモールキャピタルの字形はふつう、大文字の形をしていますが、小文字の大きさに縮小されています。

`all-small-caps`

大文字と小文字の両方でスモールキャピタルの表示を有効にします (OpenType 機能: `c2sc`, `smcp`)。

`petite-caps`

petite capital の表示を有効にします (OpenType 特性: `pcap`)。

`all-petite-caps`

大文字と小文字の両方で petite capital の表示を有効にします (OpenType 特性: `c2pc`, `pcap`)。

`unicase`

大文字のスモールキャピタルと通常の小文字の混合表示を有効にします (OpenType 特性: `unic`).

`titling-caps`

タイトルキャピタルの表示を有効化します (OpenType 特性: `titl`)。大文字の字形は、ふつう小文字と一緒に使用するためにデザインされています。すべて大文字のタイトル文字列で使用された場合、太くなりすぎることがあります。タイトルキャピタルはこの場合に専用のデザインが行われたものです。

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

長い区間のテキストに対して `font-variant` の値を `all-small-caps` や `all-petite-caps` を設定すると、失読症のような認知障害を抱えた人にとって読むのが難しくなることがあります。

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

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

形式定義
----
```

font-variant-caps =
  normal           |
  small-caps       |
  all-small-caps   |
  petite-caps      |
  all-petite-caps  |
  unicase          |
  titling-caps

```

例
-

### スモールキャップのフォント変化形の設定

#### HTML

```html
<p class="small-caps">Firefox rocks, small caps!</p>
<p class="normal">Firefox rocks, normal caps!</p>
```

#### CSS

```css
.small-caps {
  font-variant-caps: small-caps;
  font-style: italic;
}
.normal {
  font-variant-caps: normal;
  font-style: italic;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* `font-variant-alternates`
* `font-variant`
* `font-variant-east-asian`
* `font-variant-ligatures`
* `font-variant-numeric`


CSS オーバーフロー - CSS: カスケーディングスタイルシート

CSS オーバーフロー
===========

**CSS オーバーフロー**モジュールは、視覚メディアにおけるスクロール可能なオーバーフローの処理に関連した CSS の機能を含んでいます。 CSS では、ボックスの内容がボックスの辺の 1 つ以上を越えてはみ出した場合にオーバーフローが発生します。

インクオーバーフローとスクロール可能なオーバーフロー
--------------------------

CSS で遭遇する可能性のあるオーバーフローには、2 つの種類があります。 1 つ目は**インクオーバーフロー**と呼んでいます。これは、ボックスシャドウ、境界画像、テキスト装飾、張り出した文字、アウトラインなど、レイアウトに影響を与えない、あるいはスクロール可能なオーバーフロー領域を拡張しない描画効果のオーバーフローです。

CSS で時に管理しなければならないオーバーフローを**スクロール可能なオーバーフロー**と呼んでいます。これは、ボックスの外に現れるコンテンツで、スクロール機構を提供する必要があります。オーバーフローのプロパティは、コンテンツがボックスからオーバーフローしたときに何が起こるかを制御する方法です。

基本的な例
-----

次のインタラクティブなデモでは、 `overflow` プロパティの値を変更すると、高さが固定されているボックスのオーバーフローの処理方法がどのように変わるかを示しています。

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

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

### CSS プロパティ

* `overflow`
* `overflow-block`
* `overflow-inline`
* `overflow-x`
* `overflow-y`
* `text-overflow`
* `block-overflow`
Experimental
* `line-clamp`
Experimental
* `max-lines`
Experimental
* `continue`
Experimental
### 標準外のプロパティ

* `-webkit-line-clamp`
Non-standard
仕様書
---

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

関連情報
----

* スクロールバーの外見を制御する `scrollbar-width` および `scrollbar-color` プロパティ
* スクロール可能なオーバーフローのデバッグ (en-US)の方法


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

place-content
=============

**`place-content`** は CSS の一括指定プロパティで、ブロック方向とインライン方向の内容物の配置 (すなわち `align-content` および `justify-content`) を、グリッドやフレックスボックスなどのレイアウトシステムにおいて、一度に指定することができます。

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

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

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

* `align-content`
* `justify-content`
構文
--

```css
/\* 位置による配置 \*/
/\* align-content は left および right の値を取りません \*/
place-content: center start;
place-content: start center;
place-content: end left;
place-content: flex-start center;
place-content: flex-end center;

/\* ベースラインによる配置 \*/
/\* justify-content は baseline の値を取りません \*/
place-content: baseline center;
place-content: first baseline space-evenly;
place-content: last baseline right;

/\* 均等配置 \*/
place-content: space-between space-evenly;
place-content: space-around space-evenly;
place-content: space-evenly stretch;
place-content: stretch space-evenly;

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

最初の値は `align-content` プロパティの値で、2 番目の値は `justify-content` の値です。

**メモ:** 2 番目の値がない場合、最初の値に両方に有効な値が設定されていれば、両方に使用されます。どちらかに無効な値であれば、値自体が無効になります。

### 値

`start`

各アイテムは、適切な軸方向で配置コンテナーの先頭側の端に向けて互いに寄せて配置されます。

`end`

各アイテムは、適切な軸方向で配置コンテナーの末尾側の端に向けて互いに寄せて配置されます。

`flex-start`

 各アイテムは、フレックスコンテナーに依存して、主軸または交差軸の先頭側である配置コンテナーの端に向けて互いに寄せて配置されます。
 これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は `start` のように扱われます。

`flex-end`

 各アイテムは、フレックスコンテナーに依存して、主軸または交差軸の末尾側である配置コンテナーの端に向けて互いに寄せて配置されます。
 これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は `end` のように扱われます。

`center`

各アイテムは、配置コンテナーの中央に向けて互いに寄せて配置されます。

`left`

各アイテムは、適切な軸方向で配置コンテナーの左側の端に向けて互いに寄せて配置されます。プロパティの軸がインライン軸と平行でない場合は、この値は `start` のように動作します。

`right`

各アイテムは、適切な軸方向で配置コンテナーの右側の端に向けて互いに寄せて配置されます。プロパティの軸がインライン軸と平行でない場合は、この値は `start` のように動作します。

`space-between`

各アイテムは、配置コンテナーの中で均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムは主軸の先頭側に寄せられ、最後のアイテムは主軸の末尾側に寄せられます。

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

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

`space-around`

各アイテムは、配置コンテナーの中で均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムの前と最後のアイテムの後の余白は、隣接するアイテム同士の間隔の半分の幅になります。

`space-evenly`

各アイテムは、配置コンテナーの中で均等に配置されます。隣接するアイテム同士の間隔、最初のアイテムの前の余白、最後のアイテムの後の余白は、まったく同じ幅になります。

`stretch`

各アイテムの寸法の合計が配置コンテナーの寸法よりも小さい場合、寸法が `auto` のアイテムは、 `max-height`/`max-width` (または同等の機能) での制約を尊重しつつ、 (比例的にではなく) 均等に引き伸ばされ、寸法の合計が配置コンテナーを満たすようになります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `align-content`: `normal`
* `justify-content`: `normal`
 |
| 適用対象 | 複数行のフレックスコンテナー |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `align-content`: 指定通り
* `justify-content`: 指定通り
 |
| アニメーションの種類 | 離散値 |

形式文法
----
```

place-content =
  <'align-content'> <'justify-content'>?

```

例
-

### フレックスコンテナー内の内容物の配置

#### HTML

```html
<div id="container">
  <div class="small">Lorem</div>
  <div class="small">Lorem<br />ipsum</div>
  <div class="large">Lorem</div>
  <div class="large">Lorem<br />ipsum</div>
  <div class="large"></div>
  <div class="large"></div>
</div>
```

```
<code>writing-mode:</code
><select id="writingMode">
  <option value="horizontal-tb" selected>horizontal-tb</option>
  <option value="vertical-rl">vertical-rl</option>
  <option value="vertical-lr">vertical-lr</option>
  <option value="sideways-rl">sideways-rl</option>
  <option value="sideways-lr">sideways-lr</option></select
><code>;</code><br />
<code>direction:</code
><select id="direction">
  <option value="ltr" selected>ltr</option>
  <option value="rtl">rtl</option></select
><code>;</code><br />
<code>place-content:</code
><select id="alignContentAlignment">
  <option value="normal">normal</option>
  <option value="first baseline">first baseline</option>
  <option value="last baseline">last baseline</option>
  <option value="baseline">baseline</option>
  <option value="space-between">space-between</option>
  <option value="space-around">space-around</option>
  <option value="space-evenly" selected>space-evenly</option>
  <option value="stretch">stretch</option>
  <option value="center">center</option>
  <option value="start">start</option>
  <option value="end">end</option>
  <option value="flex-start">flex-start</option>
  <option value="flex-end">flex-end</option>
  <option value="safe">safe</option>
  <option value="unsafe">unsafe</option>
</select>
<select id="justifyContentAlignment">
  <option value="normal">normal</option>
  <option value="space-between">space-between</option>
  <option value="space-around">space-around</option>
  <option value="space-evenly">space-evenly</option>
  <option value="stretch">stretch</option>
  <option value="center" selected>center</option>
  <option value="start">start</option>
  <option value="end">end</option>
  <option value="flex-start">flex-start</option>
  <option value="flex-end">flex-end</option>
  <option value="left">left</option>
  <option value="right">right</option>
  <option value="safe">safe</option>
  <option value="unsafe">unsafe</option></select
><code>;</code>
```

```
var update = function () {
  document.getElementById("container").style.placeContent =
    document.getElementById("alignContentAlignment").value +
    " " +
    document.getElementById("justifyContentAlignment").value;
};

var alignContentAlignment = document.getElementById("alignContentAlignment");
alignContentAlignment.addEventListener("change", update);

var justifyContentAlignment = document.getElementById(
  "justifyContentAlignment",
);
justifyContentAlignment.addEventListener("change", update);

var writingM = document.getElementById("writingMode");
writingM.addEventListener("change", function (evt) {
  document.getElementById("container").style.writingMode = evt.target.value;
});
var direction = document.getElementById("direction");
direction.addEventListener("change", function (evt) {
  document.getElementById("container").style.direction = evt.target.value;
});
```

#### CSS

```css
#container {
  display: flex;
  height: 240px;
  width: 240px;
  flex-wrap: wrap;
  background-color: #8c8c8c;
  writing-mode: horizontal-tb; /\* Can be changed in the live sample \*/
  direction: ltr; /\* Can be changed in the live sample \*/
  place-content: flex-end center; /\* Can be changed in the live sample \*/
}

div > div {
  border: 2px solid #8c8c8c;
  width: 50px;
  background-color: #a0c8ff;
}

.small {
  font-size: 12px;
  height: 40px;
}

.large {
  font-size: 14px;
  height: 50px;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # place-content |

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

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

関連情報
----

* CSS フレックスボックスガイド: *フレックスボックスの基本概念*
* CSS フレックスボックスガイド: *フレックスコンテナー内のアイテムの配置*
* CSS グリッドガイド: *グリッドレイアウトのボックス配置*
* CSS ボックス配置
* `align-content` プロパティ
* `justify-content` プロパティ


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

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

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

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

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

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

構文
--

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

例
-

この例は、 Firefox を使用していない場合は動作しません。また、 Firefox でも HTML でこのセレクターを使用する際には問題があるため、正しく動作しない場合があります。

### HTML

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

### CSS

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

### 結果

仕様書
---

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

関連情報
----

* `:dir(…)`
* `:-moz-locale-dir(ltr)`
* テーマが RTL のロケールで動作するようことを確認する


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

-webkit-touch-callout
=====================

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

`-webkit-touch-callout` は CSS のプロパティで、対象を長押しすることで現れるコールアウト表示を制御します。

iOS 上で対象が長押しされたとき、 Safari はそのリンクに関する情報をコールアウトで表示します。このプロパティではそういった挙動を無効にすることができます。

```css
/\* キーワード値 \*/
-webkit-touch-callout: default;
-webkit-touch-callout: none;

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

構文
--

### 値

`default`

既定のコールアウトが表示されます。

`none`

コールアウト表示が無効になります。

公式定義
----

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

形式文法
----

Error: could not find syntax for this item例
-

### タッチ時のコールアウトをオフにする

```css
.example {
  -webkit-touch-callout: none;
}
```

仕様書
---

どの仕様書でも定義されていません。 Apple は Safari CSS リファレンス に説明を載せています。

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

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

関連情報
----

* WebKit CSS 拡張
* Apple の開発者ドキュメントにおける -webkit-touch-callout


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

<shape>
=======

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**`<shape>`** は CSS のデータ型で、ある領域の具体的な形状を表します。この領域は、`clip` プロパティが適用される要素の一部を表します。

**メモ:** `<shape>` と `rect()` は `clip` と連携して動作しますが、これは `clip-path` に置き換えらえて非推奨となりました。可能であれば、代わりに `clip-path` と `<basic-shape>` データ型を使用してください。

構文
--

`<shape>` データ型は `rect()` 関数を使って指定し、長方形の形で領域を生成します。

`rect()`

```css
rect(top, right, bottom, left)
```

### 値

![](/ja/docs/Web/CSS/shape/rect.png)

*top*

`<length>` で、この要素のボックスの上の境界から、矩形の上端までのオフセットを表します。

*right*

`<length>` で、この要素のボックスの左の境界から、矩形の右端までのオフセットを表します。

*bottom*

`<length>` で、この要素のボックスの上の境界から、矩形の下端までのオフセットを表します。

*left*

`<length>` で、この要素のボックスの左の境界から、矩形の左端までのオフセットを表します。

補間
--

アニメーションの際には、`<shape>` データ型の値は、`top`、`right`、`bottom`、`left` の各要素に補間され、それぞれが実数の浮動小数点数として扱われます。補間の速度は、アニメーションに関連するタイミング関数によって決定されます。

例
-

### 正しい rect() 関数の使い方の例

```css
img.clip04 {
  clip: rect(10px, 20px, 20px, 10px);
}
```

仕様書
---

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

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

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

関連情報
----

* 関連する CSS プロパティ: `clip`
* `-moz-image-rect()` 関数は `rect()` と同様の座標を使います


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

writing-mode
============

**`writing-mode`** は CSS のプロパティで、テキストの行のレイアウトを横書きにするか縦書きにするか、ブロックのフロー方向を左向きにするか右向きにするかを設定します。文書全体に設定する場合は、ルート要素 (HTML 文書の場合は `html` 要素) に設定してください。

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

このプロパティは、*ブロックのフロー方向*を指定します。これは、ブロックレベルコンテナーが積まれる方向と、インラインレベルの内容物がブロックコンテナー内でフローする方向です。このように、 `writing-mode` プロパティはブロックレベルの内容物の順序も決定します。

構文
--

```css
/\* キーワードの値 \*/
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;

/\* グローバルの値 \*/
writing-mode: inherit;
writing-mode: initial;
writing-mode: revert;
writing-mode: unset;
```

`writing-mode` プロパティは、以下のいずれかの値として指定されます。横書きの場合はその言葉の書字方向も影響し、左書き (`ltr`、英語やその他の多くの言葉) や右書き (`rtl`、ヘブライ語やアラビア語) のどちらかになります。

### 値

`horizontal-tb`

`ltr` の言語では、内容物は左から右へ水平に流れます。 `rtl` の言語では、内容物は右から左へ水平に流れます。次の水平の行は、前の行の下に配置されます。

`vertical-rl`

`ltr` の言語では、内容物は上から下へ垂直に流れ、次の垂直の行は、前の行の左に配置されます。 `rtl` の言語では、内容物は下から上へ垂直に流れ、次の垂直の行は、前の行の右に配置されます。

`vertical-lr`

`ltr` の言語では、内容物は上から下へ垂直に流れ、次の垂直の行は、前の行の右に配置されます。 `rtl` の言語では、内容物は下から上へ垂直に流れ、次の垂直の行は、前の行の左に配置されます。

`sideways-rl`
Experimental

`ltr` の言語では、内容物は下から上へ垂直に流れます。 `rtl` の言語では、内容物は上から下へ垂直に流れます。垂直方向に並べられる書体を含むすべての文字を右へ横倒しにします。

`sideways-lr`
Experimental

`ltr` の言語では、内容物は上から下へ垂直に流れます。 `rtl` の言語では、内容物は下から上へ垂直に流れます。垂直方向に並べられる書体を含むすべての文字を左へ横倒しにします。

`lr`
非推奨

SVG1 文書を除き、非推奨です。CSS では、`horizontal-tb` を代わりに使用してください。

`lr-tb`
非推奨

SVG1 文書を除き、非推奨です。CSS では、`horizontal-tb` を代わりに使用してください。

`rl`
非推奨

SVG1 文書を除き、非推奨です。CSS では、`horizontal-tb` を代わりに使用してください。

`tb`
非推奨

SVG1 文書を除き、非推奨です。CSS では、`vertical-rl` を代わりに使用してください。

`tb-lr`
非推奨

SVG1 文書を除き、非推奨です。CSS では、`vertical-lr` を代わりに使用してください。

`tb-rl`
非推奨

SVG1 文書を除き、非推奨です。CSS では、`vertical-rl` を代わりに使用してください。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `horizontal-tb` |
| 適用対象 | 表の行グループ、表の列グループ、表の行、表の列を除くすべての要素 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | アニメーション不可 |

形式文法
----
```

writing-mode =
  horizontal-tb  |
  vertical-rl    |
  vertical-lr    |
  sideways-rl    |
  sideways-lr

```

例
-

### 複数の書字方向の使用

この例では、すべての書字方向を示し、各モードでさまざまな言語のテキストを表示します。

#### HTML

HTML は単純な `<table>` であり、行方向に書字方向を、列方向にその書字方向を使用してさまざまな種類のテキストが表示される様子を表します。

```html
<table>
  <tr>
    <th>値</th>
    <th>縦書きの文字</th>
    <th>横書き (LTR) の文字</th>
    <th>横書き (RTL) の文字</th>
    <th>混在する文字</th>
  </tr>
  <tr>
    <td>horizontal-tb</td>
    <td class="example Text1"><span>我家没有电脑。</span></td>
    <td class="example Text1"><span>Example text</span></td>
    <td class="example Text1"><span>מלל ארוך לדוגמא</span></td>
    <td class="example Text1"><span>1994年に至っては</span></td>
  </tr>
  <tr>
    <td>vertical-lr</td>
    <td class="example Text2"><span>我家没有电脑。</span></td>
    <td class="example Text2"><span>Example text</span></td>
    <td class="example Text2"><span>מלל ארוך לדוגמא</span></td>
    <td class="example Text2"><span>1994年に至っては</span></td>
  </tr>
  <tr>
    <td>vertical-rl</td>
    <td class="example Text3"><span>我家没有电脑。</span></td>
    <td class="example Text3"><span>Example text</span></td>
    <td class="example Text3"><span>מלל ארוך לדוגמא</span></td>
    <td class="example Text3"><span>1994年に至っては</span></td>
  </tr>
  <tr>
    <td>sideways-lr</td>
    <td class="example Text4"><span>我家没有电脑。</span></td>
    <td class="example Text4"><span>Example text</span></td>
    <td class="example Text4"><span>מלל ארוך לדוגמא</span></td>
    <td class="example Text4"><span>1994年に至っては</span></td>
  </tr>
  <tr>
    <td>sideways-rl</td>
    <td class="example Text5"><span>我家没有电脑。</span></td>
    <td class="example Text5"><span>Example text</span></td>
    <td class="example Text5"><span>מלל ארוך לדוגמא</span></td>
    <td class="example Text5"><span>1994年に至っては</span></td>
  </tr>
</table>
```

#### CSS
```

table {
  border-collapse: collapse;
}
td,
th {
  border: 1px black solid;
  padding: 3px;
}
th {
  background-color: lightgray;
}
.example {
  height: 75px;
  width: 75px;
}
```

内容物の方向を調整する CSS は次のようになります。

```css
.example.Text1 span,
.example.Text1 {
  writing-mode: horizontal-tb;
  -webkit-writing-mode: horizontal-tb;
  -ms-writing-mode: horizontal-tb;
}

.example.Text2 span,
.example.Text2 {
  writing-mode: vertical-lr;
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: vertical-lr;
}

.example.Text3 span,
.example.Text3 {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: vertical-rl;
}

.example.Text4 span,
.example.Text4 {
  writing-mode: sideways-lr;
  -webkit-writing-mode: sideways-lr;
  -ms-writing-mode: sideways-lr;
}

.example.Text5 span,
.example.Text5 {
  writing-mode: sideways-rl;
  -webkit-writing-mode: sideways-rl;
  -ms-writing-mode: sideways-rl;
}
```

#### 結果

以下の画像は、ブラウザーの `writing-mode` の対応が不完全な場合のために、出力結果がどのように見えるかを示したものです。

![](/ja/docs/Web/CSS/writing-mode/screenshot_2020-02-05_21-04-30.png)

仕様書
---

| Specification |
| --- |
| CSS Writing Modes Level 4 # block-flow |

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

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

関連情報
----

* SVG の `writing-mode` 属性
* `direction`
* `unicode-bidi`
* `text-orientation`
* `text-combine-upright`
* CSS 論理的プロパティ
* Styling vertical text (Chinese, Japanese, Korean and Mongolian)
* 広範なブラウザーの対応試験結果: https://w3c.github.io/i18n-tests/results/writing-mode-vertical


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

word-spacing
============

**`word-spacing`** は CSS のプロパティで、タグや単語の間隔に関する挙動を指定します。

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

構文
--

```css
/\* キーワード値 \*/
word-spacing: normal;

/\* <length> 値 \*/
word-spacing: 3px;
word-spacing: 0.3em;

/\* <percentage> 値 \*/
word-spacing: 50%;
word-spacing: 200%;

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

### 値

`normal`

現在のフォントやブラウザ―で定義された普通の単語の間隔です。

`<length>`

フォントによって定義された単語の間隔に追加する間隔を定義します。

`<percentage>`

文字の advance width を基準とした追加する間隔の量をパーセント値で指定します。

例
-

### HTML

```html
<div id="mozdiv1">Here are many words...</div>
<div id="mozdiv2">...and many more!</div>
```

### CSS

```css
#mozdiv1 {
  word-spacing: 15px;
}

#mozdiv2 {
  word-spacing: 5em;
}
```

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

`word-spacing` で大きな正の値や負の値を設定すると、スタイルが適用される文が読めなくなります。テキストをとても大きな正の値でスタイル付けすると、単語間が離れすぎて文として表示されなくなります。大きな負の数でスタイル付けすると、それぞれの単語の先頭と末尾が互いに重複して、理解できなくなります。

フォントファミリーによって文字の幅が異なるため、読みやすい `word-spacing` は場面によって検討する必要があります。すべてのフォントファミリーで自動的に読みやすさを調整する単一の値はありません。

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

|  |  |
| --- | --- |
| 初期値 | `normal` |
| 適用対象 | すべての要素。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | あり |
| パーセント値 | 作用する文字の幅に対する相対値 |
| 計算値 | 絶対的な`長さ` |
| アニメーションの種類 | length |

形式文法
----
```

word-spacing =
  normal    |
  <length>

```

仕様書
---

| Specification |
| --- |
| CSS Text Module Level 3 # word-spacing-property |

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

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

関連情報
----

* `letter-spacing`


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

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

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

**`view-timeline`** は CSS の一括指定プロパティで、スクロール可能な要素（*スクローラー*）内の要素（主体要素として呼ばれる）の可視性の変化に基づいて進行する名前付きビュー進行タイムラインを定義するために使用します。 `view-timeline` は主体要素に設定します。

既定では、主体要素がスクローラーの一方の端に初めて表示されるとタイムラインは 0% になり、反対側の端に達すると 100% になります。

`view-timeline` は 2 つの構成値、名前付き進行タイムラインの名前とオプションのスクロール軸の値持つことができます。
 この名前は `animation-timeline` 宣言で参照され、タイムラインの進行に合わせてアニメーションする要素を示します。これは主体要素である場合もありますが、そうである必要はありません。主体がスクロール領域を移動する際に異なる要素をアニメーションさせることができます。

**メモ:** 要素が軸方向の寸法でそのコンテナーをはみ出さない場合、またははみ出した部分が隠されているかクリップされている場合、タイムラインは作成されません。

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

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

* `view-timeline-name`
* `view-timeline-axis`
構文
--

```css
/\* 2 つの値: view-timeline-name と view-timeline-axis がそれぞれ 1 つずつ \*/
view-timeline: --custom_name_for_timeline block;
view-timeline: --custom_name_for_timeline inline;
view-timeline: --custom_name_for_timeline y;
view-timeline: --custom_name_for_timeline x;
view-timeline: none block;
view-timeline: none inline;
view-timeline: none y;
view-timeline: none x;

/\* 1 つの値: view-timeline-name \*/
view-timeline: none;
view-timeline: --custom_name_for_timeline;
```

`view-timeline` の一括指定プロパティは `<view-timeline-name>` と `<view-timeline-axis>` の値の組み合わせとしてコンテナー要素に適用することができます。少なくともどちらか一方の値を指定しなければなりません。両方の値を指定する場合は、 `<view-timeline-name>` 値の後に `<view-timeline-axis>` 値が続く順序でなければなりません。

**メモ:** `<view-timeline-name>` は `<dashed-ident>` の値で、 `--` から始める必要があり、これによって CSS の標準キーワードとの名前の衝突を避けることができます。

### 値

`<view-timeline-name>`

`view-timeline-name` を参照してください。

`<view-timeline-axis>`

`view-timeline-axis` を参照してください。既定値は `block` です。

公式定義
----

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

形式文法
----
```

view-timeline =
  [ <'view-timeline-name'> [ <'view-timeline-axis'> || <'view-timeline-inset'> ]? ]#

```

例
-

### 名前付きビュー進行タイムラインの作成

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

#### HTML

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

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

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

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

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

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

#### CSS

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

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

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

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

h1 {
  font-size: 3rem;
}

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

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

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

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

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

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

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

#### 結果

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

仕様書
---

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

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

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

関連情報
----

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


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

outline
=======

**`outline`** は CSS の一括指定プロパティで、輪郭線 (outline) に関する大部分のプロパティを単一の宣言で設定します。

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

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

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

* `outline-color`
* `outline-style`
* `outline-width`
構文
--

```css
/\* 種類 \*/
outline: solid;

/\* 色 | 種類 \*/
outline: #f66 dashed;

/\* 種類 | 幅 \*/
outline: inset thick;

/\* 色 | 種類 | 幅 \*/
outline: green solid 3px;

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

`outline` プロパティは以下に挙げた 1 ～ 3 つの値を用いて指定することができます。値は順不同です。すべての一括指定プロパティと同様に、除外したサブ値はその初期値に設定されます。

**メモ:** 多くの要素では、スタイルが定義されていないと輪郭線は表示されません。これは style の既定値が `none` だからです。特筆すべき例外は `input` 要素で、ブラウザーが既定のスタイルを与えます。

### 値

`<'outline-color'>`

輪郭線の色を設定します。既定値は、対応しているブラウザーでは `invert` で、それ以外では `currentcolor` です。 `outline-color` を参照してください。

`<'outline-style'>`

輪郭線の種類を設定します。未指定の場合の既定値は `none` です。 `outline-style` を参照してください。

`<'outline-width'>`

輪郭線の太さを設定します。未指定の場合の既定値は `medium` です。 `outline-width` を参照してください。

解説
--

輪郭線は要素の境界線の外側の線です。輪郭線はボックスの他の領域とは異なり、空間を取らないので、文書内のレイアウトに影響を与えません。

輪郭線の外観に影響を与えるプロパティはいくつかあります。スタイル、色、幅は `outline` プロパティを使用し、境界線からの距離は `outline-offset` プロパティを使用し、角の丸みは `border-radius` プロパティを使用することで変更することが可能です。

輪郭線は長方形であるとは限りません。複数行のテキストを扱う場合、ブラウザーによっては各行ごとに輪郭線を描画するものもあれば、テキスト全体を単一の輪郭線で囲むものもあります。

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

`outline` の値を `0` または `none` にすると、ブラウザーの既定のフォーカス表示を削除します。要素が操作できるものであれば、視覚的なフォーカス表示が必要です。既定のフォーカス表示を削除するのであれば、目に見える分かりやすいフォーカスのスタイル付けを提供してください。

* How to Design Useful and Usable Focus Indicators
* WCAG 2.1: 成功基準 2.4.7 の理解: フォーカスの可視性
公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `outline-color`: `auto`
* `outline-style`: `none`
* `outline-width`: `medium`
 |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `outline-color`: キーワード `auto` の場合は、計算値も `currentcolor`。色の場合は、半透明であれば、計算値はそれに一致する `rbga()` で、不透明であれば、それに一致する `rgb()`。キーワード `transparent` は `rgba(0,0,0,0)` に対応付けられる。
* `outline-width`: 絶対的な長さ、キーワード `none` が指定されると計算値は `0` になる
* `outline-style`: 指定通り
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `outline-color`: 色
* `outline-width`: length
* `outline-style`: 計算値の型による
 |

形式文法
----
```

outline =
  <'outline-color'>  ||
  <'outline-style'>  ||
  <'outline-width'>

```

例
-

### 輪郭線を使用してフォーカスのスタイルを設定

#### HTML

```html
<a href="#">このリンクは特殊なフォーカスのスタイルです。</a>
```

#### CSS

```css
a {
  border: 1px solid;
  border-radius: 3px;
  display: inline-block;
  margin: 10px;
  padding: 5px;
}

a:focus {
  outline: 4px dotted #e73;
  outline-offset: 4px;
  background: #ffa;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

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


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

column-count
============

**`column-count`** は CSS のプロパティで、指定された段数で要素の内容物を分割します。

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

構文
--

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

/\* <integer> 値 \*/
column-count: 3;

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

### 値

`auto`

段数は `column-width` など、他の CSS プロパティによって決定されます。

`<integer>`

正の`整数`のみで、要素の中で流れる理想的な列の数を記述します。 `column-width` が `auto` 以外の値で一緒に設定された場合は、最大の列数を示します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | 表ラッパーボックスを除くブロックコンテナー |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | integer |

形式文法
----
```

column-count =
  auto             |
  <integer [1,∞]>

```

例
-

### 段落を 3 つの段に分割

#### HTML

```html
<p class="content-box">
  これは、 3 つの段に分割されたテキストの束です。 CSS の `column-count`
  プロパティを使用しています。 テキストはそれぞれの段に均等に配置されています。
</p>
```

#### CSS

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

#### 結果

仕様書
---

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

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

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

関連情報
----

* 段組みレイアウト (レイアウトの学習)
* 段組みの基本概念


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

inset-inline
============

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

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

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

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

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

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

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

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

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

### 値

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

公式定義
----

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

形式文法
----
```

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

```

例
-

### インライン方向の先頭と末尾のオフセットの設定

#### HTML

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

#### CSS

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

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

#### 結果

仕様書
---

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

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

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

関連情報
----

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


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

background-blend-mode
=====================

**`background-blend-mode`** は CSS のプロパティで、要素の背景画像が相互にどのように混合されるか、また要素の背景色とどのように混合されるかを設定します。

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

混合モードは `background-image` プロパティと同じ順番で定義してください。混合モードのリストと背景画像のリストの長さが異なる場合は、長さが合うまで繰り返しや切り落としが行われます。

構文
--
```

/* 1 値 */
background-blend-mode: normal;

/* 2 値、背景ごとにひとつずつ */
background-blend-mode: darken, luminosity;

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

### 値

`<blend-mode>`

適用する混合モードです。複数の値をカンマ区切りで置くことができます。

Formal definition
-----------------

|  |  |
| --- | --- |
| 初期値 | `normal` |
| 適用対象 | すべての要素。 SVG では、コンテナー要素、グラフィック要素、グラフィック参照要素に適用されます。。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | アニメーション不可 |

Formal syntax
-------------
```

background-blend-mode =
  <mix-blend-mode>#

```

例
-

### 基本的な例

```css
.item {
  width: 300px;
  height: 300px;
  background: url("image1.png"), url("image2.png");
  background-blend-mode: screen;
}
```

### 様々な混合モードを試してみる
```

<div id="div"></div>
<select id="select">
  <option>normal</option>
  <option>multiply</option>
  <option selected>screen</option>
  <option>overlay</option>
  <option>darken</option>
  <option>lighten</option>
  <option>color-dodge</option>
  <option>color-burn</option>
  <option>hard-light</option>
  <option>soft-light</option>
  <option>difference</option>
  <option>exclusion</option>
  <option>hue</option>
  <option>saturation</option>
  <option>color</option>
  <option>luminosity</option>
</select>
```

```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: screen;
}
```

```
document.getElementById("select").onchange = function (event) {
  document.getElementById("div").style.backgroundBlendMode =
    document.getElementById("select").selectedOptions[0].innerHTML;
};
console.log(document.getElementById("div"));
```

仕様書
---

| Specification |
| --- |
| Compositing and Blending Level 2 # background-blend-mode |

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

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

関連情報
----

* `<blend-mode>`
* `mix-blend-mode`