recursal/MDN huggingface dataset:
container
=========

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

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

* Learn more
* See full compatibility
* Report feedback
**container** は CSS の一括指定プロパティで、この要素をクエリーコンテナーとして確立し、コンテナークエリーで使用される格納コンテキストの名前を指定します。

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

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

* `container-name`
* `container-type`
構文
--


```css
/\* <container-name> \*/
container: my-layout;

/\* <container-name> / <container-type> \*/
container: my-layout / size;

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

### 値

`<container-name>`

 格納コンテキストの大文字小文字を区別した名前です。
 構文の詳細は、 `container-name` プロパティのページにあります。


`<container-type>`

 格納コンテキストの種類です。
 構文の詳細は、 `container-type` プロパティのページにあります。


公式定義
----

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

形式文法
----
```

container =   
  <'container-name'> [ / <'container-type'> ]?    
  
```

例
-

### インラインサイズ抑制の確立

以下の HTML の例があったとします。これは画像、タイトル、いくつかのテキストによるカード部品です。


```html
<div class="post">
  <div class="card">
    <h2>カードのタイトル</h2>
    <p>カードのコンテンツ</p>
  </div>
</div>
```


コンテナーコンテキストを作成する明示的な方法は、 `container-name` をオプションとして `container-type` を宣言することです。


```css
.post {
  container-type: inline-size;
  container-name: sidebar;
}
```


`container` の一括指定は、これを単一の宣言で定義しやすくするためのものです。


```css
.post {
  container: sidebar / inline-size;
}
```


そして、 `@container` アットルールを用いて、そのコンテナーの名前をターゲットにすることができます。


```css
@container sidebar (min-width: 400px) {
  /\* <stylesheet> \*/
}
```

仕様書
---

| Specification |
| --- |
| CSS Containment Module Level 3 # container-shorthand |

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

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

関連情報
----

* CSS コンテナークエリー
* `@container` アットルール
* CSS `contain` 一括指定プロパティ
* CSS `container-type` プロパティ
* CSS `container-name` プロパティ
* CSS `content-visibility` プロパティ
counter-set
===========

**`counter-set`** は CSS のプロパティで、CSS カウンターを指定された値に設定します。これは既存のカウンターの値を操作し、その要素に指定された名前のカウンターがまだ存在しない場合は新しいカウンターを生成します。

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

**メモ:** カウンターの値は `counter-increment` プロパティを使用して増減させることができます。

構文
--


```css
/\* "my-counter" を 0 に設定 \*/
counter-set: my-counter;

/\* "my-counter" を -1 に設定 \*/
counter-set: my-counter -1;

/\* "counter1" を 1 に、 "counter2" を 4 に設定 \*/
counter-set: counter1 1 counter2 4;

/\* より詳細度が低いルールで設定されたカウンターをすべて消去 \*/
counter-set: none;

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


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

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

`<custom-ident>`

設定するカウンターの名前です。

`<integer>`

この要素が現れるたびにカウンターに設定する値です。指定されなかった場合の既定値は `0` です。現在、この要素に指定された名前のカウンターが存在しない場合、この要素は指定された名前の新しいカウンターを、開始値 0 で指定します（ただし、その後で直ちに異なる値に設定されたり増加したりする可能性があります）。

`none`

カウンターの設定は行われません。これはより詳細度の低い規則によって定義された `counter-set` を上書きするために使用することができます。

公式定義
----

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

形式文法
----
```

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

例
-

### 名前付きカウンターの設定


```css
h1 {
  counter-set: chapter section 1 page;
  /\* chapter および page のカウンターを 0 に、
 section カウンターを 1 に設定 \*/
}
```

仕様書
---

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

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

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

関連情報
----

* CSS カウンターの使用
* `counter-increment`
* `counter-reset`
* `@counter-style`
* `counter()` および `counters()` 関数
* `content` プロパティ
::-moz-range-track
==================

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

**`::-moz-range-track`** は CSS の擬似要素で、 Mozilla 拡張であり、 `type="range"` の `<input>` でインジケーターがスライドする*トラック* (すなわち、溝) を表します。

**メモ:** `::-moz-range-track` を `<input type="range">` 以外で使用すると、何にも一致せず、効果がありません。

構文
--

Error: could not find syntax for this item例
-

### HTML


```html
<input type="range" min="0" max="100" step="5" value="50" />
```

### CSS


```css
input[type="range"]::-moz-range-track {
  background-color: green;
}
```

### 結果

このスタイルを使用するプログレスバーは、次のようになります。

![A range with the track green](/ja/docs/Web/CSS/::-moz-range-track/screen_shot_2015-12-04_at_10.14.34.png)

仕様書
---

標準の一部ではありません。

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

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

関連情報
----

* Gecko で使われる他の range 型の入力の他の部品をスタイル付けする擬似要素:
    + `::-moz-range-thumb` (en-US) は溝をスライドするインジケーターを表します。
    + `::-moz-range-progress` (en-US) はトラックの下の部分を表します。
* 他のブラウザーで使われる同様の擬似要素:
    + `::-webkit-slider-runnable-track` WebKit および Blink (Safari, Chrome, Opera) が対応している擬似要素
    + `::-ms-track` Internet Explorer および Edge が対応している擬似要素
* CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS
* QuirksMode: Styling and scripting sliders
<display-internal>
==================

`table` や `ruby` のような一部のレイアウトモデルでは、複雑な内部構造があり、様々なその子要素や子孫要素が担う様々な役割があります。このページではこれらを「内部の」表示値として定義し、特定のレイアウトモードでのみ意味を持ちます。

構文
--

有効な `<display-internal>` の値は次の通りです。

`table-row-group`

これらの要素は HTML の `<tbody>` 要素のように動作します。

`table-header-group`

これらの要素は HTML の `<thead>` 要素のように動作します。

`table-footer-group`

これらの要素は HTML の `<tfoot>` 要素のように動作します。

`table-row`

これらの要素は HTML の `<tr>` 要素のように動作します。

`table-cell`

これらの要素は HTML の `<td>` 要素のように動作します。

`table-column-group`

これらの要素は HTML の `<colgroup>` 要素のように動作します。

`table-column`

これらの要素は HTML の `<col>` 要素のように動作します。

`table-caption`

これらの要素は HTML の `<caption>` 要素のように動作します。

`ruby-base` 
Experimental

これらの要素は HTML の `<rb>` 要素のように動作します。

`ruby-text` 
Experimental

これらの要素は HTML の `<rt>` 要素のように動作します。

`ruby-base-container` 
Experimental

これらの要素は無名のボックスとして生成された HTML の `<rbc>` 要素のように動作します。

`ruby-text-container` 
Experimental

これらの要素は HTML の `<rtc>` 要素のように動作します。

例
-

### CSS テーブルの例

以下の例は、 CSS テーブルレイアウトを使用した単純なフォームのレイアウトを紹介します。

#### HTML


```html
<main>
  <div>
    <label for="name">Name</label>
    <input type="text" id="name" name="name" />
  </div>
  <div>
    <label for="age">Age</label>
    <input type="text" id="age" name="age" />
  </div>
</main>
```


#### CSS


```css
main {
  display: table;
}

div {
  display: table-row;
}

label,
input {
  display: table-cell;
  margin: 5px;
}
```


#### 結果

仕様書
---

#### No specification found

No specification data found for `css.properties.display.table_values,css.properties.display.ruby_values`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

### 対応している table の値

`table`, `table-cell`, `table-column`, `table-column-group`, `table-footer-group`, `table-header-group`, `table-row`, `table-row-group`

### css.properties.display.table\_values

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

### css.properties.display.ruby\_values

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

### 対応している ruby の値

`ruby`, `ruby-base`, `ruby-base-container`, `ruby-text`, `ruby-text-container`

### css.properties.display.table\_values

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

### css.properties.display.ruby\_values

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

関連情報
----

* `display`
    + `<display-outside>`
    + `<display-inside>`
    + `<display-listitem>`
    + `<display-box>`
    + `<display-legacy>`
font-smooth
===========

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

**`font-smooth`** は CSS のプロパティで、フォントが描画されるときのアンチエイリアスの適用を制御します。

構文
--


```css
/\* キーワード値 \*/
font-smooth: auto;
font-smooth: never;
font-smooth: always;

/\* <length> 値 \*/
font-smooth: 2em;

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


**メモ:** WebKit は同様のプロパティを別な値 **`-webkit-font-smoothing`** として実装しています。これは Mac OS X/macOS でのみ動作します。

* `auto` - ブラウザーの決定に任せる (利用可能であればアンチエイリアスのサブピクセルを使用します。これが既定値)
* `none` - フォントを滑らかにする処理をオフにします。表示されるテキストの辺はギザギザで鮮明になります。
* `antialiased` - サブピクセルではなく、ピクセルレベルでフォントを滑らかにします。暗い背景に明るい文字の場合、サブピクセルレンダリングからアンチエイリアスに切り替えることで、より明るく見えるようになります。
* `subpixel-antialiased` - 多くの非 Retina ディスプレイでは、これが最も鮮明なテキストになります。

**メモ:** Firefox は同様のプロパティを別な値 **`-moz-osx-font-smoothing`** として実装しています。これは Mac OS X/macOS でのみ動作します。

* `auto` - フォントを滑らかにする処理の最適化をブラウザーが選択します。ふつうは `grayscale` です。
* `grayscale` - サブピクセルではなくグレースケールのアンチエイリアスで、テキストを描画します。暗い背景に明るいテキストを表示する際に、サブピクセルレンダリングからアンチエイリアシングに切り替えることで、より明るく見えるようになります。

公式定義
----

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

形式文法
----

Error: could not find syntax for this item例
-

### 基本的な使い方の例

次の例は、macOS でフォントの円滑化をオンにした Safari/Chromium と Firefox に相当するものです。いずれの場合も円滑化されたフォントは、わずかに細くなったように見えるはずです。

macOS システムをお使いでない方のために、スクリーンショットをご紹介します (ライブバージョンは後ほど登場します)。

![](/ja/docs/Web/CSS/font-smooth/smoothing.png)

#### HTML


```html
<p>Without font smoothing</p>

<p class="smoothed">With font smoothing</p>
```


#### CSS


```css
html {
  background-color: black;
  color: white;
  font-size: 3rem;
}

p {
  text-align: center;
}

.smoothed {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
```


#### 結果

仕様書
---

どの仕様書にも定義されていません。

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

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

関連情報
----

* Please Stop "Fixing" Font Smoothing – UsabilityPost
* Laissez-faire font smoothing and anti-aliasing
:invalid
========

**`:invalid`** は CSS の擬似クラスで、 `<input>` 要素や `<form>` 要素のうち内容が検証に失敗したものを表します。


```css
/\* 無効な <input> を選択 \*/
input:invalid {
  background-color: pink;
}
```

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

この擬似クラスは、フィールドのエラーをユーザーに強調表示するのに便利です。

構文
--
```

:invalid
```

例
-

### 要素が検証に成功すると緑色に、失敗すると赤色に着色されるフォーム

### HTML


```html
<form>
  <div class="field">
    <label for="url\_input">URL を入力して下さい:</label>
    <input type="url" id="url\_input" />
  </div>

  <div class="field">
    <label for="email\_input">メールアドレスを入力して下さい:</label>
    <input type="email" id="email\_input" required />
  </div>
</form>
```


#### CSS


```css
label {
  display: block;
  margin: 1px;
  padding: 1px;
}

.field {
  margin: 1px;
  padding: 1px;
}

input:invalid {
  background-color: #ffdddd;
}

form:invalid {
  border: 5px solid #ffdddd;
}

input:valid {
  background-color: #ddffdd;
}

form:valid {
  border: 5px solid #ddffdd;
}

input:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:invalid {
  border-color: #c00000;
}
```

### 結果

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

赤は入力が無効であることを示すためによく使われます。色盲の人によっては、それ以外の色によらない識別方法を伴わないと、入力状態が判別できないことがあります。通常、文字列やアイコンを使用して説明します。

* MDN "WCAG を理解する ― ガイドライン 1.4 の解説"
* Understanding Success Criterion 1.4.1 | W3C Understanding WCAG 2.0
注
-

### ラジオボタン

グループのラジオボタンの 1 つが `required` の場合、 `:invalid` 擬似クラスはグループ内のボタンが 1 つも選択されていない時に選択されます。（グループ化されたラジオボタンは同じ `name` 属性を共有しています。）

### Gecko の既定値

既定で Gecko は `:invalid` 擬似クラスのスタイルを適用しません。しかし、 `:invalid` の場合のサブセットに適用される `:-moz-ui-invalid` (en-US) 擬似クラスにスタイル（`box-shadow` プロパティを用いて赤く「伸びる」スタイル）を適用します。

仕様書
---

| Specification |
| --- |
| HTML Standard # selector-invalid |
| Selectors Level 4 # validity-pseudos |

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

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

関連情報
----

* 検証に関する他の擬似クラス: `:required`, `:optional`, `:valid`
* 関連する Mozilla の擬似クラス: `:user-invalid`, `:-moz-submit-invalid`
* フォームデータの検証
* JavaScript からの validity state へのアクセス
:-moz-last-node
===============

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

**`:-moz-last-node`** は CSS の擬似クラスで、 Mozilla 拡張であり、他の要素の最後の子要素であるあらゆる要素を表します。 `:last-child` とは異なり、最後の子要素の後に（ホワイトスペース以外の）テキストがあると一致しません。

**メモ:** 要素の末尾にあるホワイトスペースは `:-moz-last-node` の決定において無視されます。

構文
--


```css
:-moz-last-node {}
```

例
-

### CSS


```css
span:-moz-last-node {
  background-color: lime;
}
```

### HTML


```html
<p>
  <span>This does not match.</span>
  <span>This matches!</span>
</p>

<p>
  <span>This doesn't match because it's followed by text.</span>
  Blahblah.
</p>
```

### 結果

仕様書
---

どの仕様にも含まれていません。

関連情報
----

* `:-moz-first-node`
* `:last-child`
text-decoration-thickness
=========================

**`text-decoration-thickness`** は CSS のプロパティで、要素内のテキストに用いられる装飾線、例えば取り消し線、下線、上線の太さを設定します。

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

構文
--


```css
/\* 単独のキーワード \*/
text-decoration-thickness: auto;
text-decoration-thickness: from-font;

/\* 長さ \*/
text-decoration-thickness: 0.1em;
text-decoration-thickness: 3px;

/\* パーセント値 \*/
text-decoration-thickness: 10%;

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

### 値

`auto`

ブラウザーがテキスト装飾線の適切な太さを選択します。

`from-font`

フォントファイルに推奨する太さの情報が含まれている場合は、その値を使用します。フォントファイルにこの情報が含まれていない場合は、 `auto` が設定されているのと同様に動作し、ブラウザーが適切な太さを選択します。

`<length>`

テキスト装飾線の太さを `<length>` として指定し、フォントファイルの推奨値やブラウザーの既定値を無視します。

`<percentage>`

テキスト装飾線の太さを現在のフォントの **1em** に対する `<percentage>` で指定します。パーセント値は相対値として継承されるので、フォントが変わるとそれに合わせて変わります。ブラウザーは最小でも 1 デバイスピクセルを使用しなければなりません。このプロパティを適用した場合、フォントの大きさが異なる子要素があっても、適用されたボックス全体で太さが一定になります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | すべての要素。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | なし |
| パーセント値 | 要素自身のフォントサイズに対する相対値 |
| 計算値 | 指定通り |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

text-decoration-thickness =   
  auto                 |  
  from-font            |  
  <length-percentage>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

### 様々な太さ

#### HTML


```html
<p class="thin">赤い 1px の下線を引いたテキストです。</p>
<p class="thick">赤い 5px の下線を引いたテキストです。</p>
<p class="shorthand">これは同等の一括指定を使用しています。</p>
```


#### CSS


```css
.thin {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
  text-decoration-thickness: 1px;
}

.thick {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
  text-decoration-thickness: 5px;
}

.shorthand {
  text-decoration: underline solid red 5px;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Text Decoration Module Level 4 # text-decoration-width-property |

**メモ:** このプロパティは `text-decoration-width` と呼ばれていましたが、 2019 年に `text-decoration-thickness` に更新されました。

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

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

関連情報
----

* `text-decoration`
* `text-underline-offset`
border-inline
=============

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

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

`border-inline` の割り当て先の物理的な境界は、要素の書字方向によって決まります。 `border-top` と `border-bottom`、または `border-right` と `border-left` のどちらかの組み合わせに対して、 `writing-mode`、`direction`、`text-orientation` に設定された値に応じて対応づけられます。

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

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

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

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


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

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

### 値

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

`<'border-width'>`

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

`<'border-style'>`

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

`<'color'>`

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

公式定義
----

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

形式文法
----
```

border-inline =   
  <'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-inline: 5px dashed blue;
}
```


#### 結果

仕様書
---

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

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

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

CSS の **`background-color`** プロパティは、要素の背景色を設定します。

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

構文
--


```css
/\* キーワード値 \*/
background-color: red;
background-color: indigo;

/\* 16 進の値 \*/
background-color: #bbff00; /\* 完全不透過 \*/
background-color: #bf0; /\* 完全不透過の短縮形 \*/
background-color: #11ffee00; /\* 完全透過 \*/
background-color: #1fe0; /\* 完全透過の短縮形 \*/
background-color: #11ffeeff; /\* 完全不透過 \*/
background-color: #1fef; /\* 完全不透過の短縮形 \*/

/\* RGB 値 \*/
background-color: rgb(255, 255, 128); /\* 不透過 \*/
background-color: rgba(117, 190, 218, 0.5); /\* 50% 不透過 \*/

/\* HSL 値 \*/
background-color: hsl(50, 33%, 25%); /\* 不透過 \*/
background-color: hsla(50, 33%, 25%, 0.75); /\* 75% 不透過 \*/

/\* 特殊なキーワード値 \*/
background-color: currentcolor;
background-color: transparent;

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


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

### 値

`<color>`

背景の単一色 (uniform color) を表します。指定されていれば `background-image` の背後に描画されますが、画像に透明な部分があれば色が見えます。

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

背景色とその上に配置されたテキストの色のコントラスト比が、弱視の人がページのコンテンツを読むことができる程度の高さであることを確認することが重要です。

色のコントラスト比は、テキスト及び背景色の明度の値を比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。

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

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

形式文法
----
```

background-color =   
  <color>    
  
```

例
-

### HTML


```html
<div class="exampleone">Lorem ipsum dolor sit amet, consectetuer</div>

<div class="exampletwo">Lorem ipsum dolor sit amet, consectetuer</div>

<div class="examplethree">Lorem ipsum dolor sit amet, consectetuer</div>
```

### CSS


```css
.exampleone {
  background-color: transparent;
}

.exampletwo {
  background-color: rgb(153, 102, 153);
  color: rgb(255, 255, 204);
}

.examplethree {
  background-color: #777799;
  color: #ffffff;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # background-color |

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

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

関連情報
----

* 複数の背景
* `<color>` データ型
* その他の色に関するプロパティ: `color`, `border-color`, `outline-color`, `text-decoration-color`, `text-emphasis-color`, `text-shadow`, `caret-color`, `column-rule-color`
* CSS を使用した HTML の要素への色の適用
justify-tracks
==============

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

**`align-tracks`** は CSS のプロパティで、インライン軸が組積であるグリッドコンテナーの組積軸の配置を設定します。

構文
--


```css
/\* キーワード値 \*/
justify-tracks: start;
justify-tracks: space-between;
justify-tracks: center;
justify-tracks: start, center, end;

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


このプロパティは単一の値を取ることができ、その場合はすべてのトラックが同じように整列されます。値のリストが使用された場合、最初の値はグリッド軸の最初のトラックに適用され、2 番目は次のトラックに適用され、以下同様となります。

値がトラックより少ない場合は、最後の値が残りすべてのトラックに使用されます。トラックよりも値が多い場合、追加の値は無視されます。

### 値

`start`

アイテムは、組積軸の配置コンテナーの先頭の端に向かって、互いに詰められます。

`end`

アイテムは、組積軸の配置コンテナーの末尾の端に向かって、互いに詰められます。

`center`

アイテムは、組積軸に沿って配置コンテナーの中心に向かって、互いに詰められます。

`normal`

`start` として動作します。

`space-between`

アイテムは配置コンテナー内で組積軸に沿って均等に配置されます。隣接するアイテム同士の間の間隔は同じです。先頭のアイテムは、コンテナーの先頭の端に詰められ、末尾のアイテムは、コンテナーの末尾の端に詰められます。

`space-around`

アイテムは配置コンテナー内で組積軸に沿って均等に配置されます。隣接するアイテム同士の間の間隔は同じです。先頭のアイテムの前と末尾のアイテムの後の空き空間は、隣接するアイテム同士の空間の半分に等しくなります。

`space-evenly`

アイテムは組積軸に沿って配置コンテナー内に均等に配置されます。隣接するアイテム同士の間隔、コンテナーの先頭の端と先頭のアイテム、およびコンテナーの末尾の端と末尾のアイテムは、すべて正確に同じです。

`stretch`

アイテムは組積の軸に沿って伸び、コンテンツボックスを満たします。確定したサイズのアイテムは引き伸ばされません。

`left`

配置コンテナーの左端に向かって、アイテム同士が互いに詰められます。

`right`

配置コンテナーの右端に向かって、アイテム同士が互いに詰められます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `normal` |
| 適用対象 | インライン軸がマソンリーレイアウトのグリッドコンテナー |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----

Error: could not find syntax for this item例
-

### justify-tracks に複数の値がある組積レイアウト

仕様書
---

| Specification |
| --- |
| CSS Grid Layout Module Level 3 # tracks-alignment |

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

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

関連情報
----

* 関連する CSS プロパティ: `align-tracks`, `masonry-auto-flow`
CSS 位置指定レイアウト
=============

**CSS 位置指定レイアウト** (CSS positioned layout) モジュールは、ウェブページ上での要素の位置指定方法を定義します。

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

### プロパティ

* `top`
* `right`
* `bottom`
* `left`
* `inset`
* `inset-inline`
* `inset-inline-start`
* `inset-inline-end`
* `inset-block`
* `inset-block-start`
* `inset-block-end`
* `float`
* `clear`
* `position`
* `z-index`
* `transform`
ガイド
---

CSS の z-index を理解する

重ね合わせコンテキストの記述法と Z 順の動作方法の説明を、いくつかの例と共に紹介します。

仕様書
---

| Specification |
| --- |
| CSS Positioned Layout Module Level 3  |
::-webkit-slider-thumb
======================

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

**`::-webkit-slider-thumb`** は CSS の擬似要素で、 `<input>` の `type="range"` でユーザーが数値を変更するために「溝」の中を動かすことができる「つまみ」を表します。

構文
--


```css
::-webkit-slider-thumb {}
```

仕様書
---

どの仕様書でも定義されていません。これは WebKit/Blink に固有の私有擬似要素です。

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

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

関連情報
----

* `::-webkit-slider-runnable-track`
* 他のブラウザーで使われている類似の擬似要素:
    + `::-moz-range-thumb` (en-US)
    + `::-ms-thumb`
* CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS
* QuirksMode: Styling and scripting sliders
* Couple of Gotchas to Watch-out For