recursal/MDN huggingface dataset:
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`
* 基本的なテキストとフォントの装飾
子孫結合子
=====

**子孫結合子** (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
==============

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

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

### プロパティ

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

| Specification |
| --- |
| CSS Writing Modes Level 4  |
@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
=================

**`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 では、ボックスの内容がボックスの辺の 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)の方法
:-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
=====================

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

`-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>
=======

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

**`<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()` と同様の座標を使います
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`
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
============

**`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
============

**`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`