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

list-style-type
===============

**`list-style-type`** は CSS のプロパティで、リスト項目要素のマーカーを設定します (円、文字、独自のカウンタースタイルなど)。

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

マーカーの色は、適用先の要素における色の計算値と同じになります。

わずかな要素 (`<li>` と `<summary>`) だけが既定で `display: list-item` の値を持っています。しかし、 `list-style-type` プロパティは `display` の値が `list-item` に設定されているあらゆる要素に適用することができます。さらに、このプロパティは継承されるので、親要素 (普通は `<ol>` または `<ul>`) に設定することですべてのリスト項目に適用することができます。

構文
--

```css
/\* マーカーの種類の一例 \*/
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: georgian;
list-style-type: trad-chinese-informal;
list-style-type: kannada;

/\* <string> の値 \*/
list-style-type: "-";

/\* @counter-style 規則に一致する識別子 \*/
list-style-type: custom-counter-style;

/\* キーワード値 \*/
list-style-type: none;

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

`list-style-type` プロパティは、以下のいずれかで定義することができます。

* 単一の `<custom-ident>` 値
* 単一の `symbols()` 値
* 単一の `<string>` 値
* キーワード `none`

注意事項:

* 種類によっては期待通りに表示するために適切なフォントのインストールが必要です。
* `cjk-ideographic` は `trad-chinese-informal` と同じです。歴史的な理由で存在しています。
### 値

`<custom-ident>`

`@counter-style` の値、または以下の定義済みスタイルのうちの一つに一致する識別子です。

`symbols()`

無名のリストスタイルを定義します。

`<string>`

特定の文字列を、リストのマーカーとして使用します。

`none`

マーカーは表示されません。

`disc`

塗りつぶされた円形です (既定値)。

`circle`

中空円です。

`square`

塗りつぶされた四角形です。

`decimal`

数値です。 1 から始まります。

`cjk-decimal`
Experimental

漢数字です。

`decimal-leading-zero`

数値で、先頭がゼロ埋めされます。

`lower-roman`

小文字のローマ数字です。

`upper-roman`

大文字のローマ数字です。

`lower-greek`

小文字の古代ギリシャ文字です。

`lower-alpha`, `lower-latin`

小文字の ASCII 文字です。

`upper-alpha`, `upper-latin`

大文字の ASCII 文字です。

`arabic-indic`, `-moz-arabic-indic`

アラビア－インド数字です。

`armenian`

伝統的なアルメニア語の数値表記です。

`bengali`, `-moz-bengali`

ベンガル語の数値表記です。

`cambodian`/`khmer`

カンボジア／クメール語の数値表記です。

`cjk-earthly-branch`, `-moz-cjk-earthly-branch`

漢字の「十二支」順です。

`cjk-heavenly-stem`, `-moz-cjk-heavenly-stem`

漢字の「十干」順です。

`cjk-ideographic`
Experimental

`trad-chinese-informal` と同じです。

`devanagari`, `-moz-devanagari`

デーヴァナーガリーの数値表記です。

`ethiopic-numeric`
Experimental

エチオピア語の数値表記です。

`georgian`

伝統的なジョージア語の数値表記です。

`gujarati`, `-moz-gujarati`

グジャラート語の数値表記です。

`gurmukhi`, `-moz-gurmukhi`

グルムキー語の数値表記です。

`hebrew`
Experimental

伝統的なヘブライ語の数値表記です。

`hiragana`
Experimental

ひらがなの辞書順の文字です。

`hiragana-iroha`
Experimental

ひらがなのいろは順の文字です。

`japanese-formal`
Experimental

法律や金融関係の書類に使用される日本の公的な数値表記です。漢字は、他の正しい文字に似せて修正することができないように設計されています。

`japanese-informal`
Experimental

日本語の日常的な数値表記です。

`kannada`, `-moz-kannada`

カンナダ語の数値表記です。

`katakana`
Experimental

カタカナの辞書順の文字です。

`katakana-iroha`
Experimental

カタカナのいろは順の文字です。

`korean-hangul-formal`
Experimental

韓国語のハングルの数値表記です。

`korean-hanja-formal`
Experimental

韓国語の公的な漢数字です。

`korean-hanja-informal`
Experimental

韓国語の漢数字です。

`lao`, `-moz-lao`

ラオス語の数値表記です。

`lower-armenian`
Experimental
\*

アルメニア語の小文字の数値表記です。

`malayalam`, `-moz-malayalam`

マラヤーラム語の数値表記です。

`mongolian`
Experimental

モンゴル語の数値表記です。

`myanmar`, `-moz-myanmar`

ミャンマー語 (ビルマ語) の数値表記です。

`oriya`, `-moz-oriya`

オリヤー語の数値表記です。

`persian`
Experimental
, `-moz-persian`

ペルシャ語の数値表記です。

`simp-chinese-formal`
Experimental

公的な簡体字中国語の数値表記です。

`simp-chinese-informal`
Experimental

日常的な簡体字中国語の数値表記です。

`tamil`
Experimental
, `-moz-tamil`

タミル語の数値表記です。

`telugu`, `-moz-telugu`

テルグ語の数値表記です。

`thai`, `-moz-thai`

タイ語の数値表記です。

`tibetan`
Experimental
\*

チベット語の数値表記です。

`trad-chinese-formal`
Experimental

公的な繁体字中国語の数値表記です。

`trad-chinese-informal`
Experimental

日常的な繁体字中国語の数値表記です。

`upper-armenian`
Experimental
\*

伝統的なアルメニア語の大文字の数値表記です。

`disclosure-open`
Experimental

`<details>` などの展開ウィジェットを開いていることを示す記号

`disclosure-closed`
Experimental

`<details>` などの展開ウィジェットを閉じていることを示す記号

### 標準外の拡張

Mozilla (Firefox)、Blink (Chrome、Opera)、WebKit (Safari) では、他の言語のリストの種類に対応するために、さらにいくつかの定義済みの種類が提供されています。どのブラウザーがどの拡張に対応しているかを確認するには、互換性一覧表を参照してください。

* `-moz-ethiopic-halehame`
* `-moz-ethiopic-halehame-am`
* `ethiopic-halehame-ti-er`, `-moz-ethiopic-halehame-ti-er`
* `ethiopic-halehame-ti-et`, `-moz-ethiopic-halehame-ti-et`
* `hangul`, `-moz-hangul`
* `hangul-consonant`, `-moz-hangul-consonant`
* `urdu`, `-moz-urdu`
アクセシビリティの考慮
-----------

スクリーンリーダーの VoiceOver には、 `list-style-type` の値に `none` が適用された順序なしリストをリストとして読み上げないという問題があります。リストが正しく読み上げられるようにするには、それぞれのリスト項目の前に幅ゼロの空白を擬似コンテンツとして追加する必要があります。これはデザインがバグ修正に影響されないことを保証し、リスト項目の表記が正しくなくなるわけではありません。

```css
ul {
  list-style: none;
}

ul li::before {
  content: "\200B";
}
```

* VoiceOver and list-style-type: none – Unfettered Thoughts
* MDN WCAG の理解、ガイドライン 1.3 の説明
* Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0
公式定義
----

|  |  |
| --- | --- |
| 初期値 | `disc` |
| 適用対象 |  リスト項目 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

list-style-type =
  <counter-style>  |
  <string>         |
  none

<counter-style> =
  <counter-style-name>  |
  <symbols()>

<symbols()> =
  symbols( <symbols-type>? [ <string> | <image> ]+ )

<symbols-type> =
  cyclic      |
  numeric     |
  alphabetic  |
  symbolic    |
  fixed

<image> =
  <url>       |
  <gradient>

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

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

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

```

例
-

### リスト項目マーカーの設定

#### HTML

```html
List 1
<ol class="normal">
  <li>Hello</li>
  <li>World</li>
  <li>What's up?</li>
</ol>

List 2
<ol class="shortcut">
  <li>Looks</li>
  <li>Like</li>
  <li>The</li>
  <li>Same</li>
</ol>
```

#### CSS

```css
ol.normal {
  list-style-type: upper-alpha;
}

/\* or use the shortcut "list-style": \*/
ol.shortcut {
  list-style: upper-alpha;
}
```

#### 結果

### リストスタイルのすべての種類

#### HTML

```html
<ol>
  <li>Apollo</li>
  <li>Hubble</li>
  <li>Chandra</li>
  <li>Cassini-Huygens</li>
  <li>Spitzer</li>
</ol>

<h2>Choose a list style type:</h2>

<div class="container">
  <label for="disc">
    <input type="radio" id="disc" name="type" value="disc" />disc
  </label>

  <label for="circle">
    <input type="radio" id="circle" name="type" value="circle" />circle
  </label>

  <label for="square">
    <input type="radio" id="square" name="type" value="square" />square
  </label>

  <label for="decimal">
    <input type="radio" id="decimal" name="type" value="decimal" />decimal
  </label>

  <label for="cjk-decimal">
    <input
 type="radio"
 id="cjk-decimal"
 name="type"
 value="cjk-decimal" />cjk-decimal
  </label>

  <label for="decimal-leading-zero">
    <input
 type="radio"
 id="decimal-leading-zero"
 name="type"
 value="decimal-leading-zero" />decimal-leading-zero
  </label>

  <label for="lower-roman">
    <input
 type="radio"
 id="lower-roman"
 name="type"
 value="lower-roman" />lower-roman
  </label>

  <label for="upper-roman">
    <input
 type="radio"
 id="upper-roman"
 name="type"
 value="upper-roman" />upper-roman
  </label>

  <label for="lower-greek">
    <input
 type="radio"
 id="lower-greek"
 name="type"
 value="lower-greek" />lower-greek
  </label>

  <label for="lower-alpha">
    <input
 type="radio"
 id="lower-alpha"
 name="type"
 value="lower-alpha" />lower-alpha, lower-latin
  </label>

  <label for="upper-alpha">
    <input
 type="radio"
 id="upper-alpha"
 name="type"
 value="upper-alpha" />upper-alpha, upper-latin
  </label>

  <label for="arabic-indic">
    <input
 type="radio"
 id="arabic-indic"
 name="type"
 value="arabic-indic" />arabic-indic
  </label>

  <label for="armenian">
    <input type="radio" id="armenian" name="type" value="armenian" />armenian
  </label>

  <label for="bengali">
    <input type="radio" id="bengali" name="type" value="bengali" />bengali
  </label>

  <label for="cambodian">
    <input type="radio" id="cambodian" name="type" value="cambodian" />cambodian
  </label>

  <label for="cjk-earthly-branch">
    <input
 type="radio"
 id="cjk-earthly-branch"
 name="type"
 value="cjk-earthly-branch" />cjk-earthly-branch
  </label>

  <label for="cjk-heavenly-stem">
    <input
 type="radio"
 id="cjk-heavenly-stem"
 name="type"
 value="cjk-heavenly-stem" />cjk-heavenly-stem
  </label>

  <label for="cjk-ideographic">
    <input
 type="radio"
 id="cjk-ideographic"
 name="type"
 value="cjk-ideographic" />cjk-ideographic
  </label>

  <label for="devanagari">
    <input
 type="radio"
 id="devanagari"
 name="type"
 value="devanagari" />devanagari
  </label>

  <label for="ethiopic-numeric">
    <input
 type="radio"
 id="ethiopic-numeric"
 name="type"
 value="ethiopic-numeric" />ethiopic-numeric
  </label>

  <label for="georgian">
    <input type="radio" id="georgian" name="type" value="georgian" />georgian
  </label>

  <label for="gujarati">
    <input type="radio" id="gujarati" name="type" value="gujarati" />gujarati
  </label>

  <label for="gurmukhi">
    <input type="radio" id="gurmukhi" name="type" value="gurmukhi" />gurmukhi
  </label>

  <label for="hebrew">
    <input type="radio" id="hebrew" name="type" value="hebrew" />hebrew
  </label>

  <label for="hiragana">
    <input type="radio" id="hiragana" name="type" value="hiragana" />hiragana
  </label>

  <label for="hiragana-iroha">
    <input
 type="radio"
 id="hiragana-iroha"
 name="type"
 value="hiragana-iroha" />hiragana-iroha
  </label>

  <label for="japanese-formal">
    <input
 type="radio"
 id="japanese-formal"
 name="type"
 value="japanese-formal" />japanese-formal
  </label>

  <label for="japanese-informal">
    <input
 type="radio"
 id="japanese-informal"
 name="type"
 value="japanese-informal" />japanese-informal
  </label>

  <label for="kannada">
    <input type="radio" id="kannada" name="type" value="kannada" />kannada
  </label>

  <label for="katakana">
    <input type="radio" id="katakana" name="type" value="katakana" />katakana
  </label>

  <label for="katakana-iroha">
    <input
 type="radio"
 id="katakana-iroha"
 name="type"
 value="katakana-iroha" />katakana-iroha
  </label>

  <label for="khmer">
    <input type="radio" id="khmer" name="type" value="khmer" />khmer
  </label>

  <label for="korean-hangul-formal">
    <input
 type="radio"
 id="korean-hangul-formal"
 name="type"
 value="korean-hangul-formal" />korean-hangul-formal
  </label>

  <label for="korean-hanja-formal">
    <input
 type="radio"
 id="korean-hanja-formal"
 name="type"
 value="korean-hanja-formal" />korean-hanja-formal
  </label>

  <label for="korean-hanja-informal">
    <input
 type="radio"
 id="korean-hanja-informal"
 name="type"
 value="korean-hanja-informal" />korean-hanja-informal
  </label>

  <label for="lao">
    <input type="radio" id="lao" name="type" value="lao" />lao
  </label>

  <label for="lower-armenian">
    <input
 type="radio"
 id="lower-armenian"
 name="type"
 value="lower-armenian" />lower-armenian
  </label>

  <label for="malayalam">
    <input type="radio" id="malayalam" name="type" value="malayalam" />malayalam
  </label>

  <label for="mongolian">
    <input type="radio" id="mongolian" name="type" value="mongolian" />mongolian
  </label>

  <label for="myanmar">
    <input type="radio" id="myanmar" name="type" value="myanmar" />myanmar
  </label>

  <label for="oriya">
    <input type="radio" id="oriya" name="type" value="oriya" />oriya
  </label>

  <label for="persian">
    <input type="radio" id="persian" name="type" value="persian" />persian
  </label>

  <label for="simp-chinese-formal">
    <input
 type="radio"
 id="simp-chinese-formal"
 name="type"
 value="simp-chinese-formal" />simp-chinese-formal
  </label>

  <label for="simp-chinese-informal">
    <input
 type="radio"
 id="simp-chinese-informal"
 name="type"
 value="simp-chinese-informal" />simp-chinese-informal
  </label>

  <label for="tamil">
    <input type="radio" id="tamil" name="type" value="tamil" />tamil
  </label>

  <label for="telegu">
    <input type="radio" id="telegu" name="type" value="telegu" />telegu
  </label>

  <label for="thai">
    <input type="radio" id="thai" name="type" value="thai" />thai
  </label>

  <label for="tibetan">
    <input type="radio" id="tibetan" name="type" value="tibetan" />tibetan
  </label>

  <label for="trad-chinese-formal">
    <input
 type="radio"
 id="trad-chinese-formal"
 name="type"
 value="trad-chinese-formal" />trad-chinese-formal
  </label>

  <label for="trad-chinese-informal">
    <input
 type="radio"
 id="trad-chinese-informal"
 name="type"
 value="trad-chinese-informal" />trad-chinese-informal
  </label>

  <label for="upper-armenian">
    <input
 type="radio"
 id="upper-armenian"
 name="type"
 value="upper-armenian" />upper-armenian
  </label>

  <label for="disclosure-open">
    <input
 type="radio"
 id="disclosure-open"
 name="type"
 value="disclosure-open" />disclosure-open
  </label>

  <label for="disclosure-closed">
    <input
 type="radio"
 id="disclosure-closed"
 name="type"
 value="disclosure-closed" />disclosure-closed
  </label>

  <label for="-moz-ethiopic-halehame">
    <input
 type="radio"
 id="-moz-ethiopic-halehame"
 name="type"
 value="-moz-ethiopic-halehame" />-moz-ethiopic-halehame
  </label>

  <label for="-moz-ethiopic-halehame-am">
    <input
 type="radio"
 id="-moz-ethiopic-halehame-am"
 name="type"
 value="-moz-ethiopic-halehame-am" />-moz-ethiopic-halehame-am
  </label>

  <label for="ethiopic-halehame-ti-er">
    <input
 type="radio"
 id="ethiopic-halehame-ti-er"
 name="type"
 value="ethiopic-halehame-ti-er" />ethiopic-halehame-ti-er
  </label>

  <label for="ethiopic-halehame-ti-et">
    <input
 type="radio"
 id="ethiopic-halehame-ti-et"
 name="type"
 value="ethiopic-halehame-ti-et" />ethiopic-halehame-ti-et
  </label>

  <label for="hangul">
    <input type="radio" id="hangul" name="type" value="hangul" />hangul
  </label>

  <label for="hangul-consonant">
    <input
 type="radio"
 id="hangul-consonant"
 name="type"
 value="hangul-consonant" />hangul-consonant
  </label>

  <label for="urdu">
    <input type="radio" id="urdu" name="type" value="urdu" />urdu
  </label>

  <label for="-moz-ethiopic-halehame-ti-er">
    <input
 type="radio"
 id="-moz-ethiopic-halehame-ti-er"
 name="type"
 value="-moz-ethiopic-halehame-ti-er" />-moz-ethiopic-halehame-ti-er
  </label>

  <label for="-moz-ethiopic-halehame-ti-et">
    <input
 type="radio"
 id="-moz-ethiopic-halehame-ti-et"
 name="type"
 value="-moz-ethiopic-halehame-ti-et" />-moz-ethiopic-halehame-ti-et
  </label>

  <label for="-moz-hangul">
    <input
 type="radio"
 id="-moz-hangul"
 name="type"
 value="-moz-hangul" />-moz-hangul
  </label>

  <label for="-moz-hangul-consonant">
    <input
 type="radio"
 id="-moz-hangul-consonant"
 name="type"
 value="-moz-hangul-consonant" />-moz-hangul-consonant
  </label>

  <label for="-moz-urdu">
    <input type="radio" id="-moz-urdu" name="type" value="-moz-urdu" />-moz-urdu
  </label>
</div>
```

#### CSS

```css
ol {
  font-size: 1.2rem;
}

.container {
  column-count: 3;
}

label {
  display: block;
}

input {
  margin: 0.4rem;
}
```

#### JavaScript

```js
const container = document.querySelector(".container");
container.addEventListener("change", (event) => {
  const list = document.querySelector("ol");
  list.setAttribute("style", `list-style-type: ${event.target.value}`);
});
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # text-markers |
| CSS Counter Styles Level 3 # extending-css2 |

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

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

関連情報
----

* `list-style`, `list-style-image`, `list-style-position`


:user-valid (:-moz-ui-valid) - CSS: カスケーディングスタイルシート

:user-valid (:-moz-ui-valid)
============================

**`:user-valid`** は CSS の擬似クラスで、制約検証に基づき値の検証が正しく行われた有効なフォーム要素を表します。ただし、 `:valid` とは異なり、ユーザーが操作した後にのみ一致します。

**メモ:** この擬似クラスは標準外の `:-moz-ui-valid` 擬似クラスと同じように動作します。

この擬似クラスは、以下の基準に則って適用されます。

* そのコントロールにフォーカスがなく、値が有効な場合は、この擬似クラスが適用されます。
* そのコントロールにフォーカスがあり、フォーカスを受けた時点でその値が有効であった場合（空欄の場合も含む）、この擬似クラスが適用されます。
* そのコントロールにフォーカスがあり、フォーカスを受けた時点でその値が無効であった場合、キーを入力するごとに再検証が行われます。
* その要素が必須 (required) であった場合は、ユーザーが値を変更した場合、またはフォームを送信しようとした場合にのみ適用されます。

その結果、ユーザーがコントロールを操作し始めたときに有効であった場合、ユーザーが他のコントロールにフォーカスを移したときにのみ、有効性のスタイルが変更されることになります。しかし、ユーザーが以前にフラグを立てた値を修正しようとしている場合、その値が有効になるとコントロールは直ちに表示されます。必須項目は、ユーザーが変更した場合、または変更されていない無効な値を送信しようとした場合にのみ、無効であるとフラグが立てられます。

構文
--
```

:user-invalid
```

例
-

### :user-valid で色と記号を設定

 次の例では、緑の境界と✅が、ユーザーがフィールドを操作した後にのみ表示されます。
 メールアドレスを他の有効なメールに変更して、その動作を確認してみてください。

```html
<form>
  <label for="email">Email *: </label>
  <input
 id="email"
 name="email"
 type="email"
 value="test@example.com"
 required />
  <span></span>
</form>
```

```css
input:user-valid {
  border: 2px solid green;
}

input:user-valid + span::before {
  content: "✓";
  color: green;
}
```

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # user-valid-pseudo |

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

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

関連情報
----

* `:valid`
* `:invalid`
* `:required`
* `:optional`
* `:user-invalid`


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

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

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-group`** は CSS の擬似要素で、単一のビュートランジショングループを表します。

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

`::view-transition-group` は UA スタイルシートで以下の既定のスタイルを与えられています。

```css
html::view-transition-group(\*) {
  position: absolute;
  top: 0;
  left: 0;

  animation-duration: 0.25s;
  animation-fill-mode: both;
}
```

既定では、選択された要素は、「古い｝ビュー状態を表す `::view-transition-old` 擬似要素、または「古い」ビュー状態がない場合は「新しい」ビュー状態を表す `::view-transition-new` 擬似要素のサイズと位置を最初に反映します。

「古い」ビュー状態と「新しい」ビュー状態の両方がある場合、ビュートランジションスタイルシートのスタイルは、この擬似要素の `width` と `height` を「古い」ビュー状態の境界ボックスのサイズから「新しい」ビュー状態の境界ボックスのサイズにアニメーションさせます。

**メモ:** ビュートランジションスタイルシートのスタイルは、ビューのトランジション中に動的に生成されます。詳細については、仕様書のトランジション擬似要素の設定および擬似要素スタイルの更新の節を参照してください。

さらに、要素の変換は、「古い」ビュー状態の画面空間変換から新しいビュー状態の画面空間変換へアニメーションします。アニメーションしているプロパティの値はトランジションを始める時点に決定されるため、このスタイル設定は動的に生成されます。

構文
--

```css
::view-transition-group(<pt-name-selector>) {
  /\* ... \*/
}
```

`<pt-name-selector>` は以下の値のうちのいずれかです。

`*`

擬似要素が、すべてのビュートランジショングループに一致するようにします。

`root`

擬似要素が、ページ全体のビュートランジションを含むためにユーザエージェントによって作成された既定の `root` ビュートランジショングループに一致するようにします。すなわち、 `view-transition-name` プロパティによって自分自身を固有のビュートランジショングループに割り当てていない要素を意味します）。

`<custom-ident>`

擬似要素が、指定された `<custom-ident>` を `view-transition-name` プロパティを通して要素に割り当てることによって作成された固有のビュートランジショングループに一致するようにします。

例
-

```css
view-transition-group(embed-container) {
  animation-duration: 0.3s;
  animation-timing-function: ease;
  z-index: 1;
}
```

仕様書
---

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

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

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

関連情報
----

* ビュートランジション API
* ビュートランジション API によるスムーズでシンプルなトランジション


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

::marker
========

**`::marker`** は CSS の擬似要素で、リスト項目の箇条書き記号ボックス (ふつうは黒丸や番号) を選択します。これは `[display: list-item](/ja/docs/Web/CSS/display)` が設定された要素や擬似要素、例えば `<li>` 要素や `<summary>` 要素で利用できます。

```css
::marker {
  color: blue;
  font-size: 1.2em;
}
```

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

利用できるプロパティ
----------

`::marker` 擬似要素では、一部の CSS プロパティのみが利用できます。

* すべてのフォントプロパティ
* `white-space` プロパティ
* `color`
* `text-combine-upright`, `unicode-bidi`, `direction` の各プロパティ
* `content` プロパティ
* すべてのアニメーションおよびトランジションプロパティ

**メモ:** この仕様書は、将来追加の CSS プロパティにも対応する可能性があることを示しています。

構文
--

Error: could not find syntax for this item例
-

### HTML

```html
<ul>
  <li>Peaches</li>
  <li>Apples</li>
  <li>Plums</li>
</ul>
```

### CSS

```css
ul li::marker {
  color: red;
  font-size: 1.5em;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # marker-pseudo |

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

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

関連情報
----

* 既定で箇条書き記号ボックスがある HTML 要素: `<ol>`, `<li>`, `<summary>`


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

counter-increment
=================

**`counter-increment`** は CSS のプロパティで、指定された値によって CSS カウンターの値を増加または減少させるためのプロパティです。

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

**メモ:** カウンターの値は CSS の `counter-reset` プロパティを使用して任意の値にリセットすることができます。

構文
--

```css
/\* "my-counter" を 1 増加 \*/
counter-increment: my-counter;

/\* "my-counter" を 1 減少 \*/
counter-increment: my-counter -1;

/\* "counter1" を 1 増加、 "counter2" を 4 減少 \*/
counter-increment: counter1 counter2 -4;

/\* 増加または減少させない。より詳細度が低い規則を上書きするために使用 \*/
counter-increment: none;

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

`counter-increment` プロパティは、以下の何れかで指定します。

* カウンターの名前を指定する `<custom-ident>` と、その後に任意で `<integer>`。カウンターはいくつでも指定することができ、それぞれの名前や名前と数値の組は空白で区切ります。
* キーワード値 `none`。
### 値

`<custom-ident>`

増加の対象となる、カウンターの名前です。

`<integer>`

カウンタに加える値です。指定されない場合は既定値の `1` になります。

`none`

カウンターは増加しません。これは既定値として使用されたり、より詳細度の高いルールで増加を取り消したりするために使用されたりします。

公式定義
----

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

形式文法
----
```

counter-increment =
  [ <counter-name> <integer>? ]+  |
  none

```

例
-

### 名前付きカウンターの増加

```css
h1 {
  counter-increment: chapter section 2 page;
  /\* chapter と page カウンターの値を 1、
 section カウンターの値を 2 増加させます。 \*/
}
```

仕様書
---

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # increment-set |

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

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

関連情報
----

* CSS カウンターの使用
* `counter-reset`
* `counter-set`
* `@counter-style`
* `counter()` および `counters()` 関数


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

:focus
======

**`:focus`** は CSS の擬似クラスで、フォーカスを持っている (フォームの input のような) 要素を表します。普通はユーザーが要素をクリックやタップをしたり、キーボードの `Tab` キーで選択したりしたときです。

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

**メモ:** この擬似クラスはフォーカスを持つ要素に対してのみ適用されます。フォーカスを持つ要素を*含む*要素を選択したい場合は、`:focus-within` を使用してください。

構文
--

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

例
-

### HTML

```html
<div><input class="red-input" value="フォーカスで赤くなります。" /></div>
<div><input class="blue-input" value="フォーカスで青くなります。" /></div>
```

### CSS

```css
.red-input:focus {
  background: yellow;
  color: red;
}

.blue-input:focus {
  background: yellow;
  color: blue;
}
```

### 結果

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

視覚的なフォーカスインジケーターが、弱視の人々からも見えるように確認してください。これは外光が明るい場所 (太陽の下の屋外など) で画面を使用するすべての人にも利益になります。 WCAG 2.1 SC 1.4.11 Non-Text Contrast は、視覚的なフォーカスインジケーターを少なくとも 3:1 にすることを要求しています。

* Accessible Visual Focus Indicators: Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators
### `:focus { outline: none; }`

WCAG 2.1 SC 1.4.11 Non-Text Contrast を満たすフォーカスの輪郭線で置き換えることなしに、フォーカスの輪郭線（視覚的なフォーカスインジケーター）を削除しないでください。

* Quick Tip: Never remove CSS outlines
仕様書
---

| Specification |
| --- |
| HTML Standard # selector-focus |
| Selectors Level 4 # focus-pseudo |

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

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

関連情報
----

* `:focus-visible`
* `:focus-within`


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

属性セレクター
=======

CSS の**属性セレクター** (attribute selector) は、指定された属性が存在するかどうか、またはその値に基づいて要素を選択します。

```css
/\* title 属性を持つ <a> 要素 \*/
a[title] {
  color: purple;
}

/\* href が "https://example.org" と一致する <a> 要素 \*/
a[href="https://example.org"]
{
  color: green;
}

/\* href に "example" を含む <a> 要素 \*/
a[href\*="example"] {
  font-size: 2em;
}

/\* href が "org" で終わる <a> 要素 \*/
a[href$=".org"] {
  font-style: italic;
}

/\* <a> 要素の class 属性に "logo" という語が含まれているもの \*/
a[class~="logo"] {
  padding: 2px;
}
```

構文
--

`[attr]`

*attr* という名前の属性を持つ要素を表します。

`[attr=value]`

*attr* という名前の属性の値が正確に *value* である要素を表します。

`[attr~=value]`

*attr* という名前の属性の値が空白区切りの語のリストであり、その内の 1 つが正確に *value* と一致する要素を表します。

`[attr|=value]`

*attr* という名前の属性の値が正確に *value* と一致するか、 *value* で始まり直後にハイフン (`-` (U+002D)) が続く要素を表します。言語のサブコードの一致によく使われます。

`[attr^=value]`

*attr* という名前の属性の値が *value* で始まる要素を表します。

`[attr$=value]`

*attr* という名前の属性の値が *value* で終わる要素を表します。

`[attr*=value]`

*attr* という名前の属性の値が、文字列中に *value* を1つ以上含む要素を表します。

`[attr operator value i]`

閉じ角括弧の前に `i` (または `I`) を追加すると、 (ASCII の範囲内の文字の場合) 値は大文字と小文字を区別せずに比較されます。

`[attr operator value s]`
Experimental

閉じ角括弧の前に `s` (または `S`) を追加すると、 (ASCII の範囲内の文字の場合) 値は大文字と小文字を区別して比較されます。

例
-

### リンク

#### CSS

```css
a {
  color: blue;
}

/\* "#" で始まる内部リンク \*/
a[href^="#"] {
  background-color: gold;
}

/\* URL のどこかに "example" が含まれるリンク \*/
a[href\*="example"] {
  background-color: silver;
}

/\* URL のどこかに "insensitive" が含まれるリンクで、
 大文字小文字は区別しない \*/
a[href\*="insensitive" i] {
  color: cyan;
}

/\* URL のどこかに "cAsE" があるリンクに一致
大文字小文字の区別つき \*/
a[href\*="cAsE" s] {
  color: pink;
}

/\* ".org" で終わるリンク \*/
a[href$=".org"] {
  color: red;
}

/\* "https" で始まり ".org" で終わるリンク \*/
a[href^="https"][href$=".org"] {
  color: green;
}
```

#### HTML

```html
<ul>
  <li><a href="#internal">Internal link</a></li>
  <li><a href="http://example.com">Example link</a></li>
  <li><a href="#InSensitive">Insensitive internal link</a></li>
  <li><a href="http://example.org">Example org link</a></li>
  <li><a href="https://example.org">Example https org link</a></li>
</ul>
```

#### 結果

### 言語

#### CSS

```css
/\* `lang` 属性があるすべての div を太字にする。 \*/
div[lang] {
  font-weight: bold;
}

/\* すべｔの div のうち `lang` 属性のない者をイタリックにする。 \*/
div:not([lang]) {
  font-style: italic;
}

/\* アメリカ英語の div はすべて青。 \*/
div[lang~="en-us"] {
  color: blue;
}

/\* ポルトガル語の div はすべて緑。 \*/
div[lang="pt"] {
  color: green;
}

/\* 中国語の div はすべて赤。
 simplified (zh-CN) or traditional (zh-TW). \*/
div[lang|="zh"] {
  color: red;
}

/\* 'data-lang' が中国語繁体字の div はすべて紫。 \*/
/\* 注: ハイフン区切りの属性は二重引用符なしで使用できる \*/
div[data-lang="zh-TW"] {
  color: purple;
}
```

#### HTML

```html
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
<div lang="pt">Olá Mundo!</div>
<div lang="zh-CN">世界您好！</div>
<div lang="zh-TW">世界您好！</div>
<div data-lang="zh-TW">世界您好！</div>
```

#### 結果

### HTML 順序付きリスト

HTML 仕様書では、 `type` 属性は主に `<input>` 要素で使用されるため、大文字小文字の区別なく一致することを要求しており、順序付きリスト (`<ol>`) 要素の `type` 属性に使おうとすると、 case-sensitive 修飾子がなければ正しく動作しません。

#### CSS

```css
/\* HTML が type 属性を扱う方法の癖の都合上、リストの種別には、大文字小文字を区別する指定が必要です。 \*/
ol[type="a"] {
  list-style-type: lower-alpha;
  background: red;
}

ol[type="a" s] {
  list-style-type: lower-alpha;
  background: lime;
}

ol[type="A" s] {
  list-style-type: upper-alpha;
  background: lime;
}
```

#### HTML

```html
<ol type="A">
  <li>Example list</li>
</ol>
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* `attr()`
* 単一要素の選択: `Document.querySelector()`, `DocumentFragment.querySelector()`, `Element.querySelector()`
* 一致するすべての要素の選択: `Document.querySelectorAll()`, `DocumentFragment.querySelectorAll()`, `Element.querySelectorAll()`


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

url()
=====

**`url()`** は CSS の関数で、ファイルを含めるために使用します。引数は絶対 URL、相対 URL、Blob URL、データ URL の何れかです。 **`url()`** 関数は `attr()` 関数のように、他の CSS 関数に引数として渡すことができます。値を使用するプロパティに応じて、求められるリソースは画像、フォント、スタイルシートの何れかになります。`url()` 関数表記は `<url>` データ型の値になります。

**メモ:** URI と URL との間には違いがあります。 URI は単純にリソースを識別します。 URL は URI の一種で、リソースの*場所*を記述します。 URI はリソースの URL または名前 (URN) であることがあります。

CSS Level 1 では、 `url()` 関数記法は真に URL のみを記述していました。 CSS Level 2 では、 `url()` の定義はあらゆる URI、 URL または URN のどちらかを記述するように拡張されました。ややこしいことに、これは `url()` を CSS の `<uri>` データ型の生成のために使用することができることを意味していました。この変更は紛らわしいばかりでなく、議論になりやすく、 URN が実際の CSS で使用されることはほぼあり得ないため不必要でした。混乱を軽減するために、 CSS Level 3 ではより狭い初めの定義まで戻りました。現在では、 `url()` は真に `<url>` のみを記述します。

```css
/\* 単純な使い方 \*/
url(https://example.com/images/myImg.jpg);
url(data:image/png;base64,iRxVB0…);
url(myFont.woff);
url(#IDofSVGpath);

/\* 関連するプロパティ \*/
background-image: url("star.gif");
list-style-image: url('../images/bullet.jpg');
content: url("pdficon.jpg");
cursor: url(mycursor.cur);
border-image-source: url(/media/diamonds.png);
src: url('fantasticfont.woff');
offset-path: url(#path);
mask-image: url("masks.svg#mask1");

/\* 代替付きのプロパティ \*/
cursor: url(pointer.cur), pointer;

/\* 関連する一括指定プロパティ \*/
background: url('star.gif') bottom right repeat-x blue;
border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space;

/\* 他の CSS 関数の引数として \*/
background-image: cross-fade(20% url(first.png), url(second.png));
mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent));

/\* 一括指定ではない複数の値の一部として \*/
content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg);

/\* アットルール \*/
@document url("https://www.example.com/") { /\* … \*/ }
    Experimental

@import url("https://www.example.com/style.css");
@namespace url(http://www.w3.org/1999/xhtml);
```

相対 URL が使用された場合は、スタイルシートの URL からの相対となります (ウェブページの URL からではありません)。

**`url()`** 関数は `background`, `background-image`, `border`, `border-image`, `border-image-source`, `content`, `cursor`, `filter`, `list-style`, `list-style-image`, `mask`, `mask-image`, `offset-path`,
 @font-face ブロック内での src, @counter-style/symbol の値として使用することができます。

構文
--

### 値

`<string>`

URL まだは SVG 図形の ID を指定することができる文字列です。

<url>

含まれるウェブリソースへの相対アドレス、絶対アドレス、ポインターのURL、またはデータ URI であり、任意で単一引用符または二重引用符を使用することができます。URL に括弧、空白、引用符が含まれている場合で、これらの文字がエスケープされていないか、アドレスに 0x7e 以上の制御文字が含まれている場合、引用符は必須です。二重引用符は二重引用符の中に入れることはできず、単一引用符はエスケープされない限り単一引用符の中に入れることはできません。以下のものはすべて有効であり、同等です。

```css
<css_property>: url("https://example.com/image.png")
<css_property>: url('https://example.com/image.png')
<css_property>: url(https://example.com/image.png)
```

URL を引用符なしで書く場合は、バックスラッシュを (`\`) を URL に含まれる括弧、ホワイトスペース文字、単一引用符 (`'`)、二重引用符 (`"`) の前に使用してください。

パス

SVG 図形の ID への参照 — `circle`, `ellipse`, `line`, `path`, `polygon`, `polyline`, `rect` — パスとして図形の形状を使用します。

`<url-modifier>`
Experimental

将来的に `url()` 関数は、URL 文字列の意味を変更する修飾子、識別子、関数記法の指定に対応するかもしれません。これはまだ対応されておらず、仕様書では完全には定義されていません。

形式文法
----

```css
url( <string> <url-modifier>\* )
```

例
-

### background プロパティで使用される URL

```css
.topbanner {
  background: url("topbanner.png") #00d no-repeat fixed;
}
```

### リストの先頭記号として使用される画像を読み込む URL

```css
ul {
  list-style: square url(http://www.example.com/redball.png);
}
```

### content プロパティの使用

#### HTML

```html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
```

#### CSS

```css
li::after {
  content: " - " url(star.gif);
}
```

#### 結果

### データ URL の使用

#### HTML

```html
<div class="background"></div>
```

#### CSS
```

.background {
  height: 100vh;
}
```

```css
.background {
  background: yellow;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3Cpath d='M10 30h60' stroke='red' stroke-width='5'/%3E%3C/svg%3E");
}
```

#### 結果

### フィルターでの使用

URL がフィルターへのパスとして使用される場合、 URL は以下のどちらかでなければなりません。

1. SVG ファイルへのパスに、追加されるフィルターの ID が付いたもの。
2. SVG がページ内にある場合は、フィルターの ID。

```css
.blur {
  filter: url(my-file.svg#svg-blur); /\* フィルターとして使用する SVG ファイルの URL \*/
}

.inline-blur {
  filter: url(#svg-blur); /\* HTML ページに埋め込まれた SVG の ID \*/
}
```

仕様書
---

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

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

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

関連情報
----

* `<gradient>`
* `element()`
* `image()`
* `image-set()`
* `cross-fade()`


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

<hue>
=====

 The **`<hue>`** は CSS のデータ型で、色の色相角を表します。
 これは、色相を 1 つの値として受け入れる色関数、具体的には `hsl()` で使用します、 hwb()`](/ja/docs/Web/CSS/color_value/hwb)、[`lch()`](/ja/docs/Web/CSS/color_value/lch)、[`oklch()` 関数記法で使用されます。

![sRGB 色相環](/ja/docs/Web/CSS/hue/color_wheel.svg)

上の色相環は sRGB 色空間におけるすべての角度の色相を表示させています。具体的な例では、赤は `0deg`、黄は `60deg`、ライムは `120deg`、シアンは `180deg`、青は `240deg`、マゼンタは `300deg` です。

**メモ:** 具体的な色相に対応する角度は色空間によって異なります。例えば、 sRGB の緑の色相角は、 sRGB 色空間では `120deg` ですが、 CIELAB 色空間では `134.39deg` です。

以下の表は、 sRGB （`hsl()` および `hwb()`）、 CIELAB （`lch()` で用いる）、 Oklab （`oklch()`）の色空間での主な色を示します。

|  | 0° | 60° | 120° | 180° | 240° | 300° |
| --- | --- | --- | --- | --- | --- | --- |
| sRGB |  |  |  |  |  |  |
| CIELAB |  |  |  |  |  |  |
| Oklab |  |  |  |  |  |  |

構文
--

`<hue>` は `<angle>` または `<number>` のどちらかになります。

### 値

`<angle>`

`deg`、`grad`、`rad`、`turn` をそれぞれ使用して、度、グラジアン、ラジアン、回転で表される角度。

`<number>`

色相角の度数を表す実数。

`<angle>` は周期的なので、 `<hue>` は範囲 `[0deg, 360deg)` に正規化されます。 `480deg` は `120deg` と同じ、 `-120deg` は `240deg` と同じ、 `-1turn` は `1turn` と同じ、といった具合に暗黙のうちに折り返されます。

### 補間

`<hue>` 値は `<angle>` 値として補間され、既定では `shorter` となります。色関連の CSS 関数の中には、`<hue-interpolation-method>` 成分によってこれを上書きできるものもあります。

### 形式文法
```

<hue> =
  <number>  |
  <angle>

```

例
-

### スライダーを使用して色の色相を変更

以下の例は、 `hsl()` 関数記法の `hue` 値を色に変更したときの効果を示しています。

#### HTML

```html
<input type="range" min="0" max="360" value="0" id="hue-slider" />
<p>色相: <span id="hue-value">0deg</span></p>
<div id="box"></div>
```

#### CSS
```

div {
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 1px solid black;
}
p {
  font-family: sans-serif;
}
span {
  font-family: monospace;
  background: rgb(0 0 0 / 0.1);
  padding: 3px;
}
#hue-slider {
  width: 90%;
}
```

```css
#box {
  background-color: hsl(0 100% 50%);
}
```

#### JavaScript

```js
const hue = document.querySelector("#hue-slider");
const box = document.querySelector("#box");
hue.addEventListener("input", () => {
  box.style.backgroundColor = `hsl(${hue.value} 100% 50%)`;
  document.querySelector("#hue-value").textContent = `${hue.value}deg`;
});
```

#### 結果

### さまざまな色空間における赤の色相の近似値

 次の例は、異なる色空間で同じような赤色を示しています。
 `lch()` と `oklch()` 関数の値は読みやすいように丸めてあります。

#### HTML

```html
<div data-color="hsl-red">hsl()</div>
<div data-color="hwb-red">hwb()</div>
<div data-color="lch-red">lch()</div>
<div data-color="oklch-red">oklch()</div>
```

#### CSS

```css
[data-color="hsl-red"] {
  /\* hsl(<hue> <saturation> <lightness>) \*/
  background-color: hsl(0 100% 50%);
}
[data-color="hwb-red"] {
  /\* hwb(<hue> <whiteness> <blackness>) \*/
  background-color: hwb(0 0% 0%);
}
[data-color="lch-red"] {
  /\* lch(<lightness> <chroma> <hue>) \*/
  background-color: lch(50 150 40);
}
[data-color="oklch-red"] {
  /\* oklch(<lightness> <chroma> <hue>) \*/
  background-color: oklch(0.6 0.4 20);
}
```

```
div {
  font-family: monospace;
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 1px solid black;
  display: inline-block;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Color Module Level 4 # typedef-hue |

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

### css.types.color.hsl

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

### css.types.color.hwb

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

### css.types.color.lch

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

### css.types.color.oklch

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

関連情報
----

* `<color>`
* `<hue-interpolation-method>`


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

border-block
============

The **`border-block`** は CSS のプロパティで、論理的なブロック方向のそれぞれの境界プロパティをスタイルシートの 1 ヶ所で設定する一括指定プロパティです。

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

`border-block` は `border-block-width`, `border-block-style`, `border-block-color` のうちの1つ以上の値を、インライン方向の先頭側と末尾側の両方に対して一度に設定するために使用することができます。割り当て先の物理的な境界は、要素の書字方向によって決まります。 `border-top` と `border-bottom`、または `border-right` と `border-left` のどちらかの組み合わせに対して、 `writing-mode`, `direction`, `text-orientation` に設定された値に応じて対応づけられます。

他の方向の境界については、 `border-inline` によって、 `border-inline-start` と `border-inline-end` の両方を設定することができます。

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

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

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

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

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

### 値

`border-block` は以下の値のうちの 1 つ以上を任意の順序で指定します。

`<'border-width'>`

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

`<'border-style'>`

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

`<'color'>`

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

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `border-block-width`: `medium`
* `border-block-style`: `none`
* `border-block-color`: `currentcolor`
 |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `border-block-width`: 絶対的な長さ、境界スタイルが `none` または `hidden` であれば `0`
* `border-block-style`: 指定通り
* `border-block-color`: 色の計算値
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `border-block-width`: 計算値の型による
* `border-block-style`: 離散値
* `border-block-color`: 計算値の型による
 |

形式文法
----
```

border-block =
  <'border-block-start'>

```

例
-

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

#### HTML

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

#### CSS

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

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

#### 結果

仕様書
---

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

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

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

関連情報
----

* このプロパティは物理的な境界プロパティである `border-top`, `border-right`, `border-bottom`, `border-left` の何れかに対応づけられます。
* `writing-mode`, `direction`, `text-orientation`


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

:focus-visible
==============

Baseline 2022
-------------

Newly availableSince March 2022, 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
**`:focus-visible`** 擬似クラスは、要素が `:focus` 擬似クラスに一致している時で、ユーザーエージェントが要素にフォーカスを明示するべきであると推測的に判断した場合に適用されます (多くのブラウザーではこの場合、既定で「フォーカスリング」を表示します)。

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

このセレクターは、ユーザーの入力方法（マウスなのかキーボードなのか）によって異なるフォーカス表示を提供したい場合に便利です。

構文
--

```css
:focus-visible {
  /\* ... \*/
}
```

:focus と :focus-visible
-----------------------

もともと、ユーザーエージェント CSS は `:focus` 擬似クラスのみに基づいてフォーカススタイルを設定し、フォーカスされた要素のほとんどをフォーカスリングの輪郭線でスタイル設定していました。こにより、すべてのリンクやボタンを含むすべての要素が、フォーカスされたときにフォーカスリングが適用されることになり、多くの人が醜いと感じました。見た目が悪いので、一部の作者はユーザーエージェントの輪郭線のフォーカススタイルを除去しました。フォーカススタイルの変更はユーザビリティに悪影響を及ぼし、フォーカススタイルが除去されると、目の見えるユーザーにとってキーボードナビゲーションが利用できなくなります。

ブラウザーは、フォーカスがあるときに各要素の周囲に（「フォーカスリング」を描画するなどして）フォーカスを目に見える形で示さなくなりました。その代わりに、ユーザーにとって最も有益な場合にのみフォーカスインジケーターを提供するために、様々な発見的手法を使用しています。例えば、ポインティングデバイスを使用してボタンがクリックされた場合、一般的にフォーカスは視覚的な表示されませんが、ユーザー入力が必要なテキストボックスにフォーカスがある場合、フォーカスが表示されます。ユーザーがキーボードを使ってページを操作しているときや、スクリプトを使ってフォーカスを管理しているときには、常にフォーカススタイルが要求されますが、ユーザーがどこにフォーカスを置いているかを知っているとき、例えばマウスや指などのポインティングデバイスを使用して要素に物理的にフォーカスを設定するときには、その要素がユーザーの注意を引き続ける必要がない限り、フォーカススタイルは要求されません。

`focus` 擬似クラスは、常に現在フォーカスされている要素に一致します。 `focus-visible` 擬似クラスもフォーカスされた要素に一致しますが、ユーザーが現在どこにフォーカスがあるのかを知る必要がある場合にのみ一致します。 `focus-visible` 擬似クラスは、必要なときにフォーカスされた要素に一致するので、（`:focus` 擬似クラスの代わりに）`:focus-visible` を使用することで、フォーカスインジケータが現れるタイミングを変更することなく、フォーカスインジケータの外観を変更することができます。

`:focus` 擬似クラスを使用すると、常に現在フォーカスされている要素を対象とします。この意味は、ユーザーがポインティングデバイスを使用すると、フォーカスされた要素の周囲に目に見えるフォーカスリングが現れることを意味します。 `focus-visible` 擬似クラスは、ユーザーエージェントの選択的なフォーカス表示の動作を尊重しつつ、フォーカス表示のカスタマイズを可能にします。

例
-

### :focus と :focus-visible の比較

この例では 3 組のコントロールを表示しています。それぞれのペアは `text` 入力とボタンで構成されています。

* 最初のペアは、フォーカス状態のカスタムスタイルを追加せず、 既定の場合を示しています。
* 2 つ目のペアは `:focus` 擬似クラスを使用してスタイルを追加します。
* 3 つ目のペアは、`:focus-visible` 擬似クラスを使用してスタイルを追加します。

```html
<input value="既定のスタイル" /><br />
<button>既定のスタイル</button><br />

<input class="focus-only" type="text" value=":focus" /><br />
<button class="focus-only">:focus</button><br />

<input class="focus-visible-only" type="text" value=":focus-visible" /><br />
<button class="focus-visible-only">:focus-visible</button>
```

```css
input,
button {
  margin: 10px;
}

.focus-only:focus {
  outline: 2px solid black;
}

.focus-visible-only:focus-visible {
  outline: 4px dashed darkorange;
}
```

各要素を順番にクリックしていくと、フォーカスリングのスタイル設定に `:focus` を使用した場合、ユーザーがボタンをクリックすると UA がフォーカスリングを描画することがわかります。しかし、フォーカスリングのスタイル設定に `:focus-visible` を用いた場合は、既定値と同様にユーザーがボタンをクリックしても UA はフォーカスリングを描画しません。

各要素をタブで見ていくと、既定、`:focus`、`:focus-visible`の 3 つのケースすべてで、ユーザーがキーボードでボタンに移動すると、 UA はボタンの周りにフォーカスリングを描画することがわかります。

これは、 `:focus-visible` によって、デザイナーがフォーカスリングをいつ示すべきかを決定する際に、ブラウザーのロジックに従うことができることを示しています。

### :focus の代替の適用

もしコードを `:focus-visible` に対応していない古いブラウザーで動作させる必要がある場合は、`@supports` で `:focus-visible` の対応を調べ、同じフォーカススタイル設定を `:focus` ルールの中で繰り返してください。なお、 `:focus` に何も指定しなくても、古いブラウザーでは単にネイティブの輪郭線が表示されます。

```html
<button class="button with-fallback" type="button">代替のあるボタン</button>
<button class="button without-fallback" type="button">代替のないボタン</button>
```

```css
.button {
  margin: 10px;
  border: 2px solid darkgray;
  border-radius: 4px;
}

.button:focus-visible {
  /\* :focus-visible に対応している場合、フォーカスを描画 \*/
  outline: 3px solid deepskyblue;
  outline-offset: 3px;
}

@supports not selector(:focus-visible) {
  .button.with-fallback:focus {
    /\* :focus-visible に対応していないブラウザー向けの代替 \*/
    outline: 3px solid deepskyblue;
    outline-offset: 3px;
  }
}
```

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

### 弱視

視覚的なフォーカスインジケーターが、弱視の人々からも見えるように確認してください。これは外光が明るい場所（太陽の下の屋外など）で画面を使用するすべての人にも利益になります。 WCAG 2.1 SC 1.4.11 Non-Text Contrast は、視覚的なフォーカスインジケーターを少なくとも 3:1 にすることを要求しています。

* アクセシブルな視覚的フォーカスインジケーター: Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators
### 認知障碍

複数の入力形式を混在させている場合、フォーカスインジケーターが表示されたり消えたりする理由は明らかではないかもしれません。認知機能に不安のあるユーザーや、技術的な知識が乏しいユーザーにとって、対話的要素の動作が一貫していないと、混乱を招く可能性があります。

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # the-focus-visible-pseudo |

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

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

関連情報
----

* `:focus`
* `:focus-within`
* `:focus-visible` のポリフィル


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

isolation
=========

CSS の **`isolation`** プロパティは、要素が新しい重ね合わせコンテキストを生成する必要があるかどうかを定義します。

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

このプロパティは `mix-blend-mode` との組み合わせで使用すると特に有用です。

構文
--

```css
/\* キーワード値 \*/
isolation: auto;
isolation: isolate;

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

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

### 値

`auto`

何れかのプロパティが必要な要素に適用された場合にのみ、新しい重ね合わせコンテキストが作成されます。

`isolate`

新しい重ね合わせコンテキストが必ず作成されます。

Formal definition
-----------------

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | すべての要素。 SVG では、コンテナー要素、グラフィック要素、グラフィック参照要素に適用されます。 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | アニメーション不可 |

Formal syntax
-------------
```

isolation =
  <isolation-mode>

<isolation-mode> =
  auto     |
  isolate

```

例
-

### 要素で強制的に新しい重ね合わせコンテキストを生成

#### HTML

```html
<div id="b" class="a">
  <div id="d">
    <div class="a c">auto</div>
  </div>
  <div id="e">
    <div class="a c">isolate</div>
  </div>
</div>
```

#### CSS

```css
.a {
  background-color: rgb(0, 255, 0);
}
#b {
  width: 200px;
  height: 210px;
}
.c {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  padding: 2px;
  mix-blend-mode: difference;
}
#d {
  isolation: auto;
}
#e {
  isolation: isolate;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| Compositing and Blending Level 2 # isolation |

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

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

関連情報
----

* `<blend-mode>`
* `mix-blend-mode`, `background-blend-mode`


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

:checked
========

**`:checked`** は CSS の擬似クラスセレクターで、**ラジオボタン** (`<input type="radio">`)、 **チェックボックス** (`<input type="checkbox">`)、 **オプションボタン** (`<select>` の中の `<option>`) 要素がチェックされていたり `on` の状態にあったりすることを表します。

```css
/\* すべての選択中のラジオボタン、チェックボックス、オプションボタン \*/
:checked {
  margin-left: 25px;
  border: 1px solid blue;
}
```

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

ユーザーは要素をチェック/選択することでこの状態にすることができ、要素のチェックや選択を外すとこの状態から外れます。

**メモ:** ブラウザーは `<option>` を置換要素として扱うことが多いので、 `:checked` 擬似クラスでスタイルが適用される部分の大きさはブラウザーによって異なります。

構文
--
```

:checked
```

例
-

### 基本的な例

#### HTML

```html
<div>
  <input type="radio" name="my-input" id="yes" />
  <label for="yes">Yes</label>

  <input type="radio" name="my-input" id="no" />
  <label for="no">No</label>
</div>

<div>
  <input type="checkbox" name="my-checkbox" id="opt-in" />
  <label for="opt-in">Check me!</label>
</div>

<select name="my-select" id="fruit">
  <option value="opt1">Apples</option>
  <option value="opt2">Grapes</option>
  <option value="opt3">Pears</option>
</select>
```

#### CSS

```css
div,
select {
  margin: 8px;
}

/\* チェックが入った入力のラベル \*/
input:checked + label {
  color: red;
}

/\* チェックが入ったラジオボタン \*/
input[type="radio"]:checked {
  box-shadow: 0 0 0 3px orange;
}

/\* チェックが入ったチェックボックス \*/
input[type="checkbox"]:checked {
  box-shadow: 0 0 0 3px hotpink;
}

/\* 選択されたオプション \*/
option:checked {
  box-shadow: 0 0 0 3px lime;
  color: red;
}
```

#### 結果

### 非表示のチェックボックスの要素を切り替え

この例では、 `:checked` 擬似クラスを利用して、ユーザーにチェックボックスの状態に基づいたコンテンツの切り替えができるようにします。 JavaScript はまったく使っていません。

#### HTML

```html
<input type="checkbox" id="expand-toggle" />

<table>
  <thead>
    <tr>
      <th>Column #1</th>
      <th>Column #2</th>
      <th>Column #3</th>
    </tr>
  </thead>
  <tbody>
    <tr class="expandable">
      <td>[more text]</td>
      <td>[more text]</td>
      <td>[more text]</td>
    </tr>
    <tr>
      <td>[cell text]</td>
      <td>[cell text]</td>
      <td>[cell text]</td>
    </tr>
    <tr>
      <td>[cell text]</td>
      <td>[cell text]</td>
      <td>[cell text]</td>
    </tr>
    <tr class="expandable">
      <td>[more text]</td>
      <td>[more text]</td>
      <td>[more text]</td>
    </tr>
    <tr class="expandable">
      <td>[more text]</td>
      <td>[more text]</td>
      <td>[more text]</td>
    </tr>
  </tbody>
</table>

<label for="expand-toggle" id="expand-btn">Toggle hidden rows</label>
```

#### CSS

```css
/\* トグルチェックボックスを隠す \*/
#expand-toggle {
  display: none;
}

/\* 開く要素は既定で隠す \*/
.expandable {
  visibility: collapse;
  background: #ddd;
}

/\* ボタンにスタイルを適用 \*/
#expand-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 5px 11px;
  background-color: #ff7;
  border: 1px solid;
  border-radius: 3px;
}

/\* チェックボックスをチェックしたときに隠しコンテンツを表示 \*/
#expand-toggle:checked ~ \* .expandable {
  visibility: visible;
}

/\* チェックボックスがチェックされていたらボタンにスタイルを適用 \*/
#expand-toggle:checked ~ #expand-btn {
  background-color: #ccc;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # selector-checked |
| Selectors Level 4 # checked |

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

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

関連情報
----

* ウェブフォーム — ユーザーデータでの作業
* ウェブフォームの整形
* 関連する HTML 要素: `<input type="checkbox">`, `<input type="radio">`, `<select>`, `<option>`
* 置換要素


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

top
===

**`top`** は CSS のプロパティで、位置指定要素の垂直位置の決定に関与します。位置指定されていない要素には効果はありません。

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

`top` の効果は、要素がどの様に配置されているか（つまり、 `position` プロパティの値）によって変わります。

* `position` が `absolute` または `fixed` に設定されている場合、 `top` プロパティは要素の上辺と包含ブロックの上辺との間の距離を指定します。
* `position` が `relative` に設定されている場合、 `top` プロパティは要素の上辺が通常位置から下方へ移動する量を指定します。
* `position` が `sticky` に設定されている場合、 `top` プロパティは粘着制約矩形の計算に使用されます。
* `position` が `static` に設定されている場合、 `top` プロパティは*効果がありません*。

`top` と `bottom` の両方が指定されている場合は、 3 つの異なる場合があります。

* `position` が `absolute` または `fixed` に設定されており、 `height` が指定されていない（`auto` または `100%` である）場合、 `top` および `bottom` の両方が尊重されます。
* `position` が `relative` に設定されているか、 `height` が指定されている場合、 `top` プロパティが優先され、 `bottom` プロパティは無視されます。
* `position` が `sticky` に設定されている場合、 `top` と `bottom` の両方の値が考慮されます。つまり、粘着位置指定要素は、要素の位置ボックスがそのブロック内に収まっている限り、これら 2 つのプロパティの値に基づいて、そのブロック内で上下に移動できる可能性があります。
構文
--

```css
/\* <length> 値 \*/
top: 3px;
top: 2.4em;

/\* 包含ブロックの高さに対する <percentage> \*/
top: 10%;

/\* キーワード値 \*/
top: auto;

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

### 値

`<length>`

負、null、または正の `<length>` で、以下のものを表します。

* *絶対位置指定要素*の場合は、包含ブロックの上辺までの距離。
* *相対位置指定要素*の場合は、通常の位置からの下方向への移動量。

`<percentage>`

包含ブロックの高さに対する `<percentage>` です。

`auto`

以下のように指定します。

* *絶対位置指定要素*では、要素の位置は `bottom` プロパティに基づいて決まり、 `height: auto` は内容物の高さに基づいて決まります。また、 `bottom` も `auto` であった場合は、要素は垂直方向には静的要素が配置される場合と同様に配置されます。
* *相対位置指定要素*では、通常の位置から要素までの距離は `bottom` に基づきます。また、 `bottom` も `auto` であった場合は、垂直方向には移動しません。

`inherit`

値が親要素（包含ブロックとは限りません）の計算値と同じであることを示すキーワードです。そして、この計算値は `<length>`, `<percentage>`, または `auto` キーワードと同様に扱われます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | 位置指定要素 |
| 継承 | なし |
| パーセント値 | 包含ブロックの高さに対する相対値 |
| 計算値 | 長さで指定されると相当する絶対的な長さ、パーセント値として指定されると指定値、それ以外では `auto` |
| アニメーションの種類 | length または パーセント値, calc(); |

形式文法
----
```

top =
  auto                 |
  <length-percentage>

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

```

例
-

### 位置指定要素を上から 10% に設定

```css
body {
  background: beige;
}

div {
  position: absolute;
  top: 10%;
  right: 40%;
  bottom: 20%;
  left: 15%;
  background: gold;
  border: 1px solid blue;
}
```

```html
<div>この内容の寸法は、辺の位置によって決まります。</div>
```

仕様書
---

| Specification |
| --- |
| CSS Positioned Layout Module Level 3 # insets |

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

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

関連情報
----

* `inset`: 関連するすべてのプロパティである `top`, `bottom`, `left`, `right` の一括指定
* 対応する論理的プロパティ: `inset-block-start`, `inset-block-end`, `inset-inline-start`, `inset-inline-end` および一括指定の `inset-block` と `inset-inline`
* `position`


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

scroll-padding-inline-start
===========================

`scroll-padding-inline-start` プロパティは、スクロールポートの*最適表示領域*のインライン方向における先頭側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。

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

構文
--

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

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

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

### 値

`<length-percentage>`

スクロールポートのインライン方向の先頭側からの内側のオフセットで、有効な長さまたはパーセント値です。

`auto`

オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | スクロールコンテナー |
| 継承 | なし |
| パーセント値 | スクロールコンテナーのスクロールポートに対する相対値 |
| 計算値 | 指定通り |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

scroll-padding-inline-start =
  auto                       |
  <length-percentage [0,∞]>

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

```

仕様書
---

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

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

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

関連情報
----

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


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

overflow-inline
===============

**`overflow-inline`** は CSS のプロパティで、内容がボックスのインライン方向の先頭および末尾方向の端をはみ出した時に、どのように表示するかを設定します。これは表示なし、スクロールバー付き、内容をはみ出させるの何れかになります。

**メモ:** `overflow-inline` プロパティは、文書の書字方向に応じて、 `overflow-y` または `overflow-x` に対応します。

構文
--

```css
/\* キーワード値 \*/
overflow-inline: visible;
overflow-inline: hidden;
overflow-inline: scroll;
overflow-inline: auto;

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

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

### 値

`visible`

内容は切り取られず、パディングボックスのインライン方向の先頭と末尾の辺よりも外側に表示される可能性があります。

`hidden`

インライン方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。スクロールバーは表示されません。

`scroll`

インライン方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。ブラウザーは内容が実際に切り取られるかどうかにかかわらず、スクロールバーを表示します。 (これは内容が変化したときにスクロールバーが表示されたり非表示になったりすることを防ぎます。) プリンターははみ出す内容を印刷するかもしれません。

`auto`

ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は `visible` と同じように表示されますが、新しいブロック整形コンテキストを生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | ブロックコンテナー, フレックスコンテナー, グリッドコンテナー |
| 継承 | なし |
| 計算値 | 指定通り、ただし `overflow-x` と `overflow-y` のどちらかが `visible` でも clip でもない場合は、 `visible`/`clip` はそれぞれ `auto`/`hidden` と計算される |
| アニメーションの種類 | 離散値 |

形式文法
----
```

overflow-inline =
  visible  |
  hidden   |
  clip     |
  scroll   |
  auto

```

例
-

### インライン方向のはみ出し動作の設定

#### HTML

```html
<ul>
  <li>
    <code>overflow-inline:hidden</code> — ボックスの外側のテキストを隠す
    <div id="div1">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-inline:scroll</code> — 常にスクロールバーを表示
    <div id="div2">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-inline:visible</code> —
    必要に応じてテキストをボックスの外に表示
    <div id="div3">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-inline:auto</code> — 多くのブラウザーでは
    <code>scroll</code> と同じ
    <div id="div4">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>
</ul>
```

#### CSS

```css
#div1,
#div2,
#div3,
#div4 {
  border: 1px solid black;
  width: 250px;
  margin-bottom: 12px;
}

#div1 {
  overflow-inline: hidden;
}
#div2 {
  overflow-inline: scroll;
}
#div3 {
  overflow-inline: visible;
}
#div4 {
  overflow-inline: auto;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* 関連する CSS プロパティ: `text-overflow`, `white-space`, `overflow`, `overflow-block`, `overflow-x`, `overflow-y`, `clip`, `display`
* CSS 論理的プロパティ
* 書字方向


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

hanging-punctuation
===================

**`hanging-punctuation`** は CSS のプロパティで、区切り記号をテキストの行頭や行末にぶら下げるべきかどうかを指定します。ぶら下げられる区切り記号は行ボックスの外側に配置されれることがあります。

```css
/\* キーワード値 \*/
hanging-punctuation: none;
hanging-punctuation: first;
hanging-punctuation: last;
hanging-punctuation: force-end;
hanging-punctuation: allow-end;

/\* 2 つのキーワード \*/
hanging-punctuation: first force-end;
hanging-punctuation: first allow-end;
hanging-punctuation: first last;
hanging-punctuation: last force-end;
hanging-punctuation: last allow-end;

/\* 3 つのキーワード \*/
hanging-punctuation: first force-end last;
hanging-punctuation: first allow-end last;

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

構文
--

`hanging-punctuation` プロパティは 1 つ、2 つ、3 つの値で指定することができます。

* **値 1 つ**の構文は、下記の値リストのキーワード値のいずれか 1 つを使用します。
* **値 2 つ**の構文は、次のうち 1 つを使用します。
    + `first` と併せて、`last`, `allow-end`, `force-end` のいずれか
    + `last` と併せて、`first`, `allow-end`, `force-end` のいずれか
* **値 3 つ**の構文は、次のうち 1 つを使用します。
    + `first`, `allow-end`, `last`
    + `first`, `force-end`, `last`
### 値

`none`

文字のぶら下げを行いません。

`first`

要素の最初の書式設定された行頭にある、開き括弧または引用符をぶら下げます。

`last`

要素の最後の書式設定された行末にある、閉じ括弧または引用符をぶら下げます。

`force-end`

行末の句読点をぶら下げます。

`allow-end`

句読点をぶら下げないと行末が揃わない場合に、句読点をぶら下げます。

公式定義
----

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

形式文法
----
```

hanging-punctuation =
  none                                            |
  [ first || [ force-end | allow-end ] || last ]

```

例
-

### 開始と終了の引用符をぶら下げるよう設定

#### HTML

```html
<p>
  “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim
  nunc mauris, et sollicitudin est scelerisque sed. Praesent laoreet tortor
  massa, sit amet vulputate nulla pharetra ut.”
</p>
```

#### CSS

```css
p {
  hanging-punctuation: first last;
  margin: 0.5rem;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Text Module Level 3 # hanging-punctuation-property |

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

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

* CSS Tricks: Hanging punctuation


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

:fullscreen
===========

**`:fullscreen`** は CSS の 擬似クラスで、現在全画面モードにあるすべての要素に一致します。複数の要素が全画面モードにある場合は、それらすべてを選択します。

構文
--
```

:fullscreen
```

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

`:fullscreen` 擬似クラスにより、要素が全画面と従来の表示の間を行き来した場合に、コンテンツの寸法、スタイル、レイアウトをスタイルシートで自動的に調整することができます。

例
-

この例では、文書が全画面モードであるかどうかによってボタンの色が変化します。これは JavaScript でスタイルの変更を適用せずに行われます。

### HTML

ページの HTML は次のようなものです。

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

<p>
  This demo uses the <code>:fullscreen</code> pseudo-class to automatically
  change the style of a button used to toggle full-screen mode on and off,
  entirely using CSS.
</p>

<button id="fs-toggle">Toggle Fullscreen</button>
```

`"fs-toggle"` の ID を持った `<button>` が、文書が全画面モードであるかどうかによって淡い赤と淡い緑の間で変化します。

### CSS

魔法は CSS で起こります。ここでは二つの規則があります。最初のものは要素が全画面状態でない場合に「Toggle Full-screen Mode」ボタンの色の背景を設定します。鍵になるのは `:not(:fullscreen)` を使用していることで、 `:fullscreen` 擬似クラスが適用されない要素を探します。

```css
#fs-toggle:not(:fullscreen) {
  background-color: #afa;
}
```

文書が全画面モードになっている場合、代わりに次の CSS が適用され、背景色に淡い赤の影を設定します。

```css
#fs-toggle:fullscreen {
  background-color: #faa;
}
```

仕様書
---

| Specification |
| --- |
| Fullscreen API Standard # :fullscreen-pseudo-class |

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

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

関連情報
----

* Fullscreen API
* Fullscreen API のガイド
* `:not`
* `::backdrop`
* DOM API: `Element.requestFullscreen()`, `Document.exitFullscreen()`, `Document.fullscreenElement`
* `allowfullscreen` 属性


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

mask-size
=========

**`mask-size`** は CSS のプロパティで、マスク画像の寸法を指定します。内在的な比率を維持するために、画像のサイズは完全または部分的に制約されることがあります。

**メモ:** `mask-size` の後に要素に `mask` 一括指定プロパティが指定され、このプロパティの値が設定されていない場合、このプロパティの値は、一括指定プロパティによって初期値にリセットされます。

構文
--

```css
/\* キーワード構文 \*/
mask-size: cover;
mask-size: contain;

/\* 値 1 つの構文 \*/
/\* 画像の幅 (高さは 'auto' に設定) \*/
mask-size: 50%;
mask-size: 3em;
mask-size: 12px;
mask-size: auto;

/\* 値 2 つの構文 \*/
/\* 1 つ目の値: 画像の幅、2 つ目の値: 高さ \*/
mask-size: 50% auto;
mask-size: 3em 25%;
mask-size: auto 6px;
mask-size: auto auto;

/\* 複数の値 \*/
/\* これを mask-size: auto auto と混同しないでください \*/
mask-size: auto, auto;
mask-size: 50%, 25%, 25%;
mask-size: 6px, auto, contain;

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

1 つ以上の `<bg-size>` 値で、カンマ区切りです。

`<bg-size>` 次の 3 つの方法のうち 1 つで指定することができます。

* `contain` キーワードの使用
* `cover` キーワードの使用
* 幅の高さの値の使用

幅と高さを使って大きさを指定するには、1 つまたは 2 つの値を指定します。

* 値が 1 つしか与えられていない場合は、幅が設定され、高さは `auto` に設定されます。
* 2つの値が与えられた場合、1 つ目の値で幅を、2 つ目の値で高さを設定します。

それぞれの値は `<length>`、`<percentage>`、`auto` の何れかです。

### 値

`<length>`

``<length>`` の値は、マスク画像の対応する軸を、指定された長さに拡大縮小します。負の長さは許可されていません。

`<percentage>`

`<percentage>` の値は、マスク画像の対応する軸を、`mask-origin` の値で決定されるマスク配置領域に対する指定されたパーセント値に拡大縮小します。マスク配置領域は、既定では、ボックスのコンテンツとそのパディングを含む領域ですが、コンテンツのみの領域や、境界、パディング、コンテンツを含む領域に変更することもできます。負のパーセント値は許されません。

`auto`

マスク画像の対応する軸を、固有の比率を維持するように拡大縮小するキーワードです。

`contain`

画像を可能な限り大きく拡大し、画像のアスペクト比を維持する (画像がゆがまない) ようにするキーワードです。画像はコンテナー内で*レターボックス*になります。画像は、`mask-position` のような他のプロパティで上書きされない限り、自動的に中央に配置されます。

`cover`

`contain` の逆バージョンのキーワードです。画像を可能な限り大きく拡大縮小し、画像のアスペクト比を維持する (画像がゆがまない) ようにします。画像は、コンテナーの幅または高さ全体を「カバー」します。画像とコンテナーの寸法が異なる場合、画像は左右または上下のいずれかで切り取られます。

可能な値の解釈は、画像の固有の寸法 (幅と高さ) と固有の比率 (幅と高さの比率) に依存します。ビットマップ画像は、常に固有の寸法と固有の比率を持っています。ベクトル画像は、両方の固有の寸法を持つことがあり、したがって固有の比率も持つことがあります。また、固有の寸法を持たない場合もありますが、いずれの場合も固有の比率を持つ場合と持たない場合があります。グラデーションは、固有の寸法や固有の比率を持たない画像として扱われます。

そして、マスク画像の描画の大きさは、以下のように計算されます。

`mask-size` の両方の要素が指定され、`auto` ではない場合

マスク画像は指定された寸法で描画されます。

`mask-size` が `contain` または `cover` であった場合

画像は、マスク配置領域に含まれる、またはマスク配置領域を覆う最大の寸法で、その固有の縦横比を維持して描画されます。画像が固有の縦横比を持たない場合は、マスク配置領域の大きさで描画されます。

`mask-size` が `auto` または `auto auto` であった場合

画像に両方の固有の寸法がある場合は、その寸法で描画されます。固有の寸法がなく、固有の比率もない場合は、マスク配置領域の寸法で描画されます。固有の寸法がなく、縦横比がある場合は、代わりに `contain` が指定されたかのように描画されます。画像が 1 つの固有の寸法と縦横比を持っている場合、その 1 つの寸法と縦横比で決まる寸法で描画されます。画像が 1 つの固有の寸法を持ち、縦横比を持たない場合は、固有の寸法と、マスク配置領域の対応する寸法を使って描画されます。

`mask-size` の一方が `auto` でもう一方が `auto` ではない場合

画像に固有の縦横比がある場合は、一方は指定された長さを使用し、もう一方の長さは指定された長さと指定された長さと固有の縦横比から計算して描画します。画像に固有の縦横比がない場合，その長さには指定された長さを使用します。もう一方の長さには、画像に対応する固有の長さがあればそれを使用します。そのような固有の寸法がない場合は、マスク配置領域の対応する寸法を使用します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | すべての要素。 SVG の場合は `defs` 要素やすべてのグラフィック要素を除いたコンテナー要素に適用される |
| 継承 | なし |
| 計算値 | 指定通り。ただし相対的な長さはは絶対的な長さに変換される |
| アニメーションの種類 | 反復可能リスト |

形式文法
----
```

mask-size =
  <bg-size>#

<bg-size> =
  [ <length-percentage [0,∞]> | auto ]{1,2}  |
  cover                                      |
  contain

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

```

例
-

### マスクの大きさをパーセント値で設定

仕様書
---

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

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

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

関連情報
----

* Clipping and Masking in CSS


CSS チュートリアル - CSS: カスケーディングスタイルシート

CSS チュートリアル
===========

 CSS を学ぶのは大変な作業かもしれません。
 そんなあなたのために、私たちは CSS に関する**チュートリアル**を多数用意しています。
 完全な初心者を対象としたものもあれば、経験豊富なユーザーが使えるような複雑な機能を紹介したものもあります。

 このページでは、簡単な説明とともに、すべてのリストを掲載しています。
 レベルに最も適したものを選べるように、複雑さによってグループ分けされています。

初心者レベルの CSS チュートリアル
-------------------

CSS の基本

 このガイドは全くの初心者を対象としています。 CSS を 1 行も書いたことがない？- そんなあなたのためのガイドです。
 この本では、この言語の基本的な概念を説明し、基本的なスタイルシートの書き方を解説しています。

複数の背景画像の利用

背景はスタイル設定の基本です。 CSS では、各ボックスに複数の背景を設定することができます。このチュートリアルでは、背景がどのように作用し、どのように素敵な効果を得るかを説明します。

背景画像の拡大縮小

 CSS では、要素の背景として使用する画像のサイズを変更することができます。
 このチュートリアルでは、単純な方法でこれを実現する方法を記述しています。

メディアクエリーの使用

 画面の大きさ、タッチ画面や印刷物など、現在では機器の種類は実にさまざまです。
 メディアクエリーは、あらゆる場所を最高の品質でレンダリングするウェブサイトを構築するための基本的な構成要素です。

CSS の z-index を理解する

 ボックスの重ね合わせを制御することは、ウェブ開発者がとてもすばやく必要とする基本的な機能です。
 それほど難しくはありませんが、 CSS の基本的な知識が要求されます。

中級者レベルの CSS チュートリアル
-------------------

 CSS 2 (Level 1) のリリース後、 CSS に新しい機能が追加されました。
 その中には、奇抜なものもあれば、かなり自己完結的なものもあります。
 基本的な概念の知識があれば、誰でも簡単に使用することができます。

CSS カウンタースタイル (en-US)

CSS でアイテムやページをカウントするのは簡単な作業です。 `counter-reset`、`counter-increment`、`counters()`、`counter()` の使用方法を学びましょう。

CSS アニメーション

CSSアニメーションでは、スタイル設定をキーフレームとして定義し、その間をアニメーションで遷移させることができます。

CSS トランジション

CSS トランジションを使用すると、複数のスタイル設定間のアニメーションを定義し、この移行の方法を制御することができます。

CSS 座標変換

座標変換は、要素の座標空間を変更することによって、要素の位置を変更することができます。 2D または 3D 空間でそれらを平行移動、回転、変形することができます。

CSS グラデーション

 グラデーションとは、ある色から別の色へと滑らかに変化する画像のことです。
 CSS で使用できるグラデーションには、直線的か放射状か、繰り返しがあるかないかなど、いくつかの種類があります。
 このチュートリアルでは、それらを使用する方法について記述します。

上級レベルの CSS チュートリアル
------------------

 CSS も新しい機能を取得し、複雑なレイアウトを作成することができるようになりました。
 このようなレイアウトを実現する最も簡単な方法ですが、あまり経験のない人が使用するには複雑です。

CSS 段組みレイアウト

 CSS3 では新しいレイアウトが導入され、要素の中に複数の段組みを簡単に定義することができるようになりました。
 段組みのテキストは画面のような機器ではそれほど一般的ではありませんが、これは出力されるページやインデックスでは具体的な有益な機能です。

CSS flexible boxes layouts

 この新しいレイアウトは、ボックスに柔軟性を与え、サイズをスムーズに変更できるようにします。
 複雑なインターフェイスを記述するための強力な方法です。


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

:active
=======

**`:active`** は CSS の擬似クラスで、ユーザーによってアクティブ化されている要素 (ボタンなど) を表します。マウスを使用する場合は、「アクティブ化」とはふつう、主ボタンを押し下げたときに始まります。

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

`:active` 擬似クラスは、よく `<a>` および `<button>` 要素で使われます。この擬似クラスで他のよくあるターゲットとしては、アクティブ化される要素を*含む*要素や、関連付けられた `<label>` 要素を通してアクティブ化されるフォーム要素です。

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

**メモ:** 複数ボタンのマウスを使うシステムでは、 CSS 3 は `:active` 擬似クラスは主ボタン、つまり右手用のマウスではふつう最も左のボタンにのみ適用しなければならないと定義しています。

構文
--

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

例
-

### アクティブなリンク

#### HTML

```html
<p>
  この段落にはリンクが含まれています。
  <a href="#">このリンクはクリックすると赤色になります。</a>
  この段落は段落やリンクをクリックすると灰色になります。
</p>
```

#### CSS

```css
/\* 未訪問リンク \*/
a:link {
  color: blue;
}
/\* 訪問済みリンク \*/
a:visited {
  color: purple;
}
/\* ホバー時 \*/
a:hover {
  background: yellow;
}
/\* アクティブなリンク \*/
a:active {
  color: red;
}

/\* アクティブな段落 \*/
p:active {
  background: #eee;
}
```

#### 結果

### フォーム要素をアクティブ化

#### HTML

```html
<form>
  <label for="my-button">ボタン: </label>
  <button id="my-button" type="button">
    ここかラベルをクリックしてみてください。
  </button>
</form>
```

#### CSS

```css
form :active {
  color: red;
}

form button {
  background: white;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* リンク関連の擬似クラス: `:link`, `:visited`, `:hover`


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

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

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

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

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

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

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

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

構文
--

### 値

`<length-percentage>`

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

公式定義
----

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

形式文法
----
```

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

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

```

例
-

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

#### HTML

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

#### CSS

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

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

#### 結果

仕様書
---

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

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

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

関連情報
----

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


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

backface-visibility
===================

**`backface-visibility`** は CSS のプロパティで、要素がユーザーに対して裏側を向いたときに、裏面を可視にするかどうかを設定します。

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

要素の裏面は表面の鏡像です。裏面は二次元では可視ではありませんが、三次元空間で要素に回転変換が行われたときに、背面を見ることができます。 (このプロパティは、視点を持たない二次元の座標変換では効果がありません。)

構文
--

```css
/\* キーワード値 \*/
backface-visibility: visible;
backface-visibility: hidden;

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

`backface-visibility` プロパティは、以下に挙げたキーワードのうちの一つで指定します。

### 値

`visible`

ユーザーに対して裏を向いたとき、背面が可視になります。

`hidden`

背面が非表示になり、要素がユーザーに対して反対を向いたときに不可視にするのに便利です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `visible` |
| 適用対象 | 座標変換可能要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

backface-visibility =
  visible  |
  hidden

```

例
-

### 透明な面と不透明な面を持った立方体

この例は、透明な面と不透明な面を持つ立方体を表示します。

#### HTML

```html
<table>
  <tr>
    <th><code>backface-visibility: visible;</code></th>
    <th><code>backface-visibility: hidden;</code></th>
  </tr>
  <tr>
    <td>
      <div class="container">
        <div class="cube showbf">
          <div class="face front">1</div>
          <div class="face back">2</div>
          <div class="face right">3</div>
          <div class="face left">4</div>
          <div class="face top">5</div>
          <div class="face bottom">6</div>
        </div>
      </div>
      <p>
        すべての面が透明であり、裏面 (2, 4, 5) が表面 (1, 3, 6)
        を通して表示されます。
      </p>
    </td>
    <td>
      <div class="container">
        <div class="cube hidebf">
          <div class="face front">1</div>
          <div class="face back">2</div>
          <div class="face right">3</div>
          <div class="face left">4</div>
          <div class="face top">5</div>
          <div class="face bottom">6</div>
        </div>
      </div>
      <p>背後の3面 (2, 4, 5) は非表示です。</p>
    </td>
  </tr>
</table>
```

#### CSS

```css
/\* 「立方体」の 3 つの背面を表示または非表示にするクラス \*/
.showbf div {
  backface-visibility: visible;
}

.hidebf div {
  backface-visibility: hidden;
}

/\* コンテナ div、立方体 div、面の一般的な設定 \*/
.container {
  width: 150px;
  height: 150px;
  margin: 75px 0 0 75px;
  border: none;
}

.cube {
  width: 100%;
  height: 100%;
  perspective: 550px;
  perspective-origin: 150% 150%;
  transform-style: preserve-3d;
}

.face {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  border: none;
  line-height: 100px;
  font-family: sans-serif;
  font-size: 60px;
  color: white;
  text-align: center;
}

/\* 方向に基づいてそれぞれの面を設定 \*/
.front {
  background: rgba(0, 0, 0, 0.3);
  transform: translateZ(50px);
}

.back {
  background: rgba(0, 255, 0, 1);
  color: black;
  transform: rotateY(180deg) translateZ(50px);
}

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

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

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

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

/\* テーブルの見栄えをよくする \*/
th,
p,
td {
  background-color: #eeeeee;
  margin: 0px;
  padding: 6px;
  font-family: sans-serif;
  text-align: left;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 2 # backface-visibility-property |

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

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

関連情報
----

* CSS 座標変換の使用


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

orphans
=======

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

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

/\* Global values \*/
orphans: inherit;
orphans: initial;
orphans: revert;
orphans: unset;
```

組版において、オルファン (*orphan*) とは段落の最初の行がページの末尾に単独で現れることです。 (段落は次のページへ続きます。)

構文
--

### 値

`<integer>`

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

公式定義
----

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

形式文法
----
```

orphans =
  <integer [1,∞]>

```

例
-

### オルファンを 3 行の大きさに設定

#### HTML

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

#### CSS

```css
div {
  background-color: #8cffa0;
  height: 150px;
  columns: 3;
  orphans: 3;
}

p {
  background-color: #8ca0ff;
}

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

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Fragmentation Module Level 3 # widows-orphans |

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

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

関連情報
----

* `widows`
* ページ化メディア


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

text-decoration-style
=====================

CSS の **`text-decoration-style`** プロパティは、 `text-decoration-line` で指定された線の種類を設定します。線の種類はすべての線に適用され `text-decoration-line` で定義された線ごとに異なる種類を定義する方法はありません。

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

文字列を貫く線で文字列が削除されたことを示すように、指定された装飾が特定の意味を持つ場合は、 `<del>` や `<s>` といった HTML タグでその意味を示すことが推奨されます。ブラウザーはスタイルを無効にする場合がありますが、そのようなときでも意味論上の意味が失われません。

線の装飾に関する複数のプロパティを一度に設定するときは、代わりに一括指定の `text-decoration` プロパティを使用したほうが便利かもしれません。

構文
--

```css
/\* キーワード値 \*/
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

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

### 値

solid

単独線を描画します。

double

二重線を描画します。

dotted

点線を描画します。

dashed

破線を描画します。

wavy

波線を描画します。

-moz-none
Non-standard

線を描画しません。代わりに `text-decoration-line``: none` を使用してください。

公式定義
----

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

形式文法
----
```

text-decoration-style =
  solid   |
  double  |
  dotted  |
  dashed  |
  wavy

```

例
-

### 波線の下線を設定

```css
.example {
  -moz-text-decoration-line: underline;
  -moz-text-decoration-style: wavy;
  -moz-text-decoration-color: red;
  -webkit-text-decoration-line: underline;
  -webkit-text-decoration-style: wavy;
  -webkit-text-decoration-color: red;
}
```

#### CSS

```css
.wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}
```

#### HTML

```html
<p class="wavy">このテキストには付近に赤い波線があります。</p>
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-decoration-style-property |

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

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

関連情報
----

* 複数の行内装飾プロパティを一度に設定するときは、代わりに一括指定の `text-decoration` プロパティを使った方が便利かもしれません。


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

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

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

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

構文
--

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

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

### 値

`<length>`

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

公式定義
----

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

形式文法
----
```

scroll-margin-inline-start =
  <length>

```

例
-

### 簡単なデモ

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

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

#### HTML

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

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

#### CSS

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

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

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

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

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

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

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

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

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

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

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

#### 結果

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

仕様書
---

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

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

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

関連情報
----

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


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

row-gap (grid-row-gap)
======================

**`row-gap`** は CSS のプロパティで、要素のグリッド行の間のすき間 (溝) の寸法を定義します。

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

構文
--

```css
/\* <length> 値 \*/
row-gap: 20px;
row-gap: 1em;
row-gap: 3vmin;
row-gap: 0.5cm;

/\* <percentage> 値 \*/
row-gap: 10%;

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

### 値

`<length-percentage>`

行を隔てる溝の幅です。 `<percentage>` 値は要素の寸法に対する相対値です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `normal` |
| 適用対象 | 段組み要素、フレックスコンテナー、グリッドコンテナー |
| 継承 | なし |
| パーセント値 | コンテンツ領域の対応する寸法に対する相対値 |
| 計算値 | 指定通りで、 <length> は絶対長になり、 normal の計算値は段組み要素を除き 0 になる |
| アニメーションの種類 | length または パーセント値, calc(); |

形式文法
----
```

row-gap =
  normal                     |
  <length-percentage [0,∞]>

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

```

例
-

### Flex layout

#### HTML

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

#### CSS

```css
#flexbox {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  row-gap: 20px;
}

#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: 1 1 auto;
  width: 100px;
  height: 50px;
}
```

#### 結果

### Grid layout

#### HTML

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

#### CSS

```css
#grid {
  display: grid;
  height: 200px;
  grid-template-columns: 200px;
  grid-template-rows: repeat(3, 1fr);
  row-gap: 20px;
}

#grid > div {
  border: 1px solid green;
  background-color: lime;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # column-row-gap |

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

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

関連情報
----

* 関連する CSS プロパティ: `column-gap`, `gap`
* グリッドレイアウトガイド: グリッドレイアウトの基本概念 - 溝


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

border-top-width
================

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

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

構文
--

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

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

/\* グローバルキーワード \*/
border-top-width: inherit;
border-top-width: initial;
border-top-width: revert;
border-top-width: unset;
```

### 値

`<line-width>`

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

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

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

公式定義
----

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

形式文法
----
```

border-top-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-top-width: thick;
}
div:nth-child(2) {
  border-top-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.

関連情報
----

* 他の border-width 関連 CSS プロパティ: `border-left-width`, `border-right-width`, `border-bottom-width`, `border-width`
* 他の border-top 関連 CSS プロパティ: `border`, `border-top`, `border-top-style`, `border-top-color`


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

border-inline-width
===================

**`border-inline-width`** は CSS のプロパティで、要素の論理的なインライン方向の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応づけられます。これは `border-top-width` と `border-bottom-width`、または `border-left-width` と `border-right-width` の組み合わせのどちらかに対応し、どちらに対応するかは `writing-mode`、`direction`、`text-orientation` で定義された値によって決まります。

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

他の方向の境界の幅については `border-block-width` で設定することができ、これは `border-block-start-width` および `border-block-end-width` を設定することができます。

構文
--

```css
/\* <'border-width'> 値 \*/
border-inline-width: 5px 10px;
border-inline-width: 5px;
border-inline-width: thick;

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

### 値

`<'border-width'>`

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

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `medium` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| パーセント値 | 包含ブロックの論理的な幅 |
| 計算値 | 絶対的な長さ、境界スタイルが `none` または `hidden` であれば `0` |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

border-inline-width =
  <'border-top-width'>{1,2}

```

例
-

### 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: 1px solid blue;
  border-inline-width: 5px 10px;
}
```

仕様書
---

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-border-inline-width |

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

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

関連情報
----

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


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

@media
======

**`@media`** は CSS のアットルールで、1 つまたは複数のメディアクエリーの結果に基づいて、スタイルシートの一部を適用するために使用することができます。これによってメディアクエリーを指定し、そのメディアクエリーがコンテンツの使用される端末に一致する場合にのみ、文書に CSS のブロックを適用することができます。

**メモ:** JavaScript では、 `@media` を使用して作成されたルールは、 CSS オブジェクトモデルの `CSSMediaRule` インターフェイスによってアクセスすることができます。

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

構文
--

`@media` アットルールは、コードの最上位に配置したり、他の条件付きグループアットルールの中に入れ子にして配置したりすることができます。

```css
/\* コードの最上位 \*/
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/\* 他の条件付きアットルールの中にネスト \*/
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}
```

メディアクエリーの構文について詳しくは、メディアクエリーの使用を参照してください。

解説
--

### メディア種別

*メディア種別*は機器の全般的な分類を記述します。
 `not` または `only` 論理演算子を使用する場合を除き、メディア種別は省略可能であり、暗黙で `all` と見なされます。

`all`

すべての機器に適合します。

`print`

ページのある資料や、画面に印刷プレビューモードで表示されている文書向けのものです。（これらの形式に特有の整形上の問題については、ページ付きメディアを参照してください。）

`screen`

主に画面向けのものです。

`speech`

音声合成向けのものです。

**メモ:** CSS2.1 および Media Queries 3 では、その他のメディア種別 (`tty`, `tv`, `projection`, `handheld`, `braille`, `embossed`, `aural`) が定義されていましたが、これらは Media Queries 4 で非推奨となったため、使用すべきではありません。
 `aural` タイプは `speech` に置き換えられましたが、これも同様です。

### メディア特性

*メディア特性*は、ユーザーエージェント、出力装置、環境の特定の特徴を記述します。
 メディア特性式は、その存在や値を調べるもので、完全に任意です。それぞれのメディア特性式は、括弧で囲む必要があります。

`any-hover`

 入力メカニズムで、ユーザーが要素上でのホバーを使用することができるものがあるか。
 Media Queries Level 4 で追加。

`any-pointer`

 入力メカニズムにポインティングデバイスがあるか、もしそうであればどれだけ正確なものであるか。
 Media Queries Level 4 で追加。

`aspect-ratio`

ビューポートの幅対高さのアスペクト比。

`color`

出力機器の色コンポーネントあたりの色のビット数、または端末がカラーでなければゼロ。

`color-gamut`

 ユーザーエージェントおよび出力機器が対応しているおよその色の範囲。
 Media Queries Level 4 で追加。

`color-index`

出力機器の色参照表の項目数、または端末がそのような表を使用していないのであればゼロ。

`device-aspect-ratio`
非推奨

 出力機器の幅対高さのアスペクト比。
 Media Queries Level 4 で非推奨。

`device-height`
非推奨

 出力機器のレンダリング面の高さ。
 Media Queries Level 4 で非推奨。

`device-width`
非推奨

出力機器のレンダリング面の幅。 Media Queries Level 4 で非推奨。

`display-mode`

 ウェブアプリのマニフェストの `display` メンバーで指定されているアプリケーションの表示モード。
 Web App Manifest 仕様書で定義。

`forced-colors`

 ユーザーエージェントがカラーパレットを制限しているかどうかを検出。
 Media Queries Level 5 で追加。

`grid`

出力機器はグリッドとビットマップ画面のどちらを使用するか。

`height`

ビューポートの高さ。

`hover`

 主要な入力メカニズムで、ユーザーが要素上でのホバーを使用することができるか。
 Media Queries Level 4 で追加。

`inverted-colors`

 ユーザーエージェントまたはその下の OS が色を反転しているか。
 Media Queries Level 5 で追加。

`monochrome`

出力機器のモノクロフレームバッファーにおけるピクセルあたりのビット数、または端末がモノクロでなければゼロ。

`orientation`

ビューポートの向き。

`overflow-block`

 ビューポートをブロック軸方向にあふれたコンテンツを出力機器がどのように扱うか。
 Media Queries Level 4 で追加。

`overflow-inline`

 ビューポートをインライン軸方向にあふれたコンテンツがスクロールできるか。
 Media Queries Level 4 で追加。

`pointer`

 主要な入力メカニズムがポインティングデバイスであるか、もしそうであればどれだけ正確なものであるか。
 Media Queries Level 4 で追加。

`prefers-color-scheme`

 ユーザーが明るいまたは暗い色遣いを望んでいるかどうかを検出。
 Media Queries Level 5 で追加。

`prefers-contrast`

 ユーザーがシステムに隣り合う色のコントラスト量を増加または減少させるよう要求したかどうかを検出。
 Media Queries Level 5 で追加。

`prefers-reduced-motion`

 ユーザーがページであまり動きを望まないかどうか。
 Media Queries Level 5 で追加。

`resolution`

出力機器のピクセル密度。

`scripting`

 出力機器のスキャン処理方式。
 Media Queries Level 5. で追加。

`update`

 どれだけの頻度で出力機器がコンテンツの表示を変更できるか。
 Media Queries Level 4 で追加。

`width`

スクロールバーの幅を含むビューポートの幅。

### 論理演算子

*論理演算子* `not`, `and`, `only` を使うと、複雑なメディアクエリーを構成することができます。
 また、複数のメディアクエリーをカンマで区切って 1 つのルールにまとめることもできます。

`and`

 複数のメディア特性を 1 つのメディアクエリーに結合する際に使用されます。クエリーが `true` になるためには、結合させた各機能が `true` を返すことが必要です。
 また、メディア特性とメディア種別を結合する際にも使用されます。

`not`

 メディアクエリーを反転するために使用され、クエリーが `false` を返す場合に `true` を返します。
 カンマで区切られたクエリーのリストの中にある場合は、適用された特定のクエリーのみを反転します。
 `not` 演算子を使用する場合は、メディア種別*も*指定しなければなりません。

**メモ:** レベル 3 では、個々のメディア特性式を否定するために `not` キーワードを使用することはできず、メディアクエリー全体のみを否定することしかできません。

`only`

 クエリー全体が一致する場合にのみスタイルを適用します。
 これは、古いブラウザーが選択したスタイルを適用できないようにするのに便利です。
 `only` を使用しない場合、古いブラウザーは `screen and (max-width: 500px)` というクエリーを `screen` と解釈し、クエリーの残りの部分を無視して、すべての画面にそのスタイルを適用してしまいます。
 `only` 演算子を使用する場合は、メディア種別*も*指定しなければなりません。

`,` (カンマ)

 カンマは、複数のメディアクエリーを 1 つのルールにまとめるために使用されます。
 カンマで区切られたリストの各クエリーは、他のクエリーとは別に扱われます。
 したがって、リスト内のクエリーのいずれかが `true` であれば、メディア文全体が `true` を返すことになります。
 言い換えれば、リストは論理的な `or` 演算子のように動作します．

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

サイトの文字の大きさを調整している人に合わせられるようには、メディアクエリーで `<length>` が必要な時には `em` を使用してください。

`em` および `px` はどちらも有効な単位ですが、 `em` はユーザーがブラウザーのテキストの寸法を変更した場合によりうまく動作します。

また、ユーザーの使い勝手を向上させるために Level 4 のメディアクエリーを使用することを検討してください。例えば、 `prefers-reduced-motion` はユーザーがシステムにアニメーションや動きの量を最小化するよう要求していることを検出します。

セキュリティ
------

メディアクエリーはユーザーが作業する端末の能力—およびその先にある、特性および設計—を調べる関係上、端末を識別する「指紋」を構築するために不正利用されたり、ユーザーにとって望ましくない観点のものに分類されるものに利用されたりする可能性があります。

この可能性のため、ブラウザーは返値がコンピューターを正確に識別するために使用することを防ぐために、何らかの方法で返値を偽造することがあります。ブラウザーは、この分野で他の手段を提供する場合もあります。例えば、 Firefox で「フィンガープリントの採取」をブロックしている場合、多くのメディアクエリーは実際の端末の状態を表す値ではなく既定値を報告します。

形式文法
----
```

@media =
  @media <media-query-list> { <rule-list> }

```

例
-

### print および screen メディア種別の検査

```css
@media print {
  body {
    font-size: 10pt;
  }
}

@media screen {
  body {
    font-size: 13px;
  }
}

@media screen, print {
  body {
    line-height: 1.2;
  }
}

@media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi) {
  body {
    line-height: 1.4;
  }
}
```

Media Queries Level 4 では、範囲を受け付ける特性を検査する際に、以下のようなより簡潔にメディアクエリーを記述できる新しい範囲の構文が導入されました。

```css
@media (height > 600px) {
  body {
    line-height: 1.4;
  }
}

@media (400px <= width <= 700px) {
  body {
    line-height: 1.4;
  }
}
```

他の例については、メディアクエリーの使用をご覧ください。

仕様書
---

| Specification |
| --- |
| Media Queries Level 4 # media-descriptor-table |
| CSS Conditional Rules Module Level 3 # at-media |

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

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

関連情報
----

* メディアクエリーの使用
* JavaScript では `@media` は CSS オブジェクトモデルの `CSSMediaRule` インターフェイスを通じてアクセスすることができます。
* Mozilla 拡張メディア特性
* WebKit 拡張メディア特性


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

width
=====

**`width`** は CSS のプロパティで、要素の幅を設定します。既定では、このプロパティはコンテンツ領域の幅を設定しますが、 `box-sizing` を `border-box` に設定すると、境界領域の幅を設定します。

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

`width` に指定された値は、その値が `min-width` および `max-width` で定義された値内にある限り、コンテンツ領域に適用されます。

* `width` の値が `min-width` の値より小さい場合、`min-width` は `width` をオーバーライドします。
* `width` の値が `max-width` の値より大きい場合、`max-width` は `width` をオーバーライドします。
構文
--

```css
/\* <length> 値 \*/
width: 300px;
width: 25em;

/\* <percentage> 値 \*/
width: 75%;

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

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

### 値

`<length>`

絶対的な値で幅を定義します。

`<percentage>`

親となる包含ブロックの幅に対するパーセント値で定義します。

`auto`

指定された要素の幅をブラウザーが計算して決めます。

`max-content`

望ましい固有の幅です。

`min-content`

最小の固有の幅です。

`fit-content`

利用可能なスペースを使用しますが、max-content、つまり `min(max-content, max(min-content, stretch))` を超えません。

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

利用可能な空間に対して fit-content 式を使用し、指定された引数に置き換えられます。すなわち `min(max-content, max(min-content, <length-percentage>))` です。

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

ページを拡大してテキストサイズを大きくしたときに、 `width` を設定した要素が切り捨てられたり、他のコンテンツが見えなくなったりしないようにしてください。

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

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | 置換要素でないインライン要素、テーブルの行、行グループを除くすべての要素 |
| 継承 | なし |
| パーセント値 | 包含ブロックの幅に対する相対値 |
| 計算値 | パーセント値、 `auto`、絶対的な長さのいずれか |
| アニメーションの種類 | length または パーセント値, calc(); |

形式文法
----
```

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

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

```

例
-

### 既定の幅

```css
p.goldie {
  background: gold;
}
```

```html
<p class="goldie">The Mozilla community produces a lot of great software.</p>
```

### ピクセル数と em 単位

```css
.px\_length {
  width: 200px;
  background-color: red;
  color: white;
  border: 1px solid black;
}

.em\_length {
  width: 20em;
  background-color: white;
  color: red;
  border: 1px solid black;
}
```

```html
<div class="px\_length">Width measured in px</div>
<div class="em\_length">Width measured in em</div>
```

### Percentage の例

```css
.percent {
  width: 20%;
  background-color: silver;
  border: 1px solid red;
}
```

```html
<div class="percent">Width in percentage</div>
```

### max-content の例

```css
p.maxgreen {
  background: lightgreen;
  width: intrinsic; /\* Safari/WebKit uses a non-standard name \*/
  width: -moz-max-content; /\* Firefox/Gecko \*/
  width: -webkit-max-content; /\* Chrome \*/
  width: max-content;
}
```

```html
<p class="maxgreen">The Mozilla community produces a lot of great software.</p>
```

### min-content の例

```css
p.minblue {
  background: lightblue;
  width: -moz-min-content; /\* Firefox \*/
  width: -webkit-min-content; /\* Chrome \*/
  width: min-content;
}
```

```html
<p class="minblue">The Mozilla community produces a lot of great software.</p>
```

仕様書
---

| 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.

関連情報
----

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


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

list-style-position
===================

**`list-style-position`** は CSS のプロパティで、リスト項目に対する `::marker` の位置を指定します。

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

多くの場合、一括指定の `list-style` を使ったほうが便利です。

**メモ:** このプロパティはリスト項目に対して適用されます。つまり、 ``display`: list-item;` が指定された要素です。既定では、 `<li>` 要素が該当します。このプロパティは継承されるので、親要素 (通常は `<ol>` や `<ul>`) に設定することで、すべてのリスト項目に適用することができます。

なお、 `list-style-position: inside` を指定したリスト要素の中で最初にブロック要素が配置された場合、その動作はブラウザーによって異なります。 Chrome と Safari では、この要素はマーカーボックスと同じ行に配置されますが、 Firefox、 Internet Explorer、 Opera では次の行に配置されます。 詳細については Firefox バグ 36854 をご覧ください。

構文
--

```css
/\* キーワード値 \*/
list-style-position: inside;
list-style-position: outside;

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

`list-style-position` プロパティには、下記の値の中の一つが指定されます。

### 値

`inside`

`::marker` はリスト項目の最初の要素として配置されます。

`outside`

`::marker` は主要ブロックボックスの外に配置されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `outside` |
| 適用対象 |  リスト項目 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

list-style-position =
  inside   |
  outside

```

例
-

### リスト項目の位置の設定

#### HTML

```html
<ul class="inside">
  List 1
  <li>List Item 1-1</li>
  <li>List Item 1-2</li>
  <li>List Item 1-3</li>
  <li>List Item 1-4</li>
</ul>
<ul class="outside">
  List 2
  <li>List Item 2-1</li>
  <li>List Item 2-2</li>
  <li>List Item 2-3</li>
  <li>List Item 2-4</li>
</ul>
<ul class="inside-img">
  List 3
  <li>List Item 3-1</li>
  <li>List Item 3-2</li>
  <li>List Item 3-3</li>
  <li>List Item 3-4</li>
</ul>
```

#### CSS

```css
.inside {
  list-style-position: inside;
  list-style-type: square;
}

.outside {
  list-style-position: outside;
  list-style-type: circle;
}

.inside-img {
  list-style-position: inside;
  list-style-image: url("starsolid.gif");
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # list-style-position-property |

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

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

関連情報
----

* `list-style`, `list-style-type`, `list-style-image`


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

gap (grid-gap)
==============

**`gap`** は CSS のプロパティで、行や列の間のすき間 (溝) を定義します。これは `row-gap` および `column-gap` の一括指定です。

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

構文
--

```css
/\* 単一の <length> 値 \*/
gap: 20px;
gap: 1em;
gap: 3vmin;
gap: 0.5cm;

/\* 単一の <percentage> 値 \*/
gap: 16%;
gap: 100%;

/\* 2 つの <length> 値 \*/
gap: 20px 10px;
gap: 1em 0.5em;
gap: 3vmin 2vmax;
gap: 0.5cm 2mm;

/\* 1 つまたは 2 つの <percentage> 値 \*/
gap: 16% 100%;
gap: 21px 82%;

/\* calc() 値 \*/
gap: calc(10% + 20px);
gap: calc(20px + 10%) calc(10% - 5px);

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

このプロパティは `<'row-gap'>` の値と、任意で `<'column-gap'>` の値を続けて指定します。 `<'column-gap'>` が省略された場合、 `<'row-gap'>` と同じ値が設定されます。

`<'row-gap'>` および `<'column-gap'>` はそれぞれ、 `<length>` または `<percentage>` で指定します。

### 値

`<length>`

グリッド線を隔てる溝の幅です。

`<percentage>`

要素の寸法に対する、グリッド線を隔てる溝の幅です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `row-gap`: `normal`
* `column-gap`: `normal`
 |
| 適用対象 | 段組み要素、フレックスコンテナー、グリッドコンテナー |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `row-gap`: 指定通りで、 <length> は絶対長になり、 normal の計算値は段組み要素を除き 0 になる
* `column-gap`: 指定通りで、 <length> は絶対長になり、 normal の計算値は段組み要素を除き 0 になる
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `row-gap`: length または パーセント値, calc();
* `column-gap`: length または パーセント値, calc();
 |

形式文法
----
```

gap =
  <'row-gap'> <'column-gap'>?

```

例
-

### フレックスレイアウト

#### HTML

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

#### CSS

```css
#flexbox {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  gap: 20px 5px;
}

#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: 1 1 auto;
  width: 100px;
  height: 50px;
}
```

#### 結果

### グリッドレイアウト

#### HTML

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

#### CSS

```css
#grid {
  display: grid;
  height: 200px;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 20px 5px;
}

#grid > div {
  border: 1px solid green;
  background-color: lime;
}
```

#### 結果

### 段組みレイアウト

#### HTML

```html
<p class="content-box">
  This is some multi-column text with a 40px column gap created with the CSS
  <code>gap</code> property. Don't you think that's fun and exciting? I sure do!
</p>
```

#### CSS

```css
.content-box {
  column-count: 3;
  gap: 40px;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # gap-shorthand |

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

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

関連情報
----

* 関連する CSS プロパティ: `row-gap`, `column-gap`
* グリッドレイアウトガイド: グリッドレイアウトの基本概念 - 溝


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

list-style-image
================

**`list-style-image`** は CSS のプロパティで、リスト項目のマーカーとして使われる画像を設定します。

ふつうは一括指定の `list-style` を使ったほうが便利です。

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

**メモ:** このプロパティはリスト項目、つまり、``display`: list-item;` が指定された要素に対して適用されます。既定では、 `<li>` 要素を含みます。このプロパティは継承されるので、親要素 (通常は `<ol>` や `<ul>`) に設定することで、すべてのリスト項目に適用することができます。

構文
--

```css
/\* キーワード値 \*/
list-style-image: none;

/\* <url> 値 \*/
list-style-image: url("starsolid.gif");

/\* 有効な画像値 \*/
list-style-image: linear-gradient(to left bottom, red, blue);

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

### 値

`<image>`

マーカーとして使う画像の場所です。

`none`

画像をマーカーとして使用しないことを指定します。この値が設定された場合、代わりに `list-style-type` で定義されたマーカーが使われます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 |  リスト項目 |
| 継承 | あり |
| 計算値 | The keyword `none` or the computed <image> |
| アニメーションの種類 | 離散値 |

形式文法
----
```

list-style-image =
  <image>  |
  none

<image> =
  <url>       |
  <gradient>

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

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

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

```

例
-

### url 値の使用

#### HTML

```html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
```

#### CSS

```css
ul {
  list-style-image: url("starsolid.gif");
}
```

#### 結果

### グラデーションの使用

#### HTML

```html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
```

#### CSS

```css
ul {
  font-size: 200%;
  list-style-image: linear-gradient(to left bottom, red, blue);
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # image-markers |

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

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

関連情報
----

* `list-style`, `list-style-type`, `list-style-position`
* `url()` 関数