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

<named-color>
=============

**`<named-color>`** は CSS のデータ型で、 `red`, `blue`, `black`, `lightseagreen` のような色の名前です。文法的には、 `<named-color>` は `<ident>` の一種です。

`<named-color>` 値は `<color>` が使用できる場所ではどこでも使用できます。

構文
--

```css
color: red;
color: orange;
color: tan;
color: rebeccapurple;
color: transparent;
```

### 値

#### CSS Level 1 の値

CSS Level 1 では基本的な 16 色しか記載されておらず、 VGA グラフィックカードの表示可能な色の集合から取られたため、 VGA カラーと呼ばれています。

| キーワード | RGB 16 進値 | サンプル |
| --- | --- | --- |
| `black` | `#000000` |  |
| `silver` | `#c0c0c0` |  |
| `gray` | `#808080` |  |
| `white` | `#ffffff` |  |
| `maroon` | `#800000` |  |
| `red` | `#ff0000` |  |
| `purple` | `#800080` |  |
| `fuchsia` | `#ff00ff` |  |
| `green` | `#008000` |  |
| `lime` | `#00ff00` |  |
| `olive` | `#808000` |  |
| `yellow` | `#ffff00` |  |
| `navy` | `#000080` |  |
| `blue` | `#0000ff` |  |
| `teal` | `#008080` |  |
| `aqua` | `#00ffff` |  |

### CSS Level 2 の値

以下の値が CSS Level 2 で定義されています。

| キーワード | RGB 16 進値 | サンプル |
| --- | --- | --- |
| `orange` | `#ffa500` |  |

### CSS Level 3 の値

初期のブラウザーでは仕様にない様々な色（ほとんどは X11 colors list からの転用）が対応していましたが、正式に定義されたのは SVG 1.0 と CSS Colors Level 3 からでした。これらは、拡張色キーワード、 X11 カラー、SVG カラーと呼ばれます。

| キーワード | RGB 16 進値 | サンプル |
| --- | --- | --- |
| `aliceblue` | `#f0f8ff` |  |
| `antiquewhite` | `#faebd7` |  |
| `aquamarine` | `#7fffd4` |  |
| `azure` | `#f0ffff` |  |
| `beige` | `#f5f5dc` |  |
| `bisque` | `#ffe4c4` |  |
| `blanchedalmond` | `#ffebcd` |  |
| `blueviolet` | `#8a2be2` |  |
| `brown` | `#a52a2a` |  |
| `burlywood` | `#deb887` |  |
| `cadetblue` | `#5f9ea0` |  |
| `chartreuse` | `#7fff00` |  |
| `chocolate` | `#d2691e` |  |
| `coral` | `#ff7f50` |  |
| `cornflowerblue` | `#6495ed` |  |
| `cornsilk` | `#fff8dc` |  |
| `crimson` | `#dc143c` |  |
| `cyan`(synonym of `aqua`) | `#00ffff` |  |
| `darkblue` | `#00008b` |  |
| `darkcyan` | `#008b8b` |  |
| `darkgoldenrod` | `#b8860b` |  |
| `darkgray` | `#a9a9a9` |  |
| `darkgreen` | `#006400` |  |
| `darkgrey` | `#a9a9a9` |  |
| `darkkhaki` | `#bdb76b` |  |
| `darkmagenta` | `#8b008b` |  |
| `darkolivegreen` | `#556b2f` |  |
| `darkorange` | `#ff8c00` |  |
| `darkorchid` | `#9932cc` |  |
| `darkred` | `#8b0000` |  |
| `darksalmon` | `#e9967a` |  |
| `darkseagreen` | `#8fbc8f` |  |
| `darkslateblue` | `#483d8b` |  |
| `darkslategray` | `#2f4f4f` |  |
| `darkslategrey` | `#2f4f4f` |  |
| `darkturquoise` | `#00ced1` |  |
| `darkviolet` | `#9400d3` |  |
| `deeppink` | `#ff1493` |  |
| `deepskyblue` | `#00bfff` |  |
| `dimgray` | `#696969` |  |
| `dimgrey` | `#696969` |  |
| `dodgerblue` | `#1e90ff` |  |
| `firebrick` | `#b22222` |  |
| `floralwhite` | `#fffaf0` |  |
| `forestgreen` | `#228b22` |  |
| `gainsboro` | `#dcdcdc` |  |
| `ghostwhite` | `#f8f8ff` |  |
| `gold` | `#ffd700` |  |
| `goldenrod` | `#daa520` |  |
| `greenyellow` | `#adff2f` |  |
| `grey` | `#808080` |  |
| `honeydew` | `#f0fff0` |  |
| `hotpink` | `#ff69b4` |  |
| `indianred` | `#cd5c5c` |  |
| `indigo` | `#4b0082` |  |
| `ivory` | `#fffff0` |  |
| `khaki` | `#f0e68c` |  |
| `lavender` | `#e6e6fa` |  |
| `lavenderblush` | `#fff0f5` |  |
| `lawngreen` | `#7cfc00` |  |
| `lemonchiffon` | `#fffacd` |  |
| `lightblue` | `#add8e6` |  |
| `lightcoral` | `#f08080` |  |
| `lightcyan` | `#e0ffff` |  |
| `lightgoldenrodyellow` | `#fafad2` |  |
| `lightgray` | `#d3d3d3` |  |
| `lightgreen` | `#90ee90` |  |
| `lightgrey` | `#d3d3d3` |  |
| `lightpink` | `#ffb6c1` |  |
| `lightsalmon` | `#ffa07a` |  |
| `lightseagreen` | `#20b2aa` |  |
| `lightskyblue` | `#87cefa` |  |
| `lightslategray` | `#778899` |  |
| `lightslategrey` | `#778899` |  |
| `lightsteelblue` | `#b0c4de` |  |
| `lightyellow` | `#ffffe0` |  |
| `limegreen` | `#32cd32` |  |
| `linen` | `#faf0e6` |  |
| `magenta`(synonym of `fuchsia`) | `#ff00ff` |  |
| `mediumaquamarine` | `#66cdaa` |  |
| `mediumblue` | `#0000cd` |  |
| `mediumorchid` | `#ba55d3` |  |
| `mediumpurple` | `#9370db` |  |
| `mediumseagreen` | `#3cb371` |  |
| `mediumslateblue` | `#7b68ee` |  |
| `mediumspringgreen` | `#00fa9a` |  |
| `mediumturquoise` | `#48d1cc` |  |
| `mediumvioletred` | `#c71585` |  |
| `midnightblue` | `#191970` |  |
| `mintcream` | `#f5fffa` |  |
| `mistyrose` | `#ffe4e1` |  |
| `moccasin` | `#ffe4b5` |  |
| `navajowhite` | `#ffdead` |  |
| `oldlace` | `#fdf5e6` |  |
| `olivedrab` | `#6b8e23` |  |
| `orangered` | `#ff4500` |  |
| `orchid` | `#da70d6` |  |
| `palegoldenrod` | `#eee8aa` |  |
| `palegreen` | `#98fb98` |  |
| `paleturquoise` | `#afeeee` |  |
| `palevioletred` | `#db7093` |  |
| `papayawhip` | `#ffefd5` |  |
| `peachpuff` | `#ffdab9` |  |
| `peru` | `#cd853f` |  |
| `pink` | `#ffc0cb` |  |
| `plum` | `#dda0dd` |  |
| `powderblue` | `#b0e0e6` |  |
| `rosybrown` | `#bc8f8f` |  |
| `royalblue` | `#4169e1` |  |
| `saddlebrown` | `#8b4513` |  |
| `salmon` | `#fa8072` |  |
| `sandybrown` | `#f4a460` |  |
| `seagreen` | `#2e8b57` |  |
| `seashell` | `#fff5ee` |  |
| `sienna` | `#a0522d` |  |
| `skyblue` | `#87ceeb` |  |
| `slateblue` | `#6a5acd` |  |
| `slategray` | `#708090` |  |
| `slategrey` | `#708090` |  |
| `snow` | `#fffafa` |  |
| `springgreen` | `#00ff7f` |  |
| `steelblue` | `#4682b4` |  |
| `tan` | `#d2b48c` |  |
| `thistle` | `#d8bfd8` |  |
| `tomato` | `#ff6347` |  |
| `transparent` | See transparent. |  |
| `turquoise` | `#40e0d0` |  |
| `violet` | `#ee82ee` |  |
| `wheat` | `#f5deb3` |  |
| `whitesmoke` | `#f5f5f5` |  |
| `yellowgreen` | `#9acd32` |  |
|

#### transparent

`transparent` は完全な透明色を表すキーワードです。この色が付いた項目の背後の背景は完全に見えます。厳密には、`transparent` は `rgba(0,0,0,0)` のショートカットです。

`グラデーション`の場合の同様、予期しない動きを避けるために、現在の CSS の仕様書は `transparent` をアルファ乗算色空間で計算するように定めています。しかし、古いブラウザーはアルファチャンネルが `0` の値である黒として扱うかもしれません。

`transparent` キーワードは CSS Level 2 (Revision 1) では色ではありませんでした。これは `background` プロパティと `border` プロパティの 2 つにおいて、通常の `<color>` の代わりに使用することができた特殊なキーワードでした。基本的に、継承された色を開発者が上書きすることができるように追加されたものです。 CSS Colors Level 3 でアルファチャンネルが出現し、 `transparent` は色として再定義されました。 `<color>` の値を使用することができる場所ならば、どこでも使用することができるようになりました。

### CSS Level 4 の値

CSS Colors Level 4 では、 `rebeccapurple` キーワードが追加されました（ウェブの先達であるエリックメイヤーに敬意を表して）。

| キーワード | RGB 16 進値 | サンプル |
| --- | --- | --- |
| `rebeccapurple` | `#663399` |  |

解説
--

すべての名前は、sRGB 色空間における色を指定します。名前は多かれ少なかれそれぞれの色を記述していますが、使用される用語の背後にある厳密な根拠はなく、基本的に人為的なものです。

色のキーワードはすべて透明度のない無地の色を表します。

一部のキーワードは、他にも別名があります。

* `aqua` / `cyan`
* `fuchsia` / `magenta`
* `darkgray` / `darkgrey`
* `darkslategray` / `darkslategrey`
* `dimgray` / `dimgrey`
* `lightgray` / `lightgrey`
* `lightslategray` / `lightslategrey`
* `gray` / `grey`
* `slategray` / `slategrey`

多くのキーワードは X11 のものを保有していますが、メーカーが X11 の色を特定のハードウェアに合わせて調整することがあるため、その RGB 値は X11 システム上の対応する色とは異なる場合があります。

例
-

### 色キーワードの使用

#### HTML

```html
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
```

#### CSS

```css
#container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Color Module Level 4 # named-colors |

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

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

関連情報
----

* `<color>`: その定義である `<named-color>` を構成要素とするデータ型です。


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

:first-child
============

**`:first-child`** は CSS の擬似クラスで、兄弟要素のグループの中で最初の要素を表します。

```css
/\* 兄弟要素の中で最初の <p> を
 すべてを選択 \*/
p:first-child {
  color: lime;
}
```

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

**メモ:** 当初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。

構文
--
```

:first-child
```

例
-

### 基本的な例

#### HTML

```html
<div>
  <p>This text is selected!</p>
  <p>This text isn't selected.</p>
</div>

<div>
  <h2>This text isn't selected: it's not a `p`.</h2>
  <p>This text isn't selected.</p>
</div>
```

#### CSS

```css
p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}
```

#### 結果

### リストのスタイル付け

#### HTML

```html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1</li>
      <li>Item 3.2</li>
      <li>Item 3.3</li>
    </ul>
  </li>
</ul>
```

#### CSS

```css
ul li {
  color: blue;
}

ul li:first-child {
  color: red;
  font-weight: bold;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # first-child-pseudo |

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

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

関連情報
----

* `:-moz-first-node`
Non-standard
* `:first-of-type`
* `:last-child`
* `:nth-child()`


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

:first-of-type
==============

**`:first-of-type`** は CSS の擬似クラスで、兄弟要素のグループの中でその種類の最初の要素を表します。

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

構文
--

```css
:first-of-type {
  /\* ... \*/
}
```

例
-

### 最初の段落の整形

#### HTML

```html
<h2>見出し</h2>
<p>段落 1</p>
<p>段落 2</p>
```

#### CSS

```css
p:first-of-type {
  color: red;
  font-style: italic;
}
```

#### 結果

### 入れ子になった要素

この例は、入れ子になった要素を対象に含める方法を示します。なお、要素型セレクターが書かれていない場合は、全称セレクター (`*`) が暗黙に含まれます。

#### HTML

```html
<article>
  <div>これは最初の `div` です。</div>
  <div>これは<span>内側で最初の `span`</span> です。</div>
  <div>
    これは<em>内側で最初の `em`</em>で、一方これは<em>最後の `em` </em>です。
  </div>
  <div>これは<span>スタイル付けされた内側の `span`</span>です</div>
  <p>これは `p` で修飾しています。</p>
  <div>これは最後の `div` です。</div>
</article>
```

#### CSS

```css
article :first-of-type {
  background-color: pink;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # first-of-type-pseudo |

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

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

関連情報
----

* `:first-child`, `:last-of-type`, `:nth-of-type`


CSS 擬似要素 - CSS: カスケーディングスタイルシート

CSS 擬似要素
========

**CSS 擬似要素**モジュールは、文書ツリー内には直接存在しない抽象要素を定義します。擬似要素と呼ばれるこれらの抽象要素は、レンダーツリーの一部を表し、選択したりスタイル設定したりすることができます。擬似要素は、文書ツリーによって指定された以上の文書ツリーに関する抽象化をするために使用します。

擬似要素の接頭辞はダブルコロン (`::`) です。擬似要素をセレクターに追加すると（`p::first-line`　など）、擬似要素を対象としてスタイル設定することができます。

擬似要素は、 HTML に含まれないものや 余分なマークアップを追加することなく他の方法では対象とすることができないコンテンツの一部を対象とすることができます。 `<input>` 要素のプレースホルダーについて考えてみましょう。これは抽象要素であり、文書ツリー内の明確なノードではありません。このプレースホルダーを選択するには `::placeholder` 擬似要素を用います。別の例として、 `::selection` 擬似要素は、ユーザーが現在選択しているコンテンツに一致し、ユーザーがコンテンツを操作して選択を変更したときに一致するものをスタイル設定することができます。同様に、 `::first-line` 擬似要素は、要素の最初の行を対象とし、要素の行の長さを問い合わせることなく、最初の行の文字数が変われば自動的に更新されます。

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

### セレクター

* `::after`
* `::before`
* `::file-selector-button` (en-US)
* `::first-letter`
* `::first-line`
* `::grammar-error`
* `::marker`
* `::placeholder`
* `::selection`
* `::spelling-error`
* `::target-text`
### インターフェイス

* `CSSPseudoElement` インターフェイス
    + `CSSPseudoElement.element` プロパティ
    + `CSSPseudoElement.type` プロパティ
### 用語

* 用語集の擬似要素
ガイド
---

CSS 擬似要素

すべての CSS 仕様と WebVTT で定義されている擬似要素のアルファベット順リスト。

構成要素: 擬似クラスと擬似要素

セレクターに関する CSS 構成要素の節の一部です。この記事では、擬似要素とは何か、擬似クラスとどのように組み合わせ、 `::before` および `::after` 擬似要素でコンテンツを生成するために使用できるかを定義します。

擬似要素を使用した装飾的なボックスの作成

視覚効果のために `::before` と `::after` 擬似要素を使用して生成コンテンツをスタイル設定する例です。

関連する概念
------

* `::backdrop`
* Web Video Text Tracks Format (WebVTT) キュー:
    + `::cue`
    + `::cue()`
    + `::cue-region`
* CSS スコープ化 (en-US)モジュール
    + `:host`
    + `:host()`
    + `:host-context()` (en-US)
    + `::slotted()`
* CSS シャドウ部品 (en-US)モジュール
    + `::part`
* CSS セレクター
    + 属性セレクター
    + 結合子
    + クラスセレクター
    + ID セレクター
    + 型セレクター
    + 擬似クラス
    + 全称セレクター
* `placeholder` 属性（`<input>` 要素）
* `:placeholder-shown` セレクター
* CSS 生成コンテンツ
    + `content` プロパティ
    + `quotes` プロパティ
* テキストフラグメント
* `AnimationEvent.pseudoElement` プロパティ
* `KeyframeEffect.pseudoElement` (en-US) プロパティ
* `TransitionEvent.pseudoElement` プロパティ
仕様書
---

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4  |

関連情報
----

* 詳細度
* CSS セレクターモジュール
* CSS シャドウ部品 (en-US)モジュール
* CSS 生成コンテンツモジュール
* CSS 位置指定レイアウトモジュール


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

@property
=========

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

**`@property`** は CSS の`アットルール`で、 API の CSS Houdini の傘下にあるものです。開発者が明示的に `CSS custom properties` を定義し、プロパティ型のチェック、既定値の設定、プロパティが値を継承するかどうかの定義ができるようになっています。

`property` ルールは、 JS を実行することなく、スタイルシートの中で直接カスタムプロパティの登録を表します。有効な `@property` ルールは、あたかも `CSS.registerProperty` が同等のパラメータで呼び出されたかのように、登録されたカスタムプロパティを生成します。

構文
--

```css
@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}
```

### 記述子

`syntax`

プロパティに許容される構文を記述します。

`inherits`

`property` で指定されたカスタムプロパティの登録を既定で継承するかどうかを制御します。

`initial-value`

プロパティの初期値を設定します。

有効な `@property` ルールはカスタムプロパティの登録を表し、プロパティ名はこのルールに先行するものをシリアライズしたものです。

`@property` ルールは `syntax` および `inherits` 記述子を必要とします。どちらかがない場合は、ルール全体が無効となり、無視されます。 `initial-value` 記述子は構文が全称構文定義である場合のみ省略可能で、それ以外の場合は必須です。その場合、存在しないとルール全体が無効となり、無視されます。

未知の記述子は無効で無視されますが、 `@property` ルールは無効になりません。

例
-

`--my-color` `カスタムプロパティ`に色としての型チェックと、既定値、さらに値が継承されないことを追加します。

CSS の `@property` [アットルール]](/ja/docs/Web/CSS/At-rule)を使用する場合は次のようになります。

```css
@property --my-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}
```

JavaScript の `CSS.registerProperty` を使用する場合は次のようになります。

```js
window.CSS.registerProperty({
  name: "--my-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee",
});
```

形式文法
----
```

@property =
  @property <custom-property-name> { <declaration-list> }

```

仕様書
---

| Specification |
| --- |
| CSS Properties and Values API Level 1 # at-property-rule |

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

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

関連情報
----

* CSS Properties and Values API
* CSS Painting API
* CSS Typed Object Model
* CSS Houdini


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

min-width
=========

**`min-width`** は CSS のプロパティで、要素の最小幅を設定します。これは `width` プロパティの使用値が、`min-width` で指定した値を下回ることを防ぎます。

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

`min-width` の値が `max-width` および `width` の値より大きい場合は、`min-width` の値が要素の幅になります。

構文
--

```css
/\* <length> 値 \*/
min-width: 3.5em;

/\* <percentage> 値 \*/
min-width: 10%;

/\* キーワード値 \*/
min-width: max-content;
min-width: min-content;
min-width: fit-content(20em);

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

### 値

`<length>`

`min-width` を絶対的な値で定義します。

`<percentage>`

`min-width` を包含ブロックの幅に対するパーセント値で定義します。

`auto`

ブラウザーが指定された要素の `min-width` を計算して選択します。

`max-content`

内容物が推奨する `min-width` です。

`min-content`

内容物の最小の `min-width` です。

`fit-content(`<length-percentage>`)`

利用可能な空白を指定された引数で置き換えた `fit-content` 式を使用します。すなわち、 `min(max-content, max(min-content, 引数))` です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | 置換要素でないインライン要素、テーブルの行、行グループを除くすべての要素 |
| 継承 | なし |
| パーセント値 | 包含ブロックの幅に対する相対値 |
| 計算値 | 指定されたパーセント値または絶対的な長さ |
| アニメーションの種類 | length または パーセント値, calc(); |

形式文法
----
```

min-width =
  auto                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )

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

```

例
-

### 要素の最小幅を設定

```css
table {
  min-width: 75%;
}

form {
  min-width: 0;
}
```

仕様書
---

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # min-size-properties |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

関連情報
----

* `width`, `max-width`
* ボックスモデル, `box-sizing`


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

grid-auto-flow
==============

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

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

* Learn more
* See full compatibility
* Report feedback
**`grid-auto-flow`** は CSS のプロパティで、自動配置のアルゴリズムの動作を制御し、自動配置されたアイテムがどのようにグリッドに流れ込むかを正確に指定するものです。

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

構文
--

```css
/\* キーワード値 \*/
grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: dense;
grid-auto-flow: row dense;
grid-auto-flow: column dense;

/\* グローバル値 \*/
grid-auto-flow: inherit;
grid-auto-flow: initial;
grid-auto-flow: revert;
grid-auto-flow: unset;
```

このプロパティは、次のいずれかの形態を取ることができます。

* 単一のキーワード: `row`、 `column`、 `dense` のうち 1 つ
* 2 つのキーワード: `row dense` または `column dense`
### 値

`row`

アイテムは、各行を順番に埋めていき、必要に応じて新しい行を追加していくことで配置されます。 `row` と `column` のどちらも指定されなかった場合は、 `row` とみなされます。

`column`

アイテムは、各列を順番に埋めていき、必要に応じて新しい列を追加していくことで配置されます。

`dense`

「dense」パッキングアルゴリズムは、小さいアイテムが後で出てきた場合、グリッドの早い段階で穴を埋めようとします。そのため、より大きなアイテムが残した穴を埋めるために、アイテムが順番通りに表示されないことがあります。

これを省略すると、「sparse」アルゴリズムが使用され、配置アルゴリズムはアイテムを配置するときにグリッド内を「前に進む」だけで、穴を埋めるために後ろに戻ることはありません。これにより、自動配置されたアイテムはすべて「順番通り」に表示され、たとえ後から配置したアイテムで埋められるはずの穴が残っていたとしても、確実に埋められるようになります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `row` |
| 適用対象 | グリッドコンテナー |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

grid-auto-flow =
  [ row | column ]  ||
  dense

```

例
-

### グリッドの自動配置を設定する

#### HTML

```html
<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
  <div id="item4"></div>
  <div id="item5"></div>
</div>
<select id="direction">
  <option value="column">column</option>
  <option value="row">row</option>
</select>
<input id="dense" type="checkbox" />
<label for="dense">dense</label>
```

#### CSS

```css
#grid {
  height: 200px;
  width: 200px;
  display: grid;
  gap: 10px;
  grid-template: repeat(4, 1fr) / repeat(2, 1fr);
  grid-auto-flow: column; /\* or 'row', 'row dense', 'column dense' \*/
}

#item1 {
  background-color: lime;
  grid-row-start: 3;
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
}

#item4 {
  grid-column-start: 2;
  background-color: red;
}

#item5 {
  background-color: aqua;
}
```

```
function changeGridAutoFlow() {
  var grid = document.getElementById("grid");
  var direction = document.getElementById("direction");
  var dense = document.getElementById("dense");
  var gridAutoFlow = direction.value === "row" ? "row" : "column";

  if (dense.checked) {
    gridAutoFlow += " dense";
  }

  grid.style.gridAutoFlow = gridAutoFlow;
}

const selectElem = document.querySelector("select");
const inputElem = document.querySelector("input");
selectElem.addEventListener("change", changeGridAutoFlow);
inputElem.addEventListener("change", changeGridAutoFlow);
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # grid-auto-flow-property |

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

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

関連情報
----

* 関連する CSS プロパティ: `grid-auto-rows`, `grid-auto-columns`, `grid`
* グリッドレイアウトガイド: *グリッドレイアウトでの自動配置*
* 動画チュートリアル: *グリッドの自動配置と順序の紹介*


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

CSS マスク
=======

**CSS マスク** (CSS masking) は CSS のモジュールの一つで、可視要素の一部または全部を隠すためのマスク、クリップを定義します。

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

### プロパティ

* `clip`
非推奨
* `clip-path`
* `clip-rule`
* `mask`
* `mask-border`
* `mask-border-mode`
* `mask-border-outset`
* `mask-border-repeat`
* `mask-border-slice`
* `mask-border-source`
* `mask-border-width`
* `mask-clip`
* `mask-composite`
* `mask-image`
* `mask-mode`
* `mask-origin`
* `mask-position`
* `mask-repeat`
* `mask-size`
* `mask-type`
仕様書
---

| Specification |
| --- |
| CSS Masking Module Level 1  |


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

:only-of-type
=============

CSS の **`:only-of-type`** 擬似クラスは、同じ型の兄弟要素がない要素を表します。
```

/* <p> が親の中にある唯一の <p> 出逢った場合に選択 */
p:only-of-type {
  background-color: lime;
}
```

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

**メモ:** 最初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。

構文
--
```

:only-of-type
```

例
-

### 同じ型の兄弟がない要素をスタイル付け

#### HTML

```html
<main>
  <div>I am `div` #1.</div>
  <p>I am the only `p` among my siblings.</p>
  <div>I am `div` #2.</div>
  <div>
    I am `div` #3.
    <i>I am the only `i` child.</i>
    <em>I am `em` #1.</em>
    <em>I am `em` #2.</em>
  </div>
</main>
```

#### CSS

```css
main :only-of-type {
  color: red;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # only-of-type-pseudo |

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

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

関連情報
----

* `:only-child`
* `:first-of-type`
* `:last-of-type`
* `:nth-of-type`


CSS 生成コンテンツ - CSS: カスケーディングスタイルシート

CSS 生成コンテンツ
===========

**CSS 生成コンテンツ** (CSS Generated Content) は CSS のモジュールの一つで、要素にコンテンツを追加する方法を定義します。生成されたコンテンツは、無名で置換された要素にコンテンツを追加したり、非常に限られた状況で DOM ノードのコンテンツを生成された値で置き換えたりするために使用することができます。

詳しくは生成コンテンツのハウツーガイドや、実装情報については `content` および `quotes` プロパティをご覧ください。

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

### プロパティ

* `content`
* `quotes`
仕様書
---

| Specification |
| --- |
| CSS Generated Content Module Level 3  |

関連情報
----

* CSS 生成コンテンツの使用
* `content`
* `quotes`
* `::before`
* `::after`
* `::marker`


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

:nth-last-child()
=================

**`:nth-last-child()`** は CSS の擬似クラスで、兄弟要素のグループの中での位置に基づいて選択します。

```css
/\* 兄弟要素の中で、後ろから数えて
 3 つおきに要素を選択 \*/
:nth-last-child(4n) {
  color: lime;
}
```

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

**メモ:** この擬似クラスは、最初から後に向けてではなく*最後*から前に向けて数えるという点を除けば、本質的に `:nth-child` と同じです。

構文
--

`nth-last-child` 擬似クラスは、要素を選択する最後から数えるパターンを表す引数を 1 つ取ります。
```

:nth-last-child( <nth> [ of <complex-selector-list> ]? )
```

### キーワード値

`odd`

一連の兄弟要素の中で、最後から奇数番目の要素 (1, 3, 5, など) を表します。

`even`

一連の兄弟要素の中で、最後から偶数番目の要素 (2, 4, 6, など) を表します。

### 関数記法

`<An+B>`

一連の兄弟要素の中で、 `n` に正の整数か0が入るとき、 `An+B` のパターンに一致する位置の要素を表します。後ろから数えた最初の要素の番号は `1` です。 `A` と `B` の値は両方とも `<integer>` です。

例
-

### セレクターの例

`tr:nth-last-child(odd)` または `tr:nth-last-child(2n+1)`

HTML テーブルの最後から数えた奇数行 (1, 3, 5, など) を表します。

`tr:nth-last-child(even)` または `tr:nth-last-child(2n)`

HTML テーブルの最後から数えた偶数行 (2, 4, 6, など) を表します。

`:nth-last-child(7)`

最後から数えて 7 番目の要素を表します。

`:nth-last-child(5n)`

最後から数えて 5, 10, 15 番目などの要素を表します。

`:nth-last-child(3n+4)`

最後から数えて 4, 7, 10, 13 番目などの要素を表します。

`:nth-last-child(-n+3)`

兄弟要素のグループの中で最後の3つの要素を表します。

`p:nth-last-child(n)` または `p:nth-last-child(n+1)`

兄弟要素のグループの中ですべての `<p>` 要素を表します。これは単純な `p` セレクターと同じです。 (`n` はゼロから始まるので、最後の要素が1で始まり、 `n` および `n+1` が共に同じ要素を選択します。)

`p:nth-last-child(1)` または `p:nth-last-child(0n+1)`

兄弟要素のグループの中で最初の `<p>` 要素すべてを表します。これは `:last-child` セレクターと同じです。

### 詳細な例

#### HTML

```html
<table>
  <tbody>
    <tr>
      <td>First line</td>
    </tr>
    <tr>
      <td>Second line</td>
    </tr>
    <tr>
      <td>Third line</td>
    </tr>
    <tr>
      <td>Fourth line</td>
    </tr>
    <tr>
      <td>Fifth line</td>
    </tr>
  </tbody>
</table>
```

#### CSS

```css
table {
  border: 1px solid blue;
}

/\* 最後から 3 つの要素を選択 \*/
tr:nth-last-child(-n + 3) {
  background-color: pink;
}

/\* 後ろから 2 番目から最初までの要素を選択 \*/
tr:nth-last-child(n + 2) {
  color: blue;
}

/\* 後ろから 2 番目の要素のみを選択 \*/
tr:nth-last-child(2) {
  font-weight: 600;
}
```

#### 結果

### 数量クエリー

*数量クエリー*は、要素が存在する数に応じてスタイル付けします。この例では、リストの中に項目が3つ以上ある場合にリスト項目が赤に変わります。これは `nth-last-child` 擬似クラスと 後続兄弟結合子の機能を組み合わせることで実現できます。

#### HTML

```html
<h4>4 項目のリスト (スタイル付き):</h4>
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ol>

<h4>2 項目のリスト (スタイルなし):</h4>
<ol>
  <li>One</li>
  <li>Two</li>
</ol>
```

#### CSS

```css
/\* 3 つ以上のリスト項目がある場合、
 すべてにスタイル付けする \*/
li:nth-last-child(n + 3),
li:nth-last-child(3) ~ li {
  color: red;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # nth-last-child-pseudo |

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

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

関連情報
----

* `:nth-child`, `:nth-last-of-type`
* CSS の数量クエリー


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

:root
=====

**`:root`** は CSS の擬似クラスで、文書を表すツリーのルート要素を選択します。 HTML では `:root` は `<html>` 要素を表し、詳細度が高いことを除けば `html` セレクターと同等です。

```css
/\* 文書のルート要素（HTML の場合は <html>）を選択 \*/
:root {
  background: yellow;
}
```

構文
--
```

:root
```

例
-

### グローバルの CSS 変数

`:root` はグローバルの CSS 変数を宣言するのに便利です。

```css
:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}
```

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # root-pseudo |

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

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

関連情報
----

* `<html>`
* `Document.rootElement`
* `Node.getRootNode()`
* `Element.shadowRoot`
* `ShadowRoot`


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

:optional
=========

**`:optional`** は CSS の擬似クラスで、 `required` 属性が設定されていない `<input>`, `<select>`, `<textarea>` 要素を表します。

```css
/\* 任意の <input> をすべて選択 \*/
input:optional {
  border: 1px dashed black;
}
```

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

この擬似クラスは。フォームを送信するにあたって必須ではない入力欄にスタイルを適用するのに便利です。

**メモ:** `:required` 擬似クラスは*必須*のフォーム欄を選択します。

構文
--
```

:optional
```

例
-

### 省略可能なフィールドの枠を紫にする

#### HTML

```html
<form>
  <div class="field">
    <label for="url\_input">Enter a URL:</label>
    <input type="url" id="url\_input" />
  </div>

  <div class="field">
    <label for="email\_input">Enter an email address:</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:optional {
  border-color: rebeccapurple;
  border-width: 3px;
}
```

#### 結果

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

フォームに必須ではない `<input>` が含まれている場合、必須の入力欄には `required` 属性を適用してください。これによって、読み上げソフトなどの支援技術を使用している人が、フォームを送信するためにどの入力欄が有効なコンテンツを必要とするかを理解することができます。

必須の入力欄を視覚的に示すのに、色だけに依存しないようにしてください。通常、説明する文字列やアイコンが使用されます。

* MDN WCAG を理解する ― ガイドライン 3.3 の解説
* Understanding Success Criterion 3.3.2 | W3C Understanding WCAG 2.0
仕様書
---

| Specification |
| --- |
| HTML Standard # selector-optional |
| Selectors Level 4 # opt-pseudos |

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

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

関連情報
----

* 他の検証関連の擬似クラス: `:required`, `:invalid`, `:valid`
* フォームデータの検証


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

border-right-style
==================

**`border-right-style`** は CSS のプロパティで、要素の右側の境界線 (`border`) の形状を設定します。

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

**メモ:** 仕様書では、異なる形状の境界線を角でどの様に接続するかを定義していません。

構文
--

```css
/\* キーワード値 \*/
border-right-style: none;
border-right-style: hidden;
border-right-style: dotted;
border-right-style: dashed;
border-right-style: solid;
border-right-style: double;
border-right-style: groove;
border-right-style: ridge;
border-right-style: inset;
border-right-style: outset;

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

`border-right-style` プロパティは、 `border-style` プロパティで利用できるキーワードのうちの一つで指定します。

公式定義
----

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

形式文法
----
```

border-right-style =
  <line-style>

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

```

例
-

### 境界の形状

#### HTML

```html
<table>
  <tr>
    <td class="b1">none</td>
    <td class="b2">hidden</td>
    <td class="b3">dotted</td>
    <td class="b4">dashed</td>
  </tr>
  <tr>
    <td class="b5">solid</td>
    <td class="b6">double</td>
    <td class="b7">groove</td>
    <td class="b8">ridge</td>
  </tr>
  <tr>
    <td class="b9">inset</td>
    <td class="b10">outset</td>
  </tr>
</table>
```

#### CSS

```css
/\* 表の外見を定義 \*/
table {
  border-width: 2px;
  background-color: #52e385;
}
tr,
td {
  padding: 3px;
}

/\* border-right-style の例のクラス \*/
.b1 {
  border-right-style: none;
}
.b2 {
  border-right-style: hidden;
}
.b3 {
  border-right-style: dotted;
}
.b4 {
  border-right-style: dashed;
}
.b5 {
  border-right-style: solid;
}
.b6 {
  border-right-style: double;
}
.b7 {
  border-right-style: groove;
}
.b8 {
  border-right-style: ridge;
}
.b9 {
  border-right-style: inset;
}
.b10 {
  border-right-style: outset;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-border-style |

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

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

関連情報
----

* その他の形状に関する境界のプロパティ: `border-bottom-style`, `border-left-style`, `border-top-style`, `border-style`
* その他の右側の境界に関するプロパティ: `border-right`, `border-right-color`, `border-right-width`


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

display
=======

**`display`** は CSS のプロパティで、要素をブロック要素とインライン要素のどちらとして扱うか、およびその子要素のために使用されるレイアウト、例えば フローレイアウト、グリッド、フレックスなどを設定します。

正式には、 **`display`** プロパティは要素の内側と外側の表示種別を設定します。外側の型は要素のフローレイアウトへの参加方法を設定し、内側の型は子要素のレイアウトを設定します。 `display` のいくつかの値は、それ自身の個別の仕様書で完全に定義されています。例えば、 `display: flex` が宣言されたときに何が起こるかの詳細は、 CSS Flexible Box Model 仕様書で定義されています。個々の仕様書については、この文書の最後にある表を参照してください。

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

構文
--

`display` プロパティは、キーワード値を使用して指定します。

```css
/\* 旧来の値 \*/
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;

/\* ボックスの生成 \*/
display: none;
display: contents;

/\* 2 値の構文 \*/
display: block flow;
display: inline flow;
display: inline flow-root;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block flow-root;

/\* その他の値 \*/
display: table;
display: table-row; /\* すべての表の要素が同等の CSS display 値を持っています \*/
display: list-item;

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

値のグループ
------

キーワード値は 6 つの値のカテゴリーにグループ分けすることができます。

### 外側

`<display-outside>`

これらのキーワードは、本質的に要素のフローレイアウトにおける役割を表す、要素の外側の表示種別を指定します。

`block`

この要素はブロック要素のボックスを生成し、通常のフローでは要素の前後で改行を生成します。

`inline`

この要素は、自身の前後に改行を生成しない 1 つ以上のインライン要素ボックスを生成します。通常のフローでは、次の要素は、空間があれば同じ行になります。

**メモ:** 2 値構文に対応しているブラウザーでは、`display: block` や `display: inline` が指定されている場合など、外側の値のみを見つけると、内側の値を `flow` に設定します。
 これは期待通りに動作します。例えば、ある要素を block に指定した場合、その要素の子要素は block と inline の通常フローレイアウトに参加することが期待されます。

### 内側

`<display-inside>`

これらのキーワードは、要素の内側の表示種別を指定します。これは、要素 (置換要素ではないものとする) の内容物をレイアウトする整形コンテキストの種類を定義します。

`flow`
Experimental

要素は、フローレイアウト (ブロックおよびインラインのレイアウト) を使用して、内容物をレイアウトします。

外側の表示種別が `inline` または `run-in` であり、またブロックまたはインラインの整形コンテキストに関係する場合は、インラインボックスを生成します。そうでない場合は、ブロックコンテナーボックスを生成します。

ほかのプロパティ (`position`, `float`, `overflow` など) の値や、要素自体がブロックまたはインラインの整形コンテキストに関係するかによって、新たなブロック整形コンテキスト (BFC) を生成する、または内容物が親の整形コンテキストに吸収されます。

`flow-root`

要素は、新たなブロック整形コンテキストを確立するブロック要素ボックスを生成し、整形ルートがある場所を定義します。

`table`

HTML の `<table>` 要素と同じように動作します。これは、ブロックレベルボックスを定義します。

`flex`

要素は、ブロック要素のように動作しつつ、そのコンテンツをフレックスボックスモデルに従ってレイアウトします。

`grid`

要素は、ブロック要素のように動作しつつ、そのコンテンツをグリッドモデルに従ってレイアウトします。

`ruby`
Experimental

要素は、インライン要素のように動作しつつ、そのコンテンツをルビ (ruby) モデルに従ってレイアウトします。HTML の `<ruby>` 要素のように動作します。

**メモ:** 2 値の構文に対応しているブラウザーは、 `display: flex` や `display: grid` などの内側の表示種別のみが指定されていると、外側の表示種別を `block` に設定します。これで期待通りに動作します。例えば、ある要素を `display: grid` に指定した場合、そのボックスはブロックレベルボックスのグリッドコンテナーとして生成されることが期待されるでしょう。

### リスト項目

`<display-listitem>`

要素は内容のためにブロックボックスと、個別のリスト項目のインラインボックスを生成します。

`list-item` 単独の値を指定すると、要素はリスト項目のように動作します。これは `list-style-type` や `list-style-position` と共に使用することができます。

`list-item` は `<display-outside>` キーワードのいずれかと、 `<display-inside>` の `flow` または `flow-root` キーワードと組み合わせることもできます。

**メモ:** 2 値の構文に対応しているブラウザーでは、内側の表示種別がないと既定で `flow` になります。外側の表示種別が指定されないと、基本ボックスは外側の表示種別が `block` になります。

### 内部

`<display-internal>`

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

`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>` 要素のように動作します。

### ボックス

`<display-box>`

これらのキーワードは、要素が表示ボックスを作るかどうかを定義します。

`contents`

これらの要素は自身のために特定のボックスを生成しません。擬似ボックスやその子ボックスで置き換えられます。なお、 CSS Display Level 3 仕様書では、 `contents` の値が「普通ではない要素」 — 置換要素のように、 CSS ボックスの純粋な概念に従って表示されない要素に影響する方法を定義しています。詳しくは Appendix B: Effects of display: contents on Unusual Elements を参照してください。

*ブラウザーのバグにより、現在のところ、この値を使用するとアクセシビリティツリーから要素を削除します。 — 読み上げソフトは中に何があるかを見ません。詳しくは後述のアクセシビリティの考慮の節をご覧ください。*

`none`

 要素の表示を無くし、レイアウトに影響を与えなくなります (文書は要素が存在しないかのように表示されます)。すべての子孫要素も表示がなくなります。
 要素が通常占める空間を確保しつつ、実際には何も表示しないようにしたいのであれば、代わりに `visibility` プロパティを使用してください。

### 旧来のもの

`<display-legacy>`

CSS 2 では `display` プロパティで単一のキーワードによる構文を採用しており、同じレイアウトモードのブロックレベルとインラインレベルで別々のキーワードが必要でした。

`inline-block`

この要素はブロック要素ボックスを生成しますが、周囲のコンテンツに対しては単一のインラインボックスであるかのように流れるようになります (置換要素の場合と似ています)。

これは `inline flow-root` と等価です。

`inline-table`

`inline-table` は、 HTML には直接的に対応するものがありません。これは、 HTML の `<table>` 要素と同じようにふるまいつつ、ブロックレベルボックスではなく、インラインボックスのようにふるまいます。表ボックスの内側はブロックレベルのコンテキストになります。

これは `inline table` と等価です。

`inline-flex`

要素は、インライン要素のようにふるまいつつ、その内容物をフレックスボックスモデルに従ってレイアウトします。

これは `inline flex` と等価です。

`inline-grid`

要素は、インライン要素のようにふるまいつつ、その内容物をグリッドモデルに従ってレイアウトします。

これは `inline grid` と等価です。

### 現在はどちらの構文を使用するべきか

Level 3 仕様書は `display` プロパティに 2 つの値を — 外側および内側の表示種別の指定を明示的に行うために — 説明しています。しかし、これはブラウザーの互換性が不十分です。

`<display-legacy>` による方法は、単一のキーワード値で同じ結果を生み出すので、二つのキーワード値による指定の対応が進むまで使用してください。例えば、 2 つの値でインラインのフレックスコンテナーは次のように指定することができます。

```css
.container {
  display: inline flex;
}
```

現在は、単一の値を使用して指定することができます。

```css
.container {
  display: inline-flex;
}
```

これらの仕様変更の詳細については、display の新しい 2 つの値の構文への対応の記事を参照してください。

### グローバル

```css
/\* グローバル値 \*/
display: inherit;
display: initial;
display: unset;
```

解説
--

`display` に設定できる様々な種類の値の個々のページでは、それらの値が動作する機能の複数の例をを設定しています。 — 構文の節を参照してください。なお、 display の様々な値については、以下の資料で詳しく解説していますので、ご覧ください。

* display の 2 値構文への対応
### CSS フローレイアウト (display: block, display: inline)

* 通常フローでのブロックおよびインラインレイアウト
* フローレイアウトとオーバーフロー
* フローレイアウトと書字方向
* 整形コンテキストの紹介
* フロー内とフローの外
### display: flex

* フレックスボックスの基本概念
* フレックスコンテナー内のアイテムの配置
* 主軸方向のフレックスアイテムの比率の制御
* フレックスアイテムの折り返しをマスターする
* フレックスアイテムの順序
* フレックスボックスと他のレイアウト方法の関係
* フレックスボックスの後方互換性
* フレックスボックスの典型的な用途
### display: grid

* グリッドレイアウトの基本概念
* グリッドレイアウトと他のレイアウト方法との関係
* 線に基づく配置を使用したグリッドレイアウト
* グリッドテンプレート領域
* 名前付きグリッド線を使用したレイアウト
* グリッドレイアウトでの自動配置
* グリッドレイアウトのボックス配置
* グリッド、論理的な値、書字方向
* グリッドレイアウトとアクセシビリティ
* CSS グリッドレイアウトとプログレッシブエンハンスメント
* グリッドを使用したよくあるレイアウトの実現
アクセシビリティの考慮
-----------

### display: none

要素の `display` の値に `none` を使用すると、その要素はアクセシビリティツリーから削除されます。すなわち、その要素とすべての子孫要素は読み上げ技術によって読み上げられなくなります。

要素を視覚的に隠したい場合は、よりアクセシブルな代替手段として、画面から視覚的に要素を削除しますが、スクリーンリーダーのような支援技術が解析可能な状態を維持するための、プロパティの組み合わせを使用できます。

### display: contents

大部分のブラウザーの現在の実装では、アクセシビリティツリーから `display` の値が `contents` であるすべての要素を削除します (ただし子孫は残ります)。これにより、その要素自身は読み上げソフトでは読み上げられなくなります。これは CSS 仕様書によれば正しくありません。

* More accessible markup with display: contents | Hidde de Vries
* Display: Contents Is Not a CSS Reset | Adrian Roselli
### 表

`<table>` 要素の `display` の値を `block`、`grid`、あるいは `flex` に変更すると、アクセシビリティツリーでの表現が変わります。これにより、表が読み上げ技術によって適切に読み上げられなくなります。

* Short note on what CSS display properties do to table semantics — The Paciello Group
* Hidden content for better a11y | Go Make Things
* MDN WCAG を理解する ― ガイドライン 1.3 の解説
* Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0
公式定義
----

|  |  |
| --- | --- |
| 初期値 | `inline` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 指定通り。ただし位置指定された要素とフロート、ルート要素を除く。これらは計算値が指定したものと違うキーワードになる可能性があります |
| アニメーションの種類 | Discrete behavior except when animating to or from `none` is visible for the entire duration |

形式文法
----
```

display =
  [ <display-outside> || <display-inside> ]         |
  <display-listitem>                                |
  <display-internal>                                |
  <display-box>                                     |
  <display-legacy>                                  |
  <display-outside> || [ <display-inside> | math ]

<display-outside> =
  block   |
  inline  |
  run-in

<display-inside> =
  flow       |
  flow-root  |
  table      |
  flex       |
  grid       |
  ruby

<display-listitem> =
  <display-outside>?     &&
  [ flow | flow-root ]?  &&
  list-item

<display-internal> =
  table-row-group      |
  table-header-group   |
  table-footer-group   |
  table-row            |
  table-cell           |
  table-column-group   |
  table-column         |
  table-caption        |
  ruby-base            |
  ruby-text            |
  ruby-base-container  |
  ruby-text-container

<display-box> =
  contents  |
  none

<display-legacy> =
  inline-block  |
  inline-table  |
  inline-flex   |
  inline-grid

```

例
-

### display 値の比較

この例では、 2 つのブロックレベルのコンテナー要素があり、それぞれに 3 つのインラインの子要素があります。その下には、コンテナーに異なる `display` の値を適用するための選択メニューがあり、異なる値が要素のレイアウトとその子要素のレイアウトにどのように影響するかを比較対照することができます。

コンテナーとその子要素には `padding` と `background-color` が含まれているので、表示値の効果がわかりやすくなっています。

**メモ:** 新しい2つの値の構文は、対応がまだかなり限られているため、ここでは一切含めていません。

#### HTML

```html
<article class="container">
  <span>First</span>
  <span>Second</span>
  <span>Third</span>
</article>

<article class="container">
  <span>First</span>
  <span>Second</span>
  <span>Third</span>
</article>

<div>
  <label for="display">Choose a display value:</label>
  <select id="display">
    <option selected>block</option>
    <option>inline</option>
    <option>inline-block</option>
    <option>none</option>
    <option>flex</option>
    <option>inline-flex</option>
    <option>grid</option>
    <option>inline-grid</option>
    <option>table</option>
    <option>list-item</option>
  </select>
</div>
```

#### CSS

```css
html {
  font-family: helvetica, arial, sans-serif;
  letter-spacing: 1px;
  padding-top: 10px;
}

article {
  background-color: red;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
}

article,
span {
  padding: 10px;
  border-radius: 7px;
}

article,
div {
  margin: 20px;
}
```

#### JavaScript

```js
const articles = document.querySelectorAll(".container");
const select = document.querySelector("select");

function updateDisplay() {
  articles.forEach((article) => {
    article.style.display = select.value;
  });
}

select.addEventListener("change", updateDisplay);

updateDisplay();
```

#### 結果

**メモ:** 上記にリンクされている各個別の表示データ型のページには、より多くの例があります。

仕様書
---

| Specification |
| --- |
| CSS Display Module Level 3 # the-display-properties |

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

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

関連情報
----

* 通常フローでのブロックおよびインラインレイアウト
* 整形コンテキストの紹介
* `visibility`, `float`, `position`
* `grid`, `flex`


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

border-inline-end-color
=======================

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

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

構文
--

```css
border-inline-end-color: rebeccapurple;
border-inline-end-color: #663399;

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

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

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

### 値

`<'color'>`

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

公式定義
----

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

形式文法
----
```

border-inline-end-color =
  <color>     |
  <image-1D>

<image-1D> =
  <stripes()>

<stripes()> =
  stripes( <color-stripe># )

<color-stripe> =
  <color>                            &&
  [ <length-percentage> | <flex> ]?

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

```

例
-

### 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: 10px solid blue;
  border-inline-end-color: red;
}
```

仕様書
---

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

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

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

関連情報
----

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


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

ID セレクター
========

CSS の **ID セレクター** (ID selector) は、 `id` 属性の値に基づいて要素と一致します。選択される要素の `id` 属性は、セレクターで指定した値と完全一致していなければなりません。

```css
/\* id="demo" のついた要素 \*/
#demo {
  border: red 2px solid;
}
```

構文
--

```css
#id\_value { スタイルプロパティ }
```

なお、これは次の`属性セレクター`と等価です (ただし、詳細度は異なります)。

```css
[id=id\_value] { スタイルプロパティ }
```

例
-

### CSS

```css
#identified {
  background-color: skyblue;
}
```

### HTML

```html
<div id="identified">これは特別な ID がついています！</div>
<div>これは単なる普通の div です。</div>
```

### 結果

仕様書
---

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

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

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

関連情報
----

* CSS セレクター
* CSS の学習: セレクター


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

font-variant-position
=====================

**`font-variant-position`** は CSS のプロパティで、上付き文字または下付き文字として配置された小さな代替文字の使用を制御します。

文字は変更されないまま、フォントのベースラインから相対的に配置されます。これらの文字はふつう、 `<sub>` と `<sup>` 要素で使用されます。

```css
/\* キーワード値 \*/
font-variant-position: normal;
font-variant-position: sub;
font-variant-position: super;

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

これらの代替文字の使用が有効の場合、一連の中のある文字がそのような字体 - 強調字体を持っていない場合、一連の文字のセット全体が代替方法を使用して、合成によって描画されます。

これらの代替字体は、フォントの他の部分と同じ em ボックスと同じベースラインを共有します。それらは単にグラフィカルに強化されており、行の高さや他のボックスの特性には影響しません。

構文
--

`font-variant-position` プロパティは、以下に列挙されたキーワード値のうちの一つで指定します。

### 値

`normal`

上付き文字および下付き文字の字体の代替を無効にします。

`sub`

下付き文字の代替グリフを有効にします。特定の文字列で、そのような文字の1つが使用できない場合、文字列内のすべての文字が合成を使用して描画されます。

`super`

上付き文字の代替グリフを有効にします。特定の文字列で、そのような文字の1つが使用できない場合、文字列内のすべての文字が合成を使用して描画されます。

公式定義
----

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

形式文法
----
```

font-variant-position =
  normal  |
  sub     |
  super

```

例
-

### 上付きおよび下付き形の設定

#### HTML

```html
<p class="normal">Normal!</p>
<p class="super">Super!</p>
<p class="sub">Sub!</p>
```

#### CSS

```css
p {
  display: inline;
}

.normal {
  font-variant-position: normal;
}

.super {
  font-variant-position: super;
}

.sub {
  font-variant-position: sub;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-variant-position-prop |

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

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

関連情報
----

* `font-variant-alternates`
* `font-variant-caps`
* `font-variant-east-asian`
* `font-variant-ligatures`
* `font-variant-numeric`


CSS 段組みレイアウト - CSS: カスケーディングスタイルシート

CSS 段組みレイアウト
============

**CSS 段組みレイアウト**は CSS のモジュールの一つで、段組みレイアウトの対応を追加するものです。対応内容はレイアウトする段数の指定、段から段へのコンテンツの流れ方、段間の空白、段区切り線 (段間罫) などの対応が含まれています。

基本的な例
-----

以下の例では、 `column-count` プロパティをコンテナーのクラスの要素に適用しています。 `column-count` の値が `3` なので、内容物は同じ寸法の 3 つの段に並べられます。

断片化との関係
-------

段組みレイアウトは、文書全体が印刷ページに分割されるように行ボックスに分割することから、ページ付きメディアに密接に関連します。従って、 CSS 断片化仕様書に定義されているプロパティが、段間の内容物の区切り位置を制御するために必要になりました。

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

### 段組みレイアウトのプロパティ

* `column-count`
* `column-fill`
* `column-gap`
* `column-rule`
* `column-rule-color`
* `column-rule-style`
* `column-rule-width`
* `column-span`
* `column-width`
* `columns`
### 関連する CSS 断片化のプロパティ

* `break-after`
* `break-before`
* `break-inside`
* `orphans`
* `widows`
ガイド
---

段組みの基本概念

段組みレイアウト仕様の概要です。

段のスタイル付け

段間罫と段間の空間の使い方です。

段抜きと段の均衡

すべての段にまたがる要素の作り方と、段を埋める方法の制御です。

段組みでのはみ出しの扱い

アイテムが段をあふれたときに起こることと、段内の内容物が多すぎてコンテナーに収まらない場合に起こることです。

段組みにおける内容の分割の扱い

分割の仕様とどこで内容を区切るかの制御方法です。

仕様書
---

| Specification |
| --- |
| CSS Multi-column Layout Module Level 1  |

関連情報
----

他の CSS レイアウト技術には以下のようなものがあります。

* CSS フレックスボックスレイアウト (CSS フレックスボックス)
* CSS グリッドレイアウト


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

詳細度
===

**詳細度** (Specificity) は、ある要素に最も関連性の高い CSS 宣言を決定するためにブラウザーが使用するアルゴリズムで、これによって、その要素に使用するプロパティ値が決定されます。詳細度のアルゴリズムは、CSS セレクターの重みを計算し、競合する CSS 宣言の中からどのルールを要素に適用するかを決定します。

**メモ:** ブラウザーは、カスケードのオリジンと重要度を決定した後に、詳細度を検討します。言い換えれば、プロパティ宣言が競合している場合、そのプロパティの優先順位を保有する 1 つのカスケードのオリジンとレイヤーのセレクター間でのみ、詳細度が関連し比較されます。優先順位を持つカスケードレイヤーで競合する宣言のセレクターの詳細度が等しいとき、出現順序が関連するようになります。

詳細度の計算方法
--------

詳細度は、与えられた CSS 宣言に適用される重みを計算するアルゴリズムです。重みは、その要素（または擬似要素）に一致するセレクターの中で、それぞれの重み分類別のセレクターの数によって決定されます。同じ要素に異なるプロパティ値を提供する宣言が 2 つ以上ある場合、一致するセレクターを持つスタイルブロックの宣言値のうち、アルゴリズムによる重みが最も大きいものが適用されます。

詳細度アルゴリズムは、基本的に 3 種類のセレクターに対応する ID、CLASS、TYPE という 3 つの分類または重みの 3 列の値で構成されます。この値は、それぞれの重み分類に含まれるセレクターの成分の数を表し、*ID - CLASS - TYPE* のように書かれます。 3 つの列は、要素に一致するセレクターの中で、各セレクターの重み分類のセレクターの成分の数を数えることによって作成されます。

### セレクターの重み分類

ここでは、セレクターの重み分類を、詳細度の高いものから順番に並べています。

ID 列

ID セレクター、例えば `#example` のみを含みます。一致するセレクターに含まれる ID ごとに、重みの値に 1-0-0 を追加します。

CLASS 列

クラスセレクター（`.myClass` など）や、属性セレクター（`[type="radio"]` や `[lang|="fr"]` など）、擬似クラスセレクター（`:hover`, `:nth-of-type(3n)`, `:required` など）を指します。一致するセレクターのクラス、属性セレクター、擬似クラスごとに、重みの値に 0-1-0 を追加します。

TYPE 列

要素型セレクター（`p`, `h1`, `td` など）、擬似要素セレクター（`::before`, `::placeholder`, それ以外のコロン 2 つの表記のセレクターすべて）を指します。一致するセレクター内での型や擬似要素ごとに、重みの値に 0-0-1 を追加します。

値なし

全称セレクター (`*`) および擬似クラス `:where()` とその引数は、重みの計算にはカウントされませんが、要素には一致します。全称セレクターと擬似クラスの値は 0-0-0 です。これらのセレクターは詳細度の計算に影響を与えません。

結合子（`+`, `>`, `~`, " ", `||`）は、何を選択するのかをより具体化することができますが、詳細度の重みに値を追加することはありません。

否定擬似クラスである `:not()` 自身は重みがありません。 `:is()` や `:has()` 擬似クラスも同様です。しかし、これらのセレクターの引数は重みを持ちます。どちらの値も、引数リストの中で最も詳細度の高い引数から採用されます。 `:not()`, `:is()` および `:has()` の例外 については、後ほど説明します。

#### 一致するセレクター

詳細度の重みは、一致するセレクターによって決まります。カンマで区切られた 3 つのセレクターからなるこの CSS セレクターを例に考えてみましょう。

```css
[type="password"],
input:focus,
:root #myApp input:required {
  color: blue;
}
```

上のセレクターリストにある `[type="password"]` セレクターは、詳細度の重みが `0-1-0` で、 `color: blue` の宣言をすべてのパスワードの入力型に適用します。

すべての入力は、型にかかわらず、フォーカスを受けると、リストの 2 つ目のセレクター `input:focus` に一致し、その詳細度は `0-1-1` です。この重みは、 `:focus` 擬似クラス (0-1-0) と `input` 型 (0-0-1) で構成されています。パスワード入力にフォーカスがある場合、 `input:focus` に一致し、スタイル宣言 `color: blue` の詳細度の重みは `0-1-1` となります。パスワードにフォーカスがない場合、詳細度の重みは `0-1-0` のままです。

`id="myApp"` という属性を持つ要素にネストされた必須入力の詳細度は、 1 つの ID、 2 つの擬似クラス、 1 つの要素型に基づいて、 `1-2-1` となります。

パスワード入力型が `id="myApp"` が設定された要素にネストされている場合、フォーカスがあるかどうかに関わらず、詳細度の重みは `1-2-1` になります。なぜこの場合、詳細度の重みが `0-1-1` や `0-1-0` ではなく、 `1-2-1` になるのでしょうか？それは、詳細度の重みが最も大きい一致するセレクターから、詳細度の重みが決まるからです。重みは 3 つの列の値を左から右に比較することで決定されます。

```css
[type="password"]             /\* 0-1-0 \*/
input:focus                   /\* 0-1-1 \*/
:root #myApp input:required   /\* 1-2-1 \*/
```

### 3 つの列の比較

該当するセレクターの詳細度値が決まったら、それぞれの列のセレクター成分の数を左から右に並べて比較します。

```css
#myElement {
  color: green; /\* 1-0-0 - 勝ち!! \*/
}
.bodyClass .sectionClass .parentClass [id="myElement"] {
  color: yellow; /\* 0-4-0 \*/
}
```

最初の列は *ID* 成分の値で、各セレクターのIDの数を表しています。競合するセレクターの *ID* 列の数値が比較されます。他の列の値がどうであれ、 *ID* 列の値がより大きいセレクターが勝ちます。上記の例では、黄色のセレクターが全体としてより多くの成分を保有しているとしても、重要なのは最初の列の値だけです。

競合するセレクターの *ID* 列の数字が同じであれば、次の *CLASS* 列を比較し、次のようになります。

```css
#myElement {
  color: yellow; /\* 1-0-0 \*/
}
#myApp [id="myElement"] {
  color: green; /\* 1-1-0 - 勝ち!! \*/
}
```

*CLASS* 列は、セレクターに含まれるクラス名、属性セレクター、擬似クラスの数です。 *ID* 列の値が同じ場合、 *TYPE* 列の値にかかわらず、 *CLASS* 列の値が大きいセレクターが勝ちます。これは、以下の例で示されています。

```css
:root input {
  color: green; /\* 0-1-1 - CLASS 列が大きいため勝ち \*/
}
html body main input {
  color: yellow; /\* 0-0-4 \*/
}
```

競合するセレクターの *CLASS* 列と *ID* 列の数字が同じであれば、 *TYPE* 列が関係してきます。 *TYPE* 列は、セレクターに入力された要素型と擬似要素の数です。最初の 2 列が同じ値である場合、 *TYPE* 列の数値が大きいセレクターが勝ちます。

競合するセレクターが 3 列すべてで同じ値を持つ場合、近接ルールが適用され、最後に宣言されたスタイルが優先されます。

```css
input.myClass {
  color: yellow; /\* 0-1-1 \*/
}
:root input {
  color: green; /\* 0-1-1 後にあるので勝ち \*/
}
```

### `:is()`, `:not()` および `:has()` の例外

全一致の擬似クラス `:is()`, 否定擬似クラス `:not()` および関係擬似クラス `:has()` は、詳細度の計算では擬似クラスとは見なされません。それ自体は、詳細度算出のための重みを追加するものではありません。しかし、擬似クラスの括弧に渡されたセレクターの引数は、詳細度アルゴリズムの一部です。詳細度値の計算における一致するセレクターと否定の擬似クラスの重みは、引数の重みとなります。

```css
p {
  /\* 0-0-1 \*/
}
:is(p) {
  /\* 0-0-1 \*/
}
h2:nth-last-of-type(n + 2) {
  /\* 0-1-1 \*/
}
h2:has(~ h2) {
  /\* 0-0-2 \*/
}
div.outer p {
  /\* 0-1-2 \*/
}
div:not(.inner) p {
  /\* 0-1-2 \*/
}
```

上記の CSS の組み合わせにおいて、`:is()`, `:not()` および `:has()` 擬似クラスが提供する詳細度の重みは、擬似クラスの値ではなく、セレクターの引数の値であることに注意してください。

これら3つの擬似クラスは、引数としてカンマで区切られた複雑なセレクターリストを受け入れます。この機能は、セレクターの詳細度を上げるために使用することができます。

```css
:is(p, #fakeId) {
  /\* 1-0-0 \*/
}
h1:has(+ h2, > #fakeId) {
  /\* 1-0-1 \*/
}
p:not(#fakeId) {
  /\* 1-0-1 \*/
}
div:not(.inner, #fakeId) p {
  /\* 1-0-2 \*/
}
```

上記の CSS コードブロックでは、セレクターに `#fakeId` が含まれています。この `#fakeId` は、各段落の詳細度の重みに `1-0-0` を追加します。

一般的に、詳細度は最小限に抑えたいものですが、特定の理由で要素の詳細度を上げる必要がある場合は、この 3 つの擬似クラスが役に立ちます。

```css
a:not(#fakeId#fakeId#fakeID) {
  color: blue; /\* 3-0-1 \*/
}
```

この例では、 3 つ以上の ID を持つリンク宣言、 `a` に一致する色の値が `!important` フラグを含む場合、またはリンクにインラインスタイルの色宣言がある場合で上書きされなければ、すべてのリンクは青色となります。このようなテクニックを使用する場合は、なぜそのハックが必要であったかを説明するコメントを追加してください。

### インラインスタイル

要素に追加されたインラインスタイル（例えば、`style="font-weight: bold;"`）は、作成者のスタイルシートにある通常のスタイルを常に上書きするので、最も高い詳細度を保有すると考えることができます。インラインスタイルは、`1-0-0-0`という詳細度の重みを保有すると考えてください。

インラインスタイルを上書きする唯一の方法は、`!important`を使用することです。

多くの JavaScript フレームワークやライブラリーはインラインスタイルを追加します。インラインスタイルを使用する属性セレクターなど、とても的を絞ったセレクターで `!important` を使用することは、これらのインラインスタイルを上書きする一つの方法です。

```html
<p style="color: purple">…</p>
```

```css
p[style\*="purple"] {
  color: rebeccapurple !important;
}
```

important フラグを使用する際は必ずコメントを入れてください。そうすれば、コードの管理者はなぜ CSS のアンチパターンが使用されたかを理解することができます。

### !important の例外

important とマークされた CSS 宣言は、同じカスケード層とオリジン内の他の宣言を上書きします。技術的には、`!important`は詳細度と何の関係もありませんが、詳細度やカスケードとは直接的に相互作用するものです。これは、スタイルシートのカスケードの順序を逆転させます。

同じオリジンとカスケードレイヤーからの宣言が競合し、一方のプロパティ値に `!important` フラグが設定されている場合、詳細度に関係なく、重要な宣言が適用されます。同じオリジンとカスケードレイヤーで `!important` フラグを持つ宣言が競合した場合、同じ要素に適用されると、より詳細度の高い宣言が適用されます。

`!important` を使用して詳細度を上書きすることは**悪しき習慣**と考えられており、そのための使用は避けるべきです。詳細度やカスケードについて理解し、効果的に使用することで、 `!important` フラグの必要性をなくすことができます。

`!important` を使用して外部の CSS （Bootstrap や normalize.css など）を上書きする代わりに、サードパーティのスクリプトを直接カスケードレイヤーにインポートするようにしてください。 CSS でどうしても `!important` を使用したい場合は、用途をコメントで記述しておくと、将来のコード保守者がその宣言がなぜ important とマークされたのかを知り、それを上書きしないようにすることができます。しかし、他の開発者が制御できない状態で組み込む必要があるプラグインやフレームワークを書くときには、絶対に `!important` を使用しないでください。

### :where() の例外

詳細度を調整する擬似クラス `:where()` は、常にその詳細度が 0、`0-0-0` に置き換えられています。これにより、どの要素を対象としても詳細度を上げることがない、とても特殊な CSS セレクターを作ることができるようになります。

CSS を編集するアクセス権を持たない開発者が使用するサードパーティ CSS を保有する場合、可能な限り詳細度の低い CSS を作成することは良い習慣と考えられています。例えば、あなたのテーマが以下のような CSS を入れている場合は次のようにします。

```css
:where(#defaultTheme) a {
  /\* 0-0-1 \*/
  color: red;
}
```

そうすれば、ウィジェットを搭載する開発者は、要素型セレクターを使用するだけで、簡単にリンクの色を上書きすることができます。

```css
footer a {
  /\* 0-0-2 \*/
  color: blue;
}
```

詳細度に関する頭痛の種を処理するためのヒント
----------------------

`!important` を使用する代わりに、カスケードレイヤーを使用し、 CSS 全体を通して、より詳細なルールで簡単にスタイルを上書きできるように、重み付けを低くすることを検討してください。 セマンティック HTML を使用すると、スタイルを適用するためのアンカーを提供するのに役立ちます。

### 詳細度を上げることなくセレクターを具体的にする

選択する要素の前にスタイル付けする文書の部分を示すことで、ルールはより詳細度が増します。追加する方法によって、以下のように、ある程度、かなり詳細度を上げたり、まったく詳細度を上げなかったりすることができます。

```html
<main id="myContent">
  <h1>Text</h1>
</main>
```

```css
#myContent h1 {
  color: green; /\* 1-0-1 \*/
}
[id="myContent"] h1 {
  color: yellow; /\* 0-1-1 \*/
}
:where(#myContent) h1 {
  color: blue; /\* 0-0-1 \*/
}
```

どのような順番であっても、見出しは緑色になります。そのルールが最も詳細度が高いからです。

#### ID セレクターの詳細度の縮小

詳細度は、セレクターの形式に基づいています。 Id セレクターではなく、要素の `id` を属性セレクターとして入れることで、過剰に詳細度を加算することなく、より具体的に要素を特定することができます。前の例では、セレクター `[id="myContent"]` は ID を選択しているにもかかわらず、セレクターの詳細度を決定する際には属性セレクターとして扱われます。

また、セレクターをより詳細にする必要があるが、詳細度を全く加算したくない場合には、 `:where()` 詳細度調整用擬似クラスの引数として `id` やセレクターの任意の部分を入れることができます。

### セレクターの複製による詳細度の向上

詳細度を上げるための特別な方法として、 *CLASS* または *ID* 列の重みを重複させることができます。複合セレクターの中で、ID、クラス、擬似クラス、属性のセレクターを重複して保有すると、詳細度を高めて、制御できないとても詳細度の高いセレクターを上書きすることができます。

```css
#myId#myId#myId span {
  /\* 3-0-1 \*/
}
.myClass.myClass.myClass span {
  /\* 0-3-1 \*/
}
```

使用するとしても控えめにしてください。セレクターの重複を使用する場合は、常に　CSS　にコメントを入れましょう。

`:is()` と `:not()` を使用することで、親要素に `id` を追加することができなくても、詳細度を上げることができます。

```css
:not(#fakeID#fakeId#fakeID) span {
  /\* 3-0-1 \*/
}
:is(#fakeID#fakeId#fakeID, span) {
  /\* 3-0-0 \*/
}
```

### サードパーティの CSS より優先

カスケードレイヤーを活用することは、あるスタイルのセットが別のスタイルのセットよりも優先されるようにする標準的な方法です。カスケードレイヤーは、詳細度を使用せずにこれを可能にします。 レイヤーにインポートされた通常の（重要でない）作成者スタイルは、レイヤー外の作成者スタイルよりも低い優先順位を持ちます。

スタイルが編集できないか理解できないスタイルシートから来ていて、スタイルを上書きする必要がある場合、戦略としては、制御しないスタイルをカスケードレイヤーにインポートすることです。続いて宣言されたレイヤーのスタイルは優先され、レイヤーされていないスタイルは同じ起源の全てのレイヤーのスタイルより優先されます。

異なるレイヤーからの 2 つのセレクターが同じ要素に一致するとき、オリジンと重要性が優先されます。負けたスタイルシートのセレクターの詳細度は関係ありません。

```html
<style>
 @import TW.css layer();
 p,
 p \* {
 font-size: 1rem;
 }
</style>
```

上記の例では、ネストされたコンテンツを含むすべての段落のテキストは、 TW スタイルシートと一致するクラス名がいくつあっても、 `1rem` になります。

### `!important` の防止と上書き

最良の方法は `!important` を使用しないことです。上記の詳細度に関する説明は、このフラグを使用しないようにしたり、遭遇したときに完全に削除したりするのに役立つはずです。

`!important` の必要性を感じさせないようにするには、以下のような方法があります。

* 以前の `!important` 宣言のセレクターの詳細度を上げ、他の宣言よりも大きくする。
* 同じ詳細度を与え、上書きする宣言の後に置く。
* 上書きしようとするセレクターの詳細度を下げる。

このようなメソッドはすべて、前のセクションに則しています。

もし、作成者のスタイルシートから `!important` フラグを削除できない場合、重要なスタイルを上書きする唯一の解決策は、 `!important` を使用することです。 important 宣言を上書きするカスケードレイヤーを作成することは、優れた解決策です。これを行うには、次の 2 つの方法があります。

#### 方法 #1

1. 重要な宣言だけを含む別個の短いスタイルシートを作成し、削除できなかった重要な宣言は特に上書きする。
2. このスタイルシートを、他のスタイルシートにリンクする前に、 `layer()` を使用した `@import` 文を使用して、CSS の最初のインポートとしてインポートしてください。これは、 important の上書きが最初のレイヤーとしてインポートされることを保証するためのものです。

```html
<style>
 @import importantOverrides.css layer();
</style>
```

#### 方法 #2

1. スタイルシートの宣言の始めに、以下のように名前付きカスケードレイヤーを作成します。

```css
@layer importantOverrides;
```

2. 重要な宣言を上書きする必要がある場合は、その都度、指定されたレイヤーの中で宣言してください。重要なルールはレイヤーの中だけで宣言してください。

```css
[id="myElement"] p {
  /\* normal styles here \*/
}
@layer importantOverrides {
  [id="myElement"] p {
    /\* important style here \*/
  }
}
```

レイヤー内の重要なスタイルのセレクターの詳細度は、上書きしようとする要素に一致する限り、低くてもかまいません。通常のレイヤーは、レイヤーのスタイルはレイヤーなしのスタイルより優先順位が低いので、レイヤーの外側で宣言する必要があります。

### 文書ツリー内の近接性の無視

指定されたセレクターで参照される要素と他の要素との近接性は、詳細度には影響を与えません。

```css
body h1 {
  color: green;
}

html h1 {
  color: purple;
}
```

これらの宣言は詳細度が同じですが、あとに宣言されたセレクターが優先されるため `<h1>` 要素は紫色になります。

### 直接対象の要素と継承されたスタイル

直接対象となる要素のスタイルは、継承されたルールの詳細度に関係なく、常に継承されたスタイルよりも優先されます。以下のような CSS と HTML がある場合...

```css
#parent {
  color: green;
}

h1 {
  color: purple;
}
```

```html
<html lang="ja">
  <body id="parent">
    <h1>これがタイトルです。</h1>
  </body>
</html>
```

`h1` は紫色になりますが、これは `h1` セレクターがその要素を詳細に対象としているためで、緑色は `#parent` 宣言から継承されたものです。

例
-

以下の CSS には、色を設定する `<input>` 要素を対象とする 3 つのセレクターがあります。与えられた入力に対して、 優先する色宣言の詳細度重み付けは、最も大きい重みで一致するセレクターになります。

```css
#myElement input.myClass {
  color: red;
} /\* 1-1-1 \*/
input[type="password"]:required {
  color: blue;
} /\* 0-2-1 \*/
html body main input {
  color: green;
} /\* 0-0-4 \*/
```

上記のセレクターがすべて同じ入力を対象とした場合、最初の宣言が *ID* 列に最も大きな値を保有しているため、入力は赤になります。

最後のセレクターは、 4 つの *TYPE* 成分を保有しています。整数値としては最も大きいですが、要素や擬似要素がいくつ入れられたとしても、たとえ 150 個あったとしても、 TYPE 成分が *CLASS* 成分より優先されることはありません。列の値は、列の値が等しい場合に左から右に向かって比較されます。

上の例のコードで id セレクターを属性セレクターに変換していた場合、最初の 2 つのセレクターは、以下のように同じ詳細度を持つことになります。

```css
[id="myElement"] input.myClass {
  color: red;
} /\* 0-2-1 \*/
input[type="password"]:required {
  color: blue;
} /\* 0-2-1 \*/
```

複数の宣言が同じ詳細度である場合、 CSS の中で最後に見つかった宣言がその要素に適用されます。両方のセレクターが同じ `<input>` に一致する場合、色は青になります。

追加のメモ
-----

詳細度について、いくつか覚えておきたいことがあります。

1. 詳細度は、同じ要素が同じカスケードレイヤーやオリジンの複数の宣言によってターゲットにされている場合にのみ適用されます。特定度は、同じ重要度、同じオリジン、カスケードレイヤーの宣言にのみ関係します。一致するセレクターが異なるオリジンにある場合、カスケードはどちらの宣言が優先されるかを決定します。
2. 同じカスケードレイヤー、同じオリジンにある 2 つのセレクターが同じ詳細度にある場合、近接度が重要であり、最後のセレクターが勝ちます。
3. CSS のルールとして、要素が祖先から継承するルールよりも、直接対象となる要素 が常に優先されます。
4. 文書ツリー内の要素の近接性は詳細度に影響しません。
仕様書
---

| Specification |
| --- |
| Selectors Level 4 # specificity-rules |

関連情報
----

* 「カスケードと継承」の「詳細度」
* SpeciFISHity
* Specificity Calculator: 自身の CSS ルールをテストし、理解するための対話型ウェブサイト
* *ID-CLASS-TYPE* exercise 詳細度クイズ
* CSS の主要概念:
    + CSS の構文
    + アットルール
    + コメント
    + 継承
    + ボックスモデル
    + レイアウトモード
    + 視覚整形モデル
    + マージンの相殺
    + 値
        - 初期値
        - 計算値
        - 使用値
        - 実効値
    + 値の定義構文
    + 一括指定プロパティ
    + 置換要素


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

CSS セレクター
=========

**CSS セレクター**モジュールは、要素を選択するパターンを定義し、一連の CSS ルールをその`詳細度`とともに適用します。 CSS セレクターモジュールには、 60 以上のセレクターと 5 つの結合子が用意されています。他のモジュールは、さらに擬似クラスセレクターと擬似要素が提供されています。

CSS では、セレクターはスタイルを設定したい要素と照合、または選択するために使用されるパターンです。セレクターは JavaScript でも使用され、 `NodeList` として返すDOMノードを選択することができます。

セレクターは、 CSS でも JavaScript でも、 HTML 要素の型、属性、現在の状態、さらには DOM 内の位置に基づいてターゲットを絞ることができます。結合子は、他の要素との関係に基づいて要素を選択できるようにすることで、要素を選択する際により正確に行えるようにします。

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

### 結合子とセパレーター

* `+` （次兄弟結合子）
* `>` （子結合子）
* `||` （列結合子）
Experimental
* `~` （後続兄弟結合子）
* " " （子孫結合子）
* `|` （名前空間セパレーター (en-US)）
### セレクター

* `:active`
* `:any-link`
* `:autofill`
* `:blank`
* `:buffering` (en-US)
* `:checked`
* `:current` (en-US)
* `:current()` (en-US)
* `:default`
* `:defined`
* `:dir()`
* `:disabled`
* `:empty`
* `:enabled`
* `:first-child`
* `:first-of-type`
* `:focus`
* `:focus-visible`
* `:focus-within`
* `:fullscreen`
* `:future` (en-US)
* `:has()`
* `:hover`
* `:indeterminate`
* `:in-range`
* `:invalid`
* `:is()`
* `:lang()`
* `:last-child`
* `:last-of-type`
* `:link`
* `:local-link` (en-US)
* `:matches()` （旧式のセレクターで、 `:is()` の別名）
* `:modal` (en-US)
* `:muted` (en-US)
* `:not()`
* `:nth-child()`
* `:nth-of-type()`
* `:nth-last-child()`
* `:nth-last-of-type()`
* `:only-child`
* `:only-of-type`
* `:optional`
* `:out-of-range`
* `:past` (en-US)
* `:paused`
* `:picture-in-picture`
* `:placeholder-shown`
* `:playing`
* `:read-only`
* `:read-write`
* `:required`
* `:root`
* `:scope`
* `:seeking` (en-US)
* `:stalled` (en-US)
* `:target`
* `:target-within` (en-US)
* `:user-invalid`
* `:user-valid`
* `:valid`
* `:visited`
* `:volume-locked` (en-US)
* `:where()`
* `:-webkit-` 擬似クラス
* 属性セレクター
* クラスセレクター
* ID セレクター
* 要素型セレクター
* 全称セレクター
用語
--

* 擬似クラス（用語集の用語）
* 関数記法の擬似クラス
* 結合子
* 単純セレクター
* 複合セレクター
* 複雑セレクター
* 関連セレクター
* セレクターリスト
* 詳細度
ガイド
---

CSS セレクターと結合子

CSS セレクターと CSS 擬似モジュールで定義されている、さまざまな種類の単純なセレクターとさまざまな結合子の概要です。

CSS セレクターの構造

CSS セレクターの構造と、CSS セレクターモジュールで紹介されている用語について、「単純なセレクター」から「寛容な相対セレクターリスト」まで解説しています。

擬似クラス

擬似クラスは、文書ツリーには含まれない状態情報に基づいて要素を選択できるようにするセレクターの一覧で、さまざまな CSS モジュールや HTML で定義されています。

学習: CSS セレクター

CSS の構成要素の一部で、チュートリアルとして要素・クラス・ID によるセレクター、属性セレクター、擬似クラスと擬似要素、結合子、カスケード、詳細度、継承、カスケードレイヤーがあります。

セレクターでの `:target` 擬似クラスの利用

`:target` 擬似クラスを使って、 URL のフラグメント識別子をターゲット要素にスタイルを設定する方法を学びます。

学習: UI 擬似クラス

さまざまな状態のフォームをスタイル設定するために利用できる、さまざまな UI 擬似クラスについて学びます。

セレクターを使用した DOM 要素の特定

セレクター API を使用すると、 JavaScript でセレクターを使用して DOM から要素ノードを取得できます。

関連概念
----

* `:popover-open` 擬似クラス
* CSS nesting モジュール
    + : `&` nesting selector
* CSS scoping (en-US) モジュール
    + `:host` 擬似クラス
    + `:host()` 擬似クラス
    + `:host-context()` (en-US) 擬似クラス
    + `::slotted` 擬似要素
* CSS 擬似要素モジュール（HTML に含まれないものを表すために使用）
    + `::after`
    + `::before`
    + `::file-selector-button` (en-US)
    + `::first-letter`
    + `::first-line`
    + `::grammar-error`
    + `::marker`
    + `::placeholder`
    + `::selection`
    + `::spelling-error`
    + `::target-text`
* CSS シャドウ部品モジュール (en-US)
    + `::part` 擬似要素
* CSS 位置指定レイアウトモジュール
    + `::backdrop`
* その他の擬似要素
    + `::cue`
    + `::cue-region`
* `@namespace` アットルール
* `!important`
* 詳細度
* カスケード
* `Document.querySelector` メソッド
* `Document.querySelectorAll` メソッド
* `NodeList.forEach()` メソッド
仕様書
---

| Specification |
| --- |
| Selectors Level 4  |

関連情報
----

* CSS 擬似要素モジュール
* CSS カスケードと継承モジュール
* CSS 入れ子モジュール
* シャドウ DOM の使用


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

margin-right
============

**`margin-right`** は CSS のプロパティで、要素の右側のマージン領域を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。

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

隣り合う二つのボックスの垂直マージンは融合することがあります。これは*マージンの相殺*と呼ばれています。

構文
--

```css
/\* <length> 値 \*/
margin-right: 20px; /\* 絶対的な寸法 \*/
margin-right: 1em; /\* 文字の寸法からの相対 \*/
margin-right: 5%; /\* 直近のブロックコンテナーの幅からの相対 \*/

/\* キーワード値 \*/
margin-right: auto;

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

`margin-right` プロパティは `auto` キーワード、または `<length>` や `<percentage>` で指定されます。正の数、ゼロ、負の数が指定できます。

### 値

`<length>`

マージンの寸法を固定値で表したものです。

`<percentage>`

マージンの寸法を包含ブロックのインラインサイズ（`writing-mode` で横書き言語と定義されている場合は *width*）に対するパーセント値で示したものです。

`auto`

右マージンは未使用の水平方向の余白を共有します。これは主に使用されているレイアウトモードによって決定されます。 `margin-left` と `margin-right` の両方が `auto` の場合は、両方に均等に割り当てられます。それ以外の場合は以下の表のとおりです。

| `display` の値 | `float` の値 | `position` の値 | `auto` の計算値 | コメント |
| --- | --- | --- | --- | --- |
| `inline`, `inline-block`,
 `inline-table` | *任意* | `static` または `relative` | `0` | インラインレイアウトモード |
| `block`, `inline`, `inline-block`,
 `block`, `table`, `inline-table`,
 `list-item`, `table-caption` | *任意* | `static` または `relative` | `0`。ただし `margin-left` と `margin-right` が共に `auto` であった場合を除く。この場合、その要素が親の中で中央揃えされる値が設定される。 | ブロックレイアウトモード |
| `block`, `inline`, `inline-block`,
 `block`, `table`, `inline-table`,
 `list-item`, `table-caption` | `left` または `right` | `static` または `relative` | `0` | ブロックレイアウトモード (浮動要素) |
| *すべての* `table-*`*、ただし* `table-caption` *を除く* | *任意* | *任意* | `0` | 内部の `table-*` 要素にはマージンがない。代わりに `border-spacing` を使用のこと |
| *任意、ただし* `flex`, `inline-flex`, `table-*` *を除く* | *任意* | *`fixed`* または `absolute` | `0`。ただし `margin-left` と `margin-right` が共に `auto` 出逢った場合を除く。この場合、利用可能な `width` の中で境界領域が中央揃えされる値が設定される (fixed の場合)。 | 絶対位置指定レイアウトモード |
| `flex`, `inline-flex` | *任意* | *任意* | `0`。ただし、水平方向に正の余白がある場合を除く。この場合、 `auto` を指定したすべてのマージンに均等に分配される。 | フレックスボックスレイアウトモード |

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | `table-caption`, `table`, `inline-table` 以外の表の `display` 種別を除くすべての要素。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| パーセント値 | 包含ブロックの幅に対する相対値 |
| 計算値 | 指定されたパーセント値または絶対的な長さ |
| アニメーションの種類 | length |

形式文法
----
```

margin-right =
  <length-percentage>  |
  auto

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

```

例
-

### ピクセル数とパーセント値を使用した右マージンの設定

```css
.content {
  margin-right: 5%;
}
.sidebox {
  margin-right: 10px;
}
.logo {
  margin-right: -5px;
}
```

仕様書
---

| Specification |
| --- |
| CSS Box Model Module Level 3 # margin-physical |

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

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

関連情報
----

* `margin-top`, `margin-bottom`, `margin-left` と `margin` 一括指定
* 対応付けられる論理的プロパティ: `margin-block-start`, `margin-block-end`, `margin-inline-start`, `margin-inline-end` および一括指定の `margin-block` と `margin-inline`


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

border-left-width
=================

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

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

構文
--

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

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

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

### 値

`<line-width>`

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

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

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

公式定義
----

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

形式文法
----
```

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

関連情報
----

* 他の境界の太さに関する CSS プロパティ: `border-top-width`, `border-right-width`, `border-bottom-width`, `border-width`
* 他の左の境界に関する CSS プロパティ: `border`, `border-left`, `border-left-style`, `border-left-color`


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

font-weight
===========

**`font-weight`** は CSS のプロパティで、フォントの太さ (あるいは重み) を指定します。実際に表示されるフォントの太さは、現在設定されている `font-family` に依存する場合があります。

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

構文
--

```css
/\* キーワード値 \*/
font-weight: normal;
font-weight: bold;

/\* 親要素に対して相対的なキーワード値 \*/
font-weight: lighter;
font-weight: bolder;

/\* 数値のキーワード値 \*/
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;// normal
font-weight: 500;
font-weight: 600;
font-weight: 700;// bold
font-weight: 800;
font-weight: 900;

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

`font-weight` プロパティは、以下の一覧から選択した単一のキーワードで指定します。

### 値

`normal`

通常のフォントの太さです。 `400` と同じです。

`bold`

太字のフォントの太さです。 `700` と同じです。

`lighter`

フォントの太さが親要素よりも相対的に 1 つ細くなります。相対的な太さの計算に考慮されるフォントの太さは 4 つのみであることに注意してください。下記の相対的な太さの意味を参照してください。

`bolder`

フォントの太さが親要素よりも相対的に1つ太くなります。相対的な太さの計算に考慮されるフォントの太さは 4 つのみであることに注意してください。下記の相対的な太さの意味を参照してください。

`<number>`

1 以上 1000 以下の `<number>` 値です。数値が大きいと、数値が小さいものより太さが太い (または等しい) ことを表します。よく使用される値は、以下の一般的な太さ名との対応にあるように、共通の太さ名に対応しています。

`font-weight` 仕様書の古いバージョンでは、このプロパティはキーワード値と数値 100, 200, 300, 400, 500, 600, 700, 800, 900 のみを受け付けていました。可変フォント以外では実際にはこれらのセット値しか利用できません。ただし、可変フォント以外では細かい値 (例えば 451) は太さの代替の仕組みを用いて、これらの値のいずれかに変換されます。

CSS Fonts レベル 4 では、構文を拡張して 1 から 1000 までの任意の数値を受け付けるようになり、可変フォントが導入され、フォントの太さにもっと細かい範囲を使用することができるようになりました。

### 太さの代替

正確に一致する太さが利用できない場合、実際に表示される太さを定めるために以下の規則が使用されます。

* 対象となる太さがが `400`～`500` で指定された場合
    + 利用できる太さを、対象値から `500` までの間で昇順で探します。
    + 一致するものがなければ、対象値未満の利用できる太さを降順で探します。
    + 一致するものがなければ、 `500` より大きい太さを昇順で探します。
* 太さが `400` 未満で指定された場合、対象値以下の太さを降順で探します。一致するものがなければ、対象値より大きい太さを昇順で探します。
* 太さが `500` より大きく指定された場合、対象値以上の太さを昇順で探します。一致するものがなければ、対象値より小さい太さを降順で探します。
### 相対的な太さの意味

以下の表は、 `lighter` または `bolder` を指定する場合に要素の絶対的な太さを算出する方法を示しています。

なお、相対的な太さを使用した場合、 thin (100), normal (400), bold (700), heavy (900) の4つの太さのみが考慮されます。 font-family でもっと多くの太さが利用できる場合であっても、相対的な太さの計算の用途では無視されます。

| 継承値 | `bolder` | `lighter` |
| --- | --- | --- |
| 100 | 400 | 100 |
| 200 | 400 | 100 |
| 300 | 400 | 100 |
| 400 | 700 | 100 |
| 500 | 700 | 100 |
| 600 | 900 | 400 |
| 700 | 900 | 400 |
| 800 | 900 | 700 |
| 900 | 900 | 700 |

### 一般的な太さ名との対応

`100` から `900` の数値は、おおよそ以下の太さ名に対応します (OpenType 仕様書を参照してください)。

| 値 | 太さ名 |
| --- | --- |
| 100 | Thin (Hairline) |
| 200 | Extra Light (Ultra Light) |
| 300 | Light |
| 400 | Normal (Regular) |
| 500 | Medium |
| 600 | Semi Bold (Demi Bold) |
| 700 | Bold |
| 800 | Extra Bold (Ultra Bold) |
| 900 | Black (Heavy) |
| 950 | Extra Black (Ultra Black) |

### 可変フォント

多くのフォントは、一般的な太さ名との対応の中の数値の一つに対応する特定の太さを持っています。しかし、可変フォントと呼ばれる一部のフォントは、もっと高いまたは低い粒度の太さの範囲に対応しており、これにより、デザイナーは選択した太さをより詳細に制御することができます。

TrueType や OpenType の可変フォントでは、 "wght" バリエーションが様々な幅を実装するために使用されます。

以下の例を動作させるには、 CSS Fonts Level 4 の font-weight が 1～1000 の任意の数を取れる構文に対応したブラウザーが必要です。

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

弱視の人は、 `font-weight` の値が `100` (Thin/Hairline) または `200` (Extra Light) の場合、特にフォントのコントラスト比が低い場合は、テキストを読むのが難しくなることがあります。

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

|  |  |
| --- | --- |
| 初期値 | `normal` |
| 適用対象 | すべての要素とテキスト。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | あり |
| 計算値 | 指定された通りのキーワードまたは数値であり、 `bolder` および `lighter` は実数に変換される |
| アニメーションの種類 | フォントの太さ |

形式定義
----
```

font-weight =
  <font-weight-absolute>  |
  bolder                  |
  lighter

<font-weight-absolute> =
  normal             |
  bold               |
  <number [1,1000]>

```

例
-

### フォントの太さの設定

#### HTML

```html
<p>
  Alice was beginning to get very tired of sitting by her sister on the bank,
  and of having nothing to do: once or twice she had peeped into the book her
  sister was reading, but it had no pictures or conversations in it, "and what
  is the use of a book," thought Alice "without pictures or conversations?"
</p>

<div>
  I'm heavy<br />
  <span>I'm lighter</span>
</div>
```

#### CSS

```css
/\* 段落のテキストを太字にします \*/
p {
  font-weight: bold;
}

/\* div 要素のテキストの太さを normal より 2 段階太くしますが、
 標準的な bold より細くします \*/
div {
  font-weight: 600;
}

/\* span 要素のテキストの太さを親要素より
 1 段階細くします \*/
span {
  font-weight: lighter;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* `font-style`
* `font-family`
* 基本的なテキストとフォントの装飾


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

text-decoration-line
====================

**`text-decoration-line`** は CSS のプロパティで、下線や上線など、要素内の文字列に使われる装飾の種類を設定します。

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

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

構文
--

```css
/\* 単一のキーワード \*/
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: blink;

/\* 複数のキーワード \*/
text-decoration-line: underline overline; /\* 2 つの装飾線 \*/
text-decoration-line: overline underline line-through; /\* 複数の装飾線 \*/

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

`text-decoration-line` プロパティは `none` または以下のリストにある **1 つ以上の**空白で区切られた値を指定します。

### 値

`none`

テキストの装飾を行いません。

`underline`

テキストの各行に下線を引きます。

`overline`

テキストの各行の上線を引きます。

`line-through`

テキストの各行の中央を貫く線を引きます。

`blink`
非推奨

テキストが点滅します (表示と非表示を交互に繰り返します)。準拠するユーザーエージェントはテキストを点滅させないかもしれません。この値は**非推奨**であり、 CSS アニメーションに取って代わりました。

公式定義
----

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

形式文法
----
```

text-decoration-line =
  none                                                |
  [ underline || overline || line-through || blink ]

```

例
-

### 基本的な例

```html
<p class="wavy">こちらのテキストには赤い波線の下線が付いています。</p>
<p class="both">このテキストには上線と下線がついています。</p>
```

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

.both {
  text-decoration-line: underline overline;
}
```

仕様書
---

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

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

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

関連情報
----

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


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

mask-border-source
==================

**`mask-border-source`** は CSS のプロパティで、要素のマスク境界を生成するのに使われる元の画像を設定します。

`mask-border-slice` プロパティは、元の画像を最終的なマスク境界に動的に適用する上で、複数の領域に分割するために使用されます。

構文
--

```css
/\* キーワード値 \*/
mask-border-source: none;

/\* <image> 値 \*/
mask-border-source: url(image.jpg);
mask-border-source: linear-gradient(to top, red, yellow);

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

### 値

`none`

マスク境界は使用されません。

`<image>`

マスク境界に使用する画像への参照です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | すべての要素。 SVG の場合は `defs` 要素やすべてのグラフィック要素を除いたコンテナー要素に適用される |
| 継承 | なし |
| 計算値 | 指定通り、ただし `url` の値は絶対パスになる |
| アニメーションの種類 | 離散値 |

形式文法
----
```

mask-border-source =
  none     |
  <image>

<image> =
  <url>       |
  <gradient>

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

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

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

```

例
-

### 基本的な使用

このプロパティは、まだどこでも対応されていないようです。このプロパティが対応されるようになれば、境界マスクのソースを定義する役割を果たすことになります。

```css
mask-border-source: url(image.jpg);
```

Chromium ベースのブラウザーは、このプロパティの古い版 — `mask-box-image-source` — に接頭辞つきで対応しています。

```css
-webkit-mask-box-image-source: url(image.jpg);
```

**メモ:** `mask-border` ページでは動作する例を (Chromium で対応している古い接頭辞つきの境界マスクプロパティを使用して) 挙げていますので、効果について分かるでしょう。

仕様書
---

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask-border-source |

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

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

関連情報
----

* `mask-border`
* `mask-border-mode`
* `mask-border-outset`
* `mask-border-repeat`
* `mask-border-width`


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

@supports
=========

**`@supports`** は CSS のアットルールで、宣言をブラウザーが 1 つまたは複数の特定の CSS 機能に対応しているかによって、宣言を指定することができます。これは*機能クエリー*と呼ばれます。規則はコードの最上位または他の条件付きグループアットルールの中に配置することができます。

```css
@supports (display: grid) {
  div {
    display: grid;
  }
}
```

```css
@supports not (display: grid) {
  div {
    float: right;
  }
}
```

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

JavaScript では `@supports` は CSS オブジェクトモデルインターフェイスの `CSSSupportsRule` からアクセスできます。

構文
--

`@supports` アットルールは、文のブロックを*対応条件*に関連付けます。対応条件は 1 つまたは複数の名前と値の組を結合条件 (`and`)、非結合条件 (`or`)、否定 (`not`) で組み合わせたものです。演算子の結合順位は、括弧を使用して変更できます。

### 宣言の構文

もっとも基本的な対応条件は、単純な宣言 (プロパティ名に続けて、コロンで区切って値) です。宣言は括弧で囲む必要があります。以下の例は、ブラウザーが `transform-origin` プロパティの値として `5% 5%` を有効とみなすのであれば true を返します。

```css
@supports (transform-origin: 5% 5%) {
}
```

### 関数構文

第二の基本的な対応状況は関数の対応であり、これらの構文はすべてのブラウザーで対応されていますが、関数自体はまだ標準化の過程にあります。

#### `selector()`
Experimental

ブラウザーがテストされたセレクターの構文に対応しているかどうかを検査します。以下の例は、ブラウザーが子結合子に対応していれば true を返します。

```css
@supports selector(A > B) {
}
```

### not 演算子

`not` 演算子は、新たな式を作成するために任意の式の前に置くことができ、元の式を否定します。以下の例は、ブラウザーが `transform-origin` プロパティの値として `10em 10em 10em` を有効と**みなさない**のであれば true を返します。

```css
@supports not (transform-origin: 10em 10em 10em) {
}
```

他の演算子と同様に、 `not` 演算子はどれだけ複雑な宣言にも適用できます。以下の例はすべて有効な式です。

```css
@supports not (not (transform-origin: 2px)) {
}
@supports (display: grid) and (not (display: inline-grid)) {
}
```

**メモ:** `not` 演算子が最上位にある場合は、括弧でくくる必要はありません。 `and` や `or` といった他の演算子と組み合わせるときは、括弧が必須です。

### and 演算子

`and` 演算子は 2 つの式から、元の式の論理積で構成される新たな式を作成します。元の式の両方が true になる場合に限り、新たな式が true になります。以下の例では 2 つの式が同時に true になる場合に限り、全体の式も true になります。

```css
@supports (display: table-cell) and (display: list-item) {
}
```

括弧を増やすことなく、複数の論理積を並記することができます。以下の式はどちらも等価です。

```css
@supports (display: table-cell) and (display: list-item) and (display: contents) {
}
@supports (display: table-cell) and
 ((display: list-item) and (display: contents)) {
}
```

### or 演算子

`or` 演算子は 2 つの式から、元の式の論理和で構成される新たな式を作成します。元の式の一方または両方が true になる場合に限り、新たな式が true になります。以下の例では 2 つの式の少なくとも 1 つが true になる場合に限り、全体の式も true になります。

```css
@supports (transform-style: preserve) or (-moz-transform-style: preserve) {
}
```

括弧を増やすことなく、複数の論理和を並記することができます。以下の式はどちらも等価です。

```css
@supports (transform-style: preserve) or (-moz-transform-style: preserve) or (-webkit-transform-style: preserve) {
}

@supports (transform-style: preserve-3d) or ((-moz-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d))) {}
```

**メモ:** `and` 演算子と `or` 演算子を両方とも使用するときは、これらを適用する順序を定義するために括弧を使用しなければなりません。そうしなければ、アットルール全体を無視させる無効な条件になります。

形式文法
----
```

@supports =
  @supports <supports-condition> { <rule-list> }

<supports-condition> =
  not <supports-in-parens>                            |
  <supports-in-parens> [ and <supports-in-parens> ]\*  |
  <supports-in-parens> [ or <supports-in-parens> ]\*

<supports-in-parens> =
  ( <supports-condition> )  |
  <supports-feature>        |
  <general-enclosed>

<supports-feature> =
  <supports-decl>

<general-enclosed> =
  [ <function-token> <any-value>? ) ]  |
  [ ( <any-value>? ) ]

<supports-decl> =
  ( <declaration> )

```

例
-

### 指定した CSS プロパティの対応状況を確認

```css
@supports (animation-name: test) {
  … /\* 接頭辞がないプロパティでアニメーションに対応する場合に適用する CSS \*/
  @keyframes { /\* 他のアットルールを含むことができる \*/
    …
  }
}
```

### 指定した CSS プロパティの対応状況を、接頭辞付きも含めて確認

```css
@supports ((perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
 (-ms-perspective: 10px) or (-o-perspective: 10px)) {
  … /\* 接頭辞つきを含めて 3D transforms を対応する場合に適用する CSS \*/
}
```

### 指定した CSS プロパティに対応していないことを確認

```css
@supports not ((text-align-last: justify) or (-moz-text-align-last: justify)) {
  … /\* text-align-last:justify をシミュレートするために適用する CSS \*/
}
```

### カスタムプロパティの対応状況を確認

```css
@supports (--foo: green) {
  body {
    color: var(--varName);
  }
}
```

### セレクターの対応の検査

CSS Conditional Rules Level 4 仕様では、セレクターの対応を検査する機能が追加されています-例えば `:is()`。

```css
/\* このルールは :is() に対応していないブラウザーでは適用されません \*/
:is(ul, ol) > li {
  … /\* :is(…) セレクターに対応している場合に CSS が適用される \*/
}

@supports not selector(:is(a, b)) {
  /\* :is() に対応していない場合の代替 \*/
  ul > li,
 ol > li {
    … /\* 上記のものは :is(…) に対応していないブラウザーのために展開しています \*/
  }
}

/\* Note: 今のところ :nth-child(...) の `of` 引数に対応しているブラウザーはありません。 \*/
@supports selector(:nth-child(1n of a, b)) {
  /\* このルールは @supports ブロックの中に記述する必要があります。
 nth-child(...)の `of` 引数に対応していないブラウザーでは、
 部分的に適用されます。 \*/
  :is(
 :nth-child(1n of ul, ol) a,
 details > summary
 ) {
    … /\* :is(…) セレクターと :nth-child(…) の
 両方に対応している場合にのみ適用される CSS \*/
  }
}
```

仕様書
---

| Specification |
| --- |
| CSS Conditional Rules Module Level 4 # at-supports-ext |
| CSS Conditional Rules Module Level 3 # at-supports |

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

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

関連情報
----

* 機能クエリーの使用
* JavaScript で同様のチェックを実行できる、CSSOM の `CSSSupportsRule` クラスおよび `CSS.supports()` メソッド


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

border-top-right-radius
=======================

**`border-top-right-radius`** は CSS のプロパティで、角の曲率を定義する楕円の半径 (または半長軸と半短軸) を指定することで、要素の右上の角を丸めます。

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

丸みは円または楕円にすることができ、値のうちの一つが `0` であれば、丸めは行われずに角は四角くなります。

![border-top-right-radius.png](/ja/docs/Web/CSS/border-top-right-radius/border-top-right-radius.png)

画像または単色が背景になっている場合、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 `background-clip` プロパティの値で定義されます。

**メモ:** このプロパティの値が `border-top-right-radius` プロパティの後の `border-radius` 一括指定プロパティで設定されなかった場合、このプロパティは一括指定プロパティによって初期値にリセットされます。

構文
--

```css
/\* 角を円にする \*/
/\* border-top-right-radius: 半径 \*/
border-top-right-radius: 3px;

/\* 角を楕円にする \*/
/\* border-top-right-radius: 水平 垂直 \*/
border-top-right-radius: 0.5em 1em;

border-top-right-radius: inherit;

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

値 1 つで指定する場合:

* 値は `<length>` または `<percentage>` であり、境界の角に使用する円の半径を示します。

値 2 つで指定する場合:

* 最初の値は `<length>` または `<percentage>` であり、境界の角に使用する楕円の水平方向の半長軸を示します。
* 最初の値は `<length>` または `<percentage>` であり、境界の角に使用する楕円の垂直方向の半長軸を示します。
### 値

`<length-percentage>`

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

公式定義
----

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

形式文法
----
```

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

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

```

例
-

### Arc of a circle

単一の `<length>` 値を指定すると、円弧を生成します。
```

<div></div>
```

```css
div {
  border-top-right-radius: 40px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}
```

### 楕円の弧

2 つの異なる `<length>` 値を指定すると、楕円の弧を生成します。
```

<div></div>
```

```css
div {
  border-top-right-radius: 40px 20px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}
```

### パーセントで半径を指定した正方形の要素

正方形の要素に単一の `<percentage>` 値を指定すると、円弧を生成します。
```

<div></div>
```

```css
div {
  border-top-right-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}
```

### パーセントで半径を指定した正方形ではない要素

正方形ではない要素に単一の `<percentage>` 値を指定すると、楕円の弧を生成します。
```

<div></div>
```

```css
div {
  border-top-right-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 200px;
  height: 100px;
}
```

仕様書
---

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-border-radius |

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

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

関連情報
----

* `border-radius` 一括指定プロパティ
* `border-bottom-right-radius`、`border-bottom-left-radius`、`border-top-left-radius`


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

text-align
==========

**`text-align`** CSS プロパティは、ブロック要素または表のセルボックス内におけるインラインレベルコンテンツの水平方向の配置を設定します。これは `vertical-align` と同じように機能しますが、水平方向に機能することを意味します。

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

構文
--

```css
/\* キーワード値 \*/
text-align: start;
text-align: end;
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: match-parent;

/\* 表の列における文字を基準とした配置 \*/
text-align: ".";
text-align: "." center;

/\* ブロック配置の値 (標準外の構文) \*/
text-align: -moz-center;
text-align: -webkit-center;

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

`text-align` プロパティは、以下のいずれかの方法で指定します。

* キーワード値となる `start`, `end`, `left`, `right`, `center`, `justify`, `justify-all`, `match-parent` のいずれかを使用する。
* `<string>` 値のみを使用した場合、他の値はデフォルトで `right` になります。
* キーワード値と `<string>` 値の両方を使用する。
### 値

`start`

書字方向が左から右の場合は `left`、右から左の場合は `right` と同じです。

`end`

書字方向が左から右の場合は `right`、右から左の場合は `left` と同じです。

`left`

インラインコンテンツはラインボックスの左辺に寄せられます。

`right`

インラインコンテンツはラインボックスの右辺に寄せられます。

`center`

インラインコンテンツはラインボックス内で中央に寄せられます。

`justify`

インラインコンテンツは両端揃えになります。テキストは最終行を除いて、その左右の端がラインボックスの左右の端に揃うように間隔が空けられます。

`justify-all`
Experimental

`justify` と同じですが、最終行も強制的に両端揃えになります。

`match-parent`

`inherit` と似ていますが、`start` と `end` の値は親要素の `direction` に従って計算されて、適切な `left` もしくは `right` の値で置き換えられます。

`<string>`
Experimental

表のセルに適用する場合、セルのコンテンツが配置される位置揃え文字が指定されます。

アクセシビリティへの懸念事項
--------------

両端揃えによって生じる単語間の一貫性のない間隔は、ディスレクシアなどの認知的な懸念を持つ人々にとって問題となる可能性があります。

* MDN WCAG を理解する - ガイドライン 1.4 の解説
* Understanding Success Criterion 1.4.8 | Understanding WCAG 2.0
公式定義
----

|  |  |
| --- | --- |
| 初期値 | `start`。`start` に対応していないブラウザーでは、`書字方向`が `ltr` なら `left`、`rtl` なら `right` として動作する無名の値 |
| 適用対象 | ブロックコンテナー |
| 継承 | あり |
| 計算値 | 指定値。ただし `match-parent` 値を除く。この値は親要素の `direction` の値に基いて計算され、計算値が `left` または `right` のどちらかになる |
| アニメーションの種類 | 離散値 |

形式文法
----
```

text-align =
  start         |
  end           |
  left          |
  right         |
  center        |
  justify       |
  match-parent  |
  justify-all

```

例
-

### 先頭へ配置

#### HTML

```html
<p class="example">
  Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
  in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
```

#### CSS

```css
.example {
  text-align: start;
  border: solid;
}
```

#### 結果

### 中央揃え

#### HTML

```html
<p class="example">
  Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
  in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
```

#### CSS

```css
.example {
  text-align: center;
  border: solid;
}
```

#### 結果

### "justify" を使用した例

#### HTML

```html
<p class="example">
  Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
  in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
```

#### CSS

```css
.example {
  text-align: justify;
  border: solid;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # text-align |
| CSS Text Module Level 3 # text-align-property |

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

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

関連情報
----

* `margin: auto`, `margin-left: auto`, `vertical-align`


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

border-bottom
=============

**`border-bottom`** は一括指定の CSS のプロパティで、要素の下側の境界のプロパティをすべて設定します。

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

他の一括指定プロパティと同様に、 `border-bottom` は、一部の値が指定されていなくても、設定可能なプロパティをすべて設定します。指定されていないプロパティは既定値が設定されます。つまり・・・

```css
border-bottom-style: dotted;
border-bottom: thick green;
```

・・・は、実際には以下と同じです・・・

```css
border-bottom-style: dotted;
border-bottom: none thick green;
```

・・・そして、 `border-bottom` の前で設定された `border-bottom-style` の値は無視されます。 `border-bottom-style` の既定値は `none` なので、 `border-style` の部分の設定は境界線なしとなります。

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

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

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

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

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

一括指定プロパティの 3 つの値は任意の順序で指定可能で、また、 1 つまたは 2 つの値を省略することができます。

### 値

`<br-width>`

`border-bottom-width` を参照してください。

`<br-style>`

`border-bottom-style` を参照してください。

`<color>`

`border-bottom-color` を参照してください。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `border-bottom-width`: `medium`
* `border-bottom-style`: `none`
* `border-bottom-color`: `currentcolor`
 |
| 適用対象 | すべての要素。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `border-bottom-width`: 絶対的な長さ、または `border-bottom-style` が `none` または `hidden` の場合は `0`
* `border-bottom-style`: 指定通り
* `border-bottom-color`: 色の計算値
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `border-bottom-color`: 色
* `border-bottom-style`: 離散値
* `border-bottom-width`: length
 |

形式文法
----
```

border-bottom =
  <line-width>  ||
  <line-style>  ||
  <color>

<line-width> =
  <length [0,∞]>  |
  thin            |
  medium          |
  thick

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

```

例
-

### 下の境界の適用

#### HTML

```html
<div>このボックスには下側に境界線があります。</div>
```

#### CSS

```css
div {
  border-bottom: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-shorthands |

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

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

関連情報
----

* `border`
* `border-block`
* `outline`


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

grid-template-columns
=====================

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

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

* Learn more
* See full compatibility
* Report feedback
**`grid-template-columns`** は CSS のプロパティで、グリッド列の線名とトラックのサイズ変更機能を定義します。

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

構文
--

```css
/\* キーワード値 \*/
grid-template-columns: none;

/\* <track-list> 値 \*/
grid-template-columns: 100px 1fr;
grid-template-columns: [linename] 100px;
grid-template-columns: [linename1] 100px [linename2 linename3];
grid-template-columns: minmax(100px, 1fr);
grid-template-columns: fit-content(40%);
grid-template-columns: repeat(3, 200px);
grid-template-columns: subgrid;
grid-template-columns: masonry;

/\* <auto-track-list> 値 \*/
grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
grid-template-columns:
  minmax(100px, max-content)
  repeat(auto-fill, 200px) 20%;
grid-template-columns:
  [linename1] 100px [linename2]
  repeat(auto-fit, [linename3 linename4] 300px)
  100px;
grid-template-columns:
  [linename1 linename2] 100px
  repeat(auto-fit, [linename1] 300px) [linename3];

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

### 値

`none`

明示的なグリッドがないことを示します。どの列も暗黙的に生成され、それらのサイズは `grid-auto-columns` プロパティによって決定されます。

`[線名]`

`<custom-ident>` で、その位置にある線の名称を指定します。識別子には、予約語の `span` と `auto` 以外の有効な文字列を指定してください。行は、`[line-name-a line-name-b]`のように、角括弧内のスペースで区切られた複数の名前を持つことができます。

`<length>`

負の値ではない長さです。

`<percentage>`

 グリッドコンテナーのインライン方向の寸法に対する相対値で、負ではない `<percentage>` です。グリッドコンテナーの寸法がトラックの寸法に依存する場合は、パーセント値を `auto` として扱う必要があります。
 トラックの内在的なサイズの寄与によって、グリッドコンテナーの寸法に合わせられ、パーセント値を尊重した結果、最小の大きさによってトラックの最終的な寸法を増加させる可能性があります。

`<flex>`

`fr` の単位の付いた負の数ではない値で、トラックのフレックス係数を指定します。 `<flex>` の寸法のトラックは、残りの空間をフレックス係数の割合に比例して分け合います。

`minmax()` 表記の外に現れた場合は、最小値が自動として扱われます (つまり `minmax(auto, <flex>)`)。

`max-content`

グリッドトラックを占有しているグリッドアイテムの中で、最大コンテンツ貢献度を表すキーワードです。例えば、グリッドトラックの最初の要素が *"Repetitio est mater studiorum"* という文を保持しており、 2 つ目の要素が *"Dum spiro, spero"* という文を保持している場合、最大コンテンツ貢献度は、グリッド要素内のすべての文の中で最大の文 *"Repetitio est mater studiorum"* のサイズによって定義されます。

`min-content`

グリッドトラックを占有しているグリッドアイテムの中で、最小コンテンツ貢献度を表すキーワードです。例えば、グリッドトラックの最初の要素が *"Repetitio est mater studiorum"* という文を保持しており、 2 つ目の要素が *"Dum spiro, spero"* という文を保持している場合、最小コンテンツ貢献度は、グリッド要素内のすべての文の中で最大の単語 *"studiorum"* のサイズによって定義されます。

`minmax(min, max)`

*min* 以上、 *max* 以下の寸法の範囲を定義する関数表記法です。 *max* が *min* より小さい場合、 *max* は無視され、関数は *min* として扱われます。最大値として、 `<flex>` 値はトラックのフレックス係数を設定します。最小値としては無効です。

`auto`

最大値であれば max-content と同一のキーワードです。

最小値の場合は、グリッドトラックを占めるグリッドアイテムの最大の最小寸法 (`min-width`/`min-height` で指定されたもの) を表します。ふつうは `min-content` ですが、必ずしもそうとは限りません。

`minmax()` 表記以外で使われた場合、 `auto` は上記の最小値と最大値の間の範囲を表します。これはほとんどの場合、 `minmax(min-content,max-content)` と同じように動作します。

**メモ:** トラックの寸法が `auto` の場合（そして `auto` だけの場合）、 `align-content` および `justify-content` プロパティによって引き伸ばされることがあります。既定では、 `auto` のサイズのトラックがグリッドコンテナーの残りの空間を占めます。

``fit-content( [ <length> | <percentage> ] )``

`max(minimum, min(limit, max-content))` という式を表し、ここで *minimum* は `auto` の最小値 （常に `min-content` の最小値に等しいわけではありませんが、そうなることが多い） を表し、 *limit* は fit-content() に引数として渡されるトラックの大きさを計算する関数です。これは基本的に `minmax(auto, max-content)` と `minmax(auto, limit)` の小さい方として計算されます。

`repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )`

トラックリストの繰り返しフラグメントを表し、繰り返しパターンを示す多数の列をよりコンパクトな形式で記述できるようにします。

`masonry`
Experimental

masonry の値は、この軸が組積アルゴリズムに従ってレイアウトされるべきであることを示します。

subgrid

`subgrid` の値は、グリッドがその軸に親グリッドのスパン部分を採用することを示します。グリッドの行や列のサイズは、明示的に指定されるのではなく、親グリッドの定義から取得されます。

**警告:** `masonry`の値は、グリッド仕様のレベル 3 のもので、現在は Firefox のフラグに隠された実験的な実装があるだけです。

サブグリッドの値はグリッド仕様書のレベル 2 にあり、現在のところ Firefox 71 以降でのみ実装されています。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | グリッドコンテナー |
| 継承 | なし |
| パーセント値 | コンテンツ領域の対応する寸法に対する相対値 |
| 計算値 | 指定通り。ただし相対的な長さはは絶対的な長さに変換される |
| アニメーションの種類 | 長さ、パーセント値、 calc の単純なリストであり、唯一の違いはリスト内の長さ、パーセント値、 calc の部分の値のみ |

形式文法
----
```

grid-template-columns =
  none                       |
  <track-list>               |
  <auto-track-list>          |
  subgrid <line-name-list>?

<track-list> =
  [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?

<auto-track-list> =
  [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]\* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]\* <line-names>?

<line-name-list> =
  [ <line-names> | <name-repeat> ]+

<line-names> =
  '[' <custom-ident>\* ']'

<track-size> =
  <track-breadth>                                   |
  minmax( <inflexible-breadth> , <track-breadth> )  |
  fit-content( <length-percentage [0,∞]> )

<track-repeat> =
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )

<fixed-size> =
  <fixed-breadth>                                   |
  minmax( <fixed-breadth> , <track-breadth> )       |
  minmax( <inflexible-breadth> , <fixed-breadth> )

<fixed-repeat> =
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

<auto-repeat> =
  repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

<name-repeat> =
  repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )

<track-breadth> =
  <length-percentage [0,∞]>  |
  <flex [0,∞]>               |
  min-content                |
  max-content                |
  auto

<inflexible-breadth> =
  <length-percentage [0,∞]>  |
  min-content                |
  max-content                |
  auto

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

<fixed-breadth> =
  <length-percentage [0,∞]>

```

例
-

### グリッド列の寸法の指定

#### HTML

```html
<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">B</div>
</div>
```

#### CSS

```css
#grid {
  display: grid;
  width: 100%;
  grid-template-columns: 50px 1fr;
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # track-sizing |
| CSS Grid Layout Module Level 2 # subgrids |
| CSS Grid Layout Module Level 3 # masonry-layout |

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

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

関連情報
----

* 関連する CSS プロパティ: `grid-template-rows`, `grid-template-areas`, `grid-template`
* グリッドレイアウトガイド: グリッドレイアウトの基本概念 - グリッドトラック
* 動画チュートリアル: Defining a Grid
* サブグリッド


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

zoom
====

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

**`zoom`** は CSS の標準外のプロパティで、要素の拡大率を制御するために使用することができます。できれば、このプロパティの代わりに `transform: scale()` を使用してください。ただし、 CSS 座標変換とは異なり、 `zoom` は要素のレイアウト時の大きさに影響します。

```css
/\* キーワード値 \*/
zoom: normal;
zoom: reset;

/\* <percentage> 値 \*/
zoom: 50%;
zoom: 200%;

/\* <number> 値 \*/
zoom: 1.1;
zoom: 0.7;

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

構文
--

### 値

`normal`

要素を通常のサイズでレンダリングします。

`reset`
Non-standard

ユーザーが非ピンチベースのズームを利用したときは (たとえばキーボードで `Ctrl`-`-` または `Ctrl`+`+` のショートカット) 要素を拡大しない。 WebKit (とおそらく Blink) のみ対応しています。

`<percentage>`

ズーム率です。 `100%` と `normal` は等価です。 `100%` よりも大きな値はズームイン、 `100%`よりも小さな値はズームアウトします。

`<number>`

ズーム率です。対応するパーセンテージ (`1.0` = `100%` = `normal`) に相当します。 `1.0` よりも大きな値はズームイン、 `1.0` よりも小さな値はズームアウトします。

公式定義
----

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

形式文法
----

Error: could not find syntax for this item例
-

### 最初の例

#### HTML

```html
<p class="small">Small</p>
<p class="normal">Normal</p>
<p class="big">Big</p>
```

#### CSS

```css
p.small {
  zoom: 75%;
}
p.normal {
  zoom: normal;
}
p.big {
  zoom: 2.5;
}
p {
  display: inline-block;
}
p:hover {
  zoom: reset;
}
```

#### 結果

### 2 番目の例

#### HTML

```html
<div id="a" class="circle"></div>
<div id="b" class="circle"></div>
<div id="c" class="circle"></div>
```

#### CSS

```css
div.circle {
  width: 25px;
  height: 25px;
  border-radius: 100%;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
  zoom: 1.5;
}
div#a {
  background-color: gold;
  zoom: normal;
}
div#b {
  background-color: green;
  zoom: 200%;
}
div#c {
  background-color: blue;
  zoom: 2.9;
}
```

#### 結果

仕様書
---

標準には含まれていません。このプロパティは Internet Explorer を起源としています。 Apple は Safari CSS Referenceで説明しています。マイクロソフトの Rossen Atanassov は GitHub に非公式の仕様案を公開しています。

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

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

関連情報
----

* CSS-Tricks' CSS Almanac の `zoom` の記事
* Bug 390936: Implement Internet Explorer `zoom` property for CSS on the Firefox issue tracker Bugzilla