recursal/MDN huggingface dataset:
scrollbar-color
===============

**`scrollbar-color`** は CSS のプロパティで、スクロールバーのトラックとつまみの色を設定します。

**トラック**はスクロールバーの背景を表し、一般的にスクロール位置にかかわらず固定されています。

**つまみ**はスクロールバーの動く部分で、ふつうはトラックの上を動きます。

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

構文
--


```css
/\* キーワード値 \*/
scrollbar-color: auto;

/\* <color> 値 \*/
scrollbar-color: rebeccapurple green; /\* 二つの有効な色。
一つ目はスクロールバーのつまみ、二つ目はトラックに適用される。 \*/

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

### 値

`<scrollbar-color>`

スクロールバーの色を定義します。

|  |  |
| --- | --- |
| `auto` | 他にスクロールバーに関する色のプロパティがない場合、スクロールバーの位置を表す既定の表示になります。 |
| `<color> <color>` | 最初の色をスクロールバーのつまみに、 2 番目の色をスクロールバーのトラックに適用します。 |

**メモ:** ユーザーエージェントはビューポートのルート要素に、何らかの `scrollbar-color` の値を適用しなければなりません。

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

`scrollbar-color` プロパティで色の値を指定して使用する場合、指定した色の間に十分なコントラストがあることを確認してください。キーワード値の場合、ユーザーエージェントは使用する色の間に十分なコントラストがあることを保証してください。 Techniques for WCAG 2.0: G183: Using a contrast ratio of 3:1 を参照してください。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | スクロールするボックス |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

scrollbar-color =   
  auto        |  
  <color>{2}    
  
```

例
-

### あふれた場合のスクロールバーに着色する

#### CSS


```css
.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: rebeccapurple green;
}
```


#### HTML


```html
<div class="scroller">
  Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
  daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
  corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
  fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
  earthnut pea peanut soko zucchini.
</div>
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Scrollbars Styling Module Level 1 # scrollbar-color |

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

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

関連情報
----

* `scrollbar-width`
* `overflow`
text-decoration-skip-ink
========================

CSS の **`text-decoration-skip-ink`** プロパティは、上線や下線が文字のアセンダーやディセンダーを通過するときにどのように引くのかを指定します。

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

`text-decoration-skip-ink` は `text-decoration` 一括指定の一部ではありません。

構文
--


```css
/\* 単一キーワード \*/
text-decoration-skip-ink: none;
text-decoration-skip-ink: auto;
text-decoration-skip-ink: all;

/\* グローバルキーワード \*/
text-decoration-skip: inherit;
text-decoration-skip: initial;
text-decoration-skip-ink: revert;
text-decoration-skip: unset;
```

### 値

`none`

下線と上線は、アセンダーとディセンダーの部分を含め、テキストコンテンツの全体に渡って引かれます。

`auto`

既定値です。 — ブラウザーは、下線と上線が文字に触れたり近づいたりしないよう、中断を行う*可能性があります*。つまり、線が文字を横切ろうとするところで中断されます。

`all`

ブラウザーは、下線や上線が文字に触れたり近づいたりしないように*必ず*中断を行います。これは、 `auto` の動作が中断を発生させない可能性がある中国語、日本語、韓国語の特定のフォントで有用です。

!["text-decoration-skip-ink" の例](/ja/docs/Web/CSS/text-decoration-skip-ink/decoration-skip-ink.png)

公式定義
----

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

形式文法
----
```

text-decoration-skip-ink =   
  auto  |  
  none  |  
  all     
  
```

例
-

### HTML


```html
<p>You should go on a quest for a cup of coffee.</p>
<p class="no-skip-ink">Or maybe you'd prefer some tea?</p>
<p>この文は、 text-decoration-skip-ink: auto の使用例を示しています。</p>
<p class="skip-ink-all">
  この文は、 text-decoration-skip-ink: all の使用例を示しています。
</p>
```

### CSS


```css
p {
  font-size: 1.5em;
  text-decoration: underline blue;
  text-decoration-skip-ink: auto; /\* this is the default anyway \*/
}

.no-skip-ink {
  text-decoration-skip-ink: none;
}

.skip-ink-all {
  text-decoration-skip-ink: all;
}
```

### Result

仕様書
---

| Specification |
| --- |
| CSS Text Decoration Module Level 4 # text-decoration-skip-ink-property |

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

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

関連情報
----

* `text-decoration`
* `text-decoration-skip`
border-block-start-width
========================

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

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

構文
--


```css
/\* <'border-width'> 値 \*/
border-block-start-width: 5px;
border-block-start-width: thick;

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


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

|  |  |
| --- | --- |
| 初期値 | `medium` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| パーセント値 | 包含ブロックの論理的な幅 |
| 計算値 | 絶対的な長さ、境界スタイルが `none` または `hidden` であれば `0` |
| アニメーションの種類 | 計算値の型による |

### 値

`<'border-width'>`

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

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `medium` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| パーセント値 | 包含ブロックの論理的な幅 |
| 計算値 | 絶対的な長さ、境界スタイルが `none` または `hidden` であれば `0` |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

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

例
-

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

#### 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: 1px solid blue;
  border-block-start-width: 5px;
}
```


#### 結果

仕様書
---

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

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

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

関連情報
----

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

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

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

構文
--


```css
/\* <length> 値 \*/
inset-block-end: 3px;
inset-block-end: 2.4em;

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

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

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

### 値

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

公式定義
----

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

形式文法
----
```

inset-block-end =   
  auto                 |  
  <length-percentage>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

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

#### HTML


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


#### CSS


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

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


#### 結果

仕様書
---

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

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

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

関連情報
----

* 内部位置を定義する他のプロパティ: `inset-block-start`, `inset-inline-start`, `inset-inline-end`
* 対応する物理的プロパティ: `top`, `right`, `bottom`, `left`
* `writing-mode`, `direction`, `text-orientation`
<position>
==========

**`<position>`** (または **`<bg-position>`**) は CSS の データ型で、二次元の座標を表し、要素ボックスからの相対的な位置を示すために用いられます。 `background-position` および `offset-anchor` で使用されています。

**メモ:** `<position>` 値で記述される最終的な位置は、要素ボックスの中である必要はありません。

構文
--

![](/ja/docs/Web/CSS/position_value/position_type.png)`<position>` データ型は 1 ～ 2 つのキーワードと、任意のオフセットで定義されます。

キーワード値は `center`、 `top`、 `right`、 `bottom`、 `left` です。それぞれのキーワードは要素ボックスの辺または2辺の中心線を表します。使われる場所によって、 `center` は左右の辺の中心か、上下の辺の中心を表します。

オフセット値を指定する場合は、相対的な `<percentage>` 値か絶対的な `<length>` 値のどちらかで指定することができます。正の数は右または下（適切な方）に向けたオフセットで、負の数は逆方向のオフセットです。

単一のオフセット値のみが指定された場合は X 座標を定義し、もう一方の軸は既定値の `center` に設定されます。


```css
/\* 値 1 つの構文 \*/
keyword                  /\* 水平位置または垂直位置。もう一方の軸は既定値の center になる \*/
value                    /\* X 座標の位置。 Y 座標は既定値の 50% になる \*/

/\* 値 2 つの構文 \*/
keyword keyword          /\* それぞれの方向のキーワード（順不同） \*/
keyword value            /\* キーワードで定義された辺からのオフセット \*/
value keyword            /\* 水平位置を表す値、垂直位置を表すキーワード \*/
value value              /\* それぞれの方向（水平、垂直）の距離の値 \*/

/\* 値 4 つの構文 \*/
keyword value keyword value /\* それぞれの値はその前のキーワードからのオフセット \*/
```

### 形式文法


```css
[
 [ left | center | right ] || [ top | center | bottom ]
|
 [ left | center | right | <length> | <percentage> ]
 [ top | center | bottom | <length> | <percentage> ]?
|
 [ [ left | right ] [ <length> | <percentage> ] ] &&
 [ [ top | bottom ] [ <length> | <percentage> ] ]
]
```


**メモ:** `background-position` プロパティも3つの値の構文を受け付けます。これは `<position>` を使用する他のプロパティでは許可されません。

補間
--

アニメーション時、座標の横軸と縦軸の値が独立して補間されます。ただし、補間の速度は両方の座標で1つのタイミング関数が用いられるため、座標は直線に移動します。

例
-

### 有効な位置
```

center
left
center top

right 8.5%
bottom 12vmin right -6px

10% 20%
8rem 14px
```

### 無効な位置
```

left right
bottom top
10px 15px 20px 15px
```

仕様書
---

| Specification |
| --- |
| CSS Values and Units Module Level 4 # position |

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

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

関連情報
----

* CSS 値と単位
* CSS 値と単位の紹介
* `background-position`
* `radial-gradient()`
* `conic-gradient()`
border-block-end-width
======================

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

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

構文
--


```css
/\* <'border-width'> 値 \*/
border-block-end-width: 5px;
border-block-end-width: thick;

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


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

### 値

`<'border-width'>`

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

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `medium` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| パーセント値 | 包含ブロックの論理的な幅 |
| 計算値 | 絶対的な長さ、境界スタイルが `none` または `hidden` であれば `0` |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

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

例
-

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

#### 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: 1px solid blue;
  border-block-end-width: 5px;
}
```


#### 結果

仕様書
---

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

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

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

関連情報
----

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

**`mask-type`** は CSS のプロパティで、 SVG の `<mask>` 要素を*輝度*マスクと*アルファ*マスクのどちらとして扱うかを設定します。これは `<mask>` 要素自身に設定します。


```css
/\* キーワード値 \*/
mask-type: luminance;
mask-type: alpha;

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


このプロパティは、マスクが使用される要素に適用され、同じ効果を持つ `mask-mode` プロパティによって上書きされることがあります。アルファマスクは全般的に表示が高速です。

構文
--

`mask-type` プロパティは以下に示すキーワード値のうちの一つで指定します。

### 値

`luminance`

関連付けられたマスク画像が輝度マスクであることを示すキーワードです。すなわち、適用時に相対輝度値が使用されます。

`alpha`

関連付けられたマスク画像がアルファマスクであることを示すキーワードです。すなわち、適用時にアルファチャネル値が使用されます。

公式定義
----

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

形式文法
----
```

mask-type =   
  luminance  |  
  alpha        
  
```

例
-

### アルファマスクの設定

#### HTML


```html
<div class="redsquare"></div>
<svg
 version="1.1"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="0"
 height="0">
  <defs>
    <mask id="m" maskContentUnits="objectBoundingBox" style="mask-type:alpha">
      <rect
 x=".1"
 y=".1"
 width=".8"
 height=".8"
 fill="red"
 fill-opacity="0.7" />
    </mask>
  </defs>
</svg>
```


#### CSS


```css
.redsquare {
  height: 100px;
  width: 100px;
  background-color: rgb(128, 128, 128);
  border: solid 1px black;
  mask: url("#m");
}
```


#### 結果

### 輝度マスクの設定

#### HTML


```html
<div class="redsquare"></div>
<svg
 version="1.1"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="0"
 height="0">
  <defs>
    <mask
 id="m"
 maskContentUnits="objectBoundingBox"
 style="mask-type:luminance">
      <rect
 x=".1"
 y=".1"
 width=".8"
 height=".8"
 fill="red"
 fill-opacity="0.7" />
    </mask>
  </defs>
</svg>
```


#### CSS


```css
.redsquare {
  height: 100px;
  width: 100px;
  background-color: rgb(128, 128, 128);
  border: solid 1px black;
  mask: url("#m");
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask-type |

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

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

関連情報
----

* その他のマスクに関するプロパティ: `mask`, `mask-mode`
image-resolution
================

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

**`image-resolution`** は CSS のプロパティで、この要素で使用されているすべてのラスター画像の内在解像度を指定します。これは置換要素や生成コンテンツ、`background-image` のような装飾画像などのコンテンツ画像に作用します。

画像の解像度は、単位の長さあたりの画像ピクセル数として定義されています (例: 1 インチあたりのピクセル数)。既定では、CSS は CSS ピクセル単位に 1 つの画像ピクセルの解像度を想定していますが、`image-resolution` プロパティを使用することで、異なる解像度を指定することができます。

構文
--


```css
image-resolution: from-image;
image-resolution: 300dpi;
image-resolution: from-image 300dpi;
image-resolution: 300dpi snap;

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

### 値

``<resolution>``

内在解像度を明示的に指定します。

`from-image`

画像形式で指定された内在解像度を使用します。画像が自身の解像度を指定しなかった場合、明示的に指定された解像度が (与えられていれば) 使用し、そうでなければ既定で `1dppx` (1 画像ピクセル毎 CSS ピクセル)となります。

`snap`

`snap` キーワードが指定された場合、計算された解像度は、指定された解像度を、画像の 1 ピクセルを端末の整数のピクセルにマッピングする最も近い値に丸めたものになります。解像度が画像から取得された場合、使用される固有の解像度は、画像のネイティブ解像度を同様に調整したものになります。


**メモ:** SVG などのベクター形式は内在解像度を持たないので、このプロパティはベクター画像には影響しません。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `1dppx` |
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | 指定通り、ただし <resolution> は 'snap' の値に変更されることがある |
| アニメーションの種類 | 離散値 |

形式文法
----
```

image-resolution =   
  [ from-image || <resolution> ]  &&  
  snap?                             
  
```

例
-

### 印刷用に高い dpi を設定

文書を印刷する場合、より高い解像度を使用します。


```css
@media print {
  .myimage {
    image-resolution: 300dpi;
  }
}
```

### フォールバック付きの画像の解像度を使用する

画像から解像度を使用します。画像に解像度がない場合は、既定の 1dppx ではなく 300dpi を使用します。


```css
.myimage {
  image-resolution: from-image 300dpi;
}
```

仕様書
---

| Specification |
| --- |
| CSS Images Module Level 4 # the-image-resolution |

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

このプロパティに対応しているブラウザーは今のところありません。

関連情報
----

* その他の画像に関する CSS プロパティ: `object-fit`, `object-position`, `image-orientation`, `image-rendering`.
* Chromium bug: 1086473.
mask-border
===========

**`mask-border`** は CSS の一括指定プロパティで、要素の境界の縁に沿ったマスクを生成することができます。

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

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

* `mask-border-mode`
* `mask-border-outset`
* `mask-border-repeat`
* `mask-border-slice`
* `mask-border-source`
* `mask-border-width`
構文
--


```css
/\* source | slice \*/
mask-border: url("border-mask.png") 25;

/\* source | slice | repeat \*/
mask-border: url("border-mask.png") 25 space;

/\* source | slice | width \*/
mask-border: url("border-mask.png") 25 / 35px;

/\* source | slice | width | outset | repeat | mode \*/
mask-border: url("border-mask.png") 25 / 35px / 12px space alpha;

/\* Global values \*/
mask-border: inherit;
mask-border: initial;
mask-border: revert;
mask-border: unset;
```

### 値

`<'mask-border-source'>`

ソース画像です。`mask-border-source` を参照してください。

`<'mask-border-slice'>`

ソース画像を複数の領域に分割する幅です。`mask-border-slice` を参照してください。

`<'mask-border-width'>`

境界画像の幅です。4 つまでの値を指定することができます。`mask-border-width` を参照してください。

`<'mask-border-outset'>`

要素の外側の辺から境界画像までの距離です。4 つまでの値を指定することができます。`mask-border-outset` を参照してください。

`<'mask-border-repeat'>`

ソース画像の辺の領域を、境界マスクの幅に合わせて調整する方法を定義します。2 つまでの値を指定することができます。`mask-border-repeat` を参照してください。

`<'mask-border-mode'>`

ソース画像を輝度マスクとして扱うか、アルファマスクとして扱うかを定義します。`mask-border-mode` を参照してください。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `mask-border-mode`: `alpha`
* `mask-border-outset`: `0`
* `mask-border-repeat`: `stretch`
* `mask-border-slice`: `0`
* `mask-border-source`: `none`
* `mask-border-width`: `auto`
 |
| 適用対象 | すべての要素。 SVG の場合は `defs` 要素やすべてのグラフィック要素を除いたコンテナー要素に適用される |
| 継承 | なし |
| パーセント値 | 一括指定の次の各プロパティとして* `mask-border-slice`: 境界のマスク画像の寸法に対する相対値
* `mask-border-width`: 境界マスク画像領域の幅/高さに対する相対値
 |
| 計算値 | 一括指定の次の各プロパティとして* `mask-border-mode`: 指定通り
* `mask-border-outset`: 指定通り。ただし相対的な長さはは絶対的な長さに変換される
* `mask-border-repeat`: 指定通り
* `mask-border-slice`: 指定通り
* `mask-border-source`: 指定通り、ただし `url` の値は絶対パスになる
* `mask-border-width`: 指定通り。ただし相対的な長さはは絶対的な長さに変換される
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `mask-border-mode`: 離散値
* `mask-border-outset`: 離散値
* `mask-border-repeat`: 離散値
* `mask-border-slice`: 離散値
* `mask-border-source`: 離散値
* `mask-border-width`: 離散値
 |
| 重ね合わせコンテキストの生成 | あり |

形式文法
----
```

mask-border =   
  <'mask-border-source'>                              ||  
  <'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]?  ||  
  <'mask-border-repeat'>                              ||  
  <'mask-border-mode'>                                  
  
```

例
-

### ビットマップに基づいたマスク境界の設定

この例では、要素の境界を菱形の模様でマスクします。このマスクのソースは ".png" ファイルで、 90 x 90 ピクセルであり、3つの菱形が垂直・水平に並んでいます。

![](/ja/docs/Web/CSS/mask-border/mask-border-diamonds.png)

一つの菱形の寸法に合わせるため、 90 を 3 で割った値、すなわち '30' を使用して、画像を角と辺の領域に分割します。 repeat の値は `round` であり、マスクのスライスが均等に、すなわち切り取られたり隙間ができたりすることなく合わせられます。

仕様書
---

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

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

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

関連情報
----

* `mask-border-mode`
* `mask-border-outset`
* `mask-border-repeat`
* `mask-border-source`
* `mask-border-width`
アットルール
======

**アットルール**は CSS の文のうち、CSS の動作を既定するものです。アットルールはアットマーク、'`@`' (`U+0040 COMMERCIAL AT`) で始まり、それに続く識別子から、次のセミコロン、 '`;`' (`U+003B SEMICOLON`) もしくは次の CSS ブロックのどちらかが現れるまでの部分からなります。

構文
--

### 通常


```css
/\* 一般的な構造 \*/
@identifier (RULE);

/\* 例: ブラウザーに UTF-8 文字セットを使用することを知らせる \*/
@charset "utf-8";
```


アットルールは何種類かあり、識別子で区別され、それぞれに異なる構文が使用されます。

* `@charset` — スタイルシートで使用される文字セットを定義します。
* `@import` — 外部のスタイルシートを読み込むよう CSS エンジンに指示します。
* `@namespace` — CSS エンジンに、内容のすべてに XML 名前空間の接頭辞がついていると見なすよう指示します。
### 入れ子


```css
@identifier (RULE) {
}
```


入れ子になった文のサブセットになります。スタイルシートの文としてだけではなく、条件付きグループルールの内部で使用されます。

* `@media` — *メディアクエリ*の条件を満たす端末で読み込まれた場合にこれの中身が適用される、条件付きグループルールです。
* `@supports` — ブラウザーが指定の条件を満たす場合にこれの中身が適用される、条件付きグループルールです。
* `@document` 
非推奨
 — このスタイルシートが適用される文書が、与えられた条件を満たす場合に、これの中身が適用される条件付きグループルールです。 *(CSS Level 4 仕様に先送り)*
* `@page` — 文書印刷の際に適用されるレイアウト変更に関する指定を記述します。
* `@font-face` — ダウンロードすべき外部フォントに関する指定を記述します。
* `@keyframes` — CSS アニメーションシーケンスの中間段階に関する指定を記述します。
* `@counter-style` — 定義済みのスタイルにはない、独自のカウンタースタイルを定義します。*(勧告候補段階ですが、現時点で Gecko しか実装していません)*
* `@font-feature-values` (および `@swash`, `@ornaments`, `@annotation`, `@stylistic`, `@styleset`, `@character-variant`) — OpenType の各機能を有効化するために、 `font-variant-alternates` の一般名を定義します。*(勧告候補段階ですが、現時点で Gecko しか実装していません)*
* `@property` 
Experimental
 — カスタムプロパティと変数に関して指定します。 *(現在は草稿段階)*
* `@color-profile` 
Experimental
 — `color()` 関数で使用するカラープロファイルを定義できます。
条件付きグループルール
-----------

プロパティの値と同様に、アットルールはそれぞれ異なる構文を持っています。しかし、いくつかのアットルールは **条件付きグループルール**という特別なカテゴリーに分類されます。これらの文は構文が共通しており、どれも*内側の文*—*規則セット*または*内側のアットルール*を入れることができます。さらに言えば、それらはすべて共通の意味合いがあります。 — すべては常に**真**か**偽**かで判定される何らかの条件と結びついています。条件が**真**であれば、条件付きグループルール内の文全部が適用されます。

条件付きグループルールは CSS Conditionals Level 3 で定義されており、以下の規則があります。

* `@media`
* `@supports`
* `@document` *(CSS Level 4 仕様に先送り)*

条件付きグループは、入れ子状の文を持ち、いくつでも入れ子にすることができます。

索引
--

* `@charset`
* `@color-profile` 
Experimental
* `@counter-style`
* `@document` 
非推奨
* `@font-face`
* `@font-feature-values`
* `@import`
* `@keyframes`
* `@media`
* `@namespace`
* `@page`
* `@property` 
Experimental
* `@supports`
仕様書
---

| Specification |
| --- |
| CSS Conditional Rules Module Level 3  |
| Compatibility Standard # css-at-rules |

関連情報
----

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

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

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

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

構文
--


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

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

### 値

`<'border-style'>`

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

公式定義
----

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

形式文法
----
```

border-block-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-block-style: dashed;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-border-block-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`