recursal/MDN huggingface dataset:
offset-position
===============

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

**`offset-position`** は CSS のプロパティで、 `offset-path` の初期位置を定義します。

構文
--


```css
/\* キーワード値 \*/
offset-position: auto;
offset-position: top;
offset-position: bottom;
offset-position: left;
offset-position: right;
offset-position: center;

/\* <percentage> 値 \*/
offset-position: 25% 75%;

/\* <length> 値 \*/
offset-position: 0 0;
offset-position: 1cm 2cm;
offset-position: 10ch 8em;

/\* 辺とオフセット値 \*/
offset-position: bottom 10px right 20px;
offset-position: right 3em bottom 10px;
offset-position: bottom 10px right;
offset-position: top right 10px;

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

### 値

`auto`

初期位置は `position` プロパティで指定されたボックスの位置です。

`<position>`

`<position>` です。位置は x/y 座標を定義し、要素のボックスの辺から相対的にアイテムを配置します。 1 つから 4 つの値を使って定義することができます。キーワード以外の値を 2 つ指定した場合、 1 つ目の値は水平方向の位置を、 2 つ目の値は垂直方向の位置を表します。 1 つの値のみを指定した場合は、 2 番目の値は `center` とみなされます。 3 つまたは 4 つの値が使用される場合、長さとパーセントの値は、前のキーワード値からのオフセットとなります。これらの値タイプの詳細については、 `background-position` を参照してください。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `normal` |
| 適用対象 | 座標変換可能要素 |
| 継承 | なし |
| パーセント値 | refer to the size of containing block |
| 計算値 | `length` の場合は絶対的な値、それ以外の場合はパーセント値 |
| アニメーションの種類 | position |

形式文法
----
```

offset-position =   
  normal      |  
  auto        |  
  <position>    
  
<position> =   
  [ left | center | right | top | bottom | <length-percentage> ]  |  
  [ left | center | right ] && [ top | center | bottom ]  |  
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |  
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

### 初期オフセット位置の設定


```html
<div id="motion-demo"></div>
```



```css
#motion-demo {
  offset-path: path("M20,20 C20,100 200,0 200,100");
  offset-position: left top;
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
  background: cyan;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}
```

仕様書
---

| Specification |
| --- |
| Motion Path Module Level 1 # offset-position-property |

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

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

関連情報
----

* `offset`
* `offset-anchor`
* `offset-distance`
* `offset-path`
* `offset-rotate`
margin-block-end
================

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

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

構文
--


```css
/\* <length> 値 \*/
margin-block-end: 10px; /\* 絶対的な長さ \*/
margin-block-end: 1em; /\* テキストの大きさに対する相対値 \*/
margin-block-end: 5%; /\* 直近のブロックコンテナーの大きさに対する相対値 \*/

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

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


これは `margin-top`, `margin-right`, `margin-bottom`, `margin-left` の何れかのプロパティに対応し、どれに対応するかは `writing-mode`, `direction`, `text-orientation` で定義された値によって決まります。

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

### 値

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

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | `margin` と同じ |
| 継承 | なし |
| パーセント値 | レイアウトモデルに依存 |
| 計算値 | 長さで指定されると相当する絶対的な長さ、パーセント値として指定されると指定値、それ以外では `auto` |
| アニメーションの種類 | length |

形式文法
----
```

margin-block-end =   
  <'margin-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-rl;
  margin-block-end: 20px;
  background-color: #c8c800;
}
```


#### 結果

仕様書
---

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

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

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

関連情報
----

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

CSS の **`background-origin`** プロパティは、背景配置領域を境界の開始位置、境界の内部、パディングの内部から設定します。

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

`background-attachment` が `fixed` のときは `background-origin` が無視されることに注意してください。

構文
--


```css
/\* キーワード値 \*/
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

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


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

### 値

`border-box`

背景は境界ボックスからの相対位置になります。

`padding-box`

背景はパディングボックスからの相対位置になります。

`content-box`

背景はコンテンツボックスからの相対位置になります。

公式定義
----

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

形式文法
----
```

background-origin =   
  <visual-box>#    
  
<visual-box> =   
  content-box  |  
  padding-box  |  
  border-box     
  
```

例
-

### 背景画像の原点を設定


```css
.example {
  border: 10px double;
  padding: 10px;
  background: url("image.jpg");
  background-position: center left;
  background-origin: content-box;
}
```



```css
#example2 {
  border: 4px solid black;
  padding: 10px;
  background: url("image.gif");
  background-repeat: no-repeat;
  background-origin: border-box;
}
```



```css
div {
  background-image: url("logo.jpg"), url("mainback.png"); /\* 背景に 2 つの画像を適用 \*/
  background-position:
    top right,
    0px 0px;
  background-origin: content-box, padding-box;
}
```

### 2 つのグラデーションの使用

この例では、ボックスに太い点線の境界線が付いています。最初のグラデーションでは、 `padding-box` を `background-origin` として使用しているため、背景は境界線の内側に表示されます。2 つ目のグラデーションは、`content-box`を使用しているため、コンテンツの後ろにのみ表示されます。


```css
.box {
  margin: 10px 0;
  color: #fff;
  background: linear-gradient(
      90deg,
      rgba(131, 58, 180, 1) 0%,
      rgba(253, 29, 29, 0.6) 60%,
      rgba(252, 176, 69, 1) 100%
    ), radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 28%);
  border: 20px dashed black;
  padding: 20px;
  width: 400px;
  background-origin: padding-box, content-box;
  background-repeat: no-repeat;
}
```



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

仕様書
---

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-background-origin |

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

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

関連情報
----

* `background-clip`
inherit
=======

**`inherit`** は CSS のキーワードで、要素のプロパティの計算値を親要素から取得するよう指定します。 CSS の一括指定 `all` を含め、すべての CSS プロパティに適用することができます。

継承プロパティにおいては、既定の動作を推進するものであり、他のルールを上書きする場合にのみ必要です。

親要素が包含ブロックではなかった場合であっても、常に文書ツリー内の親要素から継承が行われます。

例
-

### 選択された要素をルールから除外


```css
/\* 第 2 レベルのヘッダーを緑色にする \*/
h2 {
  color: green;
}

/\* サイドバーにあるものは、親の色を使用するようにする \*/
#sidebar h2 {
  color: inherit;
}
```


この例では、サイドバーの中の `h2` 要素の色が異なるかもしれません。例えば、ルールに一致する `div` の子要素を考えてみましょう。


```css
div#current {
  color: blue;
}
```


こうすると、青になります。

仕様書
---

| Specification |
| --- |
| CSS Cascading and Inheritance Level 4 # inherit |

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

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

関連情報
----

* 継承
* `initial` を使用すると、プロパティを初期値に設定します。
* `revert` キーワードを使用すると、プロパティをユーザーエージェントのスタイルシート（またはもしあれば、ユーザーのスタイル）で設定された値に初期化します。
* `revert-layer` キーワードを使用すると、プロパティを直前のカスケードレイヤーで確立された値に戻します。
* `unset` キーワードを使用すると、継承プロパティは継承値に、それ以外は初期値に設定します。
* `all` プロパティは、すべてのプロパティを一度に initial, inherit, revert, unset の状態にします。
@keyframes
==========

**`@keyframes`** は CSS のアットルールで、アニメーションの流れに沿ったキーフレーム（または中間地点）のスタイルを定義することによって、一連の CSS アニメーションの中間ステップを制御します。これにより、アニメーションの中間ステップをトランジションよりも詳細に制御できます。

構文
--


```css
@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}
```

### 値

`<custom-ident>`

キーフレームのリストを識別する名前。これは CSS 構文で定義されている識別子に適合する必要があります。

`from`

アニメーションの始まりである `0%` を示します。

`to`

アニメーションの終わりである `100%` を示します。

`<percentage>`

指定したキーフレームがアニメーションの中で作動する時間を示すパーセント値です。

解説
--

JavaScript は、 CSS オブジェクトモデルのインターフェイス `CSSKeyframesRule` によって `@keyframes` アットルールにアクセスできます。

キーフレームを使うには、アニメーションとそのキーフレームを一致させるために、 `animation-name` プロパティで指定したものと同じ名前がついた `@keyframes` ルールを作成します。それぞれの `@keyframes` ルールは、キーフレームセレクターのスタイルリストを含んでいます。それは、そのキーフレームが作動する時のアニメーションのパーセント値と、そのキーフレームでのスタイルを指定するブロックとで構成されています。

キーフレームは任意の順番で並べることができます。それらは、作動する時を示すパーセント値の順番に従って制御されます。

### 有効なキーフレームのリスト

キーフレームルールにアニメーションの開始と終了の状態 (`0%`/`from` と `100%`/`to`) を明示しない場合、ブラウザーはその要素の既存のスタイルを開始・終了の状態として用います。これは、その要素を初期状態からアニメーションさせて元に戻すという処理に利用できます。

キーフレームルールにアニメーションができないプロパティを含めた場合、そのプロパティは無視されますが、他のアニメーションが可能なプロパティについてはアニメーションが実行されます。

### 重複の解決

複数のキーフレームに同じ名前が付けられている場合、最後に宣言されたものが使用されます。 `@keyframes` ルールがカスケード的に継承されることはないため、アニメーションが複数のルールセットによるキーフレームをもとにして行われることはありません。

指定されたアニメーションのタイムオフセットが重複している場合は、 `@keyframes` ルール内のそのパーセント値を持つすべてのキーフレームがそのフレームに使用されます。 `@keyframes` ルールの中で、同じパーセント値を指定した複数のキーフレームがカスケード的に継承されます。

### 一部のキーフレームでプロパティが指定されていない場合

一部のキーフレームでしか指定されていないプロパティは、補完されます（ただし、補完することができないプロパティは除きます。このようなプロパティは、アニメーションされません）。


```css
@keyframes identifier {
  0% {
    top: 0;
    left: 0;
  }
  30% {
    top: 50px;
  }
  68%,
 72% {
    left: 50px;
  }
  100% {
    top: 100px;
    left: 100%;
  }
}
```


この例では、 `top` プロパティは `0%`, `30%`, `100%` のキーフレームでアニメーション指定されています。また、 `left` プロパティは `0%`, `68%`, `72%`, `100%` のキーフレームで指定されています。

### キーフレームが複数宣言された場合

キーフレームが複数宣言されているものの、アニメーションで作用する全てのプロパティがそれぞれのキーフレームに存在するわけではない場合、これらのキーフレームで指定されたすべての値が適用されます。例えば、


```css
@keyframes identifier {
  0% {
    top: 0;
  }
  50% {
    top: 30px;
    left: 20px;
  }
  50% {
    top: 10px;
  }
  100% {
    top: 0;
  }
}
```


この例では、 `50%` のキーフレームで、使用される値は `top: 10px` と `left: 20px` です。

カスケード的なキーフレームは Firefox 14 から対応しています。

### キーフレーム内の `!important`

キーフレーム内で `!important` が付けられた宣言は無視されます。


```css
@keyframes important1 {
  from {
    margin-top: 50px;
  }
  50% {
    margin-top: 150px !important;
  } /\* 無視される \*/
  to {
    margin-top: 100px;
  }
}

@keyframes important2 {
  from {
    margin-top: 50px;
    margin-bottom: 100px;
  }
  to {
    margin-top: 150px !important; /\* 無視される \*/
    margin-bottom: 50px;
  }
}
```

形式文法
----
```

@keyframes =   
  @keyframes <keyframes-name> { <qualified-rule-list> }    
  
<keyframes-name> =   
  <custom-ident>  |  
  <string>          
  
```

例
-

### CSS アニメーションの例

CSS アニメーションの使用を参照してください。

仕様書
---

| Specification |
| --- |
| CSS Animations Level 1 # keyframes |

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

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

関連情報
----

* CSS アニメーションの使用
* `AnimationEvent`
border-bottom-style
===================

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

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

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

構文
--


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

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


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

公式定義
----

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

形式文法
----
```

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

例
-

### すべての境界の形状のデモ

#### 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: 3px;
  background-color: #52e385;
}
tr,
td {
  padding: 3px;
}

/\* border-bottom-style の例のクラス \*/
.b1 {
  border-bottom-style: none;
}
.b2 {
  border-bottom-style: hidden;
}
.b3 {
  border-bottom-style: dotted;
}
.b4 {
  border-bottom-style: dashed;
}
.b5 {
  border-bottom-style: solid;
}
.b6 {
  border-bottom-style: double;
}
.b7 {
  border-bottom-style: groove;
}
.b8 {
  border-bottom-style: ridge;
}
.b9 {
  border-bottom-style: inset;
}
.b10 {
  border-bottom-style: outset;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-style |

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

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

関連情報
----

* その他の形状に関する境界のプロパティ: `border-left-style`, `border-right-style`, `border-top-style`, `border-style`
* その他の下境界に関するプロパティ: `border-bottom`, `border-bottom-color`, `border-bottom-width`
min-height
==========

**`min-height`** は CSS のプロパティで、要素の最小高を設定します。これは `height` プロパティの使用値が、`min-height` で指定した値を下回ることを防ぎます。

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

`min-height` の値が `max-height` および `height` の値より大きい場合は、`min-height` の値が要素の高さになります。

構文
--


```css
/\* <length> 値 \*/
min-height: 3.5em;

/\* <percentage> 値 \*/
min-height: 10%;

/\* キーワード値 \*/
min-height: max-content;
min-height: min-content;
min-height: fit-content(20em);

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

### 値

`<length>`

`min-height` を絶対的な値で定義します。

`<percentage>`

`min-height` を包含ブロックの高さに対するパーセント値で定義します。

`auto`

ブラウザーが指定された要素の `min-height` を計算して選択します。

`max-content`

内容物が推奨する `min-height` です。

`min-content`

内容物の最小の `min-height` です。

`fit-content(`<length-percentage>`)`

利用可能な空白を指定された引数で置き換えた `fit-content` 式を使用します。すなわち、 `min(max-content, max(min-content, 引数))` です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | 非置換インライン要素、テーブルの列、列グループを除くすべての要素 |
| 継承 | なし |
| パーセント値 | パーセント値は、生成ボックスの包含ブロックの高さを基準に計算されます。 包含ブロックの高さが明示的に定義されず (この場合コンテンツの高さに依存します) この要素が絶対位置指定されていない場合は、パーセント値は 0 として扱われます。 |
| 計算値 | 指定されたパーセント値または絶対的な長さ |
| アニメーションの種類 | length または パーセント値, calc(); |

形式文法
----
```

min-height =   
  auto                                      |  
  <length-percentage [0,∞]>                 |  
  min-content                               |  
  max-content                               |  
  fit-content( <length-percentage [0,∞]> )    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

### min-height の設定


```css
table {
  min-height: 75%;
}

form {
  min-height: 0;
}
```

仕様書
---

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # width-height-keywords |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

関連情報
----

* ボックスモデル, `box-sizing`
* `height`, `max-height`
margin-block
============

The **`margin-block`** は CSS の一括指定プロパティで、論理的なブロックの先頭と末尾のマージンを設定します。これは要素の書字方向やテキストの向きに応じて物理的なマージンに変換されます。

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

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

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

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


```css
/\* <length> 値 \*/
margin-block: 10px 20px; /\* 絶対的な長さ \*/
margin-block: 1em 2em; /\* テキストの大きさに対する相対値 \*/
margin-block: 5% 2%; /\* 直近のブロックコンテナーの大きさに対する相対値 \*/
margin-block: 10px; /\* 先頭と末尾の両方を設定 \*/

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

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


このプロパティは、 `margin-top` と `margin-bottom`、または `margin-right` と `margin-left` プロパティに、 `writing-mode`, `direction`, `text-orientation` で定義された値にしたがって対応します。

`margin-block` プロパティは、 1 つまたは 2 つの値を使用して指定します。

* **1 つ**の値が指定された場合は、**先頭と末尾の両方**に同じマージンを適用します。
* **2 つ**の値が指定された場合は、 1 つ目のマージンが**先頭**に、 2 つ目のマージンが**末尾**に指定されます。
### 値

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

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `margin-block-start`: `0`
* `margin-block-end`: `0`
 |
| 適用対象 | `margin` と同じ |
| 継承 | なし |
| パーセント値 | レイアウトモデルに依存 |
| 計算値 | 一括指定の次の各プロパティとして* `margin-block-start`: 長さで指定されると相当する絶対的な長さ、パーセント値として指定されると指定値、それ以外では `auto`
* `margin-block-end`: 長さで指定されると相当する絶対的な長さ、パーセント値として指定されると指定値、それ以外では `auto`
 |
| アニメーションの種類 | length |

形式文法
----
```

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

例
-

### ブロック方向の先頭と末尾のマージンを設定

#### CSS


```css
div {
  background-color: yellow;
  width: 120px;
  height: auto;
  border: 1px solid green;
}

p {
  margin: 0;
  margin-block: 20px 40px;
  background-color: tan;
}

.verticalExample {
  writing-mode: vertical-rl;
}
```


#### HTML


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


#### 結果

仕様書
---

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

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

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

関連情報
----

* CSS 論理的プロパティと値
* 対応する物理的プロパティ: `margin-top`, `margin-right`, `margin-bottom`, `margin-left`
* `writing-mode`, `direction`, `text-orientation`
min-block-size
==============

**`min-block-size`** は CSS のプロパティで、書字方向に応じて要素ブロックの水平または垂直方向の最小の寸法を定義します。これは `min-width` または `min-height` のどちらかのプロパティと、 `writing-mode` の値に応じて対応します。

書字方向が垂直方向であった場合、 `min-block-size` の値は要素の最小幅に対応します。そうでなければ、要素の最小の高さに対応します。関連プロパティの `min-inline-size` が要素のもう一方の寸法を定義します。

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

構文
--


```css
/\* <length> 値 \*/
min-block-size: 100px;
min-block-size: 5em;

/\* <percentage> 値 \*/
min-block-size: 10%;

/\* キーワード値 \*/
min-block-size: max-content;
min-block-size: min-content;
min-block-size: fit-content(20em);

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

### 値

`min-block-size` プロパティは `min-width` および `min-height` の各プロパティと同じ値を取ります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | `width` および `height` と同じ |
| 継承 | なし |
| パーセント値 | 包含ブロックの block-size |
| 計算値 | `min-width` および `min-height` と同じ |
| アニメーションの種類 | length または パーセント値, calc(); |

形式文法
----
```

min-block-size =   
  <'min-width'>    
  
```

例
-

### 縦書きでブロック方向の最小寸法を設定

#### HTML


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


#### CSS


```css
.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  min-block-size: 200px;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-min-block-size |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

関連情報
----

* 対応付けされる物理的プロパティ: `min-width` および `min-height`
* `writing-mode`
background-position-y
=====================

**`background-position-y`** は CSS のプロパティで、各背景画像における垂直の初期位置を設定します。位置は `background-origin` によって設定された位置レイヤーに対する相対位置です。

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

このプロパティの値は、その後で一括指定の `background` または `background-position` プロパティが定義されると上書きされます。

構文
--


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

/\* <percentage> 値 \*/
background-position-y: 25%;

/\* <length> 値 \*/
background-position-y: 0px;
background-position-y: 1cm;
background-position-y: 8em;

/\* 辺からの相対値 \*/
background-position-y: bottom 3px;
background-position-y: bottom 10%;

/\* 複数の値 \*/
background-position-y: 0px, center;

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


`background-position-y` プロパティは、 1 つ以上の値をカンマで区切って指定します。

### 値

`top`

背景画像の上端を、背景位置レイヤーの上端に合わせます。

`center`

背景画像を垂直方向の中央を、背景位置レイヤーの垂直方向の中央に合わせます。

`bottom`

背景画像の下端を、背景位置レイヤーの下端に合わせます。

`<length>`

指定された背景画像の垂直方向の辺の、対応する背景位置レイヤーの上側の垂直方向の辺を基準としたオフセットです。 (一部のブラウザーではオフセットの下辺に割り当てることができます。)

`<percentage>`

指定された背景画像のコンテナーに対する垂直方向の相対位置のオフセットです。0%の値は背景画像の上辺がコンテナーの上辺に配置されることを意味し、100% の値は背景画像の下辺がコンテナーの下辺に配置されることを意味しますので、50% の値は背景画像を垂直方向に中央揃えします。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0%` |
| 適用対象 | すべての要素。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | なし |
| パーセント値 | 背景配置領域の高さから背景画像の高さを引いた値に対する相対値 |
| 計算値 | 絶対長とパーセント値の組み合わせで与えられるオフセットと原点のキーワードを、各項目として構成されるリスト。 |
| アニメーションの種類 | 反復可能リスト |

形式文法
----
```

background-position-y =   
  [ center | [ [ top | bottom | y-start | y-end ]? <length-percentage>? ]! ]#    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

### 基本的な例

次の例は、シンプルな背景画像の実装で、background-position-x と background-position-y を使って、画像の水平方向と垂直方向の位置を別々に定義しています。

#### HTML


```html
<div></div>
```


#### CSS


```css
div {
  width: 300px;
  height: 300px;
  background-color: skyblue;
  background-image: url(https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: bottom 10px;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 4 # background-position-longhands |

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

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

関連情報
----

* `background-position`
* `background-position-x`
* `background-position-inline`
* `background-position-block`
* 複数の背景の使用
mask-border-repeat
==================

**`mask-border-repeat`** は CSS のプロパティで、どのように元の画像の辺の領域を要素のマスク境界の寸法に合うように調整するかを設定します。

構文
--


```css
/\* キーワード値 \*/
mask-border-repeat: stretch;
mask-border-repeat: repeat;
mask-border-repeat: round;
mask-border-repeat: space;

/\* 上下 | 左右 \*/
mask-border-repeat: round stretch;

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


`mask-border-repeat` プロパティは、以下の値のリストから 1 つまたは 2 つの値を使用して指定します。

* **1 つ**の値が指定されると、**全 4 辺**に同じ動作が適用されます。
* **2 つ**の値が指定されると、最初の値は**上と下**の辺に、二番目の値は**左と右**の辺に適用されます。
### 値

`stretch`

元の画像の辺の領域は、それぞれの境界の間の溝を埋めるように引き伸ばされます。

`repeat`

元の画像の辺の領域は、それぞれの境界の間の溝を埋めるようにタイル配置 (繰り返し) されます。タイルは正しく合うように切り取られることがあります。

`round`

元の画像の辺の領域は、それぞれの境界の間の溝を埋めるようにタイル配置 (繰り返し) されます。タイルは正しく合うように引き伸ばされることがあります。

`space`

元の画像の辺の領域は、それぞれの境界の間の溝を埋めるようにタイル配置 (繰り返し) されます。正しく合うように間隔が配布されることがあります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `stretch` |
| 適用対象 | すべての要素。 SVG の場合は `defs` 要素やすべてのグラフィック要素を除いたコンテナー要素に適用される |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

mask-border-repeat =   
  [ stretch | repeat | round | space ]{1,2}    
  
```

例
-

### 基本的な使用

このプロパティは、まだどこでも対応されていないようです。このプロパティが対応されるようになれば、境界マスクのスライスが境界の周りでどのように繰り返されるかを定義することができるようになります。 — つまり、ただ繰り返すのか、スライスの全体数が収まるように少しだけ拡大縮小するのか、1 つのスライスが収まるように引き伸ばすのか、ということです。


```css
mask-border-repeat: round;
```


Chromium ベースのブラウザーは、このプロパティの古い版 — `mask-box-image-repeat` — に接頭辞つきで対応しています。


```css
-webkit-mask-box-image-repeat: round;
```


**メモ:** `mask-border` ページでは動作する例を (Chromium で対応している古い接頭辞つきの境界マスクプロパティを使用して) 挙げていますので、効果について分かるでしょう。

仕様書
---

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

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

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

関連情報
----

* `mask-border`
* `mask-border-mode`
* `mask-border-outset`
* `mask-border-source`
* `mask-border-width`