recursal/MDN huggingface dataset:
:placeholder-shown
==================

**`:placeholder-shown`** は CSS の擬似クラスで、プレイスホルダー文字列が表示されている `<input>` または `<textarea>` 要素を表します。


```css
/\* プレイスホルダーが有効な要素を選択 \*/
:placeholder-shown {
  border: 2px solid silver;
}
```

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

構文
--
```

:placeholder-shown
```

例
-

### 基本的な例

この例は、プレイスホルダーが表示されているときに特殊なフォントと境界線を適用します。

#### HTML


```html
<input placeholder="何か入力してください！" />
```


#### CSS


```css
input {
  border: 1px solid black;
  padding: 3px;
}

input:placeholder-shown {
  border-color: teal;
  color: purple;
  font-style: italic;
}
```


#### 結果

### 文字列があふれる場合

スマートフォンのような狭い画面では、検索ボックスやその他の入力欄の幅はとても狭くなります。これにより、プレイスホルダーの文字列が望ましくない形で切り取られることがあります。 `text-overflow` プロパティでこの挙動を修正すると便利です。

#### HTML


```html
<input id="input1" placeholder="Name, Rank, and Serial Number" /> <br /><br />
<input id="input2" placeholder="Name, Rank, and Serial Number" />
```


#### CSS


```css
#input2:placeholder-shown {
  text-overflow: ellipsis;
}
```


#### 結果

### カスタマイズした入力欄

以下の例では部署名と ID コード欄をカスタムスタイルで強調します。

#### HTML


```html
<form id="test">
  <p>
    <label for="name">Enter Student Name:</label>
    <input id="name" placeholder="Student Name" />
  </p>
  <p>
    <label for="branch">Enter Student Branch:</label>
    <input id="branch" placeholder="Student Branch" />
  </p>
  <p>
    <label for="sid">Enter Student ID:</label>
    <input
 type="number"
 pattern="[0-9]{8}"
 title="8 digit ID"
 id="sid"
 class="studentid"
 placeholder="8 digit id" />
  </p>
  <input type="submit" />
</form>
```


#### CSS


```css
input {
  background-color: #e8e8e8;
  color: black;
}

input.studentid:placeholder-shown {
  background-color: yellow;
  color: red;
  font-style: italic;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # placeholder |

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

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

関連情報
----

* `::placeholder` 擬似要素はプレイスホルダー*自身*にスタイルを適用します。
* 関連する HTML 要素: `<input>`, `<textarea>`
* HTML フォーム
inset-block
===========

**`inset-block`** は CSS のプロパティで、要素におけるブロック方向の先頭および末尾からの論理的な内部位置を定義し、要素の書字方向やテキストの向きに従って物理的な内部位置に対応付けられます。 `top` と `bottom`、または `right` と `left` のいずれかのプロパティに、 `writing-mode`, `direction`, `text-orientation` で定義された値に従って対応します。

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

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

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

* `inset-block-end`
* `inset-block-start`
構文
--


```css
/\* <length> 値 \*/
inset-block: 3px 10px;
inset-block: 2.4em 3em;
inset-block: 10px; /\* 値が先頭と末尾の両方に適用される \*/

/\* 包含ブロックの幅または高さに対する <percentage> 値 \*/
inset-block: 10% 5%;

/\* キーワード値 \*/
inset-block: auto;

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

### 値

`inset-block` プロパティは `left` プロパティと同じ値を取ります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `inset-block-start`: `auto`
* `inset-block-end`: `auto`
 |
| 適用対象 | 位置指定要素 |
| 継承 | なし |
| パーセント値 | 包含ブロックの論理的な高さ |
| 計算値 | 一括指定の次の各プロパティとして* `inset-block-start`: 方向が論理的である以外はボックスのオフセット、 `top`, `right`, `bottom`, `left` と同じ
* `inset-block-end`: 方向が論理的である以外はボックスのオフセット、 `top`, `right`, `bottom`, `left` と同じ
 |
| アニメーションの種類 | length または パーセント値, calc(); |

形式文法
----
```

inset-block =   
  <'top'>{1,2}    
  
```

例
-

### ブロック方向の先頭と末尾のオフセットの設定

#### HTML


```html
<div>
  <p class="exampleText">テキストの例</p>
</div>
```


#### CSS


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

.exampleText {
  writing-mode: vertical-lr;
  position: relative;
  inset-block: 20px 50px;
  background-color: #c8c800;
}
```


#### 結果

仕様書
---

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

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

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

関連情報
----

* 対応する物理的プロパティ: `top`, `right`, `bottom`, `left`
* 対応する物理的な一括指定: `inset`
* 対応するインライン方向の一括指定: `inset-inline`
* `writing-mode`, `direction`, `text-orientation`
:link
=====

**`:link`** は CSS の擬似クラスで、まだ訪問されていない要素を表します。 `<a>` または `<area>` など、 `href` 属性を持つ未訪問のすべての要素を選択します。

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

`:link` および `:visited` 擬似クラスによって定義されたスタイルは、以降のユーザー操作の擬似クラス（`:hover` または `:active`）によって上書きされる可能性があります。適切にリンクにスタイルを適用するには、 `:link` ルールを他のすべてのリンク関連ルールの前に置き、 *LVHA 順*: `:link` — `:visited` — `:hover` — `:active` で定義されるようにしてください。 `:visited` 擬似クラスと `:link` 擬似クラスは互いに排他的です。

**メモ:** 訪問済みかどうかにかかわらず要素を選択するには、 `:any-link` を使用してください。

構文
--


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

例
-

既定では、大半のブラウザーが訪問済みのリンクに特別な `color` の値を適用しています。そのため、この例のリンクは訪問前でしか特別な文字色にならないでしょう（よって、再度確認するにはブラウザーの履歴をクリアする必要があります）。しかし、 `background-color` の値は、大半のブラウザーが既定で訪問済みのリンクに設定していないのでおそらく残ります。

### HTML


```html
<a href="#ordinary-target">これは普通のリンクです。</a><br />
<a href="">このリンクを訪問しました。</a><br />
<a>リンクのプレイスホルダー（スタイルの適用なし）</a>
```

### CSS


```css
a:link {
  background-color: gold;
  color: green;
}
```

### 結果

仕様書
---

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

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

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

関連情報
----

* リンク関連の擬似クラス: `:visited`, `:hover`, `:active`
コメント
====

CSS の**コメント**は、説明的なメモをコードに追加したり、スタイルシートの特定の部分をブラウザーに解釈させないようにしたりするために使用します。設計上、コメントは文書のレイアウトにおいて効果を持ちません。

構文
--

コメントはスタイルシート内で、ホワイトスペースが置ける場所ならばどこでも配置できます。1 行で使用したり、複数行に渡らせたりすることができます。


```css
/\* コメント \*/
```

例
-


```css
/\* 1 行のコメント \*/

/\*
複数行に
またがる
コメント
\*/

/\* 以下のコメントは、特定の
 スタイルを無効にします。 \*/
/\*
span {
 color: blue;
 font-size: 1.5em;
}
\*/
```

メモ
--

`/* */` のコメント構文は、 1 行のコメントにも複数行のコメントにも使用されます。外部のスタイルシートでコメントを指定する方法は他にありません。しかし、推奨されませんが、 `<style>` 要素を使用するときは、古いブラウザーから CSS を隠すために `<!-- -->` を使用することができます。 `/* */` のコメント文法を使用する他のプログラミング言語と同様、コメントは入れ子にすることができません。言い換えれば、 `/*` の後で最初に `*/` が出現すると、コメントが終了します。

仕様書
---

* CSS 2.1 Syntax and basic data types #comments
関連情報
----

* CSS の主要概念:
    + CSS の構文
    + アットルール
    + 詳細度
    + 継承
    + ボックスモデル
    + レイアウトモード
    + 視覚整形モデル
    + マージンの相殺
    + 値
        - 初期値
        - 計算値
        - 使用値
        - 実効値
    + 値の定義構文
    + 一括指定プロパティ
    + 置換要素
:defined
========

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
**`:defined`** は CSS の擬似クラスで、定義されているすべての要素を表します。これにはブラウザーに組み込まれたすべての標準要素と、 (`CustomElementRegistry.define()` メソッドを使用して) 定義に成功したカスタム要素が含まれます。


```css
/\* 定義されたすべての要素を選択 \*/
:defined {
  font-style: italic;
}

/\* 特定の custom 要素のすべてのインスタンスを選択 \*/
simple-custom:defined {
  display: block;
}
```

構文
--
```

:defined
```

例
-

### 定義されるまで要素を非表示にする

以下のスニペットは、 defined-pseudo-class のデモから取ったものです (ライブでも参照してください).

このデモでは、非常にシンプルで些細なカスタム要素を定義しています。


```js
customElements.define(
  "simple-custom",
  class extends HTMLElement {
    constructor() {
      super();

      let divElem = document.createElement("div");
      divElem.textContent = this.getAttribute("text");

      let shadowRoot = this.attachShadow({ mode: "open" }).appendChild(divElem);
    }
  },
);
```


次に、この要素のコピーを、標準的な `<p>` と共に文書に挿入します。


```html
<simple-custom text="Custom element example text"></simple-custom>

<p>Standard paragraph example text</p>
```


CSS では、まず以下のルールを設定します。


```css
/\* 2 つの要素を背景で区別できるようにする \*/
p {
  background: yellow;
}

simple-custom {
  background: cyan;
}

/\* カスタム要素と組み込み要素を両方イタリック体にする \*/
:defined {
  font-style: italic;
}
```


それから、カスタム要素が定義されていないときには非表示にし、定義されていたらブロックレベル要素として定義して表示するという 2 つのルールを設定します。


```css
simple-custom:not(:defined) {
  display: none;
}

simple-custom:defined {
  display: block;
}
```


これは、複雑なカスタム要素があってページの読み込みを待ちたいときに便利です。定義が完了するまで要素のインスタンスを非表示にして、ページ上でスタイル適用前の醜い要素が一瞬現れるのを防ぐことができます。

仕様書
---

| Specification |
| --- |
| HTML Standard # selector-defined |

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

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

関連情報
----

* ウェブコンポーネント
CSS 座標変換
========

**CSS 座標変換** (CSS transforms) は、 CSS でスタイル付けされた要素をどのように二次元または三次元空間に座標変換するかを定義します。

CSS 座標変換の動作
-----------

下の枠内のスライダーを使うと、 3D 空間での立方体の平行移動、回転、変倍、歪めの CSS 座標変換のプロパティを変更できます。立方体を 3D 空間内で移動させながら、 3D 位置 `(0, 0, 0)` にある `z:0px` とラベル付けされた要素との相互作用に注目してください。

また、 `perspective` スライダーを使って、立方体のコンテナーの `perspective` プロパティを変更することができます。

`perspective-origin` スライダーは、ビューの消点を決定するために、閲覧者が3D空間のどこを見ているかを決定します。この消点は小さな赤い点で示されます。これらのスライダーを変更することで、立方体自体を動かすことなく、頭を上下左右に動かして立方体のさまざまな部分を見ることができると想像してください。

`backface-visibility` チェックボックスは、立方体の裏面を `visible` （表示）に設定するか、`hidden` （非表示）に設定するかを決定します。

上の例の立方体は 6 つの `<div>` 要素で構成されており、すべて CSS でスタイル設定されて立方体の面を構成しています。立方体は 2D や 3D のキャンバスコンテキストを使用して描画されていないので、**他の DOM 要素を検査するのと同じように**、ブラウザーの開発者ツールで立方体の面を検査することができます。ブラウザー開発者ツールの要素ピッカーを使用して、立方体の位置と回転を変換しながら、立方体のさまざまな面を調べてみてください。

**メモ:** 3D 回転を含む座標変換を適用する場合、順序はが座標変換結果に影響します。上の例では、座標変換は平行移動、変倍、回転、歪めを行います。回転は X → Y → Z の順に適用されます。

この例のソースを GitHub で確認できます。

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

### プロパティ

* `backface-visibility`
* `perspective`
* `perspective-origin`
* `rotate`
* `scale`
* `transform`
* `transform-box`
* `transform-origin`
* `transform-style`
* `translate`
### 関数

* `matrix()`
* `matrix3d()`
* `perspective()`
* `rotate()`
* `rotate3d()`
* `rotateX()`
* `rotateY()`
* `rotateZ()`
* `scale()`
* `scale3d()`
* `scaleX()`
* `scaleY()`
* `scaleZ()`
* `skew()`
* `skewX()`
* `skewY()`
* `translate()`
* `translate()`
* `translateX()`
* `translateY()`
* `translateZ()`
### データ型

* `<transform-function>`
ガイド
---

CSS 座標変換の利用

CSS でスタイル付けされた要素をどのように座標変換するかについての手順を追ったチュートリアルです。

座標系

CSS オブジェクトモデルでピクセル位置を定義する方法を説明します。

パフォーマンスの基礎: CSS 座標変換の使用

ウェブパフォーマンスの基礎について、 CSS 座標変換がどのようにパフォーマンスを向上させることができるかを含め、概説します。

ウェブの行列演算

オブジェクトの座標変換を行列で表す方法を説明しています。

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

* CSS プロパティ:
    + `animation`
    + `background-position`
    + `clip`
    + `clip-path`
    + `contain`
    + `content-visibility`
    + `isolation`
    + `mask`
    + `mask-border-source`
    + `mask-image`
    + `mix-blend-mode`
    + `opacity`
    + `overflow`
    + `transition`
    + `visibility`
* データ型:
    + `<angle>`
    + `<length-percentage>`
    + `<length>`
    + `<number>`
    + `<percentage>`
    + `<position>`
* 用語集の用語:
    + 補間
    + 重ね合わせコンテキスト
* SVG の概念:
    + `<animate>` 要素
    + `<animateTransform>` 要素
    + `<set>` 要素
    + `transform` 要素
仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 1  |
| CSS Transforms Module Level 2  |

関連情報
----

* 基本的な SVG 座標変換のチュートリアル
* CSS アニメーションモジュール
* CSS トランジションモジュール
後続兄弟結合子
=======

**後続兄弟結合子** (subsequent-sibling combinator, `~`) は 2 個のセレクターを結びつけ、 1 つ目の要素の後に 2 つ目の要素があり（直後である必要はない）、かつ両者が同じ親要素の子であるすべてのパターンに一致します。

次の例では、後続兄弟結合子 (`~`) は、画像の兄弟であり、画像の後に現れる段落を選択し、スタイル設定するのに便利です。


```css
img ~ p {
  color: red;
}
```

構文
--


```css
/\* 結合子の前後の空白はオプションですが、推奨されます。 \*/
先行する要素 ~ 選択される要素 { スタイルプロパティ }
```

例
-

### 単純セレクターと結合子の使用

この例では、両方のセレクターが単純セレクター（`p` と `span`）である場合に、 `~` 結合子を使用する場合を示しています。


```html
<article>
  <span>これは段落の前に現れるので赤にはなりません。</span>
  <p>ここに段落があります。</p>
  <code>ここに code があります。</code>
  <span>
    この span が赤いのは、間に他のノードがあるにもかかわらず、段落の後に現れるからです。
  </span>
  <p>何かあっても、笑顔を絶やさないでください。</p>
  <h1>夢は大きく</h1>
  <span>
    ノードの数や種類に関係なく、段落の後の同じ親からの span はすべて赤くなります。
  </span>
</article>
<span>
  この span は段落と親を共有していないので赤ではありません。
</span>
```



```css
p ~ span {
  color: red;
}
```

### 複合セレクターによる結合子の使用

この例には2つの複合セレクターがあり、どちらも後続兄弟結合子 `.foo p ~ span` と `.foo p ~ .foo span` を使用しています。

* 最初の複合セレクターである `.foo p ~ span` は、もし span と段落の親が同じで、**かつ**その親またはその親の祖先がクラス `.foo` を持っている場合、段落の後に来るすべての span に一致します。
* 2 つ目の複合セレクター `.foo p ~ .foo span` は、クラス `.foo` を持っている要素の子孫であるすべての span に一致します。

下記の例は、複合セレクターの対象要素は、複合セレクターの初期要素と同じ親を示さなければならないことを示しています。


```html
<h1>夢は大きく</h1>
<span>またしても赤い span です！</span>
<div class="foo">
  <p>別の段落です。</p>
  <span>青い span</span>
  <div class="foo">
    <span>緑の span</span>
  </div>
</div>
```



```css
.foo p ~ span {
  color: blue;
}

.foo p ~ .foo span {
  color: green;
}
```


上の HTML では、`.foo p` の兄弟は `span` と `.foo` です。緑色の `span` は `.foo` クラスの子孫で、`p` の兄弟です。

* 対象セレクターが `span` の場合、`p` の兄弟である `span` 要素が選択されます。 `p` 要素は `.foo` の子孫であるため、その `span` 兄弟要素も選択されます。
* `.foo p ~ .foo span` では、対象とするセレクターは `.foo` の子孫である `span` です。この場合、 `.foo` の子孫である `span` 要素は、その `.foo` が `p` の兄弟である場合に選択されます。基本的には、どちらも `.foo` の祖先に入れ子になっています。
仕様書
---

| Specification |
| --- |
| Selectors Level 4 # general-sibling-combinators |

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

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

関連情報
----

* 次兄弟結合子
border-block-end
================

**`border-block-end`** は CSS のプロパティで、個々の論理的なブロック方向の末尾側境界のプロパティ値を、スタイルシート内の単一の場所で設定するための一括指定プロパティです。

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

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

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

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


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

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


`border-block-end` は 1 つ以上の `border-block-end-width`, `border-block-end-style`, `border-block-end-color` の値の組み合わせを使用することができます。対応づけられる物理的な境界は、書字方向やテキストの向きによって決まります。これは `border-top`, `border-right`, `border-bottom`, `border-left` の何れかに対応し、どれに対応するかは `writing-mode`, `direction`, `text-orientation` で定義された値によって決まります。

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

### 値

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

`<'border-width'>`

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

`<'border-style'>`

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

`<'color'>`

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

公式定義
----

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

形式文法
----
```

border-block-end =   
  <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>
  <p class="exampleText">Example text</p>
</div>
```


#### CSS


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

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


#### 結果

仕様書
---

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

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

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

関連情報
----

* このプロパティは `border-top`, `border-right`, `border-bottom`, `border-left` のうちの一つに対応づけられます。
* `writing-mode`, `direction`, `text-orientation`
レイアウトモード
========

CSS の**レイアウトモード** (または単に「レイアウト」) は、ボックスの位置やサイズを、兄弟要素や祖先要素のボックスとの相互作用を踏まえて決めるアルゴリズムです。複数のレイアウトモードがあります。

* *通常フロー* — すべての要素は何かの操作をして外さない限り、通常フローの一部です。通常フローは、段落のようなボックスをレイアウトするための*ブロックレイアウト*と、テキストのような行内アイテムをレイアウトするための*インラインレイアウト*を含みます。
* *表レイアウト*は、表のレイアウトのためのものです。
* *浮動レイアウト*は、アイテムを左または右に配置して、残りの部分はそれを回り込む通常フローにするためのものです。
* *位置指定レイアウト*は、他要素とほとんど相互作用のない位置指定要素のためのものです。
* *段組みレイアウト*は、新聞のように複数の段でコンテンツをレイアウトするためのものです。
* *フレックスボックスレイアウト*は、滑らかに大きさが変更できる複雑なページのレイアウトに使われます。
* *グリッドレイアウト*は、固定グリッドを基準にした要素配置に使われます。

**メモ:** レイアウトモードによって、使える CSS プロパティに制限があります。多くは 1 つか 2 つのレイアウトモードで用いられ、別のレイアウトモードに関わる要素に設定しても効果がありません。

関連情報
----

* CSS の主要概念:
    + CSS の構文
    + アットルール
    + コメント
    + 詳細度
    + 継承
    + ボックスモデル
    + 視覚整形モデル
    + マージンの相殺
    + 値
        - 初期値
        - 計算値
        - 使用値
        - 実効値
    + 値の定義構文
    + 一括指定プロパティ
    + 置換要素
overflow-anchor
===============

**`overflow-anchor`** は CSS のプロパティで、コンテンツの移動を最小化するためにスクロール位置を調整する、ブラウザーのスクロールアンカリングの動作をオプトアウトする方法を提供します。

スクロールアンカリングの動作は、対応しているすべてのブラウザーで既定で有効になっています。したがって、このプロパティを変更するのは通常、文書または文書の一部でスクロールアンカリングによって操作上の問題が発生し、この動作をオフにする必要がある場合のみです。

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

構文
--


```css
/\* キーワード値 \*/
overflow-anchor: auto;
overflow-anchor: none;

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

### 値

`auto`

その要素は、スクロール位置を調整するときにアンカー候補になります。

`none`

その要素はアンカー候補として選択されません。

公式定義
----

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

形式文法
----
```

overflow-anchor =   
  auto  |  
  none    
  
```

例
-

### スクロールアンカリングを抑止

文書内でスクロールアンカリングを抑止する場合は、 `overflow-anchor` プロパティを使用してください。


```css
\* {
  overflow-anchor: none;
}
```

仕様書
---

| Specification |
| --- |
| CSS Scroll Anchoring Module Level 1 # exclusion-api |

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

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

関連情報
----

* スクロールアンカリングの紹介
CSS フレックスボックスレイアウト
==================

**CSS フレックスボックスレイアウト** (CSS Flexible Box Layout) は、ユーザーインターフェイスの設計に最適化された CSS ボックスモデルと、一次元のアイテムのレイアウトを定義します。フレックスレイアウトモデルでは、フレックスコンテナーの子は任意の方向にレイアウトすることができ、また使われていない空間を埋めるために伸長したり、あるいは親のあふれることを避けるために収縮したりと、そのサイズを「伸縮」することができます。子の水平方向と垂直方向の両方の整列を、容易に操作することが可能です。

基本的な例
-----

以下の例では、コンテナーに `display: flex` に設定されており、 3 つの子がフレックスアイテムであることを意味しています。 `justify-content` の値は、主軸上に均等に配置するため、 `space-between` に設定されています。それぞれのアイテムと、その左右のアイテムとの間は等しい間隔で配置され、フレックスコンテナーの両端に揃えられます。また、 `align-items` の既定値は `stretch` なので、アイテムが交差軸方向に引き伸ばされていることが分かります。アイテムはフレックスコンテナーの高さまで引き伸ばされ、最も高さが大きいアイテムと同じ高さで表示されます。

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

### プロパティ

* `flex`
* `flex-basis`
* `flex-direction`
* `flex-flow`
* `flex-grow`
* `flex-shrink`
* `flex-wrap`
* `order`
### 配置プロパティ

`align-content`, `align-self`, `align-items`, `justify-content` の各プロパティは、当初はフレックスボックスの仕様書にありましたが、ボックス配置 (Box Alignment) の仕様書で定義されるようになりました。フレックスボックスの仕様書はボックス配置の最新の定義を参照するようになりました。ボックス配置では新しい配置プロパティも定義されるようになりました。

* `justify-content`
* `align-content`
* `align-items`
* `align-self`
* `place-content`
* `place-items`
* `row-gap`
* `column-gap`
* `gap`
ガイド
---

フレックスボックスの基本概念

フレックスボックスの機能の概要

フレックスボックスと他のレイアウト方法の関係

フレックスボックスが他のレイアウト方法や他の CSS 仕様書とどのように関係しているか

フレックスコンテナー内のアイテムの配置

ボックス配置プロパティがどのようにフレックスボックスに働くか

フレックスアイテムの順序

アイテムの順序や向きを変更する様々な方法を説明し、その上での潜在的な問題を紹介します。

主軸方向のフレックスアイテムの比率の制御

flex-grow, flex-shrink, flex-basis の各プロパティについての説明です。

フレックスアイテムの折り返しをマスターする

複数行のフレックスコンテナーを作成する方法と、それらの行内でのアイテムの表示方法の制御。

フレックスボックスの典型的な用途

典型的なフレックスボックスの用途の一般的なデザインパターン。

仕様書
---

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1  |

関連情報
----

* 用語集の項目:
    + フレックスボックス
    + フレックスコンテナー
    + フレックスアイテム
    + 主軸
    + 交差軸
    + フレックス
:visited
========

**`:visited`** は CSS の擬似クラスで、ユーザーが訪問したことがあるリンクに適用されます。プライバシー上の理由から、このセレクターを使用して変更できるスタイルはとても限定されています。 `:visited` 擬似クラスは `href` 属性を持つ `<a>` と `<area>` 要素にのみ適用されます。

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

`:visited` および、未訪問を表す `:link` 擬似クラスで定義されたスタイルは、少なくとも同等の仕様を持つユーザー操作に関する擬似クラスで（`:hover` や `:active`）によって上書きされます。適切にリンクにスタイルを適用するには、 `:visited` ルールを `:link` ルールの後、 `:hover` および `:active` ルールの前に置いてください。 *LVHA 順*、 `:link` — `:visited` — `:hover` — `:active` と定義されています。 `:visited` 擬似クラスと `:link` 擬似クラスは互いに排他的です。

プライバシー上の制約
----------

プライバシー上の理由から、ブラウザ―はこの擬似クラスを使って適用できるスタイルに厳しい制限をかけています。使い方は以下の通りです。

* 利用できる CSS プロパティは、 `color`, `background-color`, `border-color`, `border-bottom-color`, `border-left-color`, `border-right-color`, `border-top-color`, `column-rule-color`, `outline-color`, `text-decoration-color`, `text-emphasis-color` です。
* 利用できる SVG 属性は `fill` と `stroke` です。
* 利用できるスタイルでもアルファチャンネルは無視されます。要素の `:visited` でない状態のアルファ成分が代わりに使用されます。Firefox でアルファ成分が `0` の場合、`:visited` で設定したスタイルは完全に無視されます。
* これらのスタイルはエンドユーザーに対する表示色を変更できるようになっていますが、 `window.getComputedStyle` メソッドは嘘をつき、 `:visited` 状態ではない色の値を返します。
* `<link>` 要素は `:visited` に一致することはありません。

**メモ:** これらの制限とその理由については、プライバシーと :visited セレクターを参照してください。

構文
--


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

例
-

色を持っていないか透過のプロパティは、 `:visited` で変更することができません。この擬似クラスで設定するプロパティについては、ブラウザーが持っている既定値は `color` と `column-rule-color` だけでしょう。そのため、他のプロパティを変更したい場合は、 `:visited` セレクターの外で基本的な値を設定する必要があります。

### HTML


```html
<a href="#test-visited-link">このリンクを訪問しましたか？</a><br />
<a href="">このリンクはすでに訪問済みです。</a>
```

### CSS


```css
a {
  /\* 該当するプロパティに不透過の既定値を設定することで、
 :visited 状態のスタイルを定義できるようにします \*/
  background-color: white;
  border: 1px solid white;
}

a:visited {
  background-color: yellow;
  border-color: hotpink;
  color: hotpink;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # selector-visited |
| Selectors Level 4 # link |

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

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

関連情報
----

* プライバシーと :visited セレクター
* リンク関連の擬似クラス: `:link`, `:active`, `:hover`
line-break
==========

**`line-break`** は CSS のプロパティで、中国語、日本語、韓国語 (CJK) のテキストにおいて、句読点や記号を用いた場合の改行規則 (禁則処理) を設定します。


```css
/\* キーワード値 \*/
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;

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

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

構文
--

### 値

`auto`

既定の改行規則を使用してテキストを改行します。

`loose`

最も制限の少ない改行規則を使用してテキストを改行します。一般的に、新聞などの短い行に使用されます。

`normal`

最も一般的な改行規則を使用してテキストを改行します。

`strict`

最も厳格な改行規則を使用してテキストを改行します。

`anywhere`

句読点や温存された空白、単語の途中も含め、すべての文字の間で折り返しできるようにし、 GL, WJ, ZWJ の文字クラスや、 `word-break` プロパティでもたらされる折り返しの禁止を一切無視します。どの折り返しの機会も優先されることはありません。ハイフネーションは適用されません。

公式定義
----

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

形式文法
----
```

line-break =   
  auto      |  
  loose     |  
  normal    |  
  strict    |  
  anywhere    
  
```

例
-

### テキストの折り返しの設定

"々", "ぁ", "。" の前で折り返しが行われるかどうかを確認してください。

#### HTML


```html
<div lang="ja">
  <p class="wrapbox auto">
    auto:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrapbox loose">
    loose:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrapbox normal">
    normal:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrapbox strict">
    strict:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrapbox anywhere">
    anywhere:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
</div>
```


#### CSS


```css
.wrapbox {
  width: 10em;
  margin: 0.5em;
  white-space: normal;
  vertical-align: top;
  display: inline-block;
}
.auto {
  line-break: auto;
}
.loose {
  line-break: loose;
}
.normal {
  line-break: normal;
}
.strict {
  line-break: strict;
}
.anywhere {
  line-break: anywhere;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Text Module Level 3 # line-break-property |

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

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

* CSS and International text