recursal/MDN huggingface dataset:
mask-border-slice
=================

**`mask-border-slice`** は CSS のプロパティで、`mask-border-source` で設定された画像を複数の領域に分割します。これらの領域は要素のマスク境界の部品を構成するために使用されます。

構文
--


```css
/\* すべての辺 \*/
mask-border-slice: 30%;

/\* 垂直 | 水平 \*/
mask-border-slice: 10% 30%;

/\* 上 | 水平 | 下 \*/
mask-border-slice: 30 30% 45;

/\* 上 | 右 | 下 | 左 \*/
mask-border-slice: 7 12 14 5;

/\* `fill` キーワードの使用 \*/
mask-border-slice: 10% fill 7 12;

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


`mask-border-slice` プロパティは 1 ～ 4 つの `<number-percentage>` 値で指定し、それぞれの画像スライスの位置を表すことができます。負の数は無効です。対応する寸法よりも大きな値は `100%` に丸められます。

* 位置が **1 つ**指定された場合、全 4 本の分割線がそれぞれの辺から同じ距離で作成されます。
* 位置が **2 つ**指定された場合、1 つ目の値を**上下**の辺からの距離として、2 つ目を**左右**の辺からの距離として分割線を作成します。
* 位置が **3 つ**指定された場合、1 つ目の値を**上**の辺からの距離として、2 つ目を**左右**の辺からの距離、3 つ目は**下**の辺からの距離として分割線を作成します。
* 位置が **4 つ**指定された場合、**上**、**右**、**下**、**左**の順 (時計回り) でそれぞれの辺からの距離として分割線を作成します。

`fill` の値は任意であり、使用される場合は、宣言のどこにでも置くことができます。

### 値

`<number>`

縁からのオフセットを、ラスター画像の場合はピクセル数で、ベクター画像の場合は座標で表します。ベクター画像の場合、数値は元の画像の寸法ではなく、要素の寸法に対する相対値になるので、この場合は一般にパーセント値の方が適しています。

`<percentage>`

縁からのオフセットを、元の画像の寸法、つまり水平方向のオフセットであれば画像の幅、垂直方向のオフセットであれば画像の高さに対するパーセント値で表します。

`fill`

中央の画像領域を維持します。幅と高さは、画像領域のそれぞれ上と左に一致するように拡縮されます。

解説
--

分割する過程で、4 つの角、4 つの辺、それに中央領域の計 9 つの領域を作成します。それぞれの辺からの距離で設定される 4 本の分割線が、領域の寸法を制御します。

![border-image または border-image-slice プロパティで定義された 9 つの領域](/ja/docs/Web/CSS/mask-border-slice/border-image-slice.png)

上の図は、それぞれの領域の位置を説明しています。

* 1-4 の領域は角の領域です。それぞれが 1 回ずつ使用され、最終的な境界画像の中で四隅を形成します。
* 5-8 の領域は辺の領域です。これらは最終的な境界画像の中で、要素の寸法に合わせて反復、拡縮、その他の加工が行われます。
* 9 の領域は中央領域です。既定では描画されませんが、キーワード `fill` が設定されていれば背景画像のように使用されます。

`mask-border-repeat`、`mask-border-width`、`mask-border-outset` の各プロパティは、最終的な境界画像を構成するためにこれらの領域が使用される方法を指定します。

公式定義
----

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

形式文法
----
```

mask-border-slice =   
  [ <number> | <percentage> ]{1,4} fill?    
  
```

例
-

### 基本的な使用

このプロパティは、まだどこでも対応されていないようです。このプロパティが対応されるようになれば、ソース画像から取られるスライスの大きさを定義する役割を果たし、境界マスクを生成するために使用されるようになります。


```css
mask-border-slice: 30 fill;
```


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


```css
-webkit-mask-box-image-slice: 30 fill;
```


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

**メモ:** fill キーワードは、要素の内容を表示したい場合には設定する必要があります。

仕様書
---

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

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

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-repeat`
* `mask-border-source`
* `mask-border-width`
* 値 1 ～ 4 つの構文の説明
min()
=====

**`min()`** は CSS 関数で、 CSS プロパティの値としてカンマで区切られた式のリストから最小の (最も負である) 値を設定できます。 `min()` 関数は `<length>`、`<frequency>`,、`<angle>`、`<time>`、`<percentage>`、`<number>`、`<integer>` が利用できるところならばどこでも使用することができます。

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

上の例では、幅は最大 80px ですが、ビューポートの幅が 800px 未満または em の幅が 20px 未満の場合は狭くなります。言い換えれば、最大幅は 80px です。 `min()` の値はプロパティが取りうる*最大の*値を提供するものとして考えてください。

構文
--

`min()` 関数は、引数としてカンマで区切った 1 つ以上の式を取り、もっとも小さい (最も負である) 式の値の結果を値として使用します。

式は (`<length>` などの) 有効な引数の型として評価される、 (算術演算子を使用した) 数式、リテラル値、 `attr()` などのその他の式にすることができます。

必要に応じて、式の各値に異なる単位を使用することができます。必要に応じて、計算順序を決めるために括弧を使用することもできます。

### メモ

* 表の列、列グループ、行、行グループ、セルの幅と高さのパーセント値を含む数式は、自動レイアウト表と固定レイアウト表のどちらでも、あたかも `auto` が指定されていたかのように扱われる*可能性があります*。
* `max()` や他の `min()` 関数を式の値として入れ子にすることが認められています。式は完全な数式なので、 `calc()` 関数自体を使わずに直接加算、減算、乗算、除算を使うことができます。
* 式は、標準的な演算子の優先順位規則を使用して、加算 ( + )、減算 ( - )、乗算 ( \* )、除算 ( / ) の各演算子を組み合わせた値にすることができます。オペランドの + と - の両側には必ず空白を入れてください。式の中のオペランドは、任意の `<length>` 構文値を使用できます。
* `min()` と `max()` の値を組み合わせたり、 `min()` を `clamp()` や `calc()` 関数の中で使用したりすることができます (そしてよく必要になります)。
* 複数の制約を適用する場合は、3 つ以上の引数を与えることができます。
### 形式文法
```

<min()> =   
  min( <calc-sum># )    
  
<calc-sum> =   
  <calc-product> [ [ '+' | '-' ] <calc-product> ]\*    
  
<calc-product> =   
  <calc-value> [ [ '*' | '/' ] <calc-value> ]\*    
  
<calc-value> =   
  <number>        |  
  <dimension>     |  
  <percentage>    |  
  <calc-keyword>  |  
  ( <calc-sum> )    
  
<calc-keyword> =   
  e          |  
  pi         |  
  infinity   |  
  -infinity  |  
  NaN          
  
```

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

`min()` を使用して最大フォントサイズを設定する場合、読めるようにするためにフォントが少なくとも 200% まで拡大できるようにしてください (ズーム機能などの支援技術なしで)。

* MDN WCAG を理解する、ガイドライン 1.4 の解説
* Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
例
-

### ラベルと入力欄のために最大値を設定する

CSS 関数のもう一つの使用例は、レスポンシブなフォームコントロールに最大サイズを設定します。ラベルと入力欄の幅をフォームの幅の縮小に合わせて縮小できるようにします。

いくらか CSS を見てください。


```css
input,
label {
  padding: 2px;
  box-sizing: border-box;
  display: inline-block;
  width: min(40%, 400px);
  background-color: pink;
}

form {
  margin: 4px;
  border: 1px solid black;
  padding: 4px;
}
```


ここでは、フォーム自体は、マージン、境界、パディングを含めて、親の幅の 100% になります。入力欄とラベルは、フォームのパディングまでの幅の 40% または幅 400px のどちらか小さい方になるように宣言します。言い換えれば、ラベルと入力欄の幅の最大値は 400px です。最も狭くなるのはフォームの幅の 40% であり、スマートウォッチの画面では非常に小さくなります。


```html
<form>
  <label>Type something:</label>
  <input type="text" />
</form>
```

仕様書
---

| Specification |
| --- |
| CSS Values and Units Module Level 4 # calc-notation |

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

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

関連情報
----

* `calc()`
* `clamp()`
* `max()`
* CSS 値
shape-margin
============

**`shape-margin`** は CSS のプロパティで、`shape-outside` を使用して作成された CSS シェイプのマージンを設定します。

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

マージンで、シェイプ (**浮動要素**) の縁と周囲のコンテンツとの間隔を調整することができます。

構文
--


```css
/\* <length> 値 \*/
shape-margin: 10px;
shape-margin: 20mm;

/\* <percentage> 値 \*/
shape-margin: 60%;

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

### 値

`<length-percentage>`

シェイプのマージンを `<length>` 値または要素の包含ブロックの幅に対する `<percentage>` で設定します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | 浮動要素 |
| 継承 | なし |
| パーセント値 | 包含ブロックの幅に対する相対値 |
| 計算値 | 指定通り。ただし相対的な長さはは絶対的な長さに変換される |
| アニメーションの種類 | length または パーセント値, calc(); |

形式文法
----
```

shape-margin =   
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

### 多角形にマージンを追加

#### HTML


```html
<section>
  <div class="shape"></div>
  We are not quite sure of any one thing in biology; our knowledge of geology is
  relatively very slight, and the economic laws of society are uncertain to
  every one except some individual who attempts to set them forth; but before
  the world was fashioned the square on the hypotenuse was equal to the sum of
  the squares on the other two sides of a right triangle, and it will be so
  after this world is dead; and the inhabitant of Mars, if one exists, probably
  knows its truth as we know it.
</section>
```


#### CSS


```css
section {
  max-width: 400px;
}

.shape {
  float: left;
  width: 150px;
  height: 150px;
  background-color: maroon;
  clip-path: polygon(0 0, 150px 150px, 0 150px);
  shape-outside: polygon(0 0, 150px 150px, 0 150px);
  shape-margin: 20px;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Shapes Module Level 1 # shape-margin-property |

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

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

関連情報
----

* CSS シェイプ
* CSS シェイプの概要
* `shape-outside`
* `shape-image-threshold`
* `<basic-shape>`
border-block-width
==================

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

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

他の方向の境界の幅は `border-inline-width` で設定でき、これは `border-inline-start-width` および `border-inline-end-width` を設定します。

構文
--


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

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

### 値

`<'border-width'>`

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

公式定義
----

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

形式文法
----
```

border-block-width =   
  <'border-top-width'>{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: 1px solid blue;
  border-block-width: 5px;
}
```


#### 結果

仕様書
---

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

**`:out-of-range`** は CSS の擬似クラスで、 `<input>` 要素のうち、現在の値が `min` および `max` 属性で指定された範囲を外れているものを表します。


```css
/\* 入力範囲が設定されていて、値がその範囲外である
 <input> 要素をすべて選択 \*/
input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
}
```

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

この擬似クラスは。入力欄の現在の値が許可された範囲外にあることをユーザーに視覚的に示すのに便利です。

**メモ:** この擬似クラスは範囲制限を持つ (または設定できる) 要素にのみ適用されます。そのような制限がない場合は、要素は "in-range" にも "out-of-range" にもなりません。

構文
--
```

:out-of-range
```

例
-

### HTML


```html
<form action="" id="form1">
  <p>1 から 10の間の値が有効です。</p>
  <ul>
    <li>
      <input
 id="value1"
 name="value1"
 type="number"
 placeholder="1 to 10"
 min="1"
 max="10"
 value="12" />
      <label for="value1">あなたの値は</label>
    </li>
  </ul>
</form>
```

### CSS


```css
li {
  list-style: none;
  margin-bottom: 1em;
}

input {
  border: 1px solid black;
}

input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
}

input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
  border: 2px solid red;
}

input:in-range + label::after {
  content: "範囲内です。";
}

input:out-of-range + label::after {
  content: "範囲外です！";
}
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # selector-out-of-range |
| Selectors Level 4 # out-of-range-pseudo |

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

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

関連情報
----

* `:in-range`
* フォームデータの検証
::target-text
=============

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

**`::target-text`** は CSS の擬似要素で、ブラウザーが scroll-to-text フラグメントに対応している場合にスクロール先のテキストを表します。これによって、節のテキストを強調表示させることができます。


```css
::target-text {
  background-color: pink;
}
```

構文
--

Error: could not find syntax for this item例
-

### scroll-to-text を強調表示


```css
::target-text {
  background-color: rebeccapurple;
  color: white;
}
```


この CSS を確認するには、 scroll-to-text demo へのリンクを辿ってください。

仕様書
---

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # selectordef-target-text |

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

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

関連情報
----

* Text fragments
-webkit-text-stroke-width
=========================

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

**`-webkit-text-stroke-width`** は CSS のプロパティで、テキストの線の太さを指定します。

構文
--


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

/\* <length> 値 \*/
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-width: 0.1em;
-webkit-text-stroke-width: 1mm;
-webkit-text-stroke-width: 5pt;

/\* グローバル値 \*/
-webkit-text-stroke-width: inherit;
-webkit-text-stroke-width: initial;
-webkit-text-stroke-width: unset;
```

### 値

`<line-width>`

線の太さ。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | 絶対的な`長さ` |
| アニメーションの種類 | 離散値 |

形式文法
----
```

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

例
-

### 線の幅を変更

#### CSS


```css
p {
  margin: 0;
  font-size: 4em;
  -webkit-text-stroke-color: red;
}

#thin {
  -webkit-text-stroke-width: thin;
}

#medium {
  -webkit-text-stroke-width: 3px;
}

#thick {
  -webkit-text-stroke-width: 1.5mm;
}
```


#### HTML


```html
<p id="thin">Thin stroke</p>
<p id="medium">Medium stroke</p>
<p id="thick">Thick stroke</p>
```


#### 結果

仕様書
---

| Specification |
| --- |
| Compatibility Standard # the-webkit-text-stroke-width |

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

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

関連情報
----

* Surfin' Safari blog post announcing this feature
* CSS-Tricks article explaining this feature
* `-webkit-text-stroke-color`
* `-webkit-text-stroke`
* `-webkit-text-fill-color`
:-moz-loading
=============

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

**`:-moz-loading`** は CSS の擬似クラスで、 Mozilla 拡張であり、読み込みが開始されていないために表示できない要素、例えばまだ到着が開始されていない画像などに一致します。なお、読み込み*中*の画像は、この擬似クラスには一致*しません*。

**メモ:** このセレクターは主にテーマ開発者が使用するためのものです。

構文
--


```css
:-moz-loading {}
```

例
-

### 読み込み中の画像に背景を設定


```css
:-moz-loading {
  background-color: #aaa;
  background-image: url(loading-animation.gif) center no-repeat;
}
```

仕様書
---

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

関連情報
----

* `:-moz-broken`, `:-moz-suppressed` (en-US), `:-moz-user-disabled` (en-US)
container-type
==============

Baseline 2023
-------------

Newly availableSince February 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
要素は、コンテナーサイズの問い合わせのためのクエリーコンテナーとして、 **`container-type`** という CSS プロパティを使用して確立することができます。 `container-type` は、コンテナークエリーで使用するサイズ格納方法の種類を定義するために使用します。

これはコンテナークエリーで無限ループを避けるために重要です。もしそうでなければ、コンテナークエリーの中にある CSS ルールがコンテンツサイズを変更する可能性があり、その結果、クエリーが偽に評価されて親要素のサイズが変更され、そして、コンテンツサイズが変更されてクエリーが真に戻る、といった動作になります。

コンテナーサイズは、明示的に、あるいはコンテキストによって設定されます。例えば、ブロック要素、フレックスコンテナー、グリッドコンテナーは、親の幅いっぱいに伸びます。明示的またはコンテキストによるサイズが利用できない場合、サイズ抑制のある要素は折りたたまれます。

構文
--


```css
/\* キーワード値 \*/
container-type: normal;
container-type: size;
container-type: inline-size;

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

### 値

`size`

インラインおよびブロックの両方の寸法で コンテナーサイズクエリーのためのクエリー コンテナーを確立します。
 コンテナーにレイアウト抑制、スタイル抑制、サイズ抑制を適用します。


サイズ抑制は、インライン方向とブロック方向の両方で要素に適用されます。要素のサイズは、子要素を無視して単独で計算できます。

`inline-size`

 コンテナーのインライン軸上の寸法クエリー用のクエリーコンテナーを確立します。
 要素にレイアウト、スタイル、インラインサイズ抑制を適用します。


インラインサイズ抑制が要素に適用されます。要素のインラインサイズは、子要素を無視して単独で計算されます。

`normal`

この要素はコンテナーサイズクエリーのクエリーコンテナーではありませんが、コンテナースタイルクエリーのクエリーコンテナーであることに変わりはありません。

公式定義
----

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

形式文法
----
```

container-type =   
  normal       |  
  size         |  
  inline-size    
  
```

例
-

### インラインサイズ抑制の確立

次の HTML 例は、画像、タイトル、テキストを持つカード部品があります。


```html
<div class="container">
  <div class="card">
    <h3>Normal card</h3>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>

<div class="container wide">
  <div class="card">
    <h3>Wider card</h3>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>
```


コンテナーコンテキストを作成するには、要素に `container-type` プロパティを追加します。以下は、 `inline-size` 値を使用してコンテナーのインライン軸の格納コンテキストを作成しています。


```css
.container {
  container-type: inline-size;
  width: 300px;
  height: 120px;
}

.wide {
  width: 500px;
}
```


```
h3 {
  height: 2rem;
  margin: 0.5rem;
}

.card {
  height: 100%;
}

.content {
  background-color: wheat;
  height: 100%;
}

.container {
  margin: 1rem;
  border: 2px dashed red;
  overflow: hidden;
}
```


コンテナークエリーを `@container` アットルールで書くと、コンテナーの横幅が 400px を超える場合に、コンテナーの要素にスタイルが適用されます。


```css
@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}
```

仕様書
---

| Specification |
| --- |
| CSS Containment Module Level 3 # container-type |

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

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

関連情報
----

* CSS コンテナークエリー
* `@container` アットルール
* CSS `container` 一括指定プロパティ
* CSS `container-name` プロパティ
* CSS `content-visibility` プロパティ
padding-left
============

**`padding-left`** は CSS のプロパティで、要素のパディング領域における左側の幅を設定します。

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

要素のパディング領域とは、コンテンツと境界との間の領域のことです。

**メモ:** `padding` プロパティは、単一の宣言で要素の四方のパディングをすべて設定することができます。

構文
--


```css
/\* <length> の値 \*/
padding-left: 0.5em;
padding-left: 0;
padding-left: 2cm;

/\* <percentage> の値 \*/
padding-left: 10%;

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


`padding-left` プロパティは、以下のリストから選択した値で指定されます。マージンとは異なり、パディングには負の数は使用できません。

### 値

`<length>`

パディングの寸法を固定値で表したものです。負の数であってはいけません。

`<percentage>`

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

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group`, `table-column` を除くすべての要素。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | なし |
| パーセント値 | 包含ブロックの幅に対する相対値 |
| 計算値 | 指定されたパーセント値または絶対的な長さ |
| アニメーションの種類 | length |

形式文法
----
```

padding-left =   
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

### 左パディングをピクセル数とパーセント値で設定


```css
.content {
  padding-left: 5%;
}
.sidebox {
  padding-left: 10px;
}
```

仕様書
---

| Specification |
| --- |
| CSS Box Model Module Level 3 # padding-physical |

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

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

関連情報
----

* CSS 基本ボックスモデル入門
* `padding-top`, `padding-right`, `padding-bottom` および `padding` 一括指定
* 対応付けられる論理的プロパティ: `padding-block-start`, `padding-block-end`, `padding-inline-start`, `padding-inline-end` および一括指定の `padding-block` と `padding-inline`
math-depth
==========

**`math-depth`** プロパティは、数式の各要素について、その数式の最上位コンテナーに対する *深さ* の概念を記述します。これは、 `font-size: math` が適用されたとき、要素の font-size の計算値を調整するために使用されます。

**メモ:** `font-size: math` は MathML Core のユーザーエージェントスタイルシートにおける `<math>` 要素の既定値ですので、明示的に指定する必要はありません。

構文
--


```css
/\* キーワード値 \*/
math-depth: auto-add;

/\* 相対値 \*/
math-depth: add(2);
math-depth: add(-2);

/\* 絶対値 \*/
math-depth: 4;

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

### 値

`auto-add`

継承された math-style が `compact` の場合、継承された `math-depth` に 1 を足した値を設定します。

`add(`<integer>`)`

継承された `math-depth` に指定した整数を足した値に設定します。

`<integer>`

指定された整数に設定します。

公式定義
----

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

形式文法
----
```

math-depth =   
  auto-add          |  
  add( <integer> )  |  
  <integer>           
  
```

例
-

### 数式の深さの指定

 以下の例では、`math-depth`プロパティを変更したときのサブ数式のフォントサイズへの影響を示しています。
 各サブ数式の数字は適用された `math-depth` と拡大率を示しています。

 最初の `<mtext>` 要素は他のサブ数式への参照として使用され、特定のスタイルは適用されていません。
 2番目と3番目のサブ数式は `math-depth` が `auto-add` に設定され、`math-style` に応じた倍率の効果が表示されます。

最後の2つのサブ数式は、 `math-depth` を特定の値に設定した場合の効果を示しています。

#### HTML


```html
<p style="font-size: 3rem; margin: 1rem 0">
  <math>
    <mtext>0</mtext>

    <!-- auto-add value has no effect when math-style is normal -->
    <mrow style="math-style: normal">
      <mrow style="math-depth: auto-add">
        <mtext>0</mtext>
      </mrow>
    </mrow>

    <!-- the inherited math-style is compact, so math-depth is set to 1 -->
    <mrow style="math-depth: auto-add">
      <mtext>1</mtext>
    </mrow>

    <mrow style="math-depth: add(2)">
      <mtext>2</mtext>
      <mrow style="math-depth: add(-1)">
        <mtext>1</mtext>
      </mrow>
      <mrow style="math-depth: 0">
        <mtext>0</mtext>
      </mrow>
    </mrow>
  </math>
</p>
```


#### 結果

仕様書
---

| Specification |
| --- |
| MathML Core # the-math-script-level-property |

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

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

関連情報
----

* `font-size`
* `math-style`
opacity
=======

**`opacity`** は CSS のプロパティで、要素の不透明度を設定します。不透明度は要素の裏にあるコンテンツが隠れる度合いであり、透明度の逆です。

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

構文
--


```css
opacity: 0.9;
opacity: 90%;

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

### 値

`<alpha-value>`

`<number>` を `0.0` 以上 `1.0` 以下で、また `<percentage>` を `0%` 以上 `100%` 以下で、チャネルの不透明度（つまり、アルファチャネルの値）を表します。範囲外の数値も有効ですが、近い方の限界値に丸められます。

| 値 | 意味 |
| --- | --- |
| `0` | 要素は完全に透明です（つまり、不可視です）。 |
| `0` と `1` の中間にある何れかの `<number>` | 要素は半透明です（つまり、要素の背後のコンテンツが見えます）。 |
| `1` （既定値） | 要素は完全に不透明です（中身が詰まって見えます）。 |

解説
--

`opacity` の値は子要素に継承されませんが、要素のコンテンツを含む全体に適用されます。すなわち、ある要素とその子の不透明度が互いに異なっていたとしても、その要素の背景に対してはすべて同じ不透明度になります。

このプロパティを `1` 以外の値で用いると、その要素は新しい重ね合わせコンテキストを作ります。

背景の不透明度のみを変更したい場合は、`background` プロパティでアルファチャネルを使用できる`色の値`を使用してください。


```css
background: rgba(0, 0, 0, 0.4);
```

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

テキストの opacity を調整した場合、テキストの色と、テキストが配置されている背景の色とのコントラスト比が、弱視の人がページの内容を読むことができる程度に十分高くなるよう確認することが重要です。

色のコントラスト比は、透明度を調整したテキストと背景色の明度の値を比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、テキストコンテンツで 4.5:1 以上、見出しのような大きめのテキストで 3:1 以上のコントラスト比が求められています。大きめのテキストとは、太字ならば 18.66px 以上、または 24px 以上と定義されています。

* WebAIM: Color Contrast Checker
* MDN "WCAG を理解する ― ガイドライン 1.4 の解説"
* Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
公式定義
----

|  |  |
| --- | --- |
| 初期値 | `1` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| パーセント値 | map to the range `[0,1]` |
| 計算値 | 指定値の `number` が [0.0, 1.0] の範囲内にクリップされたものと同じ |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

opacity =   
  <alpha-value>    
  
<alpha-value> =   
  <number>      |  
  <percentage>    
  
```

例
-

### 基本的な例

次の例では、`opacity` プロパティで要素とその内容全体の不透明度を変更することで、テキストを非常に読みにくくしています。

#### HTML


```html
<div class="light">何とか見える程度でしょう。</div>
<div class="medium">簡単に見えるでしょう。</div>
<div class="heavy">とても見やすいでしょう。</div>
```


#### CSS


```css
div {
  background-color: yellow;
  font-weight: bold;
  font-size: 130%;
}
.light {
  opacity: 0.2; /\* Barely see the text over the background \*/
}
.medium {
  opacity: 0.5; /\* See the text more clearly over the background \*/
}
.heavy {
  opacity: 0.9; /\* See the text very clearly over the background \*/
}
```


#### 結果

### ホバー時の透明度の設定

次の例では、ホバー時に不透明度を変更し、親要素の縞模様の背景画像が透けて見えるようにしています。

#### HTML


```html
<div class="wrapper">
  <img
 src="//interactive-examples.mdn.mozilla.net/media/dino.svg"
 alt="MDN Dino"
 width="128"
 height="146"
 class="opacity" />
</div>
```


#### CSS


```css
img.opacity {
  opacity: 1;
}

img.opacity:hover {
  opacity: 0.5;
}

.wrapper {
  width: 200px;
  height: 160px;
  background-color: #f03cc3;
  background-image: linear-gradient(
    90deg,
    transparent 50%,
    rgba(255, 255, 255, 0.5) 50%
  );
  background-size: 20px 20px;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Color Module Level 4 # transparency |

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

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