recursal/MDN huggingface dataset:
CSS グリッドレイアウト
=============

**CSS グリッドレイアウト**モジュールは、ページを大きな領域に分割することや、 HTML のプリミティブから構成されたコントロールの部品間の、寸法、位置、レイヤーに関する関係を定義することに優れています。

表と同様に、グリッドレイアウトによって要素を列と行に整列させることができます。しかし、 CSS グリッドを使用すると、表で実現するよりもより複雑なレイアウトが可能で、あるいは簡単に実現できます。例えば、グリッドのコンテナー内にある子要素は、 CSS の位置指定された要素と同様に自分自身の位置を決めることができるので、実際に重ね合わせてレイヤーになるように配置することができます。

基本的な例
-----

次の例では、最小値 100 ピクセル、最大値 auto で作成された列を含む、3 つの行を表示します。要素は線ベースの配置に従ってグリッド上に配置されます。
```

\* {
  box-sizing: border-box;
}
.wrapper {
  max-width: 940px;
  margin: 0 auto;
}

.wrapper > div {
  border: 2px solid rgb(233 171 88);
  border-radius: 5px;
  background-color: rgba(233 171 88 / 0.5);
  padding: 1em;
  color: #d9480f;
}
```

### HTML


```html
<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>
```

### CSS


```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 5;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}
```

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

### プロパティ

* `display`
* `grid-template-columns`
* `grid-template-rows`
* `grid-template-areas`
* `grid-template`
* `grid-auto-columns`
* `grid-auto-rows`
* `grid-auto-flow`
* `grid`
* `grid-row-start`
* `grid-column-start`
* `grid-row-end`
* `grid-column-end`
* `grid-row`
* `grid-column`
* `grid-area`
* `row-gap`
* `column-gap`
* `gap`
* `masonry-auto-flow` 
Experimental
* `align-tracks` 
Experimental
* `justify-tracks` 
Experimental
### 関数

* `repeat()`
* `minmax()`
* `fit-content()`
### データ型

* `<flex>`
ガイド
---

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

| Specification |
| --- |
| CSS Grid Layout Module Level 2  |

関連情報
----

* 用語集の用語:
    + グリッド
    + グリッド線
    + グリッドトラック
    + グリッドセル
    + グリッド領域
    + 溝
    + グリッド軸
    + グリッド行
    + グリッド列
* Grid by Example - 使用例と動画チュートリアル集
* CSS Grid Reference - Codrops
* CSS Grid Inspector - Firefox DevTools
* CSS Grid Playground
* CSS Grid Garden - CSS グリッドを学ぶためのゲーム
container-name
==============

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

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

* Learn more
* See full compatibility
* Report feedback

**container-name** は CSS のプロパティで、コンテナークエリーにおいて @container アットルールで使用されるクエリーコンテナー名のリストを指定します。
 コンテナークエリーでは、格納コンテキストを持つ最も近い祖先のサイズに基づいて要素にスタイルが適用されます。
 コンテナーのコンテキストの名前が指定されたとき、コンテナーのコンテキストのある最も近い祖先の代わりに `@container` アットルールを用いて固有のターゲット仕様にすることができます。

構文
--


```css
/\* 単一の名前 \*/
container-name: myLayout;

/\* 複数の名前 \*/
container-name: myPageLayout myComponentLibrary;

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

### 値

`<container-name>`

コンテナーを識別するために使用する、大文字と小文字を区別する文字列です。

以下の条件が適用されます。

* 名前は有効な `<custom-ident>` であれば何でもかまいませんが、`default` と等しくあってはいけません。
* 名前の値は引用符で囲んではいけません。
* 作者が定義する識別子（例：--container-name`）を意図するダッシュ記号は許可されています。
* スペースで区切られた複数の名前のリストが許可されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | `none` または識別子の順序付きリスト |
| アニメーションの種類 | アニメーション不可 |

形式文法
----
```

container-name =   
  none             |  
  <custom-ident>+    
  
```

例
-

### コンテナー名の使用

タイトルとテキストを持つカード部品である、次の HTML の例があったとします。


```html
<div class="card">
  <div class="post-meta">
    <h2>カードのタイトル</h2>
    <p>My post details.</p>
  </div>
  <div class="post-excerpt">
    <p>
      A preview of my <a href="https://example.com">blog post</a> about cats.
    </p>
  </div>
</div>
```


 格納コンテキストを作成するには、 CSS で要素に `container-type` プロパティを追加します。
 次の例では、カードのメタ情報用と投稿の抜粋用の 2 つのコンテナーを作成しています。

**メモ:** これらの宣言のための一括指定構文は `container` ページで説明されています。


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

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


 コンテナークエリーを `@container` アットルールで記述すると、クエリーが真と評価されたときにコンテナーの要素にスタイルが適用されます。
 次の例では、 `.post-excerpt` 要素のコンテンツのみに適用するコンテナークエリーと、 `.post-meta` と `.post-excerpt` のコンテンツ両方に適用するコンテナークエリーの 2 つがあります。


```css
@container excerpt (min-width: 400px) {
  p {
    visibility: hidden;
  }
}

@container (min-width: 400px) {
  p {
    font-size: 2rem;
  }
}
```


コンテナクエリーの書き方については、CSS コンテナークエリーのページを参照してください。

### 複数のコンテナー名の使用

コンテナーコンテキストには、スペースで区切った複数の名前を指定することもできます。


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


 これにより、 `@container` アットルールでどちらかの名前を使用してコンテナーをターゲットすることができます。
 これは、複数のコンテナクエリーで同じコンテナーを対象としたい場合に有益です。


```css
@container meta (max-width: 500px) {
  p {
    visibility: hidden;
  }
}

@container card (max-height: 200px) {
  h2 {
    font-size: 1.5em;
  }
}
```

仕様書
---

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

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

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

関連情報
----

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

**`::placeholder`** は CSS の擬似要素で、 `<input>` または `<textarea>` 要素のプレイスホルダー文字列を表します。


```css
::placeholder {
  color: blue;
  font-size: 1.5em;
}
```

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

セレクターに `::placeholder` を使ったルールを使用できるのは、`::first-line` 擬似要素に適用できる CSS プロパティだけです。

**メモ:** 多くのブラウザーでは、プレイスホルダー文字列の外見は既定で半透明または明るい灰色です。

構文
--

Error: could not find syntax for this itemアクセシビリティの考慮事項
-------------

### 色のコントラスト

#### コントラスト比

プレイスホルダー文字列はふつう、どのような入力が正しいかを示すものであり、実際の入力ではないことを示すために、薄い色になっています。

プレイスホルダー文字列と入力欄の背景色のコントラスト比が、弱視の人が読むことができるために十分であることと同時に、プレイスホルダー文字列と入力テキストの差が違いが十分であり、プレイスホルダーが入力されたデータと誤認しないようになっていることを確認することが重要です。

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

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

#### 使用性

プレイスホルダー文字列のコントラストが十分に高いと、入力された値と誤解される可能性があります。プレイスホルダー文字列は人間が `<input>` 要素の中にコンテンツを入力すると、消滅するものでもあります。どちらも、特に認知症の人にはフォームの入力を完了させるのに困難を伴う可能性があります。

プレイスホルダー情報を提供するには、他にも入力欄の外側で視覚的に近いところに表示し、 `aria-describedby` を使用して `<input>` とヒントをプログラム的に関連付ける方法もあります。

この実装方法では、上方が入力欄に入力されてもヒントを見ることができ、ページが読み込まれたときに既に入力されているように見えることがありません。多くの読み上げ技術は `aria-describedby` を使用して、入力欄のラベルのテキストを読み上げた後でヒントを読み上げ、読み上げソフトを使用している人は、追加情報が必要なければ読み上げを抑止することができます。


```html
<label for="user-email">Your email address</label>
<span id="user-email-hint" class="input-hint">Example: jane@sample.com</span>
<input
 id="user-email"
 aria-describedby="user-email-hint"
 name="email"
 type="email" />
```


* Placeholders in Form Fields Are Harmful — Nielsen Norman Group
### Windows 高コントラストモード

プレイスホルダー文字列は、 Windows 高コントラストモードではユーザーが入力した文字列と同じスタイルで表示されます。これは人によっては、中身が入力されたものか、それとも中身がプレイスホルダー文字列かを見分けることが難しくなります。

* Greg Whitworth — How to use -ms-high-contrast
### ラベル

プレイスホルダーは `<label>` 要素の置き換えではありません。 `for` および `id` 属性の組み合わせを使用して入力欄とプログラム的に関連付けが行われていないラベルがないと、読み上げソフトのような支援技術が `<input>` 要素を解釈できなくなります。

* MDN 基本的なフォームのヒント
* Placeholders in Form Fields Are Harmful — Nielsen Norman Group
例
-

### プレイスホルダーの外見の変更

この例では、プレースホルダーテキストのスタイルに加えることができる調整項目を紹介します。

#### HTML


```html
<input placeholder="こちらに入力..." />
```


#### CSS


```css
input::placeholder {
  color: red;
  font-size: 1.2em;
  font-style: italic;
}
```


#### 結果

### 不透明なテキスト

Firefox など一部のブラウザーでは、プレースホルダーの既定の `opacity` を 100% 未満に設定しています。もし、プレースホルダーのテキストを完全に不透明化したい場合は、 `opacity` に `1` を設定してください。

#### HTML


```html
<input placeholder="既定の透明度..." />
<input placeholder="完全に不透明..." class="force-opaque" />
```


#### CSS


```css
::placeholder {
  color: green;
}

.force-opaque::placeholder {
  opacity: 1;
}
```


#### 結果

仕様書
---

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

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

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

関連情報
----

* `:placeholder-shown` 擬似クラスは、アクティブなプレイスホルダーを*持つ*要素にスタイルを適用できます。
* 関連する HTML 要素: `<input>`, `<textarea>`
* HTML フォーム
::after (:after)
================

CSS において **`::after`** は、選択した要素の最後の子要素として擬似要素を生成します。よく `content` プロパティを使用して、要素に装飾的な内容を追加するために用いられます。この要素は既定でインラインです。


```css
/\* リンクの後に矢印を追加 \*/
a::after {
  content: "→";
}
```

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

**メモ:** `::before` および `::after` によって作成される擬似要素は要素の整形ボックスに含まれるため、 `<img>` や `<br>` のような置換要素には適用されません。

構文
--

Error: could not find syntax for this item

**メモ:** CSS3 では疑似クラスと擬似要素を見分けやすくするために、 `::after` の表記法（二重コロン付き）が導入されました。ブラウザーでは CSS2 で導入された `:after` も使用できます。

例
-

### シンプルな使い方

2 つのクラスを作成しましょう。 1 つはつまらない段落で 1 つは楽しい段落です。これらのクラスを使用して、段落の最後に擬似要素を追加することができます。

#### HTML


```html
<p class="boring-text">古くつまらないテキストです。</p>
<p>つまらなくも楽しくもないふつうのテキストです。</p>
<p class="exciting-text">MDN への協力は簡単で楽しいものです。</p>
```


#### CSS


```css
.exciting-text::after {
  content: " <- 楽しい！";
  color: green;
}

.boring-text::after {
  content: " <- ツマラナイ！";
  color: red;
}
```


#### 結果

### 装飾の例

`content` プロパティ内の文字列や画像は、大体思う通りに整形することができます。

#### HTML


```html
<span class="ribbon">このテキストの後のオレンジのボックスを見てください。</span>
```


#### CSS


```css
.ribbon {
  background-color: #5bc8f7;
}

.ribbon::after {
  content: "かわいいオレンジのボックスです。";
  background-color: #ffba10;
  border-color: black;
  border-style: dotted;
}
```


#### 結果

### ツールチップ

この例は、 `::after` を CSS の `attr()` 関数と `data-descr` カスタムデータ属性との組み合わせで使用し、ツールチップを作成しています。 JavaScript は必要ありません。

また、このテクニックを使ってキーボードユーザーに対応することもできます。 `tabindex` に `0` を追加して、それぞれの `span` をキーボードフォーカス可能にし、CSS の `:focus` セレクターを使用することでキーボードフォーカスを可能にします。これは `::before` と `::after` がいかに柔軟であるかを示しています。しかし、最もアクセスしやすいようにするには、他の方法（例えば details および summary 要素で作成した詳細折りたたみウィジェットがより適していると思われます。

#### HTML


```html
<p>
  Here we have some
  <span tabindex="0" data-descr="collection of words and punctuation"
 >text</span
 >
  with a few
  <span tabindex="0" data-descr="small popups that appear when hovering"
 >tooltips</span
 >.
</p>
```


#### CSS


```css
span[data-descr] {
  position: relative;
  text-decoration: underline;
  color: #00f;
  cursor: help;
}

span[data-descr]:hover::after,
span[data-descr]:focus::after {
  content: attr(data-descr);
  position: absolute;
  left: 0;
  top: 24px;
  min-width: 200px;
  border: 1px #aaaaaa solid;
  border-radius: 10px;
  background-color: #ffffcc;
  padding: 12px;
  color: #000000;
  font-size: 14px;
  z-index: 1;
}
```


#### 結果

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

`::after` 擬似要素を使用してコンテンツを追加することは、スクリーンリーダーからアクセスできなくなる可能性があるため推奨されません。

仕様書
---

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # generated-content |

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

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

関連情報
----

* `::before`
* `content`
border-image-repeat
===================

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

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

* Learn more
* See full compatibility
* Report feedback
CSS の **`border-image-repeat`** プロパティは、元画像の辺の領域と中央の領域を、どうやって要素の境界画像に合うように合わせるかを定義します。 border-image-slice プロパティでキーワード "fill" を使用することで、中央の領域を表示することができます。

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

構文
--


```css
/\* キーワード値 \*/
border-image-repeat: stretch;
border-image-repeat: repeat;
border-image-repeat: round;
border-image-repeat: space;

/\* 垂直 | 水平 \*/
border-image-repeat: round stretch;

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


`border-image-repeat` プロパティは、下記の値のリストにある値を 1 つまたは 2 つ使用して指定することができます。

* 値が **1 つ**指定された場合、**全四辺**に同じ動作が適用されます。
* 値が **2 つ**指定された場合、1 つ目の動作が**上、中、下**に、2 つ目が**左、右**に適用されます。
### 値

`stretch`

2 つの境界の間を埋めるために、元画像の辺の領域が引き伸ばされます。

`repeat`

2 つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域の一部が切り取られることがあります。

`round`

2 つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域が引き延ばされることがあります。

`space`

2 つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域間に間隔が置かれることがあります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `stretch` |
| 適用対象 | すべての要素。ただし `border-collapse` が `collapse` のときはテーブル要素内部にあるものを除く。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

border-image-repeat =   
  [ stretch | repeat | round | space ]{1,2}    
  
```

例
-

### 反復する境界画像

#### CSS


```css
#bordered {
  width: 12rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 40px solid;
  border-image: url("border.png") 27;
  border-image-repeat: stretch; /\* live sample で変更可能 \*/
}
```


```
<div id="bordered">You can try out various border repetition rules on me!</div>

<select id="repetition">
  <option value="stretch">stretch</option>
  <option value="repeat">repeat</option>
  <option value="round">round</option>
  <option value="space">space</option>
  <option value="stretch repeat">stretch repeat</option>
  <option value="space round">space round</option>
</select>
```


```
const repetition = document.getElementById("repetition");
repetition.addEventListener("change", (evt) => {
  document.getElementById("bordered").style.borderImageRepeat =
    evt.target.value;
});
```


#### 結果

仕様書
---

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

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

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

関連情報
----

* 背景と境界
* CSS の学習: 背景と境界
column-rule-width
=================

**`column-rule-width`** は CSS のプロパティで、段組みレイアウトで段間に引かれる線（段間罫）の太さを設定します。

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

構文
--


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

/\* <length> 値 \*/
column-rule-width: 1px;
column-rule-width: 2.5em;

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


`column-rule-width` プロパティは単一の `<'border-width'>` の値で指定します。

### 値

`<'border-width'>`

`border-width` で定められたキーワードで段間罫の太さを指定します。 `<length>` または `thin`、 `medium`、 `thick` のキーワードのいずれかです。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `medium` |
| 適用対象 | 段組み要素 |
| 継承 | なし |
| 計算値 | 絶対的な長さ、列の罫線のスタイルが `none` か `hidden` なら `0` |
| アニメーションの種類 | length |

形式文法
----
```

column-rule-width =   
  <line-width>    
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
```

例
-

### 太い段間罫を設定

#### HTML


```html
<p>
  This is a bunch of text split into three columns. The `column-rule-width`
  property is used to change the width of the line that is drawn between
  columns. Don't you think that's wonderful?
</p>
```


#### CSS


```css
p {
  column-count: 3;
  column-rule-style: solid;
  column-rule-width: thick;
}
```


#### 結果

仕様書
---

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

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

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

関連情報
----

* 段組みレイアウト
* `column-rule-style`
* `column-rule-color`
* `column-rule`
<display-outside>
=================

`<display-outside>` のキーワードは、本質的にフローレイアウトにおける要素の役割である、要素の `display` の外部表示種別を指定します。これらのキーワードは `display` プロパティの値として使用され、単一のキーワードとしては伝統的な目的に、または Level 3 仕様書では `<display-inside>` のキーワードと共に使用されます。

構文
--

有効な `<display-outside>` の値は以下の通りです。

`block`

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

`inline`

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


**メモ:** 二つの値の構文に対応しているブラウザーは、 `display: block` や `display: inline` などの外部表示種別のみが指定されていると、内部表示種別を `flow` に設定します。これで期待通りに動作します。例えば、ある要素を block になるよう指定した場合、その要素の子はブロックおよびインラインの通常フローレイアウトに加わることを期待するでしょう。

例
-

以下の例では、 span 要素 (通常はインライン要素として表示) に `display: block` が設定されているので、改行が行われ、コンテナーのインライン方向を埋めるように拡張されます。

### HTML


```html
<span>span 1</span> <span>span 2</span>
```

### CSS


```css
span {
  display: block;
  border: 1px solid rebeccapurple;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Display Module Level 3 # typedef-display-outside |

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

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

関連情報
----

* `display`
    + `<display-inside>`
    + `<display-listitem>`
    + `<display-internal>`
    + `<display-box>`
    + `<display-legacy>`
* 通常フローでのブロックおよびインラインレイアウト
* 整形コンテキストの紹介
<custom-ident>
==============

**`<custom-ident>`** は CSS のデータ型で、識別子として使われるユーザー定義の任意の文字列を意味します。これは大文字と小文字を区別し、曖昧さを避けるため、いくつかの値は様々なコンテキストで禁止されています。

構文
--

`<custom-ident>` の構文は CSS の識別子 (プロパティ名など) に似ていますが、大文字と小文字を区別する点が異なります。これは 1 文字以上の下記の文字のから成ります。

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

なお、このデータ型では `id1`、`Id1`、`iD1`、`ID1` は大文字と小文字を区別するため、すべて異なった識別子として扱われます。逆に、`toto\?` と `toto\3F` は文字をエスケープする方法が異なりますが、同じ識別子として扱われます。

### 禁止されている値

`<custom-ident>` を引用符または二重引用符の間に置いてはいけません。こうすると、 `<string>` として識別されてしまいます。さらに、先頭の文字は、数字やハイフン (`-`) および、それらの続くものであってはなりません。

曖昧さを避けるため、 `<custom-ident>` を使用する各プロパティでは、特定の値の使用が禁止されています。

`animation-name`

グローバル CSS 値 (`unset`, `initial`, `inherit`) を禁止し、 `none` も禁止しています。

`counter-reset`, `counter-increment`

グローバル CSS 値 (`unset`, `initial`, `inherit`) を禁止し、 `none` も禁止しています。

`@counter-style`, `list-style-type`

グローバル CSS 値 (`unset`, `initial`, `inherit`) および `none`, `inline`, `outside` の値を禁止しています。また、`disc`, `circle`, `square`, `decimal`, `cjk-decimal`, `decimal-leading-zero`, `lower-roman`, `upper-roman`, `lower-greek`, `lower-alpha`, `lower-latin`, `upper-alpha`, `upper-latin`, `arabic-indic`, `armenian`, `bengali`, `cambodian`, `cjk-earthly-branch`, `cjk-heavenly-stem`, `cjk-ideographic`, `devanagari`, `ethiopic-numeric`, `georgian`, `gujarati`, `gurmukhi`, `hebrew`, `hiragana`, `hiragana-iroha`, `japanese-formal`, `japanese-informal`, `kannada`, `katakana`, `katakana-iroha`, `khmer`, `korean-hangul-formal`, `korean-hanja-formal`, `korean-hanja-informal`, `lao`, `lower-armenian`, `malayalam`, `mongolian`, `myanmar`, `oriya`, `persian`, `simp-chinese-formal`, `simp-chinese-informal`, `tamil`, `telugu`, `thai`, `tibetan`, `trad-chinese-formal`, `trad-chinese-informal`, `upper-armenian`, `disclosure-open`, and `disclosure-close` といった定義済みの値が、様々なブラウザーで実装されています。

`grid-row-start`, `grid-row-end`, `grid-column-start`, `grid-column-end`

`span` 値を禁止しています。

`will-change`

グローバル CSS 値 (`unset`, `initial`, `inherit`) および `will-change`, `auto`, `scroll-position`, `contents` の値を禁止しています。

例
-

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

nono79            アルファベットと数字の組み合わせ
ground-level      アルファベットとダッシュの組み合わせ
-test             ダッシュとそれに続くアルファベット
_internal         アンダースコアとそれに続くアルファベット
\22 toto          Unicode 文字とそれに続くアルファベット
bili\.bob         ピリオドが正しくエスケープされている
```

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

34rem             数字で始まってはいけない
-12rad            ダッシュで始まって数字が続いてはいけない
bili.bob          アルファベットと数字以外でエスケープせずに使えるのは _ と - だけ
--toto            2 つのダッシュで始まってはいけない
'bilibob'         <string> になります
"bilibob"         <string> になります
```

仕様書
---

| Specification |
| --- |
| CSS Values and Units Module Level 4 # custom-idents |
| CSS Will Change Module Level 1 # valdef-will-change-custom-ident |
| CSS Counter Styles Level 3 # typedef-counter-style-name |
| CSS Lists and Counters Module Level 3 # counter-properties |

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

*このデータ型は実際の型ではありませんが、許可された値をシンプルに記述するのに役立つ便利な型です。ブラウザーの互換性についての情報はありません。*

関連情報
----

* `<ident>`
::-moz-color-swatch
===================

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

**`::-moz-color-swatch`** は CSS の擬似要素であり、 Mozilla 拡張で、 `<input>` の `type="color"` で選択された色を表します。

**メモ:** `::-moz-color-swatch` を `<input type="color">` 以外に何も一致せず、何も効果がありません。

構文
--

Error: could not find syntax for this item例
-

### HTML


```html
<input type="color" value="#de2020" />
```

### CSS


```css
input[type="color"]::-moz-color-swatch {
  border-radius: 10px;
  border-style: none;
}
```

### 結果

仕様書
---

どの仕様書でも定義されていません。これは Gecko に固有の専用の擬似要素です。

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

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

関連情報
----

* 他のブラウザーで使用される似た擬似要素
    + `::-webkit-color-swatch` WebKit および Blink (Safari, Chrome, Opera) で対応している擬似要素
transform-style
===============

**`transform-style`** は CSS のプロパティで、要素の子要素を 3D 空間に配置するのか、平面化して要素の平面に配置するのかを設定します。

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

平面化した場合、子要素は自身の 3D 空間に存在しなくなります。

このプロパティは継承されないため、葉要素以外のすべての子孫要素で設定する必要があります。

構文
--


```css
/\* キーワード値 \*/
transform-style: flat;
transform-style: preserve-3d;

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

### 値

`flat`

要素の子要素を要素自身の平面上に配置することを示します。

`preserve-3d`

要素の子要素を 3D 空間に配置することを示します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `flat` |
| 適用対象 | 座標変換可能要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
| 重ね合わせコンテキストの生成 | あり |

形式文法
----
```

transform-style =   
  flat         |  
  preserve-3d    
  
```

例
-

### 座標変換スタイルのデモ

この例では、座標変換を使用して 3D の立方体を作成しています。立方体の面の親コンテナーには、既定で `transform-style: preserve-3d` が設定されているため、3D 空間で座標変換され、意図したとおりに表示されます。

また、これと `transform-style: flat` の間で切り替えられるチェックボックスも用意しました。この別な状態では、立方体の面はすべて親の平面上に平坦化され、使用しているブラウザーによっては全く表示されない場合があります。

#### HTML


```html
<section id="example-element">
  <div class="face front">1</div>
  <div class="face back">2</div>
  <div class="face right">3</div>
  <div class="face left">4</div>
  <div class="face top">5</div>
  <div class="face bottom">6</div>
</section>

<div class="checkbox">
  <label for="preserve"><code>preserve-3d</code></label>
  <input type="checkbox" id="preserve" checked />
</div>
```


#### CSS


```css
#example-element {
  margin: 50px;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transform: rotate3d(1, 1, 1, 30deg);
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: #fff;
}

.front {
  background: rgba(90, 90, 90, 0.7);
  transform: translateZ(50px);
}

.back {
  background: rgba(0, 210, 0, 0.7);
  transform: rotateY(180deg) translateZ(50px);
}

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

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

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

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


#### JavaScript


```js
const cube = document.getElementById("example-element");
const checkbox = document.getElementById("preserve");

checkbox.addEventListener("change", () => {
  cube.style.transformStyle = checkbox.checked ? "preserve-3d" : "flat";
});
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 2 # transform-style-property |

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

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

関連情報
----

* CSS 座標変換の使用