recursal/MDN huggingface dataset:
CSS 色調整
=======

**CSS 色調整**モジュールは、モデルを提供し、「ダークモード」、コントラスト調整、その他の配色設定などのユーザーの環境設定を処理するために、ユーザーエージェントによる自動色調整を制御します。

このモジュールは `@media` の `prefers-color-scheme`、`prefers-contrast`、`forced-colors` 特性とともに、ブラウザーに色を自動的に調整させる方法とタイミングを定義します。

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

### プロパティ

* `color-scheme`
* `forced-color-adjust`
* `print-color-adjust`
関連概念
----

* CSS の `<color>` データ型
* 関連する `@media` 特性:
    + `prefers-color-scheme`
    + `prefers-contrast`
    + `forced-colors`
* 強制色モードに影響するプロパティ
    + `accent-color`
    + `background-color`
    + `background-image`
    + `border-color`
    + `box-shadow`
    + `caret-color`
    + `color`
    + `color-scheme`
    + `column-rule-color`
    + `fill`
    + `flood-color` (en-US)
    + `lighting-color` (en-US)
    + `outline-color`
    + `scrollbar-color`
    + `stop-color`
    + `stroke`
    + `text-decoration-color`
    + `text-emphasis-color`
    + `text-shadow`
    + `-webkit-tap-highlight-color`
仕様書
---

| Specification |
| --- |
| CSS Color Adjustment Module Level 1  |

関連情報
----

* CSS 色モジュール
:any-link
=========

**`:any-link`** は CSS の擬似クラスセレクターで、訪問の有無とは独立したソースアンカーとして振る舞う要素を表します。言い換えれば、 `href` 属性を持つすべての `<a>` または `<area>` 要素を選択します。つまり、 `:link` または `:visited` に一致するすべての要素を選択します。


```css
/\* :link または :visited に該当するすべての要素を選択 \*/
:any-link {
  color: green;
}
```

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

構文
--
```

:any-link
```

例
-

### HTML


```html
<a href="https://example.com">External link</a><br />
<a href="#">Internal target link</a><br />
<a>Placeholder link (won't get styled)</a>
```

### CSS


```css
a:any-link {
  border: 1px solid blue;
  color: orange;
}

/\* WebKit browsers \*/
a:-webkit-any-link {
  border: 1px solid blue;
  color: orange;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # the-any-link-pseudo |

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

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

関連情報
----

* ハイパーリンクの作成
* 一致する HTML 要素: `<a>` および `<area>` に `href` 属性が付いたもの
* 関連する CSS セレクター:
    + `:visited`
    + `:link`
-webkit-border-before
=====================

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

**`-webkit-border-before`** は CSS のプロパティで、個々の論理ブロックの境界の先頭側のプロパティ値をスタイルシートの一箇所で設定するための一括指定プロパティです。


```css
/\* border の値 \*/
-webkit-border-before: 1px;
-webkit-border-before: 2px dotted;
-webkit-border-before: medium dashed blue;

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


`-webkit-border-before` は `-webkit-border-before-width`, `-webkit-border-before-style`, `-webkit-border-before-color` のうちの 1 つ以上の値で設定することができます。これはその要素の書字方向やテキストの向きに応じて、物理的な境界に対応付けられます。これは `border-top`, `border-right`, `border-bottom`, `border-left` の各プロパティに、 `writing-mode`, `direction`, `text-orientation` で定義された値に基づいて対応付けられます。

これは要素の他の境界を定義する `-webkit-border-after`, `-webkit-border-start`, `-webkit-border-end` に関連しています。

このプロパティは `border-block-start` として標準化過程にあります。

構文
--

### 値

以下のものを 1 つ以上、任意の順で指定します。

`<'border-width'>`

See `border-width`

`<'border-style'>`

See `border-style`

`<'color'>`

See `color`

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `border-width`: 一括指定の次の各プロパティとして
    + `border-top-width`: `medium`
    + `border-right-width`: `medium`
    + `border-bottom-width`: `medium`
    + `border-left-width`: `medium`
* `border-style`: 一括指定の次の各プロパティとして
    + `border-top-style`: `none`
    + `border-right-style`: `none`
    + `border-bottom-style`: `none`
    + `border-left-style`: `none`
* `color`: `canvastext`
 |
| 適用対象 | すべての要素 |
| 継承 | あり |
| パーセント値 | 一括指定の次の各プロパティとして* `-webkit-border-before-width`: 包含ブロックの論理的な幅
 |
| 計算値 | 一括指定の次の各プロパティとして* `border-width`: 一括指定の次の各プロパティとして
    + `border-bottom-width`: 絶対的な長さ、または `border-bottom-style` が `none` または `hidden` の場合は `0`
    + `border-left-width`: 絶対的な長さ、または `border-left-style` が `none` または `hidden` の場合は `0`
    + `border-right-width`: 絶対的な長さ、または `border-right-style` が `none` または `hidden` の場合は `0`
    + `border-top-width`: 絶対的な長さ、または `border-top-style` が `none` または `hidden` の場合は `0`
* `border-style`: 一括指定の次の各プロパティとして
    + `border-bottom-style`: 指定通り
    + `border-left-style`: 指定通り
    + `border-right-style`: 指定通り
    + `border-top-style`: 指定通り
* `color`: 色の計算値
 |
| アニメーションの種類 | 離散値 |

形式文法
----

Error: could not find syntax for this item例
-

### 縦書きテキストに境界を適用

#### 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;
  -webkit-border-before: 5px dashed blue;
}
```


#### 結果

仕様書
---

標準には含まれていませんが、標準化過程にある `border-block-start` プロパティに関連しています。

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

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

関連情報
----

* `border-block-start`
* 対応付けられる物理的プロパティ: `border-top`, `border-right`, `border-bottom`, `border-left`
* `writing-mode`, `direction`, `text-orientation`
擬似要素
====

CSS の **擬似要素** (Pseudo-elements) は、セレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするものです。

構文
--


```css
selector::pseudo-element {
  property: value;
}
```


例えば `::first-line` 擬似要素は、段落の最初の行のフォントを変更するために使用することができます。


```css
/\* すべての <p> 要素の最初の行です。 \*/
p::first-line {
  color: blue;
  text-transform: uppercase;
}
```


擬似要素にはダブルコロン (`::`) を使用します。これは、単一のコロン (`:`) を使用する擬似クラスと区別するためです。

1つのセレクターで使用できる擬似要素は1つだけです。擬似要素が現れる場所は、それが現れる複雑セレクターまたは複合セレクター内の他のすべての要素の後でなければなりません。例えば、段落の最初の行は `p::first-line` を使用して選択することができますが、最初の行の子やポインターが当たっている最初の行は選択できません。つまり、 `p::first-line > *` と `p::first-line:hover` はどちらも無効です。

擬似要素を使用して、状態に基づいて要素を選択することはできませんが、擬似要素を使用して、すでに状態が適用されている要素の一部を選択してスタイル設定することはできます。例えば、 `p:hover::first-line` は、段落自体にポインターが当たっているとき（擬似クラス）に、段落の最初の行（擬似要素）を選択します。

**メモ:** セレクターリストに無効なセレクターが含まれている場合、そのスタイルブロック全体が無効になります。

擬似要素の一覧
-------

CSS の一連の仕様で定義される擬似要素には、以下のようなものがあります。

A

* `::after`

B

* `::backdrop`
* `::before`

C

* `::cue`
* `::cue-region`

F

* `::first-letter`
* `::first-line`
* `::file-selector-button` (en-US)

G

* `::grammar-error` 
Experimental

M

* `::marker`

P

* `::part()`
* `::placeholder`

S

* `::selection`
* `::slotted()`
* `::spelling-error` 
Experimental

T

* `::target-text` 
Experimental

**メモ:** ブラウザーは元の 4 つの擬似要素、 `::before`、`::after`、`::first-line`、`::first-letter` のみで単一コロンの構文に対応しています。

仕様書
---

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4  |
| CSS Positioned Layout Module Level 4  |
| CSS Shadow Parts  |
| WebVTT: The Web Video Text Tracks Format  |

関連情報
----

* CSS 擬似要素モジュール
* 擬似クラス
* CSS セレクターモジュール
* CSS 構成要素: 擬似クラスと擬似要素
animation-direction
===================

**`animation-direction`** は CSS のプロパティで、アニメーション再生の向きを順方向、逆方向、前後反転のいずれにするかを設定します。

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

アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである `animation` プロパティを使用すると便利です。

構文
--


```css
/\* 単一のアニメーション \*/
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;

/\* 複数のアニメーション \*/
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;

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

### 値

`normal`

アニメーションを毎回*順方向*に再生します。言い換えれば、アニメーション周期ごとに、アニメーションを最初の状態にリセットしてそこからまた始めます。これが既定値です。

`reverse`

アニメーションを毎回*逆方向*に再生します。言い換えれば、アニメーション周期ごとに、アニメーションを最後の状態にリセットしてそこからまた始めます。アニメーションを逆方向に実行し、イージング関数も逆になります。例えば、イージング関数の `ease-in` が `ease-out` になります。

`alternate`

アニメーションを毎回反転させ、初回は*順方向*になります。周期が偶数か奇数かを特定する回数は1から始まります。

`alternate-reverse`

アニメーションを毎回反転させ、初回は*逆方向*になります。周期が偶数か奇数かを特定する回数は1から始まります。


**メモ:** `animation-*` プロパティにカンマ区切りで複数の値を指定した場合、 `animation-name` に現れる順にアニメーションに適用されます。アニメーションの数と `animation-*` プロパティの値が一致しない場合は、複数のアニメーションプロパティ値の設定 を参照してください。

**メモ:** CSS スクロール駆動アニメーション (en-US) を作成するとき、 `animation-direction` を指定すると期待通りに動作します。例えば、`reverse` を指定すると、タイムラインの進行の過程でアニメーションが逆に実行されます。alternate`の値（`animation-iteration-count`と結合子）を指定すると、タイムラインの進行に合わせてアニメーションを前後に実行させます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `normal` |
| 適用対象 | すべての要素、`::before` / `::after` 擬似要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | アニメーション不可 |

形式文法
----
```

animation-direction =   
  <single-animation-direction>#    
  
<single-animation-direction> =   
  normal             |  
  reverse            |  
  alternate          |  
  alternate-reverse    
  
```

例
-

### 逆方向に実行されるアニメーション

#### HTML


```html
<div class="box"></div>
```


#### CSS


```css
.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
}

.box:hover {
  animation-name: rotate;
  animation-duration: 0.7s;
  animation-direction: reverse;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
```


#### 結果

例については CSS アニメーションを参照してください。

仕様書
---

| Specification |
| --- |
| CSS Animations Level 1 # animation-direction |

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

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

関連情報
----

* CSS アニメーションの使用
* JavaScript の `AnimationEvent` API
* その他のアニメーション関連プロパティ: `animation`, `animation-composition`, `animation-delay`, `animation-duration`, `animation-fill-mode`, `animation-iteration-count`, `animation-name`, `animation-play-state`, `animation-timeline`, `animation-timing-function`
<alpha-value>
=============

**`<alpha-value>`** は CSS のデータ型であり、 `<number>` または `<percentage>` によって色の **アルファチャネル** または **透過性** を表します。

構文
--

`<alpha-value>` の値は `<number>` または `<percentage>` のどちらかで指定します。

数値で指定した場合、有用な範囲は 0 （完全に透明）から 1.0 （完全に不透明）であり，その中間の 10 進数の値です。 0.5 は前景色が半分、背景色が半分使用されることを示します。 0 から 1 までの範囲の外にある値も許容されますが、 0 から 1 の範囲に収まるように制限が行われます。

アルファ値がパーセント値で指定された場合は、 0% が完全に透明、 100% が完全に不透明に対応します。

補間
--

アニメーションの際、 CSS の `<alpha-value>` データ型の値は実数の浮動小数点値として補間されます。補間の速度はアニメーションと関連づけられたタイミング関数によって決められます。

例
-

### テキスト色の透明度の設定

ここでは、アルファ値を使用して部分的に透明なテキストを設定しています。


```css
/\* <rgba()> \*/
color: rgba(34, 12, 64, 0.6);
color: rgba(34 12 64 / 60%);
```

### シェイプ画像の閾値の設定

こちらは、アルファ値を使用して画像のどの部分がシェイプの一部と考えられるかを特定しています。


```css
/\* shape-image-threshold \*/
shape-image-threshold: 70%;
shape-image-threshold: 0.7;
```

仕様書
---

| Specification |
| --- |
| CSS Color Module Level 4 # typedef-color-alpha-value |

関連情報
----

* 基本的なテキストとフォントの装飾
* CSS データ型
* CSS 色
* `<color>`
:required
=========

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


```css
/\* 必須の <input> をすべて選択 \*/
input:required {
  border: 1px dashed red;
}
```

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

この擬似クラスは、フォームを送信する前に有効なデータを持っている必要がある入力欄を強調表示するのに便利です。

**メモ:** `:optional` 擬似クラスは*省略可能*なフォーム欄を選択します。

構文
--
```

:required
```

例
-

### 必須フィールドの枠を赤にする

#### 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:required {
  border-color: #800000;
  border-width: 3px;
}

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


#### 結果

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

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

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

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

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

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

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

関連情報
----

* 他の検証関連の擬似クラス: `:optional`, `:invalid`, `:valid`
* フォームデータの検証
border-top-style
================

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

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

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

構文
--


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

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


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

公式定義
----

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

形式文法
----
```

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

例
-

### border-top-style の設定

#### 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-top-style の例のクラス \*/
.b1 {
  border-top-style: none;
}
.b2 {
  border-top-style: hidden;
}
.b3 {
  border-top-style: dotted;
}
.b4 {
  border-top-style: dashed;
}
.b5 {
  border-top-style: solid;
}
.b6 {
  border-top-style: double;
}
.b7 {
  border-top-style: groove;
}
.b8 {
  border-top-style: ridge;
}
.b9 {
  border-top-style: inset;
}
.b10 {
  border-top-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-left-style`, `border-right-style`, `border-bottom-style`, `border-style`
* その他の左側の境界に関するプロパティ: `border-top`, `border-top-color`, `border-top-width`
border-inline-style
===================

**`border-inline-style`** は CSS のプロパティで、要素の論理的なインライン方向の境界のスタイルを定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界のスタイルに対応づけられます。これは `border-top-style` と `border-bottom-style`、または `border-left-style` と `border-right-style` の組み合わせのどちらかに対応し、どちらに対応するかは `writing-mode`、`direction`、`text-orientation` で定義された値によって決まります。

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

他の方向の境界スタイルについては `border-block-style` で設定することができ、これは `border-block-start-style` および `border-block-end-style` を設定することができます。

構文
--


```css
/\* <'border-style'> の値 \*/
border-inline-style: dashed;
border-inline-style: dotted;
border-inline-style: revert;
border-inline-style: groove;
```

### 値

`<'border-style'>`

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

公式定義
----

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

形式文法
----
```

border-inline-style =   
  <'border-top-style'>{1,2}    
  
```

例
-

### 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: 5px solid blue;
  border-inline-style: dashed;
}
```

仕様書
---

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

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

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

関連情報
----

* このプロパティは物理的な境界のプロパティ `border-top-style`、`border-right-style`、`border-bottom-style`、`border-left-style` のうちの 1 つに対応します
* `writing-mode`、`direction`、`text-orientation`
animation-play-state
====================

**`animation-play-state`** は CSS のプロパティで、アニメーションが実行中か停止中かを設定します。

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

停止したアニメーションを再開すると、アニメーションの流れの最初からではなく、停止した位置からアニメーションが始まります。

構文
--


```css
/\* 単一のアニメーション \*/
animation-play-state: running;
animation-play-state: paused;

/\* 複数のアニメーション \*/
animation-play-state: paused, running, running;

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

### 値

`running`

**アニメーション**が現在**実行中**です。

`paused`

**アニメーション**が現在**停止中**です。


**メモ:** `animation-*` プロパティにカンマ区切りで複数の値を指定した場合、 `animation-name` に現れる順にアニメーションに適用されます。アニメーションの数と `animation-*` プロパティの値が一致しない場合は、複数のアニメーションプロパティ値の設定 を参照してください。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `running` |
| 適用対象 | すべての要素、`::before` / `::after` 擬似要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | アニメーション不可 |

形式文法
----
```

animation-play-state =   
  <single-animation-play-state>#    
  
<single-animation-play-state> =   
  running  |  
  paused     
  
```

例
-

### アニメーションの停止

このアニメーションは停止していますが、ポインターを当てると実行されます。

#### HTML


```html
<div class="box"></div>
```


#### CSS


```css
.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
  animation-name: rotate;
  animation-duration: 0.7s;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

.box:hover {
  animation-play-state: running;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
```


#### 結果

矩形にポインターを当てるとアニメーションが始まります。

例については CSS アニメーションを参照してください。

仕様書
---

| Specification |
| --- |
| CSS Animations Level 1 # animation-play-state |

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

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

関連情報
----

* CSS アニメーションの使用
* JavaScript `AnimationEvent` API
* その他のアニメーション関連プロパティ: `animation`, `animation-composition`, `animation-delay`, `animation-direction`, `animation-duration`, `animation-fill-mode`, `animation-iteration-count`, `animation-name`, `animation-timeline`, `animation-timing-function`
border-image-source
===================

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
**`border-image-source`** は CSS のプロパティで、要素の境界画像に使われる元の画像を設定します。

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

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

構文
--


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

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

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

### 値

`none`

境界画像は使用されません。代わりに `border-style` で定義されたものが表示されます。

`<image>`

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

公式定義
----

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

形式文法
----
```

border-image-source =   
  none     |  
  <image>    
  
<image> =   
  <url>       |  
  <gradient>    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
```

例
-

### 基本的な例


```css
.box {
  border-image-source: url("image.png");
}
```

仕様書
---

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

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

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

関連情報
----

* `border`
* `outline`
* `box-shadow`
* `background-image`
* `url()` 関数
padding-inline-start
====================

**`padding-inline-start`** は CSS のプロパティで、要素のインライン方向の論理的な先頭側のパディングを定義し、それが要素の書字方向やテキストの方向に応じて物理的なパディングに対応づけられます。

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

構文
--


```css
/\* <length> 値 \*/
padding-inline-start: 10px; /\* 絶対的な長さ \*/
padding-inline-start: 1em; /\* テキストの大きさに対する相対値 \*/

/\* <percentage> 値 \*/
padding-inline-start: 5%; /\* ブロックコンテナーの幅に対する割合のパディング \*/

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

### 値

`<length>`

パディングの寸法を固定値で指定します。負の値は指定できません。

`<percentage>`

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

解説
--

`padding-inline-start` プロパティは、`padding-top` プロパティと同じ値を取ると仕様で定義されています。しかし、このプロパティが対応づけられる物理的なプロパティは、 `writing-mode`, `direction`, `text-orientation` に設定された値に依存します。したがって、`padding-top`, `padding-right`, `padding-left` の何れかに対応づけられる可能性があります。

関連プロパティとして、要素の他のマージンを定義する `padding-block-start`, `padding-block-end`, `padding-inline-end` があります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group`, `table-column` を除くすべての要素 |
| 継承 | なし |
| パーセント値 | 包含ブロックの論理的な幅 |
| 計算値 | `length` 通り |
| アニメーションの種類 | length |

形式文法
----
```

padding-inline-start =   
  <'padding-top'>    
  
```

例
-

### 縦書きテキストにおけるインライン方向の先頭のパディングの設定

#### 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;
  padding-inline-start: 20px;
  background-color: #c8c800;
}
```


#### 結果

仕様書
---

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

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

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

関連情報
----

* CSS 論理的プロパティと値
* 対応づけ先の物理的プロパティ: `padding-top`, `padding-right`, `padding-bottom`, `padding-left`
* `writing-mode`, `direction`, `text-orientation`
outline-width
=============

CSS の **`outline-width`** プロパティは、要素の輪郭線の太さを設定します。輪郭線とは要素の周りに描かれる線のことで、 `border` よりも外側です。

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

たいていの場合、輪郭線の見た目を定義するときは一括指定プロパティ `outline` を使ったほうが便利です。

構文
--


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

/\* <length> 値 \*/
outline-width: 1px;
outline-width: 0.1em;

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


`outline-width` プロパティは、以下に挙げた値のうちの一つで指定します。

### 値

`<length>`

輪郭線の太さを `<length>` で指定します。

`thin`

ユーザーエージェントに依存します。Firefox のようなデスクトップブラウザーでは、通常は `1px` です。

`medium`

ユーザーエージェントに依存します。Firefox のようなデスクトップブラウザーでは、通常は `3px` です。

`thick`

ユーザーエージェントに依存します。Firefox のようなデスクトップブラウザーでは、通常は `5px` です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `medium` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 絶対的な長さ、キーワード `none` が指定されると計算値は `0` になる |
| アニメーションの種類 | length |

形式文法
----
```

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

例
-

### 要素の輪郭線の幅の設定

#### HTML


```html
<span id="thin">thin</span>
<span id="medium">medium</span>
<span id="thick">thick</span>
<span id="twopixels">2px</span>
<span id="oneex">1ex</span>
<span id="em">1.2em</span>
```


#### CSS


```css
span {
  outline-style: solid;
  display: inline-block;
  margin: 20px;
}

#thin {
  outline-width: thin;
}

#medium {
  outline-width: medium;
}

#thick {
  outline-width: thick;
}

#twopixels {
  outline-width: 2px;
}

#oneex {
  outline-width: 1ex;
}

#em {
  outline-width: 1.2em;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # outline-width |

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

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

関連情報
----

* `outline`
* `outline-color`
* `outline-style`