recursal/MDN huggingface dataset:
color-scheme
============

**`color-scheme`** は CSS のプロパティで、要素がどのような配色で快適に表示されるかを示すことができます。

オペレーティングシステムの配色の一般的な選択肢は、「ライト」と「ダーク」、または「昼モード」と「夜モード」です。ユーザーがこれらの配色のいずれかを選択すると、 OS はユーザーインターフェースを調整します。これには、フォームコントロール、スクロールバー、および CSS システムカラーの使用値が含まれます。

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

構文
--


```css
color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;
color-scheme: only light;

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


`color-scheme` プロパティの値は以下のキーワードのうちの一つである必要があります。

### 値

`normal`

この要素がどの配色も認識しないため、ブラウザーの既定の配色でレンダリングするべきであることを示します。

`light`

オペレーティングシステムのライト配色を使用して要素をレンダリングできることを示します。

`dark`

オペレーティングシステムのダーク配色を使用して要素をレンダリングできることを示します。

`only`

ユーザーエージェントが要素の配色を上書きすることを禁じます。

特定の要素または `:root` に `color-scheme: only light;` を適用することで、 Chrome の自動ダークテーマによる色上書きを無効にするために使用することができます。

公式定義
----

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

形式文法
----
```

color-scheme =   
  normal                                       |  
  [ light | dark | <custom-ident> ]+ && only?    
  
```

例
-

### 配色設定の宣言

ページ全体をユーザーの配色設定に合わせるには、 `color-scheme` を `:root` 要素で設定してください。


```css
:root {
  color-scheme: light dark;
}
```


ユーザーの配色環境設定に固有の要素を組み込むには、それらの要素で `color-scheme` を宣言します。


```css
header {
  color-scheme: only light;
}
main {
  color-scheme: light dark;
}
footer {
  color-scheme: only dark;
}
```

### 配色設定に基づいたスタイル設定

配色の好みに基づいて要素をスタイル設定するには、 `prefers-color-scheme` メディアクエリーを用います。下記の例では、`color-scheme` プロパティによってページ全体でオペレーティングシステムの明るい配色と暗い配色の両方を使用することを選択し、 `prefers-color-scheme` を使用して個々の要素にそれらの配色で望ましい前景色と背景色を指定しています。


```css
:root {
  color-scheme: light dark;
}

@media (prefers-color-scheme: light) {
  .element {
    color: black;
    background-color: white;
  }
}

@media (prefers-color-scheme: dark) {
  .element {
    color: white;
    background-color: black;
  }
}
```


また、実験的な `light-dark()` `<color>` 関数 を使用して、よりコンパクトなコード構造で異なる配色の前景色と背景色を設定することもできます。


```css
:root {
  color-scheme: light dark;
}

.element {
  color: light-dark(black, white);
  background-color: light-dark(white, black);
}
```

仕様書
---

| Specification |
| --- |
| CSS Color Adjustment Module Level 1 # color-scheme-prop |

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

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

関連情報
----

* `prefers-color-scheme` メディアクエリーで、配色設定のユーザー設定を検出することができます。
* `light-dark()` カラー関数で、ライトとダークの配色設定の両方に色を設定することができます。
* CSS を使った HTML の要素への色の適用
* その他の色に関するプロパティ: `color`, `accent-color`, `background-color`, `border-color`, `outline-color`, `text-decoration-color`, `text-emphasis-color`, `text-shadow`, `caret-color`, `column-rule-color`
* `background-image`
* `print-color-adjust`
CSS トランジション
===========

**CSS トランジション** (CSS Transition) は CSS のモジュールの一つで、特定の CSS プロパティの値の間でスムーズな変化を作り出す方法を定義します。タイミング関数を使って、ただ作り出すだけでなく、その進化を定義することもできます。

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

### プロパティ

* `transition`
* `transition-delay`
* `transition-duration`
* `transition-property`
* `transition-timing-function`
ガイド
---

CSS トランジションの使用

CSS を使ってスムーズな変化を作る方法についての、ステップバイステップのチュートリアルです。この記事では関連する各 CSS プロパティと、それらがどのように作用するかを解説します。

仕様書
---

| Specification |
| --- |
| CSS Transitions  |

関連情報
----

* CSS トランジションに関連して、CSS アニメーションでは、より細かいプロパティの動きの制御を提供します。
@color-profile
==============

**`@color-profile`** は CSS の`アットルール`で、色を指定するために後で使用する `color()` (en-US) 関数で使用できるカラープロファイルを定義し名前を付けます。

構文
--


```css
@color-profile --swop5c {
  src: url("https://example.org/SWOP2006\_Coated5v2.icc");
}
```

### 記述子

`src`

カラープロファイル情報を取得するための URL を指定します。

`rendering-intent`

 カラープロファイルが複数のレンダリングインテントを含む場合、このプロファイルが定義されているよりも小さな色域に色をマッピングする方法を定義するために使用するものを選択します。
 使用する場合は、以下のキーワードのうちの一つでなければなりません。


`relative-colorimetric`

メディア相対測色で、宛先メディアの色域内に入るソースカラーは、それぞれのメディアの白色点に対して変更しないことが求められます。宛先メディアの色域から外れたソースカラーは、さまざまな方法で色域境界上のカラーにマッピングされます。

`absolute-colorimetric`

ICC 絶対測色で、宛先メディアの色域内に入るソースカラーを、採用した白（完全反射板）に対して変更しないことが要求されています。宛先メディアの色域から外れたソースカラーは、さまざまな方法で色域境界上のカラーにマッピングされます。

`perceptual`

特にソースと宛先に大きな違いがある画像（反射プリントに投映されたディスプレイ画面の画像など）には、しばしば好んで使用されます。ソース画像の色を取り込み、独自の方法で出力先メディア用に外観を再最適化します。

`saturation`

このオプションは、オリジナルの相対的な彩度（クロマ）を保持し、ソリッドカラーの純度を保つために作成されました。しかし、知覚的インテントと同様に相互運用性に問題があった。


例
-

この例では、 ISO 12647-2:2004 に準拠したオフセット印刷で、グレード 5 の用紙に CGATS/SWOP TR005 2007 特性データを使用し、インク制限を 300% Total Area Coverage、グレー成分置換 (GCR) を中程度にしたものです。

`src` 記述子は、カラープロファイル情報を取得するための URL を指定します。


```css
@color-profile --swop5c {
  src: url("https://example.org/SWOP2006\_Coated5v2.icc");
}
.header {
  background-color: color(--swop5c 0% 70% 20% 0%);
}
```

形式文法
----
```

@color-profile =   
  @color-profile [ <dashed-ident> | device-cmyk ] { <declaration-list> }    
  
```

仕様書
---

| Specification |
| --- |
| CSS Color Module Level 5 # at-profile |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
forced-color-adjust
===================

**`forced-color-adjust`** は CSS のプロパティで、特定の要素を強制カラーモードから除外することができます。これにより、これらの値の制御が CSS に戻されます。

構文
--


```css
forced-color-adjust: auto;
forced-color-adjust: none;

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


`forced-color-adjust` プロパティの値は以下のキーワードのうちの一つでなければなりません。

### 値

`auto`

強制カラーモードでは、要素の色がユーザーエージェントによって調整されます。これが既定値です。

**`none`**

強制カラーモードでも、要素の色はユーザーエージェントによって調整されません。

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

このプロパティは、ユーザーの色とコントラストの要求に適応するための変更を行う場合にのみ使用してください。例えば、ユーザーエージェントによる色の最適化によって、ハイコントラストやダークモードでの使い勝手が悪くなることを認識した場合などです。このプロパティを使用すると、そのモードでの結果を微調整して、使い勝手を高めることができます。**ユーザーの選択を尊重しないために使用すべきではありません**。

このプロパティは -ms-high-contrast-adjust プロパティを標準化したものです。この接頭辞つきのプロパティは、 Internet Explorer 10 と EdgeHTML 版の Microsoft Edge において、同様の機能を実現します。

公式定義
----

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

形式文法
----
```

forced-color-adjust =   
  auto                   |  
  none                   |  
  preserve-parent-color    
  
```

例
-

### 色の温存

下記の例では、最初のボックスはユーザーが設定した配色を使用します。例えば、 Windows の高コントラストモードの黒スキームでは、背景が黒、文字が白になります。 2 つ目のボックスは `.box` クラスに設定されたサイトの色を保持します。

`forced-colors` メディア特性を使用すると、強制カラーモードの最適化を `forced-color-adjust` プロパティと一緒に追加することができます。

#### CSS


```css
.box {
  border: 5px solid grey;
  background-color: #ccc;
  width: 300px;
  margin: 20px;
  padding: 10px;
}

@media (forced-colors: active) {
  .forced {
    forced-color-adjust: none;
  }
}
```


#### HTML


```html
<div class="box">
  <p>This is a box which should use your color preferences.</p>
</div>

<div class="box forced">
  <p>This is a box which should stay the colors set by the site.</p>
</div>
```


#### 結果

次のスクリーンショットは、 Windows の高コントラストモードで表示したイメージです。

![上の例では、高コントラストモードで、最初のボックスは黒い背景、 2 番目のボックスは CSS のグレーの背景で表示されています。](/ja/docs/Web/CSS/forced-color-adjust/windows-high-contrast.jpg)

仕様書
---

| Specification |
| --- |
| CSS Color Adjustment Module Level 1 # forced-color-adjust-prop |

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

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

関連情報
----

* CSS を使った HTML の要素への色の適用
* Styling for Windows high contrast with standards for forced colors.
* `color-adjust`
flex-grow
=========

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

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

* Learn more
* See full compatibility
* Report feedback
**`flex-grow`** は CSS のプロパティで、フレックスコンテナー内の残りの空間が、どれだけフレックスアイテムの主軸方向の寸法に割り当てられるべきかを指定するフレックス伸長係数を設定します。

フレックスコンテナーの主軸方向の寸法が、フレックスアイテムの主軸方向の寸法の合計よりも大きい場合、余った空間はフレックスアイテムに分配され、各アイテムが伸びる大きさは、コンテナーのすべてのアイテムのフレックス伸長係数の合計の割合で按分した値になります。

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

構文
--


```css
/\* <number> 値 \*/
flex-grow: 3;
flex-grow: 0.6;

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


`flex-grow` プロパティは単一の `<number>` として指定します。

### 値

`<number>`

`<number>` をご覧ください。負の値は無効です。既定値は 0 です。

解説
--

このプロパティは、フレックスコンテナー内の残りの空間のうち、どれだけがそのアイテムに割り当てられるか (フレックス伸長係数) を設定します。

主軸方向の寸法は、アイテムの幅または高さのどちらかで、 `flex-direction` の値に依存して決まります。

残りの空間とは、フレックスコンテナーの寸法からすべてのフレックスアイテムの寸法を引いたものです。すべての兄弟アイテムが同じフレックス伸長係数であった場合、すべてのアイテムには残りの空間が等しく割り当てられ、そうでなければ定義されたそれぞれフレックス伸長係数の比率に従って分配されます。

使用するにあたって、 `flex-grow` は他のフレックスプロパティである `flex-shrink` や `flex-basis` とともに使用され、通常はすべての値が設定されることを保証するために一括指定の `flex` を使用して定義します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | フロー内の擬似要素を含むフレックスアイテム |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 数値 |

形式文法
----
```

flex-grow =   
  <number [0,∞]>    
  
```

例
-

### フレックスアイテムの伸長係数の設定

この例では、 6 つのフレックスアイテムに合計 8 の伸長係数が配分されており、伸長係数 1 あたり余白の 12.5% になります。

#### HTML


```html
<h4>これは Flex-Grow です</h4>
<h5>A、B、C、F は flex-grow:1 です。 D と E は flex-grow:2 です。</h5>
<div id="content">
  <div class="small" style="background-color:red;">A</div>
  <div class="small" style="background-color:lightblue;">B</div>
  <div class="small" style="background-color:yellow;">C</div>
  <div class="double" style="background-color:brown;">D</div>
  <div class="double" style="background-color:lightgreen;">E</div>
  <div class="small" style="background-color:brown;">F</div>
</div>
```


#### CSS


```css
#content {
  display: flex;

  justify-content: space-around;
  flex-flow: row wrap;
  align-items: stretch;
}

.box {
  flex-grow: 1;
  border: 3px solid rgba(0, 0, 0, 0.2);
}

.box1 {
  flex-grow: 2;
  border: 3px solid rgba(0, 0, 0, 0.2);
}
```


#### 結果

6 つのフレックスアイテムがコンテナーの主軸方向に配置されている場合、それらのフレックスアイテムの内容の主要部分の合計がコンテナーの主軸のサイズよりも小さいと、余分なスペースはサイズのフレックスアイテムに分配され、A、B、C、F はそれぞれ残りの空間の 12.5%、 D と E はそれぞれ残りの空間の 25% を取得します。

仕様書
---

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-grow-property |

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

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

関連情報
----

* CSS フレックスボックスガイド: *フレックスボックスの基本概念*
* CSS フレックスボックスガイド: *主軸方向のフレックスアイテムの比率の制御*
* `flex-grow` is weird. Or is it? Manuel Matuzovic による CSS-Tricks の記事で、どのように flex-grow が動作するかを解説している
代替スタイルシート
=========

ウェブページに**代替スタイルシート**を指定すると、ユーザーのニーズや設定に応じて複数のバージョンのページを見る方法を提供します。

Firefox では、*表示* >*スタイルシート*のサブメニューを使用して、ユーザーがスタイルシートを選択することができます。 Internet Explorer でも (IE 8 から) この機能に対応しており、*表示* >*スタイル*から利用できます。 Chrome では (バージョン 48 時点で) この機能を使用するのに拡張機能が必要です。ウェブページがユーザーからスタイルの切り替えができるユーザーインターフェイスを提供することもできます。

例: 代替スタイルシートの指定
---------------

代替スタイルシートはふつう、次のように `<link>` 要素に `rel="alternate stylesheet"` およびび `title="..."` 属性を使用することで指定されます。


```html
<link href="reset.css" rel="stylesheet" type="text/css" />

<link
 href="default.css"
 rel="stylesheet"
 type="text/css"
 title="既定のスタイル" />
<link
 href="fancy.css"
 rel="alternate stylesheet"
 type="text/css"
 title="ファンシー" />
<link
 href="basic.css"
 rel="alternate stylesheet"
 type="text/css"
 title="基本" />
```


この例では、*スタイルシート*のサブメニューに「既定のスタイル」「ファンシー」「基本」という項目が追加され、「既定のスタイル」が選択されています。ユーザーがスタイルを選択すると、ページはそのスタイルシートを使って即座に再描画されます。

どのスタイルが選択されても、 reset.css の規則が常に適用されます。

### やってみましょう

ここをクリックすると、やってみることができる例を見ることができます。

詳細
--

文書内のスタイルシートはどれも、以下のカテゴリのうち一つに当てはまります。

* **常設** (`rel="alternate"` も `title=""` もないもの): 常に文書に適用されます。
* **推奨** (`rel="alternate"` がなく、 `title="..."` があるもの): 既定で適用されますが、代替スタイルシートが選択されると無効化されます。**推奨スタイルシートは一つしか存在できません**ので、異なる title 属性を持つスタイルシートを複数指定すると、いくつかが無視されます。より詳細な説明は外部スタイルシートにおける正しいタイトルの使用をご覧ください。
* **代替** (`rel="alternate stylesheet"` および `title="..."` の指定が必要): 既定では無効で、選択することができます。

<link rel="stylesheet"> 又は `<style>` 要素で、スタイルシートが `title` 属性とともに参照された場合、そのタイトルがユーザに与えられる選択肢のひとつとなります。同じタイトルでリンクされた別のスタイルシートも、同じ選択肢の一部として扱われます。 `title` 属性を付けずにリンクされたスタイルシートは常に適用されます。

標準スタイルシートへリンクするには `rel="stylesheet"` を、代替スタイルシートへリンクするには `rel="alternate stylesheet"` を使用します。これにより、どのスタイルシートのタイトルを標準で選択すべきかがブラウザーに伝わり、代替スタイルシートに対応していないブラウザーでは標準の選択肢が適用されます。

仕様書
---

| Specification |
| --- |
| HTML Standard # rel-alternate |
| HTML Standard # the-link-is-an-alternative-stylesheet |
| HTML Standard # attr-style-title |
| HTML Standard # attr-meta-http-equiv-default-style |
| CSS Object Model (CSSOM) # css-style-sheet-collections |

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

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

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

Newly availableSince August 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
**`offset`** は CSS の一括指定プロパティで、要素を定義された経路に沿って動かすのに必要なすべてのプロパティを設定します。

**メモ:** 仕様書の早期の版では、このプロパティを `motion` と呼んでいました。

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

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

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

* `offset-anchor`
* `offset-distance`
* `offset-path`
* `offset-position`
* `offset-rotate`
構文
--


```css
/\* オフセット位置 \*/
offset: auto;
offset: 10px 30px;
offset: none;

/\* オフセット経路 \*/
offset: ray(45deg closest-side);
offset: path("M 100 100 L 300 100 L 200 300 z");
offset: url(arc.svg);

/\* オフセット経路に距離と回転が加わったもの \*/
offset: url(circle.svg) 100px;
offset: url(circle.svg) 40%;
offset: url(circle.svg) 30deg;
offset: url(circle.svg) 50px 20deg;

/\* オフセットアンカーを含む \*/
offset: ray(45deg closest-side) / 40px 20px;
offset: url(arc.svg) 2cm / 0.5cm 3cm;
offset: url(arc.svg) 30deg / 50px 100px;

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

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `offset-position`: `normal`
* `offset-path`: `none`
* `offset-distance`: `0`
* `offset-anchor`: `auto`
* `offset-rotate`: `auto`
 |
| 適用対象 | 座標変換可能要素 |
| 継承 | なし |
| パーセント値 | 一括指定の次の各プロパティとして* `offset-position`: refer to the size of containing block
* `offset-distance`: パスの全長に対する相対値
* `offset-anchor`: relative to the width and the height of the element's reference box
 |
| 計算値 | 一括指定の次の各プロパティとして* `offset-position`: `length` の場合は絶対的な値、それ以外の場合はパーセント値
* `offset-path`: 指定通り
* `offset-distance`: `length` の場合は絶対的な値、それ以外の場合はパーセント値
* `offset-anchor`: `length` の場合は絶対的な値、それ以外の場合はパーセント値
* `offset-rotate`: 指定通り
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `offset-position`: position
* `offset-path`: 計算値の型による
* `offset-distance`: length または パーセント値, calc();
* `offset-anchor`: position
* `offset-rotate`: <angle>, <basic-shape>, <path()> の何れかとして
 |
| 重ね合わせコンテキストの生成 | あり |

形式文法
----
```

offset =   
  [ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> || <'offset-rotate'> ]? ]? ]! [ / <'offset-anchor'> ]?    
  
```

例
-

### 経路に沿って要素を動かす

#### HTML


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


#### CSS


```css
@keyframes move {
  from {
    offset-distance: 0%;
  }

  to {
    offset-distance: 100%;
  }
}

#offsetElement {
  width: 50px;
  height: 50px;
  background-color: blue;
  offset: path("M 100 100 L 300 100 L 200 300 z") auto;
  animation: move 3s linear infinite;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| Motion Path Module Level 1 # offset-shorthand |

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

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

関連情報
----

* `offset-anchor`
* `offset-distance`
* `offset-path`
* `offset-position`
* `offset-rotate`
CSS 断片化
=======

**CSS 断片化**は CSS のモジュールの一つで、コンテンツがページ、領域、段をまたがって分割された (断片化された) ときにどのように表示するかを定義します。

断片化が発生するのは、インラインボックスが複数の行に渡る場合です。また、ブロックが段組みレイアウトコンテナーの中で複数の段にまたがる場合や、印刷時にページにまたがる場合です。その要素の表示されるそれぞれの部分は*断片*と呼ばれます。

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

* `box-decoration-break`
* `break-after`
* `break-before`
* `break-inside`
* `orphans`
* `widows`
仕様書
---

| Specification |
| --- |
| CSS Fragmentation Module Level 3  |
view-transition-name
====================

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-name`** は CSS のプロパティで、選択された要素に識別名 (`<custom-ident>`) を与え、ルートビュートランジションとは別のビュートランジションに参加させます。 `none` の値が指定された場合はビュートランジションを行いません。

構文
--


```css
/\* <custom-ident> 値の例 \*/
view-transition-name: header;
view-transition-name: figure-caption;

/\* キーワード値 \*/
view-transition-name: none;
```

### 値

`<custom-ident>`

選択した要素を、ルートビュートランジションとは別のビュートランジションに参加させるための識別名です。識別子は一意でなければなりません。 2 つのレンダリング要素が同時に同じ `view-transition-name` を持つ場合、 `ViewTransition.ready` は拒否され、トランジションはスキップされます。

`none`

選択された要素はビュートランジションに参加しません。

公式定義
----

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

形式文法
----
```

view-transition-name =   
  none            |  
  auto            |  
  <custom-ident>    
  
```

例
-


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

仕様書
---

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

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

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
text-size-adjust
================

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

**`text-size-adjust`** は CSS のプロパティで、一部のモバイル端末で使われる、テキストの自動拡大アルゴリズムを制御します。他のブラウザーはこのプロパティを無視します。


```css
/\* キーワード値 \*/
text-size-adjust: none;
text-size-adjust: auto;

/\* <percentage> 値 \*/
text-size-adjust: 80%;

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


モバイル端末のことを考慮していないウェブページは今でも多いため、モバイル端末のブラウザーはデスクトップブラウザーとは異なる表示をすることがあります。例えば端末の画面幅ではなく、800px や 1000px などのより広い幅のビューポートでレイアウトを行います。この広いレイアウトを元の機器の大きさに対応させるため、ブラウザーはその一部を表示するか、縮小して表示することになります。

こうして小さい画面に合わせて縮小したテキストはとても小さくなるため、モバイル端末のブラウザーの多くはテキストを拡大して読みやすくします。テキストを含む要素が画面幅の全体を占めている時、レイアウトを変更することなく、読みやすい大きさまで文字サイズが拡大されます。 `text-size-adjust` プロパティを使うことで、この挙動が不要なページで無効化したり、挙動を変更したりすることができます。

構文
--

`text-size-adjust` プロパティは `none`, `auto`, `<percentage>` の何れかで指定します。

### 値

`none`

ブラウザーのテキスト自動拡大アルゴリズムを無効化します。

`auto`

ブラウザーのテキスト自動拡大アルゴリズムを有効化します。この値は CSS で設定した `none` 値を取り消すのに使います。

`<percentage>`

ブラウザーのテキスト自動拡大アルゴリズムを有効化し、パーセント値で文字サイズの倍率を指定します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 文字拡大に対応しているスマートフォンブラウザーならば `auto`、それ以外の場合は `none` (そして変更不可)。 |
| 適用対象 | すべての要素 |
| 継承 | あり |
| パーセント値 | 可、テキストのフォントの対応する寸法に対する相対値 |
| 計算値 | 指定通り |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

text-size-adjust =   
  auto                |  
  none                |  
  <percentage [0,∞]>    
  
```

例
-

### 基本的な無効化の使用方法

上記に示すとおり、適切に設計されたレスポンシブサイトでは、`text-size-adjust` の動作は必要ありませんので、開発者は none の値を指定してこれをオフにすることができます。


```css
p {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
```

仕様書
---

| Specification |
| --- |
| CSS Mobile Text Size Adjustment Module Level 1 # adjustment-control |

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

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

関連情報
----

* Apple のドキュメント
* Gecko's behavior description, by L. David Baron
* Microsoft のドキュメント
max()
=====

**`max()`** は CSS の関数で、 CSS プロパティの値としてカンマで区切られた式のリストから最大の (最も正である) 値を設定できます。 `max()` 関数は `<length>`、`<frequency>`、`<angle>`、`<time>`、`<percentage>`、`<number>`、`<integer>` が使用できるところならばどこでも使用することができます。

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

上の例では、幅が 400px 以上になりますが、ビューポートが 2000px よりも広い場合 (1vw が 20px になるため、 20vw が 400px になる場合) はより広くなります。 `max()` の値はプロパティが取りうる*最小の*値を提供するものとして考えてください。

構文
--

`max()` 関数は、引数としてカンマで区切った 1 つ以上の式を取り、もっとも大きい (最も正である) 式の値をプロパティに割り当てられた値として使用します。

式は、 (算術演算子を用いた) 数式、リテラル値、あるいは、有効な引数の型 (`<length>` など) に評価される `attr()` などの式や、ネストされた `min()` や `max()` 関数を用いることができます。

式の各値に異なる単位を使用することができます。必要に応じて、計算順序を決めるために括弧を使用することもできます。

メモ
--

* 表の列、列グループ、行、行グループ、セルの幅と高さのパーセント値を含む数式は、自動レイアウト表と固定レイアウト表のどちらでも、あたかも `auto` が指定されていたかのように扱われる*可能性があります*。
* `min()` や他の `max()` 関数を式の値として入れ子にすることが認められています。式は完全な数式なので、 `calc()` 関数自体を使わずに直接加算、減算、乗算、除算を使うことができます。
* 式は、標準的な演算子の優先順位規則を使用して、加算 ( + )、減算 ( - )、乗算 ( \* )、除算 ( / ) の各演算子を組み合わせた値にすることができます。オペランドの + と - の両側には必ず空白を入れてください。式の中のオペランドは、任意の `<length>` 構文値を使用できます。
* `min()` と `max()` の値を組み合わせたり、 `max()` を `clamp()` や `calc()` 関数の中で使用したりすることができます (そしてよく必要になります)。
### 形式文法
```

<max()> =   
  max( <calc-sum># )    
  
<calc-sum> =   
  <calc-product> [ [ '+' | '-' ] <calc-product> ]\*    
  
<calc-product> =   
  <calc-value> [ [ '*' | '/' ] <calc-value> ]\*    
  
<calc-value> =   
  <number>        |  
  <dimension>     |  
  <percentage>    |  
  <calc-keyword>  |  
  ( <calc-sum> )    
  
<calc-keyword> =   
  e          |  
  pi         |  
  infinity   |  
  -infinity  |  
  NaN          
  
```

例
-

### フォントに最小値を設定する

CSS 関数のもう一つの使用例は、少なくとも最小サイズを確保しながらフォントサイズを拡大していくことで、読みやすさを確保しながらレスポンシブなフォントサイズを可能にします。

多少の CSS を見てみましょう。


```css
h1 {
  font-size: 2rem;
}
h1.responsive {
  font-size: max(4vw, 2em, 2rem);
}
```


フォントサイズは最小で 2rem、ページの既定のフォントサイズの 2 倍になります。これは、それが読みやすく、アクセシビリティを確保することを保証します。


```html
<h1>このテキストは常に読みやすいですが、サイズは変わりません。</h1>
<h1 class="responsive">
  このテキストは、常に読みやすく、ある意味でレスポンシブです。
</h1>
```


`max()` 関数はプロパティに許される最小値を探るものと考えてください。

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

`max()` を使用してテキストのサイズを制御する場合は、テキストが常に十分に読める大きさであることを確認してください。提案としては、 `min()` 関数を `max()` の中で入れ子にして使用し、その二番目の値として常に十分な大きさの相対的な長さの単位を持つようにします。


```css
small {
  font-size: max(min(0.5vw, 0.5em), 1rem);
}
```


これにより、ページが拡大縮小されたときにテキストの大きさが拡大縮小され、最小サイズは *1rem* になります。

* MDN Understanding WCAG, Guideline 1.4 explanations
* Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
仕様書
---

| Specification |
| --- |
| CSS Values and Units Module Level 4 # calc-notation |

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

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

関連情報
----

* `calc()`
* `clamp()`
* `min()`
* CSS 値