recursal/MDN huggingface dataset:
::-webkit-progress-value
========================

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

**`::-webkit-progress-value`** は CSS の擬似要素で、 `<progress>` 要素のバーの塗りつぶされた部分を表します。これは、 `::-webkit-progress-bar` (en-US) 擬似要素の子要素です。

**メモ:** `::-webkit-progress-value` を有効にするには `-webkit-appearance` (en-US) を `<progress>` 要素で `none` に設定する必要があります。

構文
--


```css
::-webkit-progress-value {}
```

例
-

この例は Blink または WebKit ベースのブラウザーでのみ動作します。

### HTML


```html
<progress value="10" max="50"></progress>
```

### CSS


```css
progress {
  -webkit-appearance: none;
}

::-webkit-progress-value {
  background-color: orange;
}
```

### 結果

### 結果のスクリーンショット

上記のスタイルを使用したプログレスバーは次のようになります:

![](/ja/docs/Web/CSS/::-webkit-progress-value/progress-value.png)

仕様書
---

どの標準にも含まれていません。

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

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

関連情報
----

* WebKit/Blink が `<progress>` 要素のその他の部分を整形するために使用する擬似要素:
    + `::-webkit-progress-bar` (en-US)
    + `::-webkit-progress-inner-element` (en-US)
* `::-moz-progress-bar`
* `::-ms-fill`
border-inline-start-color
=========================

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

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

構文
--


```css
border-inline-start-color: red;
border-inline-start-color: #ee4141;

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


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

### 値

`<'color'>`

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

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `currentcolor` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 色の計算値 |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

border-inline-start-color =   
  <color>     |  
  <image-1D>    
  
<image-1D> =   
  <stripes()>    
  
<stripes()> =   
  stripes( <color-stripe># )    
  
<color-stripe> =   
  <color>                            &&  
  [ <length-percentage> | <flex> ]?    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

### 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: 10px solid blue;
  border-inline-start-color: red;
}
```

仕様書
---

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

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

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

関連情報
----

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

**`border-spacing`** は CSS のプロパティで、`<table>` における隣り合うセルの境界同士の間隔を定めます。このプロパティは `border-collapse` が `separate` のときのみ適用されます。

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

`border-spacing` の値は、表の外周部分にも使用され、表の境界線と最初/最後の列または行との間の距離は、 (縦または横の) 対応する `border-spacing` と、表の対応する側 (上下左右のいずれか) の `padding` の合計になります。

**メモ:** `border-spacing` プロパティは、`<table>` 要素における非推奨の `cellspacing` 属性と同等ですが、任意で 2 つ目の値を指定して、水平方向と垂直方向に異なる間隔を設定することができる点が異なります。

構文
--


```css
/\* <length> \*/
border-spacing: 2px;

/\* 左右の <length> | 上下の <length> \*/
border-spacing: 1cm 2em;

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


`border-spacing` プロパティは 1 つまたは 2 つの値で指定することができます。

* **1 つ**の `<length>` 値が指定された場合は、セル間の左右方向と上下方向の両方の間隔を定義します。
* **2 つ**の `<length>` 値が指定された場合は、最初の値がセル間の左右方向の間隔 (つまり、隣り合う*列*の間隔) を定義し、2 番目の値がセル間の上下方向の間隔 (つまり、隣り合う*行*の間隔) を定義します。
### 値

`<length>`

固定値による間隔の大きさです。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | `table` および `inline-table` 要素 |
| 継承 | あり |
| 計算値 | ２つの絶対的な長さ |
| アニメーションの種類 | 離散値 |

形式文法
----
```

border-spacing =   
  <length>{1,2}    
  
```

例
-

### 表のセルの余白とパディング

この例では表のセル間において、垂直方向に `.5em`、水平方向に `1em` の間隔を適用します。なお、外の辺においては、表の `padding` の値が `border-spacing` の値に追加されます。

#### HTML


```html
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>
```


#### CSS


```css
table {
  border-spacing: 1em 0.5em;
  padding: 0 2em 1em 0;
  border: 1px solid orange;
}

td {
  width: 1.5em;
  height: 1.5em;
  background: #d2d2d2;
  text-align: center;
  vertical-align: middle;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # separated-borders |

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

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

関連情報
----

* `border-collapse`, `border-style`
* `border-spacing` プロパティは HTML の `<table>` 要素の出現方法を変更します。
resize
======

**`resize`** は CSS のプロパティで、要素の寸法を変更できるかどうか、もしそうなら、どの方向に変更できるかを設定します。

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

`resize` は以下のものには適用されません。

* インライン要素
* `overflow` プロパティが `visible` であるブロック要素
構文
--


```css
/\* キーワード値 \*/
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;

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


`resize` プロパティは以下に挙げるキーワードから単一の値を指定します。

### 値

`none`

ユーザーが要素の寸法を制御する方法を提供しません。

`both`

要素はユーザーが寸法を変更できる仕組みを、垂直方向と水平方向の両方について表示します。

`horizontal`

要素はユーザーが寸法を変更できる仕組みを、*水平方向*について表示します。

`vertical`

要素はユーザーが寸法を変更できる仕組みを、*垂直方向*について表示します。

`block` 
Experimental

要素はユーザーが寸法を変更できる仕組みを、*ブロック方向*について表示します (`writing-mode` と `direction` の値によって、水平方向または垂直方向のどちらかになります)。

`inline` 
Experimental

要素はユーザーが寸法を変更できる仕組みを、*インライン方向*について表示します (`writing-mode` と `direction` の値によって、水平方向または垂直方向のどちらかになります)。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | `overflow` が `visible` 以外である要素、任意で画像、動画、iframe を表す置換要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

resize =   
  none        |  
  both        |  
  horizontal  |  
  vertical    |  
  block       |  
  inline        
  
```

例
-

### テキストエリアの寸法の変更を無効化

多くのブラウザーでは、 `<textarea>` 要素は既定で寸法が変更できます。 `resize` プロパティでこの動作を上書きすることができます。

#### HTML


```html
<textarea>Type some text here.</textarea>
```


#### CSS


```css
textarea {
  resize: none; /\* Disables resizability \*/
}
```


#### 結果

### 任意の要素に対する resize の使用

`resize` プロパティを使用して、任意の要素の寸法を変更可能にすることができます。以下の例では、寸法が変更可能な `<div>` の中に、寸法が変更可能な段落 (`<p>` 要素) を配置しています。

#### HTML


```html
<div class="resizable">
  <p class="resizable">
    This paragraph is resizable in all directions, because the CSS `resize`
    property is set to `both` on this element.
  </p>
</div>
```


#### CSS


```css
.resizable {
  resize: both;
  overflow: scroll;
  border: 1px solid black;
}

div {
  height: 300px;
  width: 300px;
}

p {
  height: 200px;
  width: 200px;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # resize |

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

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

関連情報
----

* `<textarea>`
<gradient>
==========

**`<gradient>`** は CSS のデータ型で、 2 色以上の連続的な色の変化で構成される特殊な型の `<image>` です。

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

CSS グラデーションは自身の寸法を持ちません。つまり、自然または推奨される寸法や、推奨される縦横比を持ちません。実際の寸法は適用される要素に一致します。

構文
--

`<gradient>` データ型は、以下のリストにある関数型のうちの一つによって定義します。

#### 線形グラデーション

線形グラデーション (linear gradient) は、色が仮想の直線に沿って変化します。 `linear-gradient()` 関数で生成されます。

#### 放射グラデーション

放射グラデーション (radial gradient) は、色が中心点 (origin) から連続的に変化します。 `radial-gradient()` 関数で生成されます。

#### 反復グラデーション

反復グラデーション (repeating gradient) は、要素全体を埋めるのに必要なだけ、グラデーションを繰り返します。 `repeating-linear-gradient()` および `repeating-radial-gradient()` 関数で生成されます。

#### 扇形グラデーション

扇形グラデーション (conic gradient) は、色が円を描くように連続的に変化します。 `conic-gradient()` 関数で生成されます。

補間
--

色に関する他の補間操作と同様、グラデーションはアルファ乗算済み色空間で計算されます。これは、色と透過性が同時に変化するときに、予期しない灰色が現れるのを避けるためです。 (古いブラウザーは、 transparent キーワードを使用するとこれを使用しないことがあるので注意してください。)

例
-

### 線形グラデーションの例

単純な線形グラデーションです。
```

<div class="linear-gradient">Linear gradient</div>
```


```
div {
  width: 240px;
  height: 80px;
}
```



```css
.linear-gradient {
  background: linear-gradient(
    to right,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
}
```

### 放射グラデーションの例

単純な放射グラデーションです。
```

<div class="radial-gradient">Radial gradient</div>
```


```
div {
  width: 240px;
  height: 80px;
}
```



```css
.radial-gradient {
  background: radial-gradient(red, yellow, rgb(30, 144, 255));
}
```

### 反復グラデーションの例

単純な線形および放射の反復グラデーションの例です。
```

<div class="linear-repeat">Repeating linear gradient</div>
<br />
<div class="radial-repeat">Repeating radial gradient</div>
```


```
div {
  width: 240px;
  height: 80px;
}
```



```css
.linear-repeat {
  background: repeating-linear-gradient(
    to top left,
    lightpink,
    lightpink 5px,
    white 5px,
    white 10px
  );
}

.radial-repeat {
  background: repeating-radial-gradient(
    powderblue,
    powderblue 8px,
    white 8px,
    white 16px
  );
}
```

### 扇形グラデーションの例

単純な扇形グラデーションの例です。なお、まだこれはブラウザーの間で十分に対応されていません。
```

<div class="conic-gradient">Conic gradient</div>
```


```
div {
  width: 200px;
  height: 200px;
}
```



```css
.conic-gradient {
  background: conic-gradient(lightpink, white, powderblue);
}
```

仕様書
---

| Specification |
| --- |
| CSS Images Module Level 4 # gradients |

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

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

関連情報
----

* CSS グラデーションの使用
* グラデーション関数: `linear-gradient()`, `repeating-linear-gradient()`, `radial-gradient()`, `repeating-radial-gradient()`, `conic-gradient()`, `repeating-conic-gradient()`
* CSS の基本データ型
* CSS の単位と値
* CSS 入門: 値と単位
bottom
======

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

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

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

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

`top` と `bottom` の両方が指定されており、 `position` が `absolute` または `fixed` に設定されており、*かつ* `height` が未指定 (`auto` または `100%` のどちらか) の場合は、 `top` と `bottom` の距離が尊重されます。それ以外の場合、 `height` が何らかの形で制約されていた場合、または `position` が `relative` に設定されていた場合は、 `top` プロパティが優先されて `bottom` プロパティは無視されます。

構文
--


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

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

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

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

### 値

`<length>`

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

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

`<percentage>`

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

`auto`

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

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

`inherit`

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

公式定義
----

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

形式定義
----
```

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

例
-

### 絶対位置指定と固定位置指定

この例は、 `position` が `absolute` と `fixed` であった場合の `bottom` プロパティの動作の違いを示します。

#### HTML


```html
<p>
  This<br />is<br />some<br />tall,<br />tall,<br />tall,<br />tall,<br />tall<br />content.
</p>
<div class="fixed"><p>Fixed</p></div>
<div class="absolute"><p>Absolute</p></div>
```


#### CSS


```css
p {
  font-size: 30px;
  line-height: 2em;
}

div {
  width: 48%;
  text-align: center;
  background: rgba(55, 55, 55, 0.2);
  border: 1px solid blue;
}

.absolute {
  position: absolute;
  bottom: 0;
  left: 0;
}

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}
```

### 結果

仕様書
---

| 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`
-webkit-mask-position-y
=======================

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

`-webkit-mask-position-y` は CSS のプロパティで、マスク画像の初期の垂直方向の位置を設定します。


```css
/\* キーワード値 \*/
-webkit-mask-position-y: top;
-webkit-mask-position-y: center;
-webkit-mask-position-y: bottom;

/\* <percentage> 値 \*/
-webkit-mask-position-y: 100%;
-webkit-mask-position-y: -50%;

/\* <length> 値 \*/
-webkit-mask-position-y: 50px;
-webkit-mask-position-y: -1cm;

/\* 複数の値 \*/
-webkit-mask-position-y:
  50px,
  25%,
  -3em;

/\* グローバル値 \*/
-webkit-mask-position-y: inherit;
-webkit-mask-position-y: initial;
-webkit-mask-position-y: unset;
```


|  |  |
| --- | --- |
| 初期値 | `0%` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| パーセント値 | ボックス自身の寸法に対する相対値 |
| 計算値 | `length` の場合は絶対的な値、それ以外はパーセント値 |
| アニメーションの種類 | 離散値 |

構文
--

### 値

`<length-percentage>`

ボックスの上パディングの辺から見た画像の上端の位置を示す長さです。パーセント値の場合は、ボックスのパディング領域の垂直方向の寸法に対して計算されます。 `0%` という値は、画像の上端がボックスの上パディングの辺と一致していることを意味し、`100%` という値は、画像の下端がボックスの下パディングの辺と一致していることを意味します。

**`top`**

`0%` と同等です。

**`bottom`**

`100%` と同等です。

**`center`**

`50%` と同等です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0%` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| パーセント値 | ボックス自身の寸法に対する相対値 |
| 計算値 | `length` の場合は絶対的な値、それ以外はパーセント値 |
| アニメーションの種類 | 離散値 |

形式文法
----

Error: could not find syntax for this item例
-

### マスク画像の垂直方向の位置指定


```css
.exampleOne {
  -webkit-mask-image: url(mask.png);
  -webkit-mask-position-y: bottom;
}

.exampleTwo {
  -webkit-mask-image: url(mask.png);
  -webkit-mask-position-y: 25%;
}
```

仕様書
---

標準には含まれていません。

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

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

関連情報
----

`-webkit-mask-position` (en-US), `-webkit-mask-position-x`, `-webkit-mask-origin` (en-US), `-webkit-mask-attachment`
grid-template-areas
===================

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

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

* Learn more
* See full compatibility
* Report feedback
**`grid-template-areas`** は CSS のプロパティで、グリッド内でセルを確立し、名前を割り当てることにより、名前付きの グリッド領域 を指定します。

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

これらの領域は、特定のグリッドアイテムに関連付けられていませんが、グリッド配置プロパティである `grid-row-start`, `grid-row-end`, `grid-column-start`, `grid-column-end` およびそれらの一括指定プロパティ `grid-row`, `grid-column`, `grid-area` で参照することができます。

構文
--


```css
/\* キーワード値 \*/
grid-template-areas: none;

/\* <string> 値 \*/
grid-template-areas: "a b";
grid-template-areas:
  "a b b"
  "a c d";

/\* グローバル値 \*/
grid-template-areas: inherit;
grid-template-areas: initial;
grid-template-areas: revert;
grid-template-areas: unset;
```

### 値

`none`

グリッドコンテナーは名前付きのグリッド領域を定義しません。

``<string>`+`

リストのすべての文字列ごとに行が生成され、文字列内の各セルごとに列が生成されます。行の中や行をまたがって複数の名前付きセルトークンがあると、対応するグリッドセルにまたがる単一の名前付きグリッド領域を生成します。これらのセルが四角形を形成しない限り、宣言は無効です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | グリッドコンテナー |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

grid-template-areas =   
  none       |  
  <string>+    
  
```

例
-

### 名前付きグリッド領域の指定

#### HTML


```html
<section id="page">
  <header>ヘッダー</header>
  <nav>ナビゲーション</nav>
  <main>メイン領域</main>
  <footer>フッター</footer>
</section>
```


#### CSS


```css
#page {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas:
    "head head"
    "nav main"
    "nav foot";
  grid-template-rows: 50px 1fr 30px;
  grid-template-columns: 150px 1fr;
}

#page > header {
  grid-area: head;
  background-color: #8ca0ff;
}

#page > nav {
  grid-area: nav;
  background-color: #ffa08c;
}

#page > main {
  grid-area: main;
  background-color: #ffff64;
}

#page > footer {
  grid-area: foot;
  background-color: #8cffa0;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # grid-template-areas-property |

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

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

関連情報
----

* 関連する CSS プロパティ: `grid-template-rows`, `grid-template-columns`, `grid-template`
* グリッドレイアウトガイド: グリッドテンプレート領域
* 動画チュートリアル: Grid Template Areas
outline-offset
==============

CSS の **`outline-offset`** プロパティは、要素の辺や境界線と輪郭線との空間の量を設定します。

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

構文
--


```css
/\* <length> 値 \*/
outline-offset: 3px;
outline-offset: 0.2em;

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

### 値

``<length>``

要素とその輪郭線との空間の幅です。負の値を指定すると輪郭線は要素の内側に表示されます。 `0` を指定すると輪郭線は要素との隙間を置かずに表示されます。

解説
--

輪郭線 (outline) は要素の周囲、境界線 (border) の外側に描かれる線です。要素とその輪郭線の間は透明です。つまり、親要素の背景と同じになります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 指定通り。ただし相対的な長さはは絶対的な長さに変換される |
| アニメーションの種類 | length |

形式文法
----
```

outline-offset =   
  <length>    
  
```

例
-

### 輪郭線のオフセットをピクセル数で設定

#### HTML


```html
<p>Gallia est omnis divisa in partes tres.</p>
```


#### CSS


```css
p {
  outline: 1px dashed red;
  outline-offset: 10px;
  background: yellow;
  border: 1px solid blue;
  margin: 15px;
}
```


#### 結果

仕様書
---

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

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

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

関連情報
----

* `outline`
* `outline-color`
* `outline-style`
* `outline-width`
box-orient
==========

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

**警告:** これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。現在の標準についての情報はフレックスボックスを参照してください。

**`box-orient`** は CSS のプロパティで、要素がその中身をレイアウトする方向が、水平か垂直かを指定します。


```css
/\* キーワード値 \*/
box-orient: horizontal;
box-orient: vertical;
box-orient: inline-axis;
box-orient: block-axis;

/\* グローバル値 \*/
box-orient: inherit;
box-orient: initial;
box-orient: unset;
```

構文
--

`box-orient` プロパティは以下の列挙されたキーワード値のうちの一つで指定します。

### 値

`horizontal`

ボックスは、その内容を水平にレイアウトします。

`vertical`

ボックスは、その内容を垂直にレイアウトします。

`inline-axis` (HTML)

ボックスは、子をインライン軸に沿って表示します。

`block-axis` (HTML)

ボックスは、子をブロック軸に沿って表示します。

`inline-axis` と `block-axis` は書字方向に依存するキーワードであり、英語では、それぞれ `horizontal` と `vertical` に対応付けられます。

解説
--

HTML DOM 要素は既定で中身をインライン軸に沿ってレイアウトします。この CSS プロパティは HTML 要素のうち CSS の `display` が `box` または `inline-box` の値であるものに対してのみ適用されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `inline-axis` (XUL における `horizontal`) |
| 適用対象 | CSS の `display` の値が `box` または `inline-box` である要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----

Error: could not find syntax for this item例
-

### ボックスを水平方向に設定

ここでは、`box-orient`プロパティにより、例題の 2 つの `<p>` セクションが同じ行に表示されます。

#### HTML


```html
<div class="example">
  <p>I will be to the left of my sibling.</p>
  <p>I will be to the right of my sibling.</p>
</div>
```


#### CSS


```css
div.example {
  display: -moz-box; /\* Mozilla \*/
  display: -webkit-box; /\* WebKit \*/
  display: box; /\* 仕様書通り \*/

  /\* 子は垂直に向けられる \*/
  -moz-box-orient: horizontal; /\* Mozilla \*/
  -webkit-box-orient: horizontal; /\* WebKit \*/
  box-orient: horizontal; /\* 仕様書通り \*/
}
```

### 結果

仕様書
---

標準仕様には含まれていません。

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

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

関連情報
----

* `box-direction`
* `box-pack`
* `box-align`
* `flex-direction`
<ratio>
=======

**`<ratio>`** は CSS のデータ型で、アスペクト比をメディアクエリ内で記述するために使用し、2 つの単位のない値で比率を記述します。

構文
--

メディアクエリ Level 3 では、`<ratio>` データ型は、厳密な正の `<integer>`、スラッシュ ('/', Unicode の `U+002F SOLIDUS`)、2 番目の厳密な正の `<integer>` の順に記述します。スラッシュの前後にはスペースを入れてもかまいません。最初の数値は幅を、2 番目の数値は高さを表します。

メディアクエリ Level 4 では、`<ratio>` データ型が更新され、厳密な正の `<number>`、スラッシュ ('/', Unicode の `U+002F SOLIDUS`)、2 番目の厳密な正の `<number>` の順に記述します。それに加えて、単独の `<number>` の値が許可されています。

例
-

### メディアクエリでの使用


```css
@media screen and (min-aspect-ratio: 16/9) { ... }
```

### 一般的なアスペクト比

|  | 比率 | 用例 |
| --- | --- | --- |
| Ratio4_3.png | `4/3` | 20 世紀における伝統的な TV 画面の形状です。 |
| Ratio16_9.png | `16/9` | 現代の「ワイド画面」の TV の形状です。 |
| Ratio1_1.85.png | `185/100` = `91/50` | 1960 年代から用いられている最も一般的な映画スクリーンの形状です。 |
| Ratio1_2.39.png | `239/100` | 「ワイドスクリーン」、アナモルフィックな映画スクリーンの形状です。 |

仕様書
---

| Specification |
| --- |
| Media Queries Level 4 # values |

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

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

関連情報
----

* `aspect-ratio` メディア特性