recursal/MDN huggingface dataset:
font-variation-settings
=======================

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

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

構文
--


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

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

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

### 値

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

`normal`

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

`<string> <number>`

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

解説
--

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

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

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

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

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

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

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

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

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

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

公式定義
----

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

形式文法
----
```

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

例
-

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

### 太さ (wght)

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

### 傾き (slnt)

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

仕様書
---

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

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

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

関連情報
----

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

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

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

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

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

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

構文
--


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

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

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


`none`

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

`<integer>`

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

公式定義
----

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

形式文法
----
```

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

例
-

### 段落の切り捨て

#### HTML


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


#### CSS


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


#### 結果

仕様書
---

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

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

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

関連情報
----

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

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

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

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

構文
--


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

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


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

### 値

`normal`

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

`italic`

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

`oblique`

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

`oblique` `<angle>`

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

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

### 可変フォント

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

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

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

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

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

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

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

形式文法
----
```

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

例
-

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

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



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

.italic {
  font-style: italic;
}

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

仕様書
---

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

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

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

関連情報
----

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

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

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

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

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

### セレクター

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

CSS 入れ子の使用

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

CSS 入れ子アットルール

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

CSS 入れ子と詳細度

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

関連概念
----

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

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

関連情報
----

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

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

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

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


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


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

構文
--
```

:autofill
```

例
-

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


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

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



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

仕様書
---

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

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

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

関連情報
----

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

**`-webkit-text-fill-color`** は CSS のプロパティで、テキストの文字の塗りつぶしの色を指定します。このプロパティが設定されていない場合、 `color` プロパティの値が使用されます。


```css
/\* <color> 値 \*/
-webkit-text-fill-color: red;
-webkit-text-fill-color: #000000;
-webkit-text-fill-color: rgb(100, 200, 0);

/\* グローバル値 \*/
-webkit-text-fill-color: inherit;
-webkit-text-fill-color: initial;
-webkit-text-fill-color: unset;
```

構文
--

### 値

`<color>`

要素のテキストコンテンツの文字表面の塗りつぶし色。

公式定義
----

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

形式文法
----
```

-webkit-text-fill-color =   
  <color>    
  
```

例
-

### 塗りつぶし色の変更

#### CSS


```css
p {
  margin: 0;
  font-size: 3em;
  -webkit-text-fill-color: green;
}
```


#### HTML


```html
<p>This text is green.</p>
```


#### 結果

仕様書
---

| Specification |
| --- |
| Compatibility Standard # the-webkit-text-fill-color |

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

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

関連情報
----

* Surfin' Safari blog post announcing this feature
* CSS-Tricks article explaining this feature
* `-webkit-text-stroke-color`
* `-webkit-text-stroke-width`
* `-webkit-text-stroke`
border-block-start-style
========================

**`border-block-start-style`** は CSS のプロパティで、要素の論理的なブロックの先頭側の境界のスタイルを定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界のスタイルに対応づけられます。これは `border-top-style`, `border-right-style`, `border-bottom-style`, `border-left-style` の何れかに対応し、どれに対応するかは `writing-mode`, `direction`, `text-orientation` で定義された値によって決まります。

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

構文
--


```css
/\* <'border-style'> 値 \*/
border-block-start-style: dashed;
border-block-start-style: dotted;
border-block-start-style: groove;

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


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

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

### 値

`<'border-style'>`

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

公式定義
----

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

形式文法
----
```

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

例
-

### 縦書きテキストでの破線の境界線

#### HTML


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


#### CSS


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

.exampleText {
  writing-mode: vertical-lr;
  border: 5px solid blue;
  border-block-start-style: dashed;
}
```


#### 結果

仕様書
---

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

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

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

関連情報
----

* このプロパティは `border-top-style`, `border-right-style`, `border-bottom-style`, `border-left-style` のうちの一つに対応づけられます
* `writing-mode`, `direction`, `text-orientation`
border-block-end-style
======================

**`border-block-end-style`** は CSS のプロパティで、要素の論理的なブロックの終端側の境界のスタイルを定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界のスタイルに対応づけられます。これは `border-top-style`, `border-right-style`, `border-bottom-style`, `border-left-style` の何れかに対応し、どれに対応するかは `writing-mode`, `direction`, `text-orientation` で定義された値によって決まります。

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

構文
--


```css
/\* <'border-style'> 値 \*/
border-block-end-style: dashed;
border-block-end-style: dotted;
border-block-end-style: groove;

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


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

### 値

`<'border-style'>`

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

公式定義
----

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

形式文法
----
```

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

例
-

### 縦書きテキストの破線の境界

#### HTML


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


#### CSS


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

.exampleText {
  writing-mode: vertical-lr;
  border: 5px solid blue;
  border-block-end-style: dashed;
}
```


#### 結果

仕様書
---

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

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

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

関連情報
----

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

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

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

構文
--


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

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

### 値

`<length>`

スクロールコンテナーの右側の辺からみた外部の距離です。

公式定義
----

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

形式文法
----
```

scroll-margin-right =   
  <length>    
  
```

仕様書
---

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

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

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

関連情報
----

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

**`:hover`** は CSS の擬似クラスで、ユーザーがポインティングデバイスで要素に反応したものの、アクティブ化する必要がないものを選択します。普通はユーザーがカーソル（マウスポインター）を要素の上にかざしたときにそうなります。

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

`:hover` 擬似クラスによって定義されたスタイルは、少なくとも同等の仕様を持つリンク関連の擬似クラス (`:link`、`:visited`、`:active`) によって上書きされます。適切にリンクにスタイルを適用するには、 `:hover` の規則を `:link` と `:visited` の後、 `:active` の前に置き、 *LVHA 順*: `:link` — `:visited` — `:hover` — `:active` で定義されるようにしてください。

**メモ:** `:hover` 擬似クラスはタッチ画面で問題になります。ブラウザーによっては、 `:hover` 擬似クラスに全く一致しなかったり、要素をタッチした直後だけ一致したり、ユーザーが指を離しても一致し続け、他の要素にタッチするまで続いたりします。ウェブの開発者は、ホバー機能が制限されていたり存在しなかったりしても、コンテンツにアクセスできるように考慮してください。

構文
--


```css
:hover {
  /\* ... \*/
}
```

例
-

### 基本的な例

#### HTML


```html
<a href="#">このリンクの上を通過させてみてください。</a>
```


#### CSS


```css
a {
  background-color: powderblue;
  transition: background-color 0.5s;
}

a:hover {
  background-color: gold;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # selector-hover |
| Selectors Level 4 # the-hover-pseudo |

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

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

関連情報
----

* Chromium bug #370155: Don't make `:hover` sticky on tap on sites that set a mobile viewport
* Chromium bug #306581: Immediately show hover and active states on touch when page isn't scrollable.
<relative-size>
===============

**`<relative-size>`** は CSS のデータ型で、相対サイズのキーワードを記述します。 `<relative-size>` キーワードは、親要素の計算サイズからの相対サイズを定義します。このデータ型は `font` の一括指定と `font-size` プロパティで使用します。

構文
--
```

<relative-size> = smaller | larger
```

### 値

データ型 `<relative-size>` は下記の一覧からキーワード値を選んで定義します。

`smaller`

継承サイズより一回り小さい相対サイズ。

`bigger`

継承サイズより一回り大きい相対サイズ。

解説
--

`<relative-size>` キーワードは要素の現在のサイズからの相対サイズです。継承サイズが `<absolute-size>` キーワードを使用して定義されている場合、 `<relative-size>` 値は `<absolute-size>` 表の隣接サイズと等しくなります。それ以外の場合、相対的なサイズの増減は 120% から 150% の間になります。

例
-

### キーワード値の比較


```html
<ul>
  <li class="smaller">font-size: smaller;</li>
  <li>font-size が指定されていない</li>
  <li class="larger">font-size: larger;</li>
</ul>
```



```css
li {
  margin-bottom: 0.3em;
}
.smaller {
  font-size: smaller;
}
.larger {
  font-size: larger;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # valdef-font-size-relative-size |

関連情報
----

* CSS の `<absolute-size>` データ型
* CSS の `font` および `font-size` プロパティ
* CSS フォントモジュール
ident
=====

**`<ident>`** CSS データ型 は、 identifier として使用される任意の文字列を意味します。

構文
--

`<custom-ident>` の構文は CSS の識別子 (プロパティ名など)に似ていますが、 大文字と小文字の区別 がある点が違います。 これは次の文字から成る文字の並びです:

* アルファベット (`A` - `Z` と `a` - `z`)
* 数字 (`0` - `9`)
* ハイフン (`-`)
* アンダースコア (`_`)
* エスケープ文字 (バックスラッシュ `\` に続く)
* Unicode 文字 (バックスラッシュ `\` と、それに続く 1-6 個の 16 進数を形式をとる、Unicode コードポイント)

大文字と小文字の区別 があるため `id1`、 `Id1`、 `iD1` そして `ID1` は全て異なる識別子である点に注意してください。しかし、文字をエスケープする方法はいくつか存在するため、 `toto\?` と `toto\3F` は同じ識別子です。

例
-

### 有効な識別子
```

nono79        アルファベットと数字の組み合わせ
ground-level  アルファベットとダッシュの組み合わせ
-test         ダッシュとそれに続く英数字
--toto        identifier の様なカスタムプロパティ
_internal     アンダースコアとそれに続く英数字
\22 toto      Unicode 文字とそれに続く一連の英数字
bili\.bob     正しくエスケープされたピリオド
```

### 無効な識別子
```

34rem     数字で始まってはいけません
-12rad    ダッシュで始まって数字が続いてはいけません
bili.bob  アルファベット、 _、 - のみをエスケープする必要はありません
'bilibob'  これは `<string>` になります
"bilibob"  これは `<string>` になります
```

仕様
--

| Specification |
| --- |
| CSS Values and Units Module Level 4 # css-identifier |

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

*このデータ型は、他の CSS 構文の定義を単純化するために使用される便利な型なので実際の型ではありません。*

関連情報
----

* `<custom-ident>` – CSS 全体のキーワードを除く `<ident>` 値の制限されたサブセット、 `custom properties` 及びその他のプロパティ値。
letter-spacing
==============

**`letter-spacing`** は CSS のプロパティで、テキストの水平方向の字間のスペースに関する挙動を設定します。この値はテキストを描画する際に文字間の自然な空間に追加されます。 `letter-spacing` が正の値であった場合は、文字と文字の間が開き、 `letter-spacing` が負の値であった場合は、文字と文字が互いに近づきます。

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

構文
--


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

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

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

### 値

`normal`

現在のフォントでの通常の字間になります。 `0` の値とは異なり、この値はユーザーエージェントが文字列を両端揃えするために字間を変えることを許可します。

`<length>`

既定の字間に*加える*字間のスペースを指定します。負の値も指定可能ですが、実装に依存した制限があるかもしれません。ユーザーエージェントは文字列を両端揃えするために、字間スペースをさらに増減させることはありません。

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

正と負のどちらでも、大きすぎる値を `letter-spacing` に指定すると読みづらくなってしまいます。正の値として大きすぎる場合、文字と文字が離れすぎるせいでひとつの単語ではなくバラバラの文字に見えてしまいます。負の値として大きすぎる場合、文字と文字が重なり合うために何が書いてあるのか分からなくなってしまいます。

フォントの文字幅は種類ごとに異なるため、読みやすい letter-spacing もそれぞれ異なります。すべてのフォントで読みやすさを提供してくれる単一の設定値というものはありません。

* MDN "WCAG を理解する ― ガイドライン 1.4 の解説"
* Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0
国際化の考慮
------

書き言葉の中には、字間のスペースを適用してはいけないものがあります。例えば、アラビア文字を使用する言語では、次の例のように、つながった文字が視覚的につながったままであることが求められます。字間スペースを適用すると、テキストが壊れたように見えてしまいます。

> 
> شسيبتنمك
> 
> 
> 

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `normal` |
| 適用対象 | すべての要素。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | あり |
| 計算値 | 絶対的な長さまたはキーワード `normal` のどちらかから成る最適値 |
| アニメーションの種類 | length |

形式文法
----
```

letter-spacing =   
  normal    |  
  <length>    
  
```

例
-

### 字間の設定

#### HTML


```html
<p class="normal">letter spacing</p>
<p class="em-wide">letter spacing</p>
<p class="em-wider">letter spacing</p>
<p class="em-tight">letter spacing</p>
<p class="px-wide">letter spacing</p>
```


#### CSS


```css
.normal {
  letter-spacing: normal;
}
.em-wide {
  letter-spacing: 0.4em;
}
.em-wider {
  letter-spacing: 1em;
}
.em-tight {
  letter-spacing: -0.05em;
}
.px-wide {
  letter-spacing: 6px;
}
```


#### 結果

仕様書
---

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

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

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

関連情報
----

* `font-kerning`
:-moz-only-whitespace
=====================

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

**メモ:** Selectors Level 4 では、 `:empty` セレクターが `:-moz-only-whitespace` のように動作するよう変更されましたが、まだこれに対応しているブラウザーはありません。

**`:-moz-only-whitespace`** は CSS の擬似クラスで、ホワイトスペースのみが入ったテキストノードのみを含む要素に一致します。（これには空のテキストノードや子ノードを持たない要素も含みます。）

構文
--
```

:-moz-only-whitespace
```

例
-

### 単純な :-moz-only-whitespace の例

#### HTML


```html
<div> </div>
```


#### CSS


```css
div {
  border: 4px solid red;
}

:-moz-only-whitespace {
  border-color: lime;
}
```


#### 結果

仕様書
---

短期間だけ `:blank` として Selectors Level 4 において定義されましたが、その後に機能的に `:empty` に統合され、 `:blank` は空欄の `<input>` を意味するように再定義されました。

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

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

関連情報
----

* `:blank` 
Experimental
* `:empty`