recursal/MDN huggingface dataset:
border-block
============

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

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

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

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

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

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

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


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

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

### 値

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

`<'border-width'>`

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

`<'border-style'>`

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

`<'color'>`

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

公式定義
----

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

形式文法
----
```

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

例
-

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

#### HTML


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


#### CSS


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

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


#### 結果

仕様書
---

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

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

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

関連情報
----

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

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

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

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

構文
--


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

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


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

### 値

`auto`

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

`isolate`

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

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

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

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

isolation =   
  <isolation-mode>    
  
<isolation-mode> =   
  auto     |  
  isolate    
  
```

例
-

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

#### HTML


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


#### CSS


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


#### 結果

仕様書
---

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

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

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

関連情報
----

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

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

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

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

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

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

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


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

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

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

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

### 値

`<length>`

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

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

`<percentage>`

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

`auto`

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

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

`inherit`

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

公式定義
----

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

形式文法
----
```

top =   
  auto                 |  
  <length-percentage>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

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


```css
body {
  background: beige;
}

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



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

仕様書
---

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

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

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

関連情報
----

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

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

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

構文
--


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

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

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

### 値

`<length-percentage>`

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

`auto`

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

公式定義
----

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

形式文法
----
```

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

仕様書
---

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

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

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

関連情報
----

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

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

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

構文
--


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

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


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

### 値

`visible`

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

`hidden`

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

`scroll`

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

`auto`

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

公式定義
----

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

形式文法
----
```

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

例
-

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

#### HTML


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

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

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

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


#### CSS


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

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


#### 結果

仕様書
---

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

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

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

関連情報
----

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

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


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

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

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

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

構文
--

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

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

`none`

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

`first`

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

`last`

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

`force-end`

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

`allow-end`

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

公式定義
----

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

形式文法
----
```

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

例
-

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

#### HTML


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


#### CSS


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


#### 結果

仕様書
---

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

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

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

* CSS Tricks: Hanging punctuation
:fullscreen
===========

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

構文
--
```

:fullscreen
```

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

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

例
-

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

### HTML

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


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

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

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


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

### CSS

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


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


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


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

仕様書
---

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

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

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

関連情報
----

* Fullscreen API
* Fullscreen API のガイド
* `:not`
* `::backdrop`
* DOM API: `Element.requestFullscreen()`, `Document.exitFullscreen()`, `Document.fullscreenElement`
* `allowfullscreen` 属性
CSS チュートリアル
===========

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

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

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

CSS の基本

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


複数の背景画像の利用

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

背景画像の拡大縮小

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


メディアクエリーの使用

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


CSS の z-index を理解する

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


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

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

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

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

CSS アニメーション

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

CSS トランジション

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

CSS 座標変換

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

CSS グラデーション

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


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

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

CSS 段組みレイアウト

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


CSS flexible boxes layouts

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

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

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

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

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

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

構文
--


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

例
-

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

#### HTML


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


#### CSS


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

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


#### 結果

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

#### HTML


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


#### CSS


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

form button {
  background: white;
}
```


#### 結果

仕様書
---

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

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

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

関連情報
----

* リンク関連の擬似クラス: `:link`, `:visited`, `:hover`
border-end-start-radius
=======================

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


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

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

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

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

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

構文
--

### 値

`<length-percentage>`

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

公式定義
----

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

形式文法
----
```

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

例
-

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

#### HTML


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


#### CSS


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

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


#### 結果

仕様書
---

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

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

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

関連情報
----

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

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


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

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


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

構文
--

### 値

`<integer>`

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

公式定義
----

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

形式文法
----
```

orphans =   
  <integer [1,∞]>    
  
```

例
-

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

#### HTML


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


#### CSS


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

p {
  background-color: #8ca0ff;
}

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


#### 結果

仕様書
---

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

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

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

関連情報
----

* `widows`
* ページ化メディア
text-decoration-style
=====================

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

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

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

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

構文
--


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

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

### 値

solid

単独線を描画します。

double

二重線を描画します。

dotted

点線を描画します。

dashed

破線を描画します。

wavy

波線を描画します。

-moz-none
Non-standard

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

公式定義
----

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

形式文法
----
```

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

例
-

### 波線の下線を設定


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


#### CSS


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


#### HTML


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


#### 結果

仕様書
---

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

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

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

関連情報
----

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