offset-position - CSS: カスケーディングスタイルシート

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 - CSS: カスケーディングスタイルシート

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
=================

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 - CSS: カスケーディングスタイルシート

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 の状態にします。


ビューポートの概念 - CSS: カスケーディングスタイルシート

ビューポートの概念
=========

この記事では、ビューポートの概念 — ビューポートとは何か、ビューポートとは何か、 CSS, SVG, モバイル端末における影響 — および、視覚ビューポートとレイアウトビューポートの違いをを説明します。

ビューポートとは何か
----------

ビューポートはコンピューターグラフィックの中で現在表示されている領域を表します。ウェブブラウザーの用語では、これは一般にブラウザーウィンドウのうち、ユーザーインターフェイス、メニューバーなどを除いた部分です。すなわち、あなたが見ている文書の部分です。

文書は、この記事のように、とても長くなることがあります。今のビューポートは現在見えているものすべてであり、特に「ビューポートとは何か」の節や、おそらくナビゲーションメニューの一部もあるでしょう。ビューポートの大きさは画面の大きさ、ブラウザーが全画面モードであるかどうか、ユーザーがズームしているかどうかに依存します。この文書における*関連情報*の節のように、ビューポートの外にあるコンテンツは、スクロールして表示するまで画面上で表示されていません。

* アプリケーションを全画面にする必要がないような大きなモニターでは、ビューポートはブラウザーのウィンドウの大きさです。
* 多くのモバイル端末やブラウザーが全画面モードである場合、ビューポートは画面全体です。
* 全画面モードでは、ビューポートは端末の画面であり、ウィンドウはブラウザーのウィンドウであり、ビューポートと同じか小さく、文書はウェブサイトで、これはビューポートよりも高さや幅が大きくなることがあります。

まとめると、ビューポートは基本的に文書のうち、現在見えている部分です。

### ビューポートの大きさは変化する

ビューポートの幅はウィンドウの幅であるとは限りません。ウィンドウや文書の幅や高さを Chrome や Firefox で求めるには、次のようにします。

```js
document.documentElement.clientWidth; /\* 1200 \*/
window.innerWidth; /\* 1200 \*/
window.outerWidth; /\* 1200 \*/
```

```js
document.documentElement.clientHeight; /\* 800 \*/
window.innerHeight; /\* 800 \*/
window.outerHeight; /\* 900 \*/
```

ビューポートの大きさや、同様の大きさを求めるのに役立つ DOM プロパティがあります。

* 文書の要素の `Element.clientWidth` は、文書の内部的な幅を CSS ピクセル単位で、パディングを含みます (ただし、境界、マージン、ある場合は垂直スクロールバーは含みません)。**これがビューポートの幅です**。
* `Window.innerWidth` は、ブラウザーウィンドウのビューポートの CSS ピクセル単位の幅で、もしあれば垂直スクロールバーの幅を含みます。
* `Window.outerWidth` は、ブラウザーウィンドウの外寸の幅で、すべてのウィンドウクロームを含みます。

これらを実験してみると、 `innerWidth` と `outerWidth` は同じに見えましたが、　`innerHeight`　よりも `outerHeight` の方が高さが 100px だけ高くなっていました。これは `outerHeight` にはブラウザーのクロームが含まれているためです。測定はアドレスバーとブックマークバーの合計の高さが 100px のブラウザーで行われましたが、ウィンドウの左右にはクロームが表示されていません。

`innerHeight` と `innerWidth` 内の領域は、一般的に**レイアウトビューポート**と考えられています。ブラウザのクロームはビューポートの一部とはみなされません。

拡大すると、 Firefox と Chrome の両方で、 `innerWidth` と `clientWidth` の新しい CSS ピクセルサイズが報告されます。 `outerWidth` と `outerHeight` で返される値はブラウザーに依存します。 Firefox では新しい値を CSS ピクセルで報告しますが、 Chrome では長さを既定のピクセルサイズで返します。拡大縮小すると次のようになるかもしれません。

```js
document.documentElement.clientWidth; /\* 800 \*/
window.innerWidth; /\* 800 \*/
window.outerWidth; /\* 800 in Firefox, 1200 in chrome \*/
```

```js
document.documentElement.clientHeight; /\* 533 \*/
window.innerHeight; /\* 533 \*/
window.outerHeight; /\* 596 in Firefox, 900 in chrome \*/
```

The viewport was originally 1200 x 800 pixels. Upon zooming in, the viewport became 800 x 533 pixels. This is the *layout viewport*. Sticky headers or footers, with the following styles, will stick to the top and bottom of the *layout viewport* respectively.

```css
body > header {
  position: fixed;
  top: 0;
}
body > footer {
  position: fixed;
  bottom: 0;
}
```

We got the 800 x 533 measurement when we zoomed in using the keyboard. The header and footer stayed flush against the top and bottom of the window. But what if we had pinched-zoomed on a tablet? What if a dynamic keyboard pops open on a phone?

The web contains two viewports, the **layout viewport** and the **visual viewport**. The visual viewport is the part of the web page that is currently visible in the browser and can change. When the user pinch-zooms the page, pops open a dynamic keyboard, or when a previously hidden address bar becomes visible, the visual viewport shrinks but the layout viewport is unchanged.

Sticky headers or footers, as discussed above, stick to the top and bottom of the *layout viewport*, and therefore remain in view when we zoom in with the keyboard. If you pinch-zoom, the layout viewport may not be fully visible. If you magnify from the middle of the layout viewport, the content would expand in all four directions. If you had a sticky header or footer, they would still be stuck to the top or bottom of the layout viewport, but they may not be visible at the top and bottom of the device's screen — which is the visual viewport. The visual viewport is the currently visible portion of the layout viewport. If you scroll down, you are changing the contents of the visual viewport and bringing the bottom of the layout viewport into view, displaying the sticky footer, which will then stay stuck at the bottom.

The visual viewport is the visual portion of a screen not including on-screen keyboards, areas outside of a pinch-zoom area, or other feature that doesn't scale with the dimensions of a page. The visual viewport is the same size as the layout viewport or smaller.

For a page containing iframes, objects, or external SVG, both the containing pages and each included file has their own unique window object. Only the top-level window has a visual viewport that may be distinct from the layout viewport. For included documents, the visual viewport and layout viewport are the same.

### CSS

The layout viewport and visual viewport described above are not the only viewports you will encounter. Any sub-viewport that is fully or partially displayed within the layout viewport is considered a visual viewport.

We generally think of width and height media queries as being relative to the width and height of the browser window. They are actually relative to the viewport, which is the window in the main document but is the intrinsic size of the element's parent in a nested browsing context like objects, iframes and SVG. In CSS, we also have length units based on the viewport size. A `vh` unit is 1% of the layout viewport's height. Similarly, the `vw` unit is 1% of the layout viewport's width.

#### `<iframe>`

Inside an iframe, the visual viewport is the size of the inner width and height of the iframe, rather than the parent document. You can set any height and width on an iframe, but the whole document may not be visible.

If you use viewport length units in your CSS within the iframe document, `1vh` will be 1% of the height of the iframe, and `1vw` will be 1% of the width of the document.

```css
iframe {
  width: 50vw;
}
```

If the iframe is set to 50vw, it will be 50% of the width of the `1200px` parent document in our example above, or `600px`, with `1vw` being `6px`. When zoomed in, the iframe shrinks to `400px` and `1vw` becomes `4px`.

A width-based media query within the iframe document is relative to the iframe's viewport.

```css
@media screen and (min-width: 500px) {
  p {
    color: red;
  }
}
```

If the above CSS is included in the iframe, the paragraphs will become red when the user has zoomed in, but this style does not apply in the non-zoomed-in state.

#### SVG

In an SVG document, the viewport is the visible area of the SVG image. You can set any height and width on an SVG, but the whole image might not be visible. The area that is visible is called the viewport. The size of the viewport can be defined using the width and height attributes of the `<svg>` element.

```html
<svg height="300" width="400"></svg>
```

In this examples, the viewport has an aspect ratio of 3::4, and is, but default, 400 by 300 units, with a unit generally being a CSS pixel.

SVG also has an internal coordinate system defined via the viewbox attribute, which is not related to this viewport discussion.

If you include an SVG file in your HTML, the viewport of the SVG is the initial containing block, or the width and height of the SVG container. Using the `@media` query in your SVG's CSS is relative to that container, not the browser.

```css
@media screen and (min-width: 400px) and (max-width: 500px) {
  /\* css goes here \*/
}
```

Generally, when you write the above media query, the styles are applied if the viewport, generally the browser window, is between 400px and 500px, inclusive. The width media query in the SVG is based on the element in which the SVG is contained — the `<img>` if the source is an SVG file, the SVG itself if the SVG is included directly into the HTML, or the parent if the parent element has a width assigned and — not the viewport's width. With the above media query being in our SVG file, the CSS is applied if the SVG container is between 400 and 500px.

### JavaScript

The Visual Viewport API (en-US) provides a mechanism for querying and modifying the properties of the visual viewport.

モバイルのビューポート
-----------

Mobile devices come in all ~~shapes and~~ sizes, with screens of differing device pixel ratios. The mobile browser's viewport is the area of the window in which web content can be seen, which is not necessarily the same size as the rendered page. Mobile browsers render pages in a virtual window or viewport, generally at 980px, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once. Users can then pan and zoom to see different areas of the page. For example, if a mobile screen has a width of 320px, a website might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the 320px space, which, depending on the design, is illegible for many if not everyone. To tell a mobile browser to use the viewport width instead of the default 980px as the width of the screen, developers can include a viewport meta tag, like the following:

```html
<meta name="viewport" content="width=device-width" />
```

The `width` property controls the size of the viewport. It should preferably be set to `device-width`, which is the width of the screen in CSS pixels at a scale of 100%. There are other properties, including `maximum-scale`, `minimum-scale`, and `user-scalable`, which control whether users can zoom the page in or out, but the default values are the best for accessibility and user experience, so these can be omitted.

関連情報
----

* Visual Viewport API (en-US)
* `<meta>`, specifically `<meta name="viewport">`
* Using the viewport meta tag to control layout on mobile browsers


@keyframes - CSS: カスケーディングスタイルシート

@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 - CSS: カスケーディングスタイルシート

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 - CSS: カスケーディングスタイルシート

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 - CSS: カスケーディングスタイルシート

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 - CSS: カスケーディングスタイルシート

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 - CSS: カスケーディングスタイルシート

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`
* 複数の背景の使用


grid-column-end - CSS: カスケーディングスタイルシート

grid-column-end
===============

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-column-end`** は CSS のプロパティで、グリッドの配置に線または区間を使用したり、使用しなかったりして (自動)、グリッド列内のグリッドアイテムの末尾位置、すなわちグリッド領域のブロックの末尾側の端を指定します。

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

構文
--

```css
/\* キーワード値 \*/
grid-column-end: auto;

/\* <custom-ident> 値 \*/
grid-column-end: somegridarea;

/\* <integer> + <custom-ident> 値 \*/
grid-column-end: 2;
grid-column-end: somegridarea 4;

/\* span + <integer> + <custom-ident> 値 \*/
grid-column-end: span 3;
grid-column-end: span somegridarea;
grid-column-end: 5 somegridarea span;

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

### 値

`auto`

プロパティをグリッドアイテムの配置に影響させず、自動的に配置し、間隔を自動的に取るか、既定の `1` とするためのキーワードです。

`<custom-ident>`

`<custom-ident>-end` という名前の付いた線がある場合、これはそのような線の先頭がグリッドアイテムの配置に関わります。

**メモ:** 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 `grid-column-end: foo;` と指定すると名前付きグリッド領域の末尾側の端を選択します (その前に `foo-end` という名前の線が明示的に存在しない限り)。

そうでなければ、これは `<custom-ident>` に沿って整数の `1` が指定されたものとして扱われます。

`<integer> && <custom-ident>?`

n 番目のグリッド線をグリッドアイテムの配置に使用します。負の整数が指定された場合は、逆方向にカウントし、明示的なグリッドの末尾の端から始めます。

名前が `<custom-ident>` として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。

`0` の `<integer>` 値は無効です。

`span && [ <integer> || <custom-ident> ]`

グリッドアイテムのグリッド領域の列の末尾の端が先頭の端から n 本になるように、グリッドアイテムの配置にグリッドスパンを設定します。

名前が `<custom-ident>` として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分おにない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。

<integer> が省略された場合の既定値は `1` です。負の数や `0` は無効です。

`<custom-ident>` は `span` の値を取ることができません。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | 包含ブロックがグリッドコンテナーであるグリッドアイテムまたは絶対位置指定のボックス |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

grid-column-end =
  <grid-line>

<grid-line> =
  auto                                                |
  <custom-ident>                                      |
  [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ]  |
  [ span && [ <integer [1,∞]> || <custom-ident> ] ]

```

例
-

### グリッドアイテムの列の末尾位置の設定

#### HTML

```html
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
</div>
```

#### CSS

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

.box2 {
  grid-column-start: 1;
  grid-row-start: 3;
  grid-row-end: 5;
}
```

```
\* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.nested {
  border: 2px solid #ffec99;
  border-radius: 5px;
  background-color: #fff9db;
  padding: 1em;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # line-placement |

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

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

関連情報
----

* 関連する CSS プロパティ: `grid-column-start`, `grid-column`, `grid-row-start`, `grid-row-end`, `grid-row`
* グリッドレイアウトガイド: 線に基づく配置を使用したグリッドレイアウト
* 動画チュートリアル: *Line-based placement*


mask-border-repeat - CSS: カスケーディングスタイルシート

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`


::-webkit-progress-value - CSS: カスケーディングスタイルシート

::-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`


revert - CSS: カスケーディングスタイルシート

revert
======

**`revert`** は CSS のキーワードで、現在の要素にカスケードされたプロパティの値を、現在のスタイルオリジンが変更を行わなければそのプロパティが持っていたであろう値に戻します。したがって、プロパティは、ユーザーエージェント設定値、ユーザー設定値、継承値（継承可能な場合）、または初期値のいずれかにリセットされます。これは、 CSS の一括指定プロパティ `all` を含め、あらゆる CSS プロパティに適用することができます。

このキーワードは、ロールバックされるスタイルに到達するまで、オーバーライドされたすべてのスタイルをカスケードから削除します。

* サイト独自のスタイル（作成者のオリジン）で使用された場合、 `revert` はプロパティのカスケードされた値を、ユーザー独自のスタイルが存在する場合はそのスタイルにロールバックし、それ以外の場合はユーザーエージェントの既定のスタイルにロールバックします。
* ユーザー独自のスタイルシートで使用された場合、またはスタイルがユーザーによって適用された場合（ユーザーオリジン）、 `revert` はカスケードされた値をユーザーエージェントの既定のスタイルにロールバックします。
* ユーザーエージェントの既定のスタイル内で使用された場合、このキーワードは機能的に `unset` と等価です。

`revert` キーワードは多くの場合、 `unset` とまったく同じ動作をします。唯一の違いは、ブラウザーやユーザーによって作成された独自スタイルシート（ブラウザー側に設定されたもの）が設定した値があるプロパティについてです。

revert は、リセットした要素の子に適用されているルールには影響しません（ただし、子に対する親のルールの効果は除去されます）。つまり、すべてのセクションに `color: green` を設定し、特定のセクションに `all: revert` を設定した場合、そのセクションの色は黒になります。しかし、すべての段落を赤にするルールがある場合、すべての段落はすべてのセクションで赤のままです。

**メモ:** revert は単なる値です。 `revert` の値は詳細度を使用して上書きすることができます。

**メモ:** `revert` キーワードは `initial` キーワードとは異なりますし、混同しないでください。これは CSS の仕様書でプロパティごとに定義された初期値です。それに対して、既定値はユーザーエージェントのスタイルシートが CSS セレクターに基づいて定義しています。

例えば、 `display` プロパティの初期値は `inline` ですが、普通のユーザーエージェントスタイルシートは、 `display` の既定値を `<div>` では `block`、 `<table>` では `table` というように設定します。

例
-

### revert と unset

`revert` と `unset` は似ていますが、一部の要素、一部のプロパティでは異なります。

以下の例では、グローバルスタイルシートで独自の `font-weight` を設定していますが、 HTML 文書のインラインで `revert` および `unset` を適用しようとしています。 `revert` キーワードはテキストを太字に戻します。これはほとんどのブラウザーで見出しの既定値だからです。 `unset` キーワードは、継承されたプロパティとして、 `font-weight` の値を本体から継承するため、テキストを通常のままにします。

#### HTML

```html
<h3 style="font-weight: revert; color: revert;">
  これは元の font-weight (bold) と color: black です
</h3>
<p>いくらかのテキスト</p>
<h3 style="font-weight: unset; color: unset;">
  これは font-weight: normal ですが、 color: black になります
</h3>
<p>いくらかのテキスト</p>
```

#### CSS

```css
h3 {
  font-weight: normal;
  color: blue;
}
```

#### 結果

### すべてを revert

すべての値を revert することは、何かを大きく変更した後、既定値に戻したい場合に有効です。つまり、上で `font-weight` と `color` を別個に戻す代わりに、`all` に `revert` キーワードを適用することで、これらをすべて一度に戻すことができます。

#### HTML

```html
<h3>ここは独自のスタイルです</h3>
<p>いくらかのテキスト</p>
<h3 style="all: revert">これはブラウザーやユーザーの既定値に戻されます</h3>
<p>いくらかのテキスト</p>
```

#### CSS

```css
h3 {
  font-weight: normal;
  color: blue;
  border-bottom: 1px solid grey;
}
```

#### 結果

### 親で revert

revert は、何らかのルールで選択した要素の値を、その要素に限って効果的に削除します。例として、セクションに緑色、段落に赤色を設定します。

#### HTML

```html
<main>
  <section>
    <h3>これは深緑になります</h3>
    <p>この段落のテキストは赤になります。</p>
    これも深緑になります。
  </section>
  <section class="with-revert">
    <h3>これは黒になります</h3>
    <p>この段落のテキストは赤になります。</p>
    これも黒になります。
  </section>
</main>
```

#### CSS
```

main {
  border: 3px solid steelblue;
}

section {
  margin: 0.5rem;
  border: 2px dashed darkgreen;
}
```

```css
main {
  color: steelblue;
}
section {
  color: darkgreen;
}
p {
  color: red;
}
section.with-revert {
  color: revert;
}
```

#### 結果

section の color プロパティが元に戻されたにもかかわらず、段落の色が赤のままであることに注目してください。また、ヘッダーとプレーンテキストノードの両方が黒色であることにも注意してください。これは、 2 番目のセクションに `section { color: darkgreen; }` が存在しないのとまったく同じです。

また、ユーザーエージェントもユーザーも `<h3>` や `<section>` の色の値を上書きしない場合、`color` プロパティは継承プロパティであるため、`steelblue` の色は `<main>` から継承されます。

仕様書
---

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

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

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

関連情報
----

* `initial` を使用すると、プロパティを初期値に設定します。
* `inherit` キーワードを使用すると、要素のプロパティを親と同じ値にします。
* `revert-layer` キーワードを使用すると、プロパティを直前のカスケードレイヤーで確立された値に戻します。
* `unset` キーワードを使用すると、継承プロパティは継承値に、それ以外は初期値に設定します。
* `all` プロパティは、すべてのプロパティを一度に initial, inherit, revert, unset の状態にします。


border-inline-start-color - CSS: カスケーディングスタイルシート

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 - CSS: カスケーディングスタイルシート

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 - CSS: カスケーディングスタイルシート

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> - CSS: カスケーディングスタイルシート

<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 - 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 - CSS: カスケーディングスタイルシート

-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 - CSS: カスケーディングスタイルシート

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 の **`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: カスケーディングスタイルシート

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> - CSS: カスケーディングスタイルシート

<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` メディア特性


background-image - CSS: カスケーディングスタイルシート

background-image
================

**`background-image`** は CSS のプロパティで、要素に 1 つ以上の背景画像を設定します。

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

画像はお互いの上に積み重ねるコンテキストレイヤーに描画されます。最初に指定されたレイヤーが、ユーザーに対し最も手前にあるかのように描画されます。

要素の境界は背景画像よりも上、 `background-color` は背景画像より下に描画されます。画像がボックスとその境界に対し相対的にどう描画されるかは、 `background-clip` および `background-origin` プロパティによって定義されます。

指定された画像を描画することができない (例えば、指定された URI が指し示すファイルをロードできない) 場合、ブラウザーはその指定を `none` 値であるかのように処理します。

**メモ:** たとえ画像が不透明で通常は色が表示されないとしても、ウェブ開発者は常に `background-color` を指定すべきです。例えばネットワークが切断された場合など、もし画像が読み込めなかったときに、背景色がフォールバックとして使われます。

構文
--

それぞれの背景画像は、キーワード `none` または `<image>` 値として指定されます。

複数の背景画像を指定するには、複数の値をカンマで区切って指定してください。

```css
background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 0, 0.5),
    rgba(0, 0, 255, 0.5)
  ), url("catfront.png");

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

### 値

`none`

画像を用いないことを表すキーワード。

`<image>`

表示する背景を記述する `<image>`。複数の背景に対応している場合は、カンマ区切りで複数指定することができます。

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

ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。

* MDN "WCAG を理解する ― ガイドライン 1.1 の解説"
* Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0
公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | すべての要素。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | なし |
| 計算値 | 指定通り、ただし `url` の値は絶対パスになる |
| アニメーションの種類 | 離散値 |

形式文法
----
```

background-image =
  <bg-image>#

<bg-image> =
  <image>  |
  none

<image> =
  <url>       |
  <gradient>

<url> =
  <url()>  |
  <src()>

<url()> =
  url( <string> <url-modifier>\* )  |
  <url-token>

<src()> =
  src( <string> <url-modifier>\* )

```

例
-

### 背景画像の重ね合わせ

星の画像は一部透過となっており、猫の画像の上に重ねられている点に注意してください。

#### HTML

```html
<div>
  <p class="catsandstars">This paragraph is full of cats<br />and stars.</p>
  <p>This paragraph is not.</p>
  <p class="catsandstars">Here are more cats for you.<br />Look at them!</p>
  <p>And no more.</p>
</div>
```

#### CSS

```css
p {
  font-size: 1.5em;
  color: #fe7f88;
  background-image: none;
  background-color: transparent;
}

div {
  background-image: url("mdn\_logo\_only\_color.png");
}

.catsandstars {
  background-image: url("startransparent.gif"), url("catfront.png");
  background-color: transparent;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* CSS での画像スプライトの実装
* `<img>`
* 画像に関するデータ型: `<image>`, `<gradient>`
* 画像に関する関数:
    + `cross-fade()`
    + `element()`
    + `image()`
    + `image-set()`
    + `linear-gradient()`
    + `radial-gradient()`
    + `conic-gradient()`
    + `repeating-linear-gradient()`
    + `repeating-radial-gradient()`
    + `repeating-conic-gradient()`
    + `paint()`
    + `url()`


content - CSS: カスケーディングスタイルシート

content
=======

**`content`** は CSS のプロパティで、ある要素を生成された値で置き換えます。 `content` プロパティを使用して挿入されたオブジェクトは、**無名の置換要素** になります。

```css
/\* 他の値と組み合わせることができないキーワード \*/
content: normal;
content: none;

/\* <image> 値 \*/
content: url("http://www.example.com/test.png");
content: linear-gradient(#e66465, #9198e5);
content: image-set("image1x.png" 1x, "image2x.png" 2x);

/\* 生成コンテンツの代替テキスト、レベル 3 の仕様書で追加 \*/
content: url("http://www.example.com/test.png") / "This is the alt text";

/\* <string> 値 \*/
content: "prefix";

/\* <counter> 値、任意で <list-style-type> \*/
content: counter(chapter_counter);
content: counter(chapter_counter, upper-roman);
content: counters(section_counter, ".");
content: counters(section_counter, ".", decimal-leading-zero);

/\* HTML 属性値にリンクした attr() 値 \*/
content: attr(value string);

/\* 言語や位置に依存したキーワード \*/
content: open-quote;
content: close-quote;
content: no-open-quote;
content: no-close-quote;

/\* normal と none を除き、複数の値が同時に使用可 \*/
content: open-quote counter(chapter_counter);

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

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

構文
--

### 値

`none`

擬似要素に適用された場合は、その擬似要素は生成されません。要素に適用された場合は、この値は効果がありません。

`normal`

`::before` および `::after` 擬似要素では `none` として計算されます。

`<string>`

要素の「代替テキスト」を指定します。この値は任意の数のテキスト文字です。ラテン文字以外は Unicode エスケープシーケンスを使用してエンコードする必要があります。例えば、 `\000A9` は著作権記号を表します。

`<image>`

`<image>` です。 `url()` または `<gradient>` データ型、または `element()` 関数で定義されるウェブページの一部です。

`counter()`

CSS カウンターの値で、通常は `<counter-reset>` および `<counter-increment>` プロパティで定義され、計算によって生み出される数値です。 `counter()` または `counters()` 関数を使用して表示することができます。

`counter()` 関数には、 'counter(*名前*)' または 'counter(*名前*, スタイル)' の二つの形式があります。生成されるテキストは、その擬似要素のスコープにおけるその名前の最も内側のカウンターです。`<list-style-type>` で指定されたスタイルで整形されます (`decimal` が既定値です)。

`counters()` 関数も、 'counters(*名前*, *文字列*)' または 'counters(*名前*, *文字列*, *スタイル*)' の二つの形式があります。生成されるテキストは、その擬似要素のスコープにおけるその名前のすべてのカウンターの値であり、外側から内側に向けて、指定された文字列で区切られます。カウンターは指定されたスタイルで表示されます(`decimal` が既定値です)。

`attr(x)`

要素の属性の値 `x` を文字列として返します。属性 `x` が存在しない場合は、空文字列が返されます。属性名の大文字と小文字が区別されるかどうかは、文書の言語に依存します。

`open-quote` | `close-quote`

これらの値は `quotes` プロパティの対応する文字列に置き換えられます。

`no-open-quote` | `no-close-quote`

内容はありませんが、引用符の入れ子の階層を増加 (または減少) させます。

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

CSS で生成されるコンテンツは、 DOM には含まれません。そのため、これはアクセシビリティツリーでは表現されず、支援技術とブラウザーの組み合わせによってはアナウンスされないことがあります。そのコンテンツがページの目的を理解する上で重要な情報を含んでいるのであれば、メイン文書に含めたほうが適切です。

* Accessibility support for CSS generated content – Tink
* WCAG の解説、ガイドライン 1.3 – MDN
* Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0
公式定義
----

|  |  |
| --- | --- |
| 初期値 | `normal` |
| 適用対象 | すべての要素、ツリーに現れる擬似要素、ページのマージンボックス |
| 継承 | なし |
| 計算値 | 要素の場合は、常に `normal` と計算される。 `::before` および `::after` の場合、 `normal` が指定されていれば計算値は `none`。それ以外の場合、 URI 値の場合は絶対 URI、 `attr()` 値の場合は結果の文字列、その他のキーワードについては指定通り。 |
| アニメーションの種類 | 離散値 |

形式文法
----
```

content =
  normal                                              |
  none                                                |
  [ <content-replacement> | <content-list> ] [ / [ <string> | <counter> ]+ ]?  |
  <element()>

<content-replacement> =
  <image>

<content-list> =
  [ <string> | <counter()> | <counters()> | <content()> | <attr()> ]+

<counter> =
  <counter()>   |
  <counters()>

<element()> =
  element( <id-selector> )

<image> =
  <url>       |
  <gradient>

<counter()> =
  counter( <counter-name> , <counter-style>? )

<counters()> =
  counters( <counter-name> , <string> , <counter-style>? )

<content()> =
  content( [ text | before | after | first-letter | marker ]? )

<attr()> =
  attr( <attr-name> <attr-type>? , <declaration-value>? )

<id-selector> =
  <hash-token>

<url> =
  <url()>  |
  <src()>

<counter-style> =
  <counter-style-name>  |
  <symbols()>

<attr-name> =
  [ <ident-token> '|' ]? <ident-token>

<attr-type> =
  string            |
  url               |
  ident             |
  color             |
  number            |
  percentage        |
  length            |
  angle             |
  time              |
  frequency         |
  flex              |
  <dimension-unit>

<url()> =
  url( <string> <url-modifier>\* )  |
  <url-token>

<src()> =
  src( <string> <url-modifier>\* )

<symbols()> =
  symbols( <symbols-type>? [ <string> | <image> ]+ )

<symbols-type> =
  cyclic      |
  numeric     |
  alphabetic  |
  symbolic    |
  fixed

```

例
-

### 見出しと引用符

この例では引用部分の周りに引用符を挿入し、見出しの前に "Chapter" の語を追加します。

#### HTML

```html
<h1>5</h1>
<p>
  According to Sir Tim Berners-Lee,
  <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet"
 >I was lucky enough to invent the Web at the time when the Internet already
    existed - and had for a decade and a half.</q
 >
  We must understand that there is nothing fundamentally wrong with building on
  the contributions of others.
</p>

<h1>6</h1>
<p>
  According to the Mozilla Manifesto,
  <q cite="http://www.mozilla.org/en-US/about/manifesto/"
 >Individuals must have the ability to shape the Internet and their own
    experiences on the Internet.</q
 >
  Therefore, we can infer that contributing to the open web can protect our own
  individual experiences on it.
</p>
```

#### CSS

```css
q {
  color: blue;
}

q::before {
  content: open-quote;
}

q::after {
  content: close-quote;
}

h1::before {
  content: "Chapter "; /\* 最後の空白は、追加コンテンツと
 残りのコンテンツの間を区切る
 ものです \*/
}
```

#### 結果

### テキストと組み合わせる画像

この例はリンクの前に画像を挿入します。画像が見つからなければ、代わりにテキストを挿入します。

#### HTML

```html
<a href="https://www.mozilla.org/en-US/">Mozilla Home Page</a>
```

#### CSS

```css
a::before {
  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") /
    " MOZILLA: ";
  font:
    x-small Arial,
    sans-serif;
  color: gray;
}
```

#### 結果

### クラスのターゲッティング

この例はリストの特定の項目の後に追加のテキストを挿入します。

#### HTML

```html
<h2>Paperback Best Sellers</h2>
<ol>
  <li>Political Thriller</li>
  <li class="new-entry">Halloween Stories</li>
  <li>My Biography</li>
  <li class="new-entry">Vampire Romance</li>
</ol>
```

#### CSS

```css
.new-entry::after {
  content: " New!"; /\* 先頭の空白は、追加コンテンツと
 残りのコンテンツの間を区切る
 ものです \*/
  color: red;
}
```

#### 結果

### 画像および要素の属性

この例はそれぞれのリンクの前に画像を挿入し、後に `id` 属性を追加します。

#### HTML

```html
<ul>
  <li><a id="moz" href="https://www.mozilla.org/"> Mozilla Home Page</a></li>
  <li>
    <a id="mdn" href="https://developer.mozilla.org/">
      Mozilla Developer Network</a
 >
  </li>
</ul>
```

#### CSS

```css
a {
  text-decoration: none;
  border-bottom: 3px dotted navy;
}

a::after {
  content: " (" attr(id) ")";
}

#moz::before {
  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico");
}

#mdn::before {
  content: url("mdn-favicon16.png");
}

li {
  margin: 1em;
}
```

#### 結果

### 要素の置き換え

この例は、要素の内容を画像で置き換えます。要素の内容を `url()` または `<image>` の値のどちらかで置き換えることができます。 `::before` または `::after` で追加された内容は、要素の中身が置き換えられるときは生成されません。

#### HTML

```html
<div id="replaced">Mozilla</div>
```

#### CSS

```css
#replaced {
  content: url("mdn.svg");
}

#replaced::after {
  /\* 要素の置換に対応している場合は表示されない \*/
  content: " (" attr(id) ")";
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Generated Content Module Level 3 # content-property |

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

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

関連情報
----

* 置換要素
* `::after`
* `::before`
* `::marker`
* `quotes`
* `url()` 関数


border-image - CSS: カスケーディングスタイルシート

border-image
============

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

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

* Learn more
* See full compatibility
* Report feedback
**`border-image`** は CSS のプロパティで、指定された要素の周りに画像を描きます。これは要素の通常の境界を置き換えます。

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

**メモ:** 境界画像の読み込みに失敗したときのために、 `border-style` を指定してください。仕様では厳密には要求されていませんが、`border-style` が `none` または `border-width` が `0` の場合、境界画像を描画しないブラウザーもあります。

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

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

* `border-image-outset`
* `border-image-repeat`
* `border-image-slice`
* `border-image-source`
* `border-image-width`
構文
--

```css
/\* source | slice \*/
border-image: linear-gradient(red, blue) 27;

/\* source | slice | repeat \*/
border-image: url("/images/border.png") 27 space;

/\* source | slice | width \*/
border-image: linear-gradient(red, blue) 27 / 35px;

/\* source | slice | width | outset | repeat \*/
border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;

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

`border-image` プロパティは以下に挙げた 1 つから 5 つの値で指定します。

**メモ:** `border-image-source` の 計算値 が `none` であったり、画像が表示できなかったりした場合は、 `border-style` が代わりに表示されます。

### 値

`<'border-image-source'>`

元となる画像です。 `border-image-source` を参照してください。

`<'border-image-slice'>`

source の画像を領域に分割する座標です。4つまでの値が指定できます。 `border-image-slice` を参照してください。

`<'border-image-width'>`

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

`<'border-image-outset'>`

要素の縁から境界画像までの間隔です。4つまでの値が指定できます。 `border-image-outset` を参照してください。

`<'border-image-repeat'>`

source の画像の辺の領域を境界画像の寸法にどのように合わせるかを定義します。2つまでの値が指定できます。 `border-image-repeat` を参照してください。

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

支援技術は境界画像を解釈することができません。画像にページ全体の目的を理解するために重要な情報が含まれている場合は、文書内に意味的に記述したほうがいいでしょう。

* MDN "WCAG を理解する ― ガイドライン 1.1 の解説"
* Understanding Success Criterion 1.1.1 | Understanding WCAG 2.0
公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `border-image-source`: `none`
* `border-image-slice`: `100%`
* `border-image-width`: `1`
* `border-image-outset`: `0`
* `border-image-repeat`: `stretch`
 |
| 適用対象 | すべての要素。ただし `border-collapse` が `collapse` のときはテーブル要素内部にあるものを除く。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| パーセント値 | 一括指定の次の各プロパティとして* `border-image-slice`: 境界画像の大きさに対する相対値
* `border-image-width`: 境界画像領域の幅または高さに対する相対値
 |
| 計算値 | 一括指定の次の各プロパティとして* `border-image-outset`: 指定通り。ただし相対的な長さはは絶対的な長さに変換される
* `border-image-repeat`: 指定通り
* `border-image-slice`: 1 つから 4 つのパーセント値 (指定通り) または絶対的な長さ。指定されていれば続けてキーワード `fill`
* `border-image-source`: `none` または画像の絶対化した URI
* `border-image-width`: 指定通り。ただし相対的な長さはは絶対的な長さに変換される
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `border-image-outset`: 計算値の型による
* `border-image-repeat`: 離散値
* `border-image-slice`: 計算値の型による
* `border-image-source`: 離散値
* `border-image-width`: 計算値の型による
 |

形式文法
----
```

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

```

例
-

### ビットマップ

この例では、要素の境界にダイヤモンド模様を適用します。 source の画像は、縦と横にダイヤモンドが 3 つずつ並んだ 81 × 81 ピクセルの ".png" ファイルです。

![境界画像の例](/ja/docs/Web/CSS/border-image/border.png)

#### HTML

```html
<div id="bitmap">この要素はビットマップベースの境界画像に囲まれています。</div>
```

#### CSS

個々のダイヤモンドの大きさに一致するように、3で割れる81の値を使用するか、角と辺の領域を分割するための `27` を使用します。境界画像が要素の背景の辺の中央になるように、 outset の値を幅の半分にします。最後に、 `round` に repeat の値を設定して、境界線の断片が等分に合うように、つまり、クリッピングをしたり隙間ができたりしないようにします。

```css
#bitmap {
  width: 200px;
  background-color: #ffa;
  border: 36px solid orange;
  margin: 30px;
  padding: 10px;

  border-image: url("border.png") 27 / 36px 28px 18px 8px / 18px 14px 9px 4px
    round;
}
```

#### 結果

### グラデーション

#### HTML

```html
<div id="gradient">この要素はグラデーションの境界に囲まれています。</div>
```

#### CSS

```css
#gradient {
  width: 200px;
  border: 30px solid;
  border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60;
  padding: 20px;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* `border`
* `outline`
* `box-shadow`
* `background-image`
* `url()` 関数
* グラデーション関数: `conic-gradient()`, `repeating-conic-gradient()`, `linear-gradient()`, `repeating-linear-gradient()`, `radial-gradient()`, `repeating-radial-gradient()`


counter() - CSS: カスケーディングスタイルシート

counter()
=========

**`counter()`** は CSS の関数で、指定された名前付きカウンターの現在値があれば、その文字列を返します。擬似要素において用いるのが多いものの、理論的には `<string>` に対応するすべての箇所で用いることができます。

```css
/\* 単純な使用法 \*/
counter(countername);

/\* カウンターの表示の変更 \*/
counter(countername, upper-roman)
```

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

カウンター自身には視覚的効果が何もありません。 `counter()` 関数 (および `counters()` 関数) は開発者が定義した文字列 (または画像) を返すことでカウンターは利用価値が生まれます。

**メモ:** `counter()` 関数は CSS プロパティとも併用できますが、 `content` 以外のプロパティにおける対応は実験的であり、型または単位の引数への対応は限られています。

ブラウザーの互換性の表を注意深く確認してから本番環境に用いてください。

構文
--

### 値

`<custom-ident>`

カウンターを識別する名前であり、`counter-reset` および `counter-increment` に用いた名前と、大文字小文字まで同一でなければなりません。名前をダッシュ 2 つで始めることはできず、また `none`, `unset`, `initial`, `inherit` という名前は禁止です。

`<counter-style>`

`<list-style-type>` 名、 `<@counter-style>` 名、 `symbols()` 関数の何れかです。カウンタースタイル名には `numeric`, `alphabetic`, `symbolic` などの単純な定義済みスタイル、より複雑なアジアやエチオピアのカウンタースタイル、その他の定義済みカウンタースタイルがあります。省略された場合は、既定で `decimal` になります。

### 形式文法
```

<counter()> =
  counter( <counter-name> , <counter-style>? )

<counter-style> =
  <counter-style-name>  |
  <symbols()>

<symbols()> =
  symbols( <symbols-type>? [ <string> | <image> ]+ )

<symbols-type> =
  cyclic      |
  numeric     |
  alphabetic  |
  symbolic    |
  fixed

<image> =
  <url>       |
  <gradient>

<url> =
  <url()>  |
  <src()>

<url()> =
  url( <string> <url-modifier>\* )  |
  <url-token>

<src()> =
  src( <string> <url-modifier>\* )

```

例
-

### 既定値と upper-roman との比較

#### HTML

```html
<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>
```

#### CSS

```css
ol {
  counter-reset: listCounter;
}
li {
  counter-increment: listCounter;
}
li::after {
  content: "[" counter(listCounter) "] == [" counter(listCounter, upper-roman)
    "]";
}
```

#### 結果

### decimal-leading-zero と lower-alpha との比較

#### HTML

```html
<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>
```

#### CSS

```css
ol {
  counter-reset: count;
}
li {
  counter-increment: count;
}
li::after {
  content: "[" counter(count, decimal-leading-zero) "] == [" counter(
      count,
      lower-alpha
    )
    "]";
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # counter-functions |

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

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

関連情報
----

* CSS カウンターの使用
* `counter-reset`
* `counter-set`
* `counter-increment`
* `@counter-style`
* CSS の `counters()` 関数


scroll-padding-inline-end - CSS: カスケーディングスタイルシート

scroll-padding-inline-end
=========================

`scroll-padding-inline-end` プロパティは、スクロールポートの*最適表示領域*のインライン方向における末尾側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。

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

構文
--

```css
/\* キーワード値 \*/
scroll-padding-inline-end: auto;

/\* <length> 値 \*/
scroll-padding-inline-end: 10px;
scroll-padding-inline-end: 1em;
scroll-padding-inline-end: 10%;

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

### 値

`<length-percentage>`

スクロールポートのインライン方向の末尾側からの内側のオフセットで、有効な長さまたはパーセント値です。

`auto`

オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | スクロールコンテナー |
| 継承 | なし |
| パーセント値 | スクロールコンテナーのスクロールポートに対する相対値 |
| 計算値 | 指定通り |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

scroll-padding-inline-end =
  auto                       |
  <length-percentage [0,∞]>

<length-percentage> =
  <length>      |
  <percentage>

```

仕様書
---

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # padding-longhands-logical |

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

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

関連情報
----

* CSS スクロールスナップ
* Well-Controlled Scrolling with CSS Scroll Snap


background-position - CSS: カスケーディングスタイルシート

background-position
===================

**`background-position`** は CSS のプロパティで、それぞれの背景画像の初期位置を設定します。位置は `background-origin` で設定された位置レイヤーからの相対です。

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

構文
--

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

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

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

/\* 複数の画像 \*/
background-position:
  0 0,
  center;

/\* 辺からのオフセット値 \*/
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;

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

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

### 値

`<position>`

`<position>` です。位置は要素のボックスの辺を基準にして項目を配置するための X/Y 座標を定義します。1～4つの値を使用して定義できます。2つのキーワード値でない値を使用する場合は、最初の値が水平位置を表し、2つ目の値が垂直位置を表します。1つの値しか指定されない場合、2つ目の値は `center` とみなされます。3つまたは4つの値が使用された場合は、 length-percentage 値はその前のキーワード値に対するオフセットです。

**値 1 つの構文:** 値は以下のようになります。

* `center` のキーワード値の場合は、画像を中央揃えにします。
* キーワード値 `top`、 `left`、 `bottom`、 `right` のうちの一つの場合。アイテムを配置する辺を指定します。もう一方の寸法が 50% に設定されていれば、指定された端までの間の中央に配置されます。
* `<length>` または `<percentage>` の場合。これは左からの相対位置の X 座標を指定し、 Y 座標は 50% に設定されます。

**値 2 つの構文:** 1 つ目の値が X を定義し、もう 1 つの値が Y を定義します。両方が以下の値を取ることができます。

* キーワード値 `top`、 `left`、 `bottom`、 `right` のうちの一つの場合。ここで `left` または `right` が指定された場合は、これが X 座標を定義し、もう一方の値が Y 座標になります。 `top` または `bottom` が指定された場合は、これが Y 座標を定義し、もう一方の値が X 座標を定義します。
* `<length>` または `<percentage>` の場合。もう一方の値が `left` または `right` の場合、この値は上辺からの相対的な Y 座標を定義します。もう一方の値が `top` または `bottom` の場合、この値は左辺からの相対的な X 座標を定義します。両方の値が `<length>` または `<percentage>` の値である場合は、最初の値が X 座標を定義し、2 つ目の値が Y 座標を定義します。
* 注: 一方の値が `top` または `bottom` である場合、もう一方の値を `top` または `bottom` にすることはできません。一方の値が `left` または `right` である場合、もう一方の値を `left` または `right` にすることはできません。すなわち、例えば `top top` や `left right` は妥当ではありません。
* 既定値は `top left` または `0% 0%` です。

**値 3 つの構文:** 2 つの値はキーワード値で、3 つ目の値はその前の値のオフセットです。

* 最初の値はキーワード値 `top`, `left`, `bottom`, `right`, `center` のうちの 1 つです。ここで `left` または `right` が指定された場合は、これは X 座標を定義します。 `top` または `bottom` が指定された場合は、これは Y 座標を定義し、もう一方のキーワード値が X 座標を定義します。
* `<length>` または `<percentage>` 値が 2 つ目の値であった場合は、最初の値に対するオフセットです。3 つ目の値であった場合は、2 つ目の値に対するオフセットです。
* 単一の長さまたはパーセント値は、その前のキーワード値に対するオフセットです。1 つのキーワードに 2 つの keyword with two `<length>` または `<percentage>` 値の組み合わせは無効です。

**値 4 つの構文:** 1 つ目と 3 つ目の値は、X と Y を定義するキーワード値で、2 つ目と 4 つ目の値は、先行する X と Y のキーワード値のオフセットです。

* 1 つ目と 3 つ目の値は `top`, `left`, `bottom`, `right` のうちの 1 つです。ここで `left` または `right` が指定された場合、これは X を定義します。 `top` または `bottom` が指定された場合、これは Y を表し、もう一方のキーワード値が X を表します。
* 2 つ目と 4 つ目の値は `<length>` または `<percentage>` の値です。2 つ目の値は 1 つ目のキーワードのオフセットです。4 つ目の値は 3 つ目の値のオフセットです。

### パーセント値について

指定された背景画像の位置のパーセント値のオフセットは、コンテナーに対して相対的なものです。 0% の値は、背景画像の左 (または上) の端がコンテナーの対応する左 (または上) の端に整列していることを意味するか、または、画像の 0% マークがコンテナーの 0% マーク上にあることを意味します。 100％ の値は、背景画像の*右* (または*下*) の縁がコンテナーの*右* (または*下*) の縁と揃うか、または画像の 100％ マークがコンテナーの 100% マーク上になることを意味します。したがって、水平方向または垂直方向に 50% の値を設定すると、画像の 50% マークがコンテナーの 50% マーク上になるので、背景画像が中央に位置することになります。同様に、 `background-position: 25% 75%` は、画像の左から 25%、上から 75% の位置にある点が、コンテナーの左から 25%、上から 75% の位置にあるコンテナーの点に配置されることを意味します。

基本的に何が起こるかというと、背景画像の寸法が対応するコンテナーの寸法から*減算され*、その結果の値のパーセント値が左端（または上端）からの直接のオフセットとして使用されます。
```

(コンテナーの幅 - 画像の幅) * (position x%) = (x オフセット値)
(コンテナーの高さ - 画像の高さ) * (position y%) = (y オフセット値)
```

X 軸を例にすると、幅 300px の画像があり、それを幅 100px のコンテナーに入れて、 background-size を auto に設定して使用しているとします。
```

100px - 300px = -200px (コンテナーと画像の差)
```

ですから、位置のパーセント値が -25%, 0%, 50%, 100%, 125% であった場合、画像とコンテナーの橋のオフセット値は以下のようになります。
```

-200px * -25% = 50px
-200px * 0% = 0px
-200px * 50% = -100px
-200px * 100% = -200px
-200px * 125% = -250px
```

そのため、この例の結果の値では、**画像**の**左端**が**コンテナー**の**左端**からオフセットされています。

* + 50px (画像の左端を 100 ピクセル幅のコンテナーの中央に配置)
* 0px (画像の左端がコンテナーの左端に一致)
* -100px (画像の左端をコンテナーの左から 100px に配置。この例では画像の中央である 100px の位置が、コンテナーの中央になることを意味します)
* -200px (画像の左端をコンテナーの左から 200px に配置。この例では右の画像の端が右のコンテナーの端と一致することを意味します)
* -250px (画像の左端をコンテナーの左から 250px に配置。この例では 300px 幅の画像の右端をコンテナーの中央に置きます)

背景サイズが指定された軸のコンテナーのサイズと等しい場合、その軸のパーセント値位置は、「コンテナーと画像の差」がゼロになるので、何の効果もないことは言及しておく価値があります。絶対値を使ってオフセットする必要があります。

公式定義
----

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

形式文法
----
```

background-position =
  <bg-position>#

<bg-position> =
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]

<length-percentage> =
  <length>      |
  <percentage>

```

例
-

### 背景画像の位置指定

以下の 3 つの例は、 `background` を使って黄色い四角形の要素とその中に星の画像を作成します。それぞれの例で、星は異なる位置にあります。加えて、3 つ目の例では 1 つの要素内にある 2 つの異なる背景画像の位置を指定する方法を示しています。

#### HTML

```html
<div class="exampleone">Example One</div>
<div class="exampletwo">Example Two</div>
<div class="examplethree">Example Three</div>
```

#### CSS

```css
/\* すべての <div> で共有される \*/
div {
  background-color: #ffee99;
  background-repeat: no-repeat;
  width: 300px;
  height: 80px;
  margin-bottom: 12px;
}

/\* これらの例は background 一括指定プロパティを使用しています \*/
.exampleone {
  background: url("startransparent.gif") #ffee99 2.5cm bottom no-repeat;
}
.exampletwo {
  background: url("startransparent.gif") #ffee99 left 4em bottom 1em no-repeat;
}

/\* 複数の背景画像: 各画像は対応する位置スタイルに、
 最初に指定されたものから順に対応付けられます。 \*/
.examplethree {
  background-image: url("startransparent.gif"), url("catfront.png");
  background-position:
    0px 0px,
    right 3em bottom 2em;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* `background-position-x`
* `background-position-y`
* `background-position-inline`
* `background-position-block`
* 複数の背景の使用
* `transform-origin`


hyphens - CSS: カスケーディングスタイルシート

hyphens
=======

**`hyphens`** は CSS のプロパティで、文字列を複数行にわたって折り返す際に、単語のハイフネーションを行う方法を指定します。ハイフネーションをまったく行わなかったり、手動で指定された位置で文字列のハイフネーションを行ったり、ブラウザーに適切な位置にハイフンを挿入させたりすることができます。

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

**メモ:** 上記のデモでは、 "An extraordinarily long English word!" に非表示の `` の文字が含まれており、 `An extraordinarily long English word!` のようになっています。この文字は `hyphens: manual;` が指定された場合にハイフンを挿入することができる位置を示しています。

ハイフネーションの規則は言語に依存します。 HTML では言語は `lang` 属性で特定され、ブラウザーはこの属性が存在し、適切なハイフネーション辞書が利用できる場合にのみハイフネーションを行います。 XML では、`xml:lang` (en-US) 属性を使用する必要があります。

**メモ:** どのようにハイフネーションを行うかの規則は仕様書で明確に定義されていないため、厳密なハイフネーションの方式はブラウザーにより異なります。

構文
--

```css
/\* キーワード値 \*/
hyphens: none;
hyphens: manual;
hyphens: auto;

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

`hyphens` プロパティは、以下に挙げたキーワード値のうちの一つで指定します。

### 値

`none`

単語内で分割が提案されている文字の位置であっても、改行で単語を分割しません。行はホワイトスペースの位置のみで折り返します。

`manual`

単語内で分割が提案されている文字の位置でのみ、行の折り返しで単語を分割します。詳しくは改行候補位置の提案を参照してください。

`auto`

ブラウザーは自身が選択した規則に従って、ハイフネーションを行うのに適切な位置で自動的に単語を分割します。しかし、改行候補位置 (改行候補位置の提案を参照) があれば、自動的な改行位置の選択を上書きします。

**メモ:** `auto` を設定したときの動作は、正しくタグ付けされた言語に依存して、適切なハイフネーション規則が選択されます。選択した言語で自動的なハイフネーションが適用されるようにすることを保証するために、 HTML の `lang` 属性を必ず指定してください。

改行候補位置の提案
---------

文字列中で改行が可能な位置を手動で指定するために使用できる Unicode 文字は 2 つあります。

U+2010 (HYPHEN)

「ハード」ハイフン文字は、目に見える改行候補位置を示します。実際はその位置で改行されない場合でも、ハイフンが表示されます。

U+00AD (SHY)

不可視の「ソフト」ハイフン ("**s**oft" **hy**phen) です。この文字は表示されませんが、ブラウザーが必要に応じて単語を分割できる位置を示します。 HTML では、 `` を使用してソフトハイフンを挿入することができます。

**メモ:** HTML の `<wbr>` 要素によって改行が行われた場合、ハイフンは挿入されません。

公式定義
----

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

形式文法
----
```

hyphens =
  none    |
  manual  |
  auto

```

例
-

### テキストのハイフネーションの指定

以下の例では 3 つのクラスを使用し、それぞれの `hyphens` プロパティの設定を示します。

#### HTML

```html
<dl>
  <dt><code>none</code>: no hyphen; overflow if needed</dt>
  <dd lang="en" class="none">An extremely long English word</dd>
  <dt>
    <code>manual</code>: hyphen only at &hyphen; or &shy; (if needed)
  </dt>
  <dd lang="en" class="manual">An extremely long English word</dd>
  <dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt>
  <dd lang="en" class="auto">An extremely long English word</dd>
</dl>
```

#### CSS

```css
dd {
  width: 55px;
  border: 1px solid black;
}
dd.none {
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}
dd.manual {
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
}
dd.auto {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
```

#### 例

仕様書
---

| Specification |
| --- |
| CSS Text Module Level 3 # hyphens-property |

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

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

関連情報
----

* `content`
* `overflow-wrap` (formerly `word-wrap`)
* `word-break`
* テキストの分割と折り返しのガイド


fit-content - CSS: カスケーディングスタイルシート

fit-content
===========

**`fit-content`** は `fit-content(stretch)` として動作します。実際には、ボックスは利用可能な空間を使用しますが、　`max-content` 以上にはならないことを意味します。

`width`, `height`, `min-width`, `min-height`, `max-width`, `max-height` のレイアウトされたボックスの大きさとして使用される場合、最大寸法と最小寸法は、コンテンツの寸法を参照します。

**メモ:** CSS Sizing の仕様書では、 `fit-content()` という関数も定義されています。このページではキーワード版について詳しく説明します。

構文
--

```css
width: fit-content;
block-size: fit-content;
```

例
-

### fit-content を使用してボックスの大きさを指定

#### HTML

```html
<div class="container">
  <div class="item">Item</div>
  <div class="item">Item with more text in it.</div>
  <div class="item">
    Item with more text in it, hopefully we have added enough text so the text
    will start to wrap.
  </div>
</div>
```

#### CSS

```css
.container {
  border: 2px solid #ccc;
  padding: 10px;
  width: 20em;
}

.item {
  width: fit-content;
  background-color: #8ca0ff;
  padding: 5px;
  margin-bottom: 1em;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # valdef-width-fit-content |

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

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

関連情報
----

* 関連する大きさのキーワード: `min-content`, `max-content`


counters() - CSS: カスケーディングスタイルシート

counters()
==========

**`counter()`** は CSS の関数で、階層的なカウンターを利用できるようにし、指定された名前付きカウンターがあれば、その現在値を表す連結された文字列を返します。 `counters()` 関数には `counters(name, string)` と `counters(name, string, style)` の二つの形式があります。一般的には擬似要素と一緒に使用されますが、理論的には `<string>` 値に対応している場所ならばどこでも使用できます。生成されるテキストは、指定された名前を持つすべてのカウンターの値で、指定された文字列で区切られた一番外側から一番内側までの値です。カウンターは、指定されたスタイルで表示され、スタイルが指定されていない場合は既定で `decimal` で表示されます。

```css
/\* 単純な使用法 - スタイルは既定で decimal \*/
counters(countername, '-');

/\* カウンターの表示の変更 \*/
counters(countername, '.', upper-roman)
```

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

カウンター自身には視覚的効果が何もありません。 `counters()` 関数 (および `counter()` 関数) は開発者が定義した文字列 (または画像) を返すことでカウンターは利用価値が生まれます。

**メモ:** `counters()` 関数は CSS プロパティとも併用できますが、 `content` 以外のプロパティにおける対応は実験的であり、型または単位の引数への対応は限られています。

ブラウザーの互換性の表を注意深く確認してから本番環境に用いてください。

構文
--

### 値

`<custom-ident>`

カウンターを識別する名前であり、 `counter-reset` および `counter-increment` に用いた名前と、大文字小文字まで同一でなければなりません。名前をダッシュ 2 つで始めることはできず、また `none`, `unset`, `initial`, `inherit` という名前は禁止です。

`<counter-style>`

カウンタースタイル名または `symbols()` 関数です。カウンタースタイル名には `numeric`, `alphabetic`, `symbolic` などの単純な定義済みスタイル、より複雑なアジアやエチオピアのカウンタースタイル、その他の定義済みカウンタースタイルがあります。省略された場合は、既定で `decimal` になります。

`<string>`

任意の数のテキスト文字です。ラテン文字以外は Unicode エスケープシーケンスでエンコードする必要があります。例えば `\000A9` は著作権記号を表します。

### 形式文法
```

<counters()> =
  counters( <counter-name> , <string> , <counter-style>? )

<counter-style> =
  <counter-style-name>  |
  <symbols()>

<symbols()> =
  symbols( <symbols-type>? [ <string> | <image> ]+ )

<symbols-type> =
  cyclic      |
  numeric     |
  alphabetic  |
  symbolic    |
  fixed

<image> =
  <url>       |
  <gradient>

<url> =
  <url()>  |
  <src()>

<url()> =
  url( <string> <url-modifier>\* )  |
  <url-token>

<src()> =
  src( <string> <url-modifier>\* )

```

例
-

### 既定値と upper-roman との比較

#### HTML

```html
<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li></li>
  <li>
    <ol>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </li>
    </ol>
  </li>
</ol>
```

#### CSS

```css
ol {
  counter-reset: listCounter;
}
li {
  counter-increment: listCounter;
}
li::marker {
  content: counters(listCounter, ".", upper-roman) ") ";
}
li::before {
  content: counters(listCounter, ".") " == " counters(
      listCounter,
      ".",
      lower-roman
    );
}
```

#### 結果

### decimal-leading-zero と lower-alpha との比較

#### HTML

```html
<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li></li>
  <li>
    <ol>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </li>
    </ol>
  </li>
</ol>
```

#### CSS

```css
ol {
  counter-reset: count;
}
li {
  counter-increment: count;
}
li::marker {
  content: counters(count, ".", upper-alpha) ") ";
}
li::before {
  content: counters(count, ".", decimal-leading-zero) " == " counters(
      count,
      ".",
      lower-alpha
    );
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # counter-functions |

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

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

関連情報
----

* CSS カウンターの使用
* `counter-set`
* `counter-reset`
* `counter-increment`
* `@counter-style`
* CSS の `counter()` 関数
* `::marker`


align-tracks - CSS: カスケーディングスタイルシート

align-tracks
============

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

**`align-tracks`** は CSS のプロパティで、ブロック軸が組積であるグリッドコンテナーの組積軸の配置を設定します。

構文
--

```css
/\* キーワード値 \*/
align-tracks: start;
align-tracks: space-between;
align-tracks: center;
align-tracks: start, center, end;

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

このプロパティは単一の値を取ることができ、その場合はすべてのトラックが同じように整列されます。値のリストが使用された場合、最初の値はグリッド軸の最初のトラックに適用され、2 番目は次のトラックに適用され、以下同様となります。

値がトラックより少ない場合は、最後の値が残りすべてのトラックに使用されます。トラックよりも値が多い場合、追加の値は無視されます。

### 値

`start`

アイテムは、組積軸の配置コンテナーの先頭の端に向かって、互いに詰められます。

`end`

アイテムは、組積軸の配置コンテナーの末尾の端に向かって、互いに詰められます。

`center`

アイテムは、組積軸に沿って配置コンテナーの中心に向かって、互いに詰められます。

`normal`

`start` として動作します。

`baseline first baseline`
`last baseline`

 ボックスの先頭または末尾のベースラインセットの配置ベースラインを、ベースライン共有グループのすべてのボックスの共有された先頭または末尾のベースラインセットの対応するベースラインに合わせます。
 `first baseline` の代替配置は `start`、`last baseline` の代替配置は `end` です。

`space-between`

アイテムは配置コンテナー内で組積軸に沿って均等に配置されます。隣接するアイテム同士の間の間隔は同じです。先頭のアイテムは、コンテナーの先頭の端に詰められ、末尾のアイテムは、コンテナーの末尾の端に詰められます。

`space-around`

アイテムは配置コンテナー内で組積軸に沿って均等に配置されます。隣接するアイテム同士の間の間隔は同じです。先頭のアイテムの前と末尾のアイテムの後の空き空間は、隣接するアイテム同士の空間の半分に等しくなります。

`space-evenly`

アイテムは組積軸に沿って配置コンテナー内に均等に配置されます。隣接するアイテム同士の間隔、コンテナーの先頭の端と先頭のアイテム、およびコンテナーの末尾の端と末尾のアイテムは、すべて正確に同じです。

`stretch`

アイテムは組積の軸に沿って伸び、コンテンツボックスを満たします。確定したサイズのアイテムは引き伸ばされません。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `normal` |
| 適用対象 | ブロック軸がマソンリーレイアウトのグリッドコンテナー |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----

Error: could not find syntax for this item例
-

### align-tracks に複数の値がある組積レイアウト

仕様書
---

| Specification |
| --- |
| CSS Grid Layout Module Level 3 # tracks-alignment |

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

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

関連情報
----

* 関連する CSS プロパティ: `justify-tracks`, `masonry-auto-flow`


フィルター効果 - CSS: カスケーディングスタイルシート

フィルター効果
=======

**フィルター効果** (Filter Effects) は CSS のモジュールの一つで、要素が文書内に表示される前の処理方法を定義します。

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

### プロパティ

* `backdrop-filter`
* `filter`
### データ型

* `<filter-function>`
仕様書
---

| Specification |
| --- |
| Filter Effects Module Level 2  |
| Filter Effects Module Level 1  |

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

### `backdrop-filter` プロパティ

{{Compat}}### `filter` プロパティ

{{Compat}}