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

mix-blend-mode
==============

**`mix-blend-mode`** は CSS のプロパティで、要素の内容物と親要素の内容物や要素の背景をどのように混合するかを設定します。

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

構文
--

```css
/\* キーワード値 \*/
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

/\* グローバル値 \*/
mix-blend-mode: initial;
mix-blend-mode: inherit;
mix-blend-mode: revert;
mix-blend-mode: unset;
```

### 値

`<blend-mode>`

適用する混合モードを表す `<blend-mode>` です。

Formal definition
-----------------

|  |  |
| --- | --- |
| 初期値 | `normal` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | アニメーション不可 |
| 重ね合わせコンテキストの生成 | あり |

Formal syntax
-------------
```

mix-blend-mode =
  <blend-mode>  |
  plus-darker   |
  plus-lighter

<blend-mode> =
  normal       |
  multiply     |
  screen       |
  overlay      |
  darken       |
  lighten      |
  color-dodge  |
  color-burn   |
  hard-light   |
  soft-light   |
  difference   |
  exclusion    |
  hue          |
  saturation   |
  color        |
  luminosity

```

例
-

### mix-blend-mode の様々な値の効果
```

<div class="grid">
  <div class="col">
    <div class="note">
      Blending in isolation (no blending with the background)
    </div>
    <div class="row isolate">
      <div class="cell">
        normal
        <div class="container normal">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <defs>
                <linearGradient id="red">
                  <stop offset="0" stop-color="hsl(0,100%,50%)" />
                  <stop offset="100%" stop-color="hsl(0,0%,100%)" />
                </linearGradient>
                <linearGradient id="green">
                  <stop offset="0" stop-color="hsl(120,100%,50%)" />
                  <stop offset="100%" stop-color="hsl(120,0%,100%)" />
                </linearGradient>
                <linearGradient id="blue">
                  <stop offset="0" stop-color="hsl(240,100%,50%)" />
                  <stop offset="100%" stop-color="hsl(240,0%,100%)" />
                </linearGradient>
              </defs>
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        multiply
        <div class="container multiply">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        darken
        <div class="container darken">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        screen
        <div class="container screen">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        lighten
        <div class="container lighten">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        overlay
        <div class="container overlay">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        color-dodge
        <div class="container color-dodge">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        color-burn
        <div class="container color-burn">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        hard-light
        <div class="container hard-light">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        soft-light
        <div class="container soft-light">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        difference
        <div class="container difference">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        exclusion
        <div class="container exclusion">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        hue
        <div class="container hue">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        saturation
        <div class="container saturation">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        color
        <div class="container color">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        luminosity
        <div class="container luminosity">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
    </div>

    <div class="note">Blending globally (blend with the background)</div>
    <div class="row">
      <div class="cell">
        normal
        <div class="container normal">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        multiply
        <div class="container multiply">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        darken
        <div class="container darken">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        screen
        <div class="container screen">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        lighten
        <div class="container lighten">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        overlay
        <div class="container overlay">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        color-dodge
        <div class="container color-dodge">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        color-burn
        <div class="container color-burn">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        hard-light
        <div class="container hard-light">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        soft-light
        <div class="container soft-light">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        difference
        <div class="container difference">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        exclusion
        <div class="container exclusion">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        hue
        <div class="container hue">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        saturation
        <div class="container saturation">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        color
        <div class="container color">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        luminosity
        <div class="container luminosity">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```

```
html,
body {
  height: 100%;
  box-sizing: border-box;
  background: #eee;
}

.grid {
  width: 100%;
  display: flex;
  font: 1em monospace;
}

.row {
  display: flex;
  flex: 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  height: auto;
}

.col {
  display: flex;
  flex: 1 auto;
  flex-direction: column;
  height: auto;
}

.cell {
  margin: 0.5em;
  padding: 0.5em;
  background-color: #fff;
  overflow: hidden;
  text-align: center;
}

.note {
  background: #fff3d4;
  padding: 1em;
  margin: 0.5em 0.5em 0;
  font: 0.8em sans-serif;
  text-align: left;
  white-space: nowrap;
}

.note + .row .cell {
  margin-top: 0;
}

.container {
  position: relative;
  background: linear-gradient(to right, #000 0%, transparent 50%, #fff 100%),
    linear-gradient(to bottom, #ff0 0%, #f0f 50%, #0ff 100%);
  width: 150px;
  height: 150px;
  margin: 0 auto;
}

.R {
  transform-origin: center;
  transform: rotate(-30deg);
  fill: url(#red);
}

.G {
  transform-origin: center;
  transform: rotate(90deg);
  fill: url(#green);
}

.B {
  transform-origin: center;
  transform: rotate(210deg);
  fill: url(#blue);
}

.isolate .group {
  isolation: isolate;
}

.normal .item {
  mix-blend-mode: normal;
}
.multiply .item {
  mix-blend-mode: multiply;
}
.screen .item {
  mix-blend-mode: screen;
}
.overlay .item {
  mix-blend-mode: overlay;
}
.darken .item {
  mix-blend-mode: darken;
}
.lighten .item {
  mix-blend-mode: lighten;
}
.color-dodge .item {
  mix-blend-mode: color-dodge;
}
.color-burn .item {
  mix-blend-mode: color-burn;
}
.hard-light .item {
  mix-blend-mode: hard-light;
}
.soft-light .item {
  mix-blend-mode: soft-light;
}
.difference .item {
  mix-blend-mode: difference;
}
.exclusion .item {
  mix-blend-mode: exclusion;
}
.hue .item {
  mix-blend-mode: hue;
}
.saturation .item {
  mix-blend-mode: saturation;
}
.color .item {
  mix-blend-mode: color;
}
.luminosity .item {
  mix-blend-mode: luminosity;
}
```

### HTML での mix-blend-mode の使用

#### HTML

```html
<div class="isolate">
  <div class="circle circle-1"></div>
  <div class="circle circle-2"></div>
  <div class="circle circle-3"></div>
</div>
```

#### CSS

```css
.circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  mix-blend-mode: screen;
  position: absolute;
}

.circle-1 {
  background: red;
}

.circle-2 {
  background: lightgreen;
  left: 40px;
}

.circle-3 {
  background: blue;
  left: 20px;
  top: 40px;
}

.isolate {
  isolation: isolate; /\* isolation がないと、背景色が考慮されてしまう \*/
  position: relative;
}
```

#### 結果

### SVG での mix-blend-mode の使用

#### SVG

```html
<svg>
  <g class="isolate">
    <circle cx="40" cy="40" r="40" fill="red" />
    <circle cx="80" cy="40" r="40" fill="lightgreen" />
    <circle cx="60" cy="80" r="40" fill="blue" />
  </g>
</svg>
```

#### CSS

```css
circle {
  mix-blend-mode: screen;
}
.isolate {
  isolation: isolate;
} /\* Without isolation, the background color will be taken into account \*/
```

#### 結果

仕様書
---

| Specification |
| --- |
| Compositing and Blending Level 2 # mix-blend-mode |

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

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

関連情報
----

* `<blend-mode>`
* `background-blend-mode`


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

background
==========

**`background`** は CSS の一括指定プロパティで、色、画像、原点と寸法、反復方法など、背景に関するすべてのスタイルプロパティを一括で設定します。

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

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

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

* `background-attachment`
* `background-clip`
* `background-color`
* `background-image`
* `background-origin`
* `background-position`
* `background-repeat`
* `background-size`
構文
--

```css
/\* <background-color> を使用 \*/
background: green;

/\* <bg-image> と <repeat-style> を使用 \*/
background: url("test.jpg") repeat-y;

/\* <box> と <background-color> を使用 \*/
background: border-box red;

/\* 単一の画像、中央寄せかつ縮小 \*/
background: no-repeat center/80% url("../img/image.png");

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

`background` プロパティは1つまたは複数の背景レイヤーをカンマで区切って指定します。

それぞれのレイヤーの構文は以下の通りです。

* それぞれのレイヤーは、以下の値をそれぞれ 0 ～ 1 回含めることができます。
    + `<attachment>`
    + `<bg-image>`
    + `<position>`
    + `<bg-size>`
    + `<repeat-style>`
* `<bg-size>` の値は `<position>` の直後に '/' の文字で区切って含めなければなりません。例: "`center/80%`"
* `<box>` の値は 0 ～ 2 回含めることができます。1 回の場合は `background-origin` と `background-clip` の両方に設定されます。2 回の場合は、1 つ目は `background-origin` に、2 つ目は `background-clip` に設定されます。
* `<background-color>` の値は最後のレイヤーの指定でのみ含めることができます。
### 値

`<attachment>`

`background-attachment` を参照

`<box>`

`background-clip` および `background-origin` を参照

`<background-color>`

`background-color` を参照

`<bg-image>`

`background-image` を参照

`<position>`

`background-position` を参照

`<repeat-style>`

`background-repeat` を参照

`<bg-size>`

`background-size` を参照。

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

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

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

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `background-image`: `none`
* `background-position`: `0% 0%`
* `background-size`: `auto auto`
* `background-repeat`: `repeat`
* `background-origin`: `padding-box`
* `background-clip`: `border-box`
* `background-attachment`: `scroll`
* `background-color`: `transparent`
 |
| 適用対象 | すべての要素。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | なし |
| パーセント値 | 一括指定の次の各プロパティとして* `background-position`: 背景配置領域の高さから背景画像の高さを引いた値に対する相対値。寸法は水平オフセットの幅と垂直オフセットの高さに対する相対値
* `background-size`: 背景配置領域に対する相対値
 |
| 計算値 | 一括指定の次の各プロパティとして* `background-image`: 指定通り、ただし `url` の値は絶対パスになる
* `background-position`: 一括指定の次の各プロパティとして
    + `background-position-x`: 絶対長とパーセント値の組み合わせで与えられるオフセットと原点のキーワードを、各項目として構成されるリスト。
    + `background-position-y`: 絶対長とパーセント値の組み合わせで与えられるオフセットと原点のキーワードを、各項目として構成されるリスト。
* `background-size`: 指定通り。ただし相対的な長さはは絶対的な長さに変換される
* `background-repeat`: 1 つの方向につき 2 つのキーワードで構成される項目のリスト
* `background-origin`: 指定通り
* `background-clip`: 指定通り
* `background-attachment`: 指定通り
* `background-color`: 色の計算値
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `background-color`: 色
* `background-image`: 離散値
* `background-clip`: 反復可能リスト
* `background-position`: 反復可能リスト
* `background-size`: 反復可能リスト
* `background-repeat`: 離散値
* `background-attachment`: 離散値
 |

形式文法
----
```

background =
  <bg-layer>#? , <final-bg-layer>

<bg-layer> =
  <bg-image>                      ||
  <bg-position> [ / <bg-size> ]?  ||
  <repeat-style>                  ||
  <attachment>                    ||
  <visual-box>                    ||
  <visual-box>

<final-bg-layer> =
  <bg-image>                      ||
  <bg-position> [ / <bg-size> ]?  ||
  <repeat-style>                  ||
  <attachment>                    ||
  <visual-box>                    ||
  <visual-box>                    ||
  <'background-color'>

<bg-image> =
  <image>  |
  none

<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>? ]

<bg-size> =
  [ <length-percentage [0,∞]> | auto ]{1,2}  |
  cover                                      |
  contain

<repeat-style> =
  repeat-x                                     |
  repeat-y                                     |
  [ repeat | space | round | no-repeat ]{1,2}

<attachment> =
  scroll  |
  fixed   |
  local

<visual-box> =
  content-box  |
  padding-box  |
  border-box

<image> =
  <url>       |
  <gradient>

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

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

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

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

```

例
-

### 色キーワードと画像による背景の設定

#### HTML

```html
<p class="topbanner">
  Starry sky<br />
  Twinkle twinkle<br />
  Starry sky
</p>
<p class="warning">Here is a paragraph</p>
```

#### CSS

```css
.warning {
  background: pink;
}

.topbanner {
  background: url("starsolid.gif") #99f repeat-y fixed;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* `box-decoration-break`
* グラデーションの使用
* 複数の背景の使用


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

offset-anchor
=============

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

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

* Learn more
* See full compatibility
* Report feedback
**`offset-anchor`** は CSS のプロパティで、 `offset-path` に沿って実際に移動している要素のボックス内の点を指定します。

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

構文
--

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

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

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

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

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

### 値

`auto`

`offset-anchor` には要素の `transform-origin` と同じ値が与えられます。ただし、 `offset-path` が `none` の場合は `offset-position` から値が取得されます。

`<position>`

`<position>` は x/y 座標を定義し、要素のボックスの端から相対的に項目を配置するために使用されます。これは、 1 つから 4 つの値を用いて定義することができます。詳細については、`<position>` と `background-position` のリファレンスページを参照してください。 3 つの値を持つ position構 文は、`background(-position)`を除いて、`<position>`のどのような使い方でも機能しないことに注意してください。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | 座標変換可能要素 |
| 継承 | なし |
| パーセント値 | relative to the width and the height of the element's reference box |
| 計算値 | `length` の場合は絶対的な値、それ以外の場合はパーセント値 |
| アニメーションの種類 | position |

形式文法
----
```

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

```

例
-

### 様々な offset-anchor 値を設定

以下の例では、 `<div>` 要素が `<section>` 要素の中に入っている形は 3 つあります。それぞれの `<div>` には同じ `offset-path` （200 ピクセル長の水平線）が与えられ、それに沿って移動するアニメーションです。そして、 3 つには異なる `background-color` と `offset-anchor` 値が与えられています。

それぞれの `<section>` は、その中心を通る水平線を線形グラデーションでスタイル付けされており、 `<div>` のオフセットパスがどこに走っているかを視覚的に表示することができるようになっています。

これにより、異なる `offset-anchor` 値がどのような効果をもたらすかを確認することができます。 — 最初のものは `auto` なので、 `<div>` の中心点をパスに沿って動かします。他の 2 つは、それぞれ `<div>` の右上と左下の点をパスに沿って移動させます。

#### HTML

```html
<section>
  <div class="offset-anchor1"></div>
</section>
<section>
  <div class="offset-anchor2"></div>
</section>
<section>
  <div class="offset-anchor3"></div>
</section>
```

#### CSS

```css
div {
  offset-path: path("M 0,20 L 200,20");
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
}

section {
  background-image: linear-gradient(
    to bottom,
    transparent,
    transparent 49%,
    #000 50%,
    #000 51%,
    transparent 52%
  );
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.offset-anchor1 {
  offset-anchor: auto;
  background: cyan;
}

.offset-anchor2 {
  offset-anchor: right top;
  background: purple;
}

.offset-anchor3 {
  offset-anchor: left bottom;
  background: magenta;
}

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

#### 結果

仕様書
---

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

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

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

関連情報
----

* `offset`
* `offset-distance`
* `offset-rotate`
* SVG `<path>`


CSS 座標変換 - CSS: カスケーディングスタイルシート

CSS 座標変換
========

**CSS 座標変換** (CSS transforms) は、 CSS でスタイル付けされた要素をどのように二次元または三次元空間に座標変換するかを定義します。

CSS 座標変換の動作
-----------

下の枠内のスライダーを使うと、 3D 空間での立方体の平行移動、回転、変倍、歪めの CSS 座標変換のプロパティを変更できます。立方体を 3D 空間内で移動させながら、 3D 位置 `(0, 0, 0)` にある `z:0px` とラベル付けされた要素との相互作用に注目してください。

また、 `perspective` スライダーを使って、立方体のコンテナーの `perspective` プロパティを変更することができます。

`perspective-origin` スライダーは、ビューの消点を決定するために、閲覧者が3D空間のどこを見ているかを決定します。この消点は小さな赤い点で示されます。これらのスライダーを変更することで、立方体自体を動かすことなく、頭を上下左右に動かして立方体のさまざまな部分を見ることができると想像してください。

`backface-visibility` チェックボックスは、立方体の裏面を `visible` （表示）に設定するか、`hidden` （非表示）に設定するかを決定します。

上の例の立方体は 6 つの `<div>` 要素で構成されており、すべて CSS でスタイル設定されて立方体の面を構成しています。立方体は 2D や 3D のキャンバスコンテキストを使用して描画されていないので、**他の DOM 要素を検査するのと同じように**、ブラウザーの開発者ツールで立方体の面を検査することができます。ブラウザー開発者ツールの要素ピッカーを使用して、立方体の位置と回転を変換しながら、立方体のさまざまな面を調べてみてください。

**メモ:** 3D 回転を含む座標変換を適用する場合、順序はが座標変換結果に影響します。上の例では、座標変換は平行移動、変倍、回転、歪めを行います。回転は X → Y → Z の順に適用されます。

この例のソースを GitHub で確認できます。

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

### プロパティ

* `backface-visibility`
* `perspective`
* `perspective-origin`
* `rotate`
* `scale`
* `transform`
* `transform-box`
* `transform-origin`
* `transform-style`
* `translate`
### 関数

* `matrix()`
* `matrix3d()`
* `perspective()`
* `rotate()`
* `rotate3d()`
* `rotateX()`
* `rotateY()`
* `rotateZ()`
* `scale()`
* `scale3d()`
* `scaleX()`
* `scaleY()`
* `scaleZ()`
* `skew()`
* `skewX()`
* `skewY()`
* `translate()`
* `translate()`
* `translateX()`
* `translateY()`
* `translateZ()`
### データ型

* `<transform-function>`
ガイド
---

CSS 座標変換の利用

CSS でスタイル付けされた要素をどのように座標変換するかについての手順を追ったチュートリアルです。

座標系

CSS オブジェクトモデルでピクセル位置を定義する方法を説明します。

パフォーマンスの基礎: CSS 座標変換の使用

ウェブパフォーマンスの基礎について、 CSS 座標変換がどのようにパフォーマンスを向上させることができるかを含め、概説します。

ウェブの行列演算

オブジェクトの座標変換を行列で表す方法を説明しています。

関連する概念
------

* CSS プロパティ:
    + `animation`
    + `background-position`
    + `clip`
    + `clip-path`
    + `contain`
    + `content-visibility`
    + `isolation`
    + `mask`
    + `mask-border-source`
    + `mask-image`
    + `mix-blend-mode`
    + `opacity`
    + `overflow`
    + `transition`
    + `visibility`
* データ型:
    + `<angle>`
    + `<length-percentage>`
    + `<length>`
    + `<number>`
    + `<percentage>`
    + `<position>`
* 用語集の用語:
    + 補間
    + 重ね合わせコンテキスト
* SVG の概念:
    + `<animate>` 要素
    + `<animateTransform>` 要素
    + `<set>` 要素
    + `transform` 要素
仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 1  |
| CSS Transforms Module Level 2  |

関連情報
----

* 基本的な SVG 座標変換のチュートリアル
* CSS アニメーションモジュール
* CSS トランジションモジュール


後続兄弟結合子 - CSS: カスケーディングスタイルシート

後続兄弟結合子
=======

**後続兄弟結合子** (subsequent-sibling combinator, `~`) は 2 個のセレクターを結びつけ、 1 つ目の要素の後に 2 つ目の要素があり（直後である必要はない）、かつ両者が同じ親要素の子であるすべてのパターンに一致します。

次の例では、後続兄弟結合子 (`~`) は、画像の兄弟であり、画像の後に現れる段落を選択し、スタイル設定するのに便利です。

```css
img ~ p {
  color: red;
}
```

構文
--

```css
/\* 結合子の前後の空白はオプションですが、推奨されます。 \*/
先行する要素 ~ 選択される要素 { スタイルプロパティ }
```

例
-

### 単純セレクターと結合子の使用

この例では、両方のセレクターが単純セレクター（`p` と `span`）である場合に、 `~` 結合子を使用する場合を示しています。

```html
<article>
  <span>これは段落の前に現れるので赤にはなりません。</span>
  <p>ここに段落があります。</p>
  <code>ここに code があります。</code>
  <span>
    この span が赤いのは、間に他のノードがあるにもかかわらず、段落の後に現れるからです。
  </span>
  <p>何かあっても、笑顔を絶やさないでください。</p>
  <h1>夢は大きく</h1>
  <span>
    ノードの数や種類に関係なく、段落の後の同じ親からの span はすべて赤くなります。
  </span>
</article>
<span>
  この span は段落と親を共有していないので赤ではありません。
</span>
```

```css
p ~ span {
  color: red;
}
```

### 複合セレクターによる結合子の使用

この例には2つの複合セレクターがあり、どちらも後続兄弟結合子 `.foo p ~ span` と `.foo p ~ .foo span` を使用しています。

* 最初の複合セレクターである `.foo p ~ span` は、もし span と段落の親が同じで、**かつ**その親またはその親の祖先がクラス `.foo` を持っている場合、段落の後に来るすべての span に一致します。
* 2 つ目の複合セレクター `.foo p ~ .foo span` は、クラス `.foo` を持っている要素の子孫であるすべての span に一致します。

下記の例は、複合セレクターの対象要素は、複合セレクターの初期要素と同じ親を示さなければならないことを示しています。

```html
<h1>夢は大きく</h1>
<span>またしても赤い span です！</span>
<div class="foo">
  <p>別の段落です。</p>
  <span>青い span</span>
  <div class="foo">
    <span>緑の span</span>
  </div>
</div>
```

```css
.foo p ~ span {
  color: blue;
}

.foo p ~ .foo span {
  color: green;
}
```

上の HTML では、`.foo p` の兄弟は `span` と `.foo` です。緑色の `span` は `.foo` クラスの子孫で、`p` の兄弟です。

* 対象セレクターが `span` の場合、`p` の兄弟である `span` 要素が選択されます。 `p` 要素は `.foo` の子孫であるため、その `span` 兄弟要素も選択されます。
* `.foo p ~ .foo span` では、対象とするセレクターは `.foo` の子孫である `span` です。この場合、 `.foo` の子孫である `span` 要素は、その `.foo` が `p` の兄弟である場合に選択されます。基本的には、どちらも `.foo` の祖先に入れ子になっています。
仕様書
---

| Specification |
| --- |
| Selectors Level 4 # general-sibling-combinators |

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

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

関連情報
----

* 次兄弟結合子


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

border-block-end
================

**`border-block-end`** は CSS のプロパティで、個々の論理的なブロック方向の末尾側境界のプロパティ値を、スタイルシート内の単一の場所で設定するための一括指定プロパティです。

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

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

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

* `border-block-end-color`
* `border-block-end-style`
* `border-block-end-width`
構文
--

```css
border-block-end: 1px;
border-block-end: 2px dotted;
border-block-end: medium dashed blue;

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

`border-block-end` は 1 つ以上の `border-block-end-width`, `border-block-end-style`, `border-block-end-color` の値の組み合わせを使用することができます。対応づけられる物理的な境界は、書字方向やテキストの向きによって決まります。これは `border-top`, `border-right`, `border-bottom`, `border-left` の何れかに対応し、どれに対応するかは `writing-mode`, `direction`, `text-orientation` で定義された値によって決まります。

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

### 値

`border-block-end` は以下の値のうちの 1 つ以上を任意の順序で指定します。

`<'border-width'>`

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

`<'border-style'>`

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

`<'color'>`

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

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `border-top-width`: `medium`
* `border-top-style`: `none`
* `border-top-color`: `currentcolor`
 |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `border-top-width`: 絶対的な長さ、または `border-top-style` が `none` または `hidden` の場合は `0`
* `border-top-style`: 指定通り
* `border-top-color`: 色の計算値
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `border-block-end-color`: 計算値の型による
* `border-block-end-style`: 離散値
* `border-block-end-width`: 計算値の型による
 |

形式文法
----
```

border-block-end =
  <line-width>  ||
  <line-style>  ||
  <color>

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

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

```

例
-

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

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

#### 結果

仕様書
---

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

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

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

関連情報
----

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


レイアウトモード - CSS: カスケーディングスタイルシート

レイアウトモード
========

CSS の**レイアウトモード** (または単に「レイアウト」) は、ボックスの位置やサイズを、兄弟要素や祖先要素のボックスとの相互作用を踏まえて決めるアルゴリズムです。複数のレイアウトモードがあります。

* *通常フロー* — すべての要素は何かの操作をして外さない限り、通常フローの一部です。通常フローは、段落のようなボックスをレイアウトするための*ブロックレイアウト*と、テキストのような行内アイテムをレイアウトするための*インラインレイアウト*を含みます。
* *表レイアウト*は、表のレイアウトのためのものです。
* *浮動レイアウト*は、アイテムを左または右に配置して、残りの部分はそれを回り込む通常フローにするためのものです。
* *位置指定レイアウト*は、他要素とほとんど相互作用のない位置指定要素のためのものです。
* *段組みレイアウト*は、新聞のように複数の段でコンテンツをレイアウトするためのものです。
* *フレックスボックスレイアウト*は、滑らかに大きさが変更できる複雑なページのレイアウトに使われます。
* *グリッドレイアウト*は、固定グリッドを基準にした要素配置に使われます。

**メモ:** レイアウトモードによって、使える CSS プロパティに制限があります。多くは 1 つか 2 つのレイアウトモードで用いられ、別のレイアウトモードに関わる要素に設定しても効果がありません。

関連情報
----

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


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

overflow-anchor
===============

**`overflow-anchor`** は CSS のプロパティで、コンテンツの移動を最小化するためにスクロール位置を調整する、ブラウザーのスクロールアンカリングの動作をオプトアウトする方法を提供します。

スクロールアンカリングの動作は、対応しているすべてのブラウザーで既定で有効になっています。したがって、このプロパティを変更するのは通常、文書または文書の一部でスクロールアンカリングによって操作上の問題が発生し、この動作をオフにする必要がある場合のみです。

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

構文
--

```css
/\* キーワード値 \*/
overflow-anchor: auto;
overflow-anchor: none;

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

### 値

`auto`

その要素は、スクロール位置を調整するときにアンカー候補になります。

`none`

その要素はアンカー候補として選択されません。

公式定義
----

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

形式文法
----
```

overflow-anchor =
  auto  |
  none

```

例
-

### スクロールアンカリングを抑止

文書内でスクロールアンカリングを抑止する場合は、 `overflow-anchor` プロパティを使用してください。

```css
\* {
  overflow-anchor: none;
}
```

仕様書
---

| Specification |
| --- |
| CSS Scroll Anchoring Module Level 1 # exclusion-api |

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

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

関連情報
----

* スクロールアンカリングの紹介


CSS フレックスボックスレイアウト - CSS: カスケーディングスタイルシート

CSS フレックスボックスレイアウト
==================

**CSS フレックスボックスレイアウト** (CSS Flexible Box Layout) は、ユーザーインターフェイスの設計に最適化された CSS ボックスモデルと、一次元のアイテムのレイアウトを定義します。フレックスレイアウトモデルでは、フレックスコンテナーの子は任意の方向にレイアウトすることができ、また使われていない空間を埋めるために伸長したり、あるいは親のあふれることを避けるために収縮したりと、そのサイズを「伸縮」することができます。子の水平方向と垂直方向の両方の整列を、容易に操作することが可能です。

基本的な例
-----

以下の例では、コンテナーに `display: flex` に設定されており、 3 つの子がフレックスアイテムであることを意味しています。 `justify-content` の値は、主軸上に均等に配置するため、 `space-between` に設定されています。それぞれのアイテムと、その左右のアイテムとの間は等しい間隔で配置され、フレックスコンテナーの両端に揃えられます。また、 `align-items` の既定値は `stretch` なので、アイテムが交差軸方向に引き伸ばされていることが分かります。アイテムはフレックスコンテナーの高さまで引き伸ばされ、最も高さが大きいアイテムと同じ高さで表示されます。

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

### プロパティ

* `flex`
* `flex-basis`
* `flex-direction`
* `flex-flow`
* `flex-grow`
* `flex-shrink`
* `flex-wrap`
* `order`
### 配置プロパティ

`align-content`, `align-self`, `align-items`, `justify-content` の各プロパティは、当初はフレックスボックスの仕様書にありましたが、ボックス配置 (Box Alignment) の仕様書で定義されるようになりました。フレックスボックスの仕様書はボックス配置の最新の定義を参照するようになりました。ボックス配置では新しい配置プロパティも定義されるようになりました。

* `justify-content`
* `align-content`
* `align-items`
* `align-self`
* `place-content`
* `place-items`
* `row-gap`
* `column-gap`
* `gap`
ガイド
---

フレックスボックスの基本概念

フレックスボックスの機能の概要

フレックスボックスと他のレイアウト方法の関係

フレックスボックスが他のレイアウト方法や他の CSS 仕様書とどのように関係しているか

フレックスコンテナー内のアイテムの配置

ボックス配置プロパティがどのようにフレックスボックスに働くか

フレックスアイテムの順序

アイテムの順序や向きを変更する様々な方法を説明し、その上での潜在的な問題を紹介します。

主軸方向のフレックスアイテムの比率の制御

flex-grow, flex-shrink, flex-basis の各プロパティについての説明です。

フレックスアイテムの折り返しをマスターする

複数行のフレックスコンテナーを作成する方法と、それらの行内でのアイテムの表示方法の制御。

フレックスボックスの典型的な用途

典型的なフレックスボックスの用途の一般的なデザインパターン。

仕様書
---

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1  |

関連情報
----

* 用語集の項目:
    + フレックスボックス
    + フレックスコンテナー
    + フレックスアイテム
    + 主軸
    + 交差軸
    + フレックス


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

:visited
========

**`:visited`** は CSS の擬似クラスで、ユーザーが訪問したことがあるリンクに適用されます。プライバシー上の理由から、このセレクターを使用して変更できるスタイルはとても限定されています。 `:visited` 擬似クラスは `href` 属性を持つ `<a>` と `<area>` 要素にのみ適用されます。

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

`:visited` および、未訪問を表す `:link` 擬似クラスで定義されたスタイルは、少なくとも同等の仕様を持つユーザー操作に関する擬似クラスで（`:hover` や `:active`）によって上書きされます。適切にリンクにスタイルを適用するには、 `:visited` ルールを `:link` ルールの後、 `:hover` および `:active` ルールの前に置いてください。 *LVHA 順*、 `:link` — `:visited` — `:hover` — `:active` と定義されています。 `:visited` 擬似クラスと `:link` 擬似クラスは互いに排他的です。

プライバシー上の制約
----------

プライバシー上の理由から、ブラウザ―はこの擬似クラスを使って適用できるスタイルに厳しい制限をかけています。使い方は以下の通りです。

* 利用できる CSS プロパティは、 `color`, `background-color`, `border-color`, `border-bottom-color`, `border-left-color`, `border-right-color`, `border-top-color`, `column-rule-color`, `outline-color`, `text-decoration-color`, `text-emphasis-color` です。
* 利用できる SVG 属性は `fill` と `stroke` です。
* 利用できるスタイルでもアルファチャンネルは無視されます。要素の `:visited` でない状態のアルファ成分が代わりに使用されます。Firefox でアルファ成分が `0` の場合、`:visited` で設定したスタイルは完全に無視されます。
* これらのスタイルはエンドユーザーに対する表示色を変更できるようになっていますが、 `window.getComputedStyle` メソッドは嘘をつき、 `:visited` 状態ではない色の値を返します。
* `<link>` 要素は `:visited` に一致することはありません。

**メモ:** これらの制限とその理由については、プライバシーと :visited セレクターを参照してください。

構文
--

```css
:visited {
  /\* ... \*/
}
```

例
-

色を持っていないか透過のプロパティは、 `:visited` で変更することができません。この擬似クラスで設定するプロパティについては、ブラウザーが持っている既定値は `color` と `column-rule-color` だけでしょう。そのため、他のプロパティを変更したい場合は、 `:visited` セレクターの外で基本的な値を設定する必要があります。

### HTML

```html
<a href="#test-visited-link">このリンクを訪問しましたか？</a><br />
<a href="">このリンクはすでに訪問済みです。</a>
```

### CSS

```css
a {
  /\* 該当するプロパティに不透過の既定値を設定することで、
 :visited 状態のスタイルを定義できるようにします \*/
  background-color: white;
  border: 1px solid white;
}

a:visited {
  background-color: yellow;
  border-color: hotpink;
  color: hotpink;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # selector-visited |
| Selectors Level 4 # link |

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

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

関連情報
----

* プライバシーと :visited セレクター
* リンク関連の擬似クラス: `:link`, `:active`, `:hover`


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

line-break
==========

**`line-break`** は CSS のプロパティで、中国語、日本語、韓国語 (CJK) のテキストにおいて、句読点や記号を用いた場合の改行規則 (禁則処理) を設定します。

```css
/\* キーワード値 \*/
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;

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

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

構文
--

### 値

`auto`

既定の改行規則を使用してテキストを改行します。

`loose`

最も制限の少ない改行規則を使用してテキストを改行します。一般的に、新聞などの短い行に使用されます。

`normal`

最も一般的な改行規則を使用してテキストを改行します。

`strict`

最も厳格な改行規則を使用してテキストを改行します。

`anywhere`

句読点や温存された空白、単語の途中も含め、すべての文字の間で折り返しできるようにし、 GL, WJ, ZWJ の文字クラスや、 `word-break` プロパティでもたらされる折り返しの禁止を一切無視します。どの折り返しの機会も優先されることはありません。ハイフネーションは適用されません。

公式定義
----

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

形式文法
----
```

line-break =
  auto      |
  loose     |
  normal    |
  strict    |
  anywhere

```

例
-

### テキストの折り返しの設定

"々", "ぁ", "。" の前で折り返しが行われるかどうかを確認してください。

#### HTML

```html
<div lang="ja">
  <p class="wrapbox auto">
    auto:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrapbox loose">
    loose:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrapbox normal">
    normal:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrapbox strict">
    strict:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrapbox anywhere">
    anywhere:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
</div>
```

#### CSS

```css
.wrapbox {
  width: 10em;
  margin: 0.5em;
  white-space: normal;
  vertical-align: top;
  display: inline-block;
}
.auto {
  line-break: auto;
}
.loose {
  line-break: loose;
}
.normal {
  line-break: normal;
}
.strict {
  line-break: strict;
}
.anywhere {
  line-break: anywhere;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Text Module Level 3 # line-break-property |

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

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

* CSS and International text


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

object-fit
==========

CSS の **`object-fit`** プロパティは、置換要素、例えば `<img>` や `<video>` などの中身を、コンテナーにどのようにはめ込むかを設定します。

要素のボックス内における置換要素の中身のオブジェクトの配置を変更するには、 `object-position` プロパティを使用することができます。

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

構文
--

```css
object-fit: contain;
object-fit: cover;
object-fit: fill;
object-fit: none;
object-fit: scale-down;

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

`object-fit` プロパティは、以下の一覧の中からキーワードを一つ選んで指定します。

### 値

`contain`

置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大縮小されます。オブジェクト全体がボックス内に表示され、アスペクト比が維持されるので、オブジェクトのアスペクト比とボックスのアスペクト比が合わない場合は、レターボックス表示になります。

`cover`

置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように拡大縮小されます。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトの方が合うように切り取られます。

`fill`

置換コンテンツは、要素のコンテンツボックス全体を埋めるサイズになります。オブジェクト全体が完全にボックスの中を埋めます。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトは合うように引き伸ばされます。

`none`

置換コンテンツは、拡大縮小されません。

`scale-down`

コンテンツは `none` または `contain` を指定したかのようにサイズが決められ、オブジェクトの実際のサイズが小さいほうを採用します。

公式定義
----

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

形式文法
----
```

object-fit =
  fill        |
  contain     |
  cover       |
  none        |
  scale-down

```

例
-

### 画像に object-fit を設定

#### HTML

```html
<section>
  <h2>object-fit: fill</h2>
  <img class="fill" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <img class="fill narrow" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <h2>object-fit: contain</h2>
  <img class="contain" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <img class="contain narrow" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <h2>object-fit: cover</h2>
  <img class="cover" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <img class="cover narrow" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <h2>object-fit: none</h2>
  <img class="none" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <img class="none narrow" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <h2>object-fit: scale-down</h2>
  <img class="scale-down" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <img class="scale-down narrow" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />
</section>
```

#### CSS

```css
h2 {
  font-family:
    Courier New,
    monospace;
  font-size: 1em;
  margin: 1em 0 0.3em;
}

img {
  width: 150px;
  height: 100px;
  border: 1px solid #000;
  margin: 10px 0;
}

.narrow {
  width: 100px;
  height: 150px;
}

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

.none {
  object-fit: none;
}

.scale-down {
  object-fit: scale-down;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Images Module Level 3 # the-object-fit |

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

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

関連情報
----

* その他の画像関連 CSS プロパティ: `object-position`, `image-orientation`, `image-rendering`, `image-resolution`
* `background-size`


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

paint-order
===========

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

**`paint-order`** は CSS のプロパティで、テキストコンテンツやシェイプが描画されるときの塗りつぶしと輪郭 (およびマーカーの描画) の順序を制御することができます。

構文
--

```css
/\* 通常 \*/
paint-order: normal;

/\* 単一の値 \*/
paint-order: stroke; /\* 最初に輪郭、それから塗りつぶしとマーカーを描画 \*/
paint-order: markers; /\* 最初にマーカー、それから塗りつぶしと輪郭 \*/

/\* 複数の値 \*/
paint-order: stroke fill; /\* 最初に輪郭を、それから塗りつぶしを、そしてマーカーを描く \*/
paint-order: markers stroke fill; /\* マーカー、輪郭、塗りつぶしの順に描く \*/
```

値が指定されない場合、既定の描画順序は `fill`, `stroke`, `markers` です。

一つの値で指定されると、それが最初に描画され、続いて他の二つが互いの既定の順序で描画されます。二つの値が指定されると、指定された順序で描画を行い、続いて指定されなかった一つが描画されます。

**メモ:** このプロパティの場合、マーカーは `marker-*` プロパティ (例えば `marker-start` (en-US)) および `<marker>` (en-US) 要素を使用した SVG 図形を描く場合のみ適用されます。 HTML テキストには適用されませんので、その場合は `stroke` および `fill` の順序のみが指定できます。

### 値

`normal`

様々なアイテムを通常の描画順で描画します。

`stroke` (輪郭),
 `fill` (塗りつぶし),
 `markers` (マーカー)

これらの一部またはすべての値を用いて、描画したい順序を指定します。

### 形式文法
```

paint-order =
  normal                         |
  [ fill || stroke || markers ]

```

例
-

### SVG

```html
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
  <text x="10" y="75">stroke in front</text>
  <text x="10" y="150" class="stroke-behind">stroke behind</text>
</svg>
```

### CSS

```css
text {
  font-family: sans-serif;
  font-size: 50px;
  font-weight: bold;
  fill: black;
  stroke: red;
  stroke-width: 4px;
}

.stroke-behind {
  paint-order: stroke fill;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # PaintOrder |

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

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


CSS ページメディア - CSS: カスケーディングスタイルシート

CSS ページメディア
===========

**CSS ページメディア**は CSS のモジュールの一つで、ページ切り替えをどのように扱うかを定義します。

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

### CSS プロパティ

* `page-break-after`
* `page-break-before`
* `page-break-inside`
### アットルール

* `@page`
### 擬似クラス

* `:blank`
* `:first`
* `:left`
* `:right`
仕様書
---

| Specification |
| --- |
| CSS Paged Media Module Level 3  |
| CSS Fragmentation Module Level 3  |


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

padding-block-end
=================

**`padding-block-end`** は CSS のプロパティで、要素のブロック方向の論理的な末尾側のパディングを定義し、それが要素の書字方向やテキストの方向に応じて物理的なパディングに対応づけられます。

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

構文
--

```css
/\* <length> 値 \*/
padding-block-end: 10px; /\* 絶対的な長さ \*/
padding-block-end: 1em; /\* テキストの大きさに対する相対値 \*/

/\* <percentage> 値 \*/
padding-block-end: 5%; /\* ブロックコンテナーの幅に対する割合のパディング \*/

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

### 値

`<length>`

パディングの寸法を固定値で指定します。負の値は指定できません。

`<percentage>`

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

解説
--

`padding-block-end` プロパティは、`padding-top` プロパティと同じ値を取ると仕様で定義されています。しかし、このプロパティが対応づけられる物理的なプロパティは、 `writing-mode`, `direction`, `text-orientation` に設定された値に依存します。したがって、`padding-bottom`, `padding-right`, `padding-left` の何れかに対応づけられる可能性があります。

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

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group`, `table-column` を除くすべての要素 |
| 継承 | なし |
| パーセント値 | 包含ブロックの論理的な幅 |
| 計算値 | `length` 通り |
| アニメーションの種類 | length |

形式文法
----
```

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

#### 結果

仕様書
---

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

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

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

関連情報
----

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


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

margin-inline-start
===================

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

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

構文
--

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

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

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

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

### 値

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

公式定義
----

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

形式文法
----
```

margin-inline-start =
  <'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-lr;
  margin-inline-start: 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-inline-end`
* 対応づけ先の物理的なプロパティ: `margin-top`, `margin-right`, `margin-bottom`, `margin-left`
* `writing-mode`, `direction`, `text-orientation`


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

border-right-color
==================

**`border-right-color`** は CSS のプロパティで、要素の右側の境界線の色を設定します。一括指定プロパティの `border-color` または `border-right` でも設定することができます。

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

構文
--

```css
/\* <color> 値 \*/
border-right-color: red;
border-right-color: #ffbb00;
border-right-color: rgb(255, 0, 0);
border-right-color: hsla(100%, 50%, 25%, 0.75);
border-right-color: currentcolor;
border-right-color: transparent;

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

`border-right-color` プロパティは 1 つの値で指定します。

### 値

`<color>`

右の境界線の色を定義します。

公式定義
----

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

形式文法
----
```

border-right-color =
  <color>     |
  <image-1D>

<image-1D> =
  <stripes()>

<stripes()> =
  stripes( <color-stripe># )

<color-stripe> =
  <color>                            &&
  [ <length-percentage> | <flex> ]?

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

```

例
-

### 境界線が付いた単純な div

#### HTML

```html
<div class="mybox">
  <p>
    これは周囲に境界線があるボックスです。 なお、ボックスのその辺が
    <span class="redtext">赤</span>になっています。
  </p>
</div>
```

#### CSS

```css
.mybox {
  border: solid 0.3em gold;
  border-right-color: red;
  width: auto;
}

.redtext {
  color: red;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* 境界に関する CSS 一括指定プロパティ: `border`, `border-right`, `border-color`
* 他の境界線の色に関する CSS プロパティ: `border-left-color`, `border-bottom-color`, `border-top-color`
* 同じ境界に適用される他の境界関連の CSS プロパティ: `border-right-style`, `border-right-width`


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

scroll-padding-right
====================

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

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

構文
--

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

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

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

### 値

`<length-percentage>`

スクロールポートの上辺からの内側のオフセットで、有効な長さまたはパーセント値です。

`auto`

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

公式定義
----

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

形式文法
----
```

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

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

```

仕様書
---

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

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

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

関連情報
----

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


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

CSS 表
=====

**CSS 表** (CSS Table) は CSS のモジュールの一つで、表データをレイアウトする方法を定義します。

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

### プロパティ

* `border-collapse`
* `border-spacing`
* `caption-side`
* `empty-cells`
* `table-layout`
* `vertical-align`
仕様書
---

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


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

border-inline-end-style
=======================

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

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

構文
--

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

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

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

### 値

`<'border-style'>`

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

公式定義
----

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

### 形式文法
```

border-inline-end-style =
  <line-style>

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

```

例
-

### inline-end-style の設定

#### HTML

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

#### CSS

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

.exampleText {
  writing-mode: vertical-lr;
  border: 5px solid blue;
  border-inline-end-style: dashed;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

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


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

@charset
========

**`@charset`** は CSS のアットルール で、スタイルシートで使う文字エンコーディングを定義します。このルールはスタイルシートの最初の要素でなければならず、これより前には文字を一切記述してはいけません。入れ子の文でないとしても、条件付きグループルールの中で使うことはできません。複数の `@charset` アットルールが定義されると、最初のものだけが使われます。HTML 要素の `style` 属性や、HTML ページの文字セットが関係している `<style>` 要素の中では使えません。

```css
@charset "utf-8";
```

このアットルールは、非 ASCII 文字を一部の CSS プロパティ、例えば `content` などの中で使う際に有用です。

スタイルシートの文字エンコーディングを定義する方法は複数あるので、ブラウザーは次の手順を順番に試します (そして 1 つでも結果が得られると止めます)。

1. ファイル先頭にある Unicode バイト順文字 (BOM) の値
2. `Content-Type:` HTTP ヘッダーの `charset` 属性、またはスタイルシートを送るのに使われたプロトコル内の同等のものから得られた値
3. CSS の `@charset` アットルール
4. 文書参照で定義されている文字エンコーディングを使用。`<link>` 要素の `charset` 属性です。この方式は HTML5 で廃止されており、使うべきではありません。
5. 文書が UTF-8 だと仮定する
構文
--

```css
@charset "UTF-8";
@charset "iso-8859-15";
```

ここで、

*charset*

使う文字エンコーディングを意味する `<string>` です。IANA-registry で定義されているウェブセーフな文字エンコーディングの名前でなければなりません。この名前は必ず 1 文字分の空白文字 (U+0020) の後に続き、二重引用符で囲われ、セミコロン記号で終わる必要があります。もし 1 つのエンコーディングに複数の名前が関連付けられている場合には、使用できるのは *preferred* とマークされているものだけです。

形式文法
----

Error: could not find syntax for this item例
-

### 有効・無効な文字セットの宣言

```css
@charset "UTF-8"; /\* スタイルシートのエンコーディングを Unicode UTF-8 にします\*/
@charset 'iso-8859-15'; /\* 無効です。正しくない引用符が使用されています \*/
 @charset "UTF-8"; /\* 無効です。アットルールより前に文字（空白）があります \*/
@charset UTF-8; /\* 無効です。' か " がなく、文字セットは CSS の <string> ではありません \*/
```

仕様書
---

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # charset① |

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

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

関連情報
----

* 用語集: 文字セット
* 用語集: Unicode


-webkit-tap-highlight-color - CSS: カスケーディングスタイルシート

-webkit-tap-highlight-color
===========================

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

**`-webkit-tap-highlight-color`** は CSS の標準外のプロパティで、リンクがタップされている間に表示される強調色を設定します。強調は、ユーザーがタップしたことが正常に認識されていることを示し、またどの要素がタップされているかを示します。

```css
-webkit-tap-highlight-color: red;
-webkit-tap-highlight-color: transparent; /\* 強調をなくす \*/
```

構文
--

### 値

`<color>` です。

公式定義
----

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

形式文法
----

Error: could not find syntax for this item仕様書
---

標準には含まれていません。 Apple では Safari Web Content Guide での説明があります。

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

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

関連情報
----

* WebKit CSS 拡張
* 関連する CSS 擬似クラス:
    + `:hover`
    + `:active`
    + `:visited`


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

CSS データ型
========

**CSS データ型**は、 CSS のプロパティや関数で使用される具体的な値 (キーワードや単位を含む) を定義しています。これはコンポーネント値型の特殊な種類です。

よく使われるデータ型は、 CSS 値と単位仕様書で定義されています。この仕様書は関数表記も定義しており、これはより複雑な型や処理を指定することができます。その他の型は、該当する型で仕様書で定義されています。

以下に、最もよく目にする型のリファレンスを掲載していますが、すべての CSS 仕様書で定義されている型を網羅しているわけではありません。

構文
--

CSS の形式文法では、データ型は "`<`" と "`>`" の不等号で囲まれたキーワードで表記されます。

テキストのデータ型
---------

これらの型には、キーワード、識別子、文字列、URL などがあります。

定義済みのキーワード

あらかじめ意味が定義されたキーワード、例えば `collapse` の値は `border-collapse` プロパティの値のためのものです。

CSS 全体のキーワード: `initial`

プロパティの初期値として指定された値です。

CSS 全体のキーワード: `inherit`

要素の親に対するプロパティの計算された値。

CSS 全体のキーワード: `unset`

継承されるプロパティであるかどうかに応じて、`inherit` または `initial` として動作します。

`<custom-ident>`

ユーザー定義の識別子です。例えば、`grid-area` プロパティを使って割り当てる名前などです。詳細は `<custom-ident>` のページを参照してください。

`<dashed-ident>`

`<custom-ident>` に 2 つのダッシュで始めなければならないという制限を追加したものです。例えば、CSS カスタムプロパティなどです。詳しくは `<dashed-ident>` のページを参照してください。

`<string>`

引用符で囲まれた文字列で、`content` プロパティの値など使用されます。詳しくは `<string>` のページを参照してください。

`<url>`

リソースへのポインターで、例えば `background-image` プロパティの値などです。詳しくは `url()` のページを参照してください。

数値データ型
------

これらのデータ型は、数量、インデックス、位置などを示すために使用されます。これらのデータ型のほとんどは、Values and Units 仕様書で定義されていますが、それ以外の仕様書にもその仕様書固有のデータ型が記述されています。例えば、CSS Grid Layoutでは、`fr` という単位が定義されています。

`<integer>` (整数)

1 桁以上の 0 から 9 までの 10 進数の値です。詳しくは `<integer>` のページを参照してください。

`<number>` (数値)

小数部分を持つこともある実数で、例えば 1 や 1.34 などです。詳しくは `<number>` のページを参照してください。

`<dimension>` (大きさ)

単位を付けた数値で、 23px や 15em などです。詳しくは `<dimension>` のページを参照してください。

`<percentage>` (パーセント値)

パーセント記号の付いた数値で、例えば 10% などです。詳しくは `<percentage>` のページを参照してください。

`<ratio>` (比率)

`<number> / <number>` という構文で表される比率です。詳細は `<ratio>` のページを参照してください。

`<flex>`

CSS グリッドレイアウトに導入された柔軟な長さで、`fr` の単位が付加された `<dimension>` として記述され、グリッドトラックのサイズ調整に使用されます。詳しくは`<flex>`のページを参照してください。

数量
--

これらの型は、寸法やその他の数量を指定するために使用されます。

`<length>` (長さ)

長さは `<dimension>` の一種で、寸法を表します。詳しくは `<length>` のページを参照してください。

`<angle>` (角度)

角度は `linear-gradient()` などのプロパティで使用されるもので、 `<dimension>` のうち `deg`、`grad`、`rad`、`turn` のいずれかの単位が付いたものです。詳しくは `<angle>` のページを参照してください。

`<time>` (時間)

時間の単位は `<dimension>` に `s` や `ms` の単位を付けたものです。詳しくは `<time>` のページを参照してください。

`<frequency>` (周波数)

周波数は `<dimension>` に `Hz` や `kHz` という単位を付けたものです。詳しくは`<frequency>` のページを参照してください。

`<resolution>` (解像度)

`<dimension>` の一種で、 `dpi`, `dpcm`, `dppx`, `x` のいずれか単位を付けたものです。詳しくは `<resolution>` のページを参照してください。

型の組み合わせ
-------

CSS プロパティの中には、大きさとパーセント値のどちらかを取ることができるものがあります。この場合、パーセント値は、許容される大きさに一致する大きさに解決されます。大きさに加えてパーセント値を取ることができるプロパティは、以下に示す型のいずれかを使用します。

`<length-percentage>`

値として長さまたはパーセント値を受け取ることができる型です。詳しくは `<length-percentage>` のページを参照してください。

`<frequency-percentage>`

値として周波数またはパーセント値を受け取ることができる型です。詳しくは `<frequency-percentage>` のページを参照してください。

`<angle-percentage>`

値として角度またはパーセント値を受け取ることができる型です。詳しくは `<angle-percentage>` のページを参照してください。

`<time-percentage>`

値として時間またはパーセント値を受け取ることができる型です。詳しくは `<time-percentage>` のページを参照してください。

色
-

CSS 色仕様書は、CSS における `<color>` データ型と、色に関するその他の型を定義しています。

`<color>`

キーワードまたは色の数値で指定します。詳しくは `<color>` ページを参照してください。

`<alpha-value>`

色の透明度を指定します。 `<number>` の場合は 0 が完全な透明、1 が完全な不透明となり、`<percentage>` の場合は 0% が完全な透明、100% が完全な不透明となります。

画像
--

CSS 画像仕様書は、グラデーションを含む画像を扱うデータ型を定義しています。

`<image>`

画像への URL 参照や色のグラデーションです。詳しくは `<image>` のページを参照してください。

`<color-stop-list>`

2 つ以上の色停止点のリストで、オプションで色ヒントを使ったトランジション情報があります。

`<linear-color-stop>`

グラデーションのこの部分の色停止点を示すための `<color>` と `<length-percentage>` です。

`<linear-color-hint>`

色がどのように補間されるかを示すための `<length-percentage>` です。

`<ending-shape>`

放射グラデーションで使用されます。`circle` または `ellipse` のキーワード値を指定することができます。

`<size>`

放射グラデーションの末端のの大きさを決定します。キーワードまたは `<length>` を指定できますが、パーセント値は指定できません。

二次元の位置指定
--------

`<position>` データ型は `<background-position>` プロパティで定義されたものと同様に解釈されます。

`<position>`

オブジェクト領域の位置を定義します。`top` や `left` などのキーワードや、`<length-percentage>` の値を指定します。

仕様書
---

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

関連情報
----

* CSS 単位と値
* CSS 入門: 値と単位
* CSS 関数表記


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

CSS シェイプ
========

**CSS シェイプ**は、 CSS で使用する幾何学的な図形を記述します。レベル 1 の仕様書では、 CSS シェイプは浮動状態の要素に適用されます。仕様書では浮動状態の要素においてシェイプを定義する様々な方法を定義しており、コンテンツの折り返し線が要素ボックスの矩形に従うのではなく、図形に回り込むようになります。

基本的な例
-----

以下の例では、左に浮動状態の画像を表示し、`shape-outside` プロパティを `circle(50%)` の値で適用しています。これは円形を作成し、浮動状態の要素で折り返すコンテンツが図形に回り込むようになります。これにより、テキストの行ボックスが折り返す長さが変わります。

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

### プロパティ

* `shape-image-threshold`
* `shape-margin`
* `shape-outside`
### データ型

* `<basic-shape>`
ガイド
---

* CSS シェイプの概要
* ボックス値からのシェイプ
* 基本シェイプ
* 画像からのシェイプ
* CSS でのシェイプのパスの編集 — Firefox 開発ツール
外部リソース
------

* A list of CSS Shapes resources
* CSS Shapes 101
* Creating non-rectangular layouts with CSS Shapes
* How To Use CSS Shapes In Your Web Design
* How To Get Started With CSS Shapes
* What I Learned In One Weekend With CSS Shapes
* CSS vs. SVG: Shapes and Arbitrarily-Shaped UI Components
仕様書
---

| Specification |
| --- |
| CSS Shapes Module Level 1  |


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

min-content
===========

`min-content` は大きさのキーワードで、コンテンツの内在的な最小幅を表しています。テキストコンテンツの場合は、コンテンツがすべてのソフトラッピングの機会を使用した場合に、最も長い単語と同じくらい小さくなることを意味します。

構文
--

```css
/\* 長さとして使用 \*/
width: min-content;
inline-size: min-content;
height: min-content;
block-size: min-content;

/\* グリッドトラックで使用 \*/
grid-template-columns: 200px 1fr min-content;
```

例
-

### min-content をボックスの大きさに使用

#### HTML

```html
<div class="item">Item</div>
<div class="item">Item with more text in it.</div>
```

#### CSS

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

#### 結果

### min-content をグリッド列の大きさに使用

#### HTML

```html
<div id="container">
  <div>Item</div>
  <div>Item with more text in it.</div>
  <div>Flexible item</div>
</div>
```

#### CSS

```css
#container {
  display: grid;
  grid-template-columns: min-content min-content 1fr;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # valdef-width-min-content |

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

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

関連情報
----

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


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

:only-child
===========

**`:only-child`** は CSS の擬似クラスで、兄弟要素がない要素を表します。 `:first-child:last-child` または `:nth-child(1):nth-last-child(1)` と同じですが、詳細度はより低くなります。

```css
/\* 親の唯一の子である <p> 要素をすべて選択 \*/
p:only-child {
  background-color: lime;
}
```

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

**メモ:** 最初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。

構文
--
```

:only-child
```

例
-

### 基本的な例

#### HTML

```html
<div>
  <div>I am an only child.</div>
</div>

<div>
  <div>I am the 1st sibling.</div>
  <div>I am the 2nd sibling.</div>
  <div>
    I am the 3rd sibling,
    <div>but this is an only child.</div>
  </div>
</div>
```

#### CSS

```css
div:only-child {
  color: red;
}

div {
  display: inline-block;
  margin: 6px;
  outline: 1px solid;
}
```

#### 結果

### リストの例

#### HTML

```html
<ol>
  <li>
    First
    <ul>
      <li>This list has just one element.</li>
    </ul>
  </li>
  <li>
    Second
    <ul>
      <li>This list has three elements.</li>
      <li>This list has three elements.</li>
      <li>This list has three elements.</li>
    </ul>
  </li>
</ol>
```

#### CSS

```css
li li {
  list-style-type: disc;
}

li:only-child {
  color: red;
  list-style-type: square;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # only-child-pseudo |

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

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

関連情報
----

* `:only-of-type`
* `:first-child`
* `:last-child`
* `:nth-child`


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

指定値
===

**指定値** (specified value) は、 CSS プロパティにおいて文書のスタイルシートから受け取る値です。指定されたプロパティの指定値は、以下の規則に従って決定されます。

1. 文書のスタイルシートが明示的にプロパティに値を指定した場合は、その値が使用されます。
2. 文書のスタイルシートが値を指定しなかった場合、可能であれば親要素から値を継承します。
3. 上記のいずれも利用できない場合、要素の初期値が使用されます。
例
-

### HTML

```html
<p>ここに指定された色は、 CSS で明示的に与えられています。</p>

<div>
  この要素では、 CSS で何も指定されていないため、
  すべてのプロパティの指定値は既定で初期値になっています。
</div>

<div class="fun">
  <p>
    このフォントファミリーは CSS で明示的に指定されていないため、
    指定値は親から継承されます。 ただし、 border
    は継承されたプロパティではありません。
  </p>
</div>
```

### CSS

```css
.fun {
  border: 1px dotted pink;
  font-family: fantasy;
}

p {
  color: green;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # specified-value |

関連情報
----

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


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

color-scheme
============

**`color-scheme`** は CSS のプロパティで、要素がどのような配色で快適に表示されるかを示すことができます。

オペレーティングシステムの配色の一般的な選択肢は、「ライト」と「ダーク」、または「昼モード」と「夜モード」です。ユーザーがこれらの配色のいずれかを選択すると、 OS はユーザーインターフェースを調整します。これには、フォームコントロール、スクロールバー、および CSS システムカラーの使用値が含まれます。

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

構文
--

```css
color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;
color-scheme: only light;

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

`color-scheme` プロパティの値は以下のキーワードのうちの一つである必要があります。

### 値

`normal`

この要素がどの配色も認識しないため、ブラウザーの既定の配色でレンダリングするべきであることを示します。

`light`

オペレーティングシステムのライト配色を使用して要素をレンダリングできることを示します。

`dark`

オペレーティングシステムのダーク配色を使用して要素をレンダリングできることを示します。

`only`

ユーザーエージェントが要素の配色を上書きすることを禁じます。

特定の要素または `:root` に `color-scheme: only light;` を適用することで、 Chrome の自動ダークテーマによる色上書きを無効にするために使用することができます。

公式定義
----

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

形式文法
----
```

color-scheme =
  normal                                       |
  [ light | dark | <custom-ident> ]+ && only?

```

例
-

### 配色設定の宣言

ページ全体をユーザーの配色設定に合わせるには、 `color-scheme` を `:root` 要素で設定してください。

```css
:root {
  color-scheme: light dark;
}
```

ユーザーの配色環境設定に固有の要素を組み込むには、それらの要素で `color-scheme` を宣言します。

```css
header {
  color-scheme: only light;
}
main {
  color-scheme: light dark;
}
footer {
  color-scheme: only dark;
}
```

### 配色設定に基づいたスタイル設定

配色の好みに基づいて要素をスタイル設定するには、 `prefers-color-scheme` メディアクエリーを用います。下記の例では、`color-scheme` プロパティによってページ全体でオペレーティングシステムの明るい配色と暗い配色の両方を使用することを選択し、 `prefers-color-scheme` を使用して個々の要素にそれらの配色で望ましい前景色と背景色を指定しています。

```css
:root {
  color-scheme: light dark;
}

@media (prefers-color-scheme: light) {
  .element {
    color: black;
    background-color: white;
  }
}

@media (prefers-color-scheme: dark) {
  .element {
    color: white;
    background-color: black;
  }
}
```

また、実験的な `light-dark()` `<color>` 関数 を使用して、よりコンパクトなコード構造で異なる配色の前景色と背景色を設定することもできます。

```css
:root {
  color-scheme: light dark;
}

.element {
  color: light-dark(black, white);
  background-color: light-dark(white, black);
}
```

仕様書
---

| Specification |
| --- |
| CSS Color Adjustment Module Level 1 # color-scheme-prop |

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

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

関連情報
----

* `prefers-color-scheme` メディアクエリーで、配色設定のユーザー設定を検出することができます。
* `light-dark()` カラー関数で、ライトとダークの配色設定の両方に色を設定することができます。
* CSS を使った HTML の要素への色の適用
* その他の色に関するプロパティ: `color`, `accent-color`, `background-color`, `border-color`, `outline-color`, `text-decoration-color`, `text-emphasis-color`, `text-shadow`, `caret-color`, `column-rule-color`
* `background-image`
* `print-color-adjust`


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

CSS トランジション
===========

**CSS トランジション** (CSS Transition) は CSS のモジュールの一つで、特定の CSS プロパティの値の間でスムーズな変化を作り出す方法を定義します。タイミング関数を使って、ただ作り出すだけでなく、その進化を定義することもできます。

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

### プロパティ

* `transition`
* `transition-delay`
* `transition-duration`
* `transition-property`
* `transition-timing-function`
ガイド
---

CSS トランジションの使用

CSS を使ってスムーズな変化を作る方法についての、ステップバイステップのチュートリアルです。この記事では関連する各 CSS プロパティと、それらがどのように作用するかを解説します。

仕様書
---

| Specification |
| --- |
| CSS Transitions  |

関連情報
----

* CSS トランジションに関連して、CSS アニメーションでは、より細かいプロパティの動きの制御を提供します。


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

:nth-child()
============

**`:nth-child()`** は CSS の擬似クラスで、兄弟要素のグループの中での位置に基づいて選択します。

```css
/\* リスト中の 2 番目の <li> 要素を選択 \*/
li:nth-child(2) {
  color: lime;
}

/\* 兄弟要素の中で 3 つおきに要素を選択 \*/
:nth-child(4n) {
  color: lime;
}
```

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

構文
--

`:nth-child()` 擬似クラスは、引数を 1 つ指定し、リストの子要素を要素の位置で選択するためのパターンを記述します。要素の位置は 1 から始まります。
```

:nth-child( <nth> [ of <complex-selector-list> ]? )
```

### キーワード値

`odd`

一連の兄弟要素の中で奇数番目の要素 (1, 3, 5, など) を表します。

`even`

一連の兄弟要素の中で偶数番目の要素 (2, 4, 6, など) を表します。

### 関数記法

`<An+B>`

リスト中の位置が、 `An+B` で定義された数値のパターンと一致する要素を表します。

* `A` は整数の刻み値です。
* `B` は整数の加算値です。
* `n` はすべての正の整数で、 0 から始まります。

リスト中の *An+B* 番目の要素として読むことができます。

例
-

### セレクターの例

`tr:nth-child(odd)` または `tr:nth-child(2n+1)`

HTML テーブルの奇数行 (1、3、5、など) を表します。

`tr:nth-child(even)` または `tr:nth-child(2n)`

HTML テーブルの偶数行 (2、4、6、など) を表します。

`:nth-child(7)`

7 番目の要素を表します。

`:nth-child(5n)`

**5** 番目 [=5×1]、**10** 番目 [=5×2]、**15** 番目 [=5×3]、**等**の要素を表します。最初のものは **0** 番目 [=5x0] が式の結果として返りますが、 `n` が 0 から始まるのに対して添字は 1 から始まるので、一致するものはないという結果になります。これは最初は奇妙に見えるかもしれませんが、次の例のように `B` の部分が `>0` となる場合にもっとよく分かるでしょう。

`:nth-child(n+7)`

7 番目とそれ以降のすべての要素を表します。 **7** 番目 [=0+7]、**8** 番目 [=1+7]、**9** 番目 [=2+7]、**等**です。

`:nth-child(3n+4)`

**4** 番目 [=(3×0)+4]、**7** 番目 [=(3×1)+4]、**10** 番目 [=(3×2)+4]、**13** 番目 [=(3×3)+4]、**等**の要素を表します。

`:nth-child(-n+3)`

兄弟要素のグループの中で最初の 3 つの要素を表します。 [=-0+3, -1+3, -2+3]

`p:nth-child(n)`

兄弟要素のグループの中ですべての `<p>` 要素を表します。これは単純な `p` セレクターと同じ要素を選択します (但し、詳細度はより高くなります)。

`p:nth-child(1)` または `p:nth-child(0n+1)`

兄弟要素のグループの中で最初の `<p>` 要素すべてを表します。これは `:first-child` セレクターと同じです (詳細度も同じです)。

`p:nth-child(n+8):nth-child(-n+15)`

兄弟要素のグループの中で 8 ～ 15 番目の `<p>` 要素を表します。

### 詳細な例

```html
<h3>
  <code>span:nth-child(2n+1)</code> で、子要素の間に
  <code><em></code> がない場合
</h3>
<p>子要素 1, 3, 5, 7 が選択されます。</p>
<div class="first">
  <span>Span 1!</span>
  <span>Span 2</span>
  <span>Span 3!</span>
  <span>Span 4</span>
  <span>Span 5!</span>
  <span>Span 6</span>
  <span>Span 7!</span>
</div>

<br />

<h3>
  <code>span:nth-child(2n+1)</code> で、子要素の間に
  <code><em></code> がある場合
</h3>
<p>
  子要素 1, 5, 7 が選択されます。<br />
  3 は子要素などでカウントに入りますが、
  <code><span></code> ではないので選択されません。
</p>
<div class="second">
  <span>Span!</span>
  <span>Span</span>
  <em>これは `em`</em>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
</div>

<br />

<h3>
  <code>span:nth-of-type(2n+1)</code> で、子要素の間に
  <code><em></code> がある場合
</h3>
<p>
  子要素 1, 4, 6, 8 が選択されます。<br />
  3 は <code><em></code> であり、
  <code><span></code> ではないのでカウントに入りません。
  <code>nth-of-type</code> はこの型の子のみを選択します。
  <code><em></code> は完全に飛ばされ、無視されます。
</p>
<div class="third">
  <span>Span!</span>
  <span>Span</span>
  <em>これは `em`</em>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
</div>
```

#### CSS

```css
html {
  font-family: sans-serif;
}

span,
div em {
  padding: 5px;
  border: 1px solid green;
  display: inline-block;
  margin-bottom: 3px;
}

.first span:nth-child(2n + 1),
.second span:nth-child(2n + 1),
.third span:nth-of-type(2n + 1) {
  background-color: lime;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # nth-child-pseudo |

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

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

関連情報
----

* `:nth-of-type`, `:nth-last-child`


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

@color-profile
==============

**`@color-profile`** は CSS の`アットルール`で、色を指定するために後で使用する `color()` (en-US) 関数で使用できるカラープロファイルを定義し名前を付けます。

構文
--

```css
@color-profile --swop5c {
  src: url("https://example.org/SWOP2006\_Coated5v2.icc");
}
```

### 記述子

`src`

カラープロファイル情報を取得するための URL を指定します。

`rendering-intent`

 カラープロファイルが複数のレンダリングインテントを含む場合、このプロファイルが定義されているよりも小さな色域に色をマッピングする方法を定義するために使用するものを選択します。
 使用する場合は、以下のキーワードのうちの一つでなければなりません。

`relative-colorimetric`

メディア相対測色で、宛先メディアの色域内に入るソースカラーは、それぞれのメディアの白色点に対して変更しないことが求められます。宛先メディアの色域から外れたソースカラーは、さまざまな方法で色域境界上のカラーにマッピングされます。

`absolute-colorimetric`

ICC 絶対測色で、宛先メディアの色域内に入るソースカラーを、採用した白（完全反射板）に対して変更しないことが要求されています。宛先メディアの色域から外れたソースカラーは、さまざまな方法で色域境界上のカラーにマッピングされます。

`perceptual`

特にソースと宛先に大きな違いがある画像（反射プリントに投映されたディスプレイ画面の画像など）には、しばしば好んで使用されます。ソース画像の色を取り込み、独自の方法で出力先メディア用に外観を再最適化します。

`saturation`

このオプションは、オリジナルの相対的な彩度（クロマ）を保持し、ソリッドカラーの純度を保つために作成されました。しかし、知覚的インテントと同様に相互運用性に問題があった。

例
-

この例では、 ISO 12647-2:2004 に準拠したオフセット印刷で、グレード 5 の用紙に CGATS/SWOP TR005 2007 特性データを使用し、インク制限を 300% Total Area Coverage、グレー成分置換 (GCR) を中程度にしたものです。

`src` 記述子は、カラープロファイル情報を取得するための URL を指定します。

```css
@color-profile --swop5c {
  src: url("https://example.org/SWOP2006\_Coated5v2.icc");
}
.header {
  background-color: color(--swop5c 0% 70% 20% 0%);
}
```

形式文法
----
```

@color-profile =
  @color-profile [ <dashed-ident> | device-cmyk ] { <declaration-list> }

```

仕様書
---

| Specification |
| --- |
| CSS Color Module Level 5 # at-profile |

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

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


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

forced-color-adjust
===================

**`forced-color-adjust`** は CSS のプロパティで、特定の要素を強制カラーモードから除外することができます。これにより、これらの値の制御が CSS に戻されます。

構文
--

```css
forced-color-adjust: auto;
forced-color-adjust: none;

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

`forced-color-adjust` プロパティの値は以下のキーワードのうちの一つでなければなりません。

### 値

`auto`

強制カラーモードでは、要素の色がユーザーエージェントによって調整されます。これが既定値です。

**`none`**

強制カラーモードでも、要素の色はユーザーエージェントによって調整されません。

使用上のメモ
------

このプロパティは、ユーザーの色とコントラストの要求に適応するための変更を行う場合にのみ使用してください。例えば、ユーザーエージェントによる色の最適化によって、ハイコントラストやダークモードでの使い勝手が悪くなることを認識した場合などです。このプロパティを使用すると、そのモードでの結果を微調整して、使い勝手を高めることができます。**ユーザーの選択を尊重しないために使用すべきではありません**。

このプロパティは -ms-high-contrast-adjust プロパティを標準化したものです。この接頭辞つきのプロパティは、 Internet Explorer 10 と EdgeHTML 版の Microsoft Edge において、同様の機能を実現します。

公式定義
----

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

形式文法
----
```

forced-color-adjust =
  auto                   |
  none                   |
  preserve-parent-color

```

例
-

### 色の温存

下記の例では、最初のボックスはユーザーが設定した配色を使用します。例えば、 Windows の高コントラストモードの黒スキームでは、背景が黒、文字が白になります。 2 つ目のボックスは `.box` クラスに設定されたサイトの色を保持します。

`forced-colors` メディア特性を使用すると、強制カラーモードの最適化を `forced-color-adjust` プロパティと一緒に追加することができます。

#### CSS

```css
.box {
  border: 5px solid grey;
  background-color: #ccc;
  width: 300px;
  margin: 20px;
  padding: 10px;
}

@media (forced-colors: active) {
  .forced {
    forced-color-adjust: none;
  }
}
```

#### HTML

```html
<div class="box">
  <p>This is a box which should use your color preferences.</p>
</div>

<div class="box forced">
  <p>This is a box which should stay the colors set by the site.</p>
</div>
```

#### 結果

次のスクリーンショットは、 Windows の高コントラストモードで表示したイメージです。

![上の例では、高コントラストモードで、最初のボックスは黒い背景、 2 番目のボックスは CSS のグレーの背景で表示されています。](/ja/docs/Web/CSS/forced-color-adjust/windows-high-contrast.jpg)

仕様書
---

| Specification |
| --- |
| CSS Color Adjustment Module Level 1 # forced-color-adjust-prop |

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

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

関連情報
----

* CSS を使った HTML の要素への色の適用
* Styling for Windows high contrast with standards for forced colors.
* `color-adjust`


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

flex-grow
=========

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

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

* Learn more
* See full compatibility
* Report feedback
**`flex-grow`** は CSS のプロパティで、フレックスコンテナー内の残りの空間が、どれだけフレックスアイテムの主軸方向の寸法に割り当てられるべきかを指定するフレックス伸長係数を設定します。

フレックスコンテナーの主軸方向の寸法が、フレックスアイテムの主軸方向の寸法の合計よりも大きい場合、余った空間はフレックスアイテムに分配され、各アイテムが伸びる大きさは、コンテナーのすべてのアイテムのフレックス伸長係数の合計の割合で按分した値になります。

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

構文
--

```css
/\* <number> 値 \*/
flex-grow: 3;
flex-grow: 0.6;

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

`flex-grow` プロパティは単一の `<number>` として指定します。

### 値

`<number>`

`<number>` をご覧ください。負の値は無効です。既定値は 0 です。

解説
--

このプロパティは、フレックスコンテナー内の残りの空間のうち、どれだけがそのアイテムに割り当てられるか (フレックス伸長係数) を設定します。

主軸方向の寸法は、アイテムの幅または高さのどちらかで、 `flex-direction` の値に依存して決まります。

残りの空間とは、フレックスコンテナーの寸法からすべてのフレックスアイテムの寸法を引いたものです。すべての兄弟アイテムが同じフレックス伸長係数であった場合、すべてのアイテムには残りの空間が等しく割り当てられ、そうでなければ定義されたそれぞれフレックス伸長係数の比率に従って分配されます。

使用するにあたって、 `flex-grow` は他のフレックスプロパティである `flex-shrink` や `flex-basis` とともに使用され、通常はすべての値が設定されることを保証するために一括指定の `flex` を使用して定義します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | フロー内の擬似要素を含むフレックスアイテム |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 数値 |

形式文法
----
```

flex-grow =
  <number [0,∞]>

```

例
-

### フレックスアイテムの伸長係数の設定

この例では、 6 つのフレックスアイテムに合計 8 の伸長係数が配分されており、伸長係数 1 あたり余白の 12.5% になります。

#### HTML

```html
<h4>これは Flex-Grow です</h4>
<h5>A、B、C、F は flex-grow:1 です。 D と E は flex-grow:2 です。</h5>
<div id="content">
  <div class="small" style="background-color:red;">A</div>
  <div class="small" style="background-color:lightblue;">B</div>
  <div class="small" style="background-color:yellow;">C</div>
  <div class="double" style="background-color:brown;">D</div>
  <div class="double" style="background-color:lightgreen;">E</div>
  <div class="small" style="background-color:brown;">F</div>
</div>
```

#### CSS

```css
#content {
  display: flex;

  justify-content: space-around;
  flex-flow: row wrap;
  align-items: stretch;
}

.box {
  flex-grow: 1;
  border: 3px solid rgba(0, 0, 0, 0.2);
}

.box1 {
  flex-grow: 2;
  border: 3px solid rgba(0, 0, 0, 0.2);
}
```

#### 結果

6 つのフレックスアイテムがコンテナーの主軸方向に配置されている場合、それらのフレックスアイテムの内容の主要部分の合計がコンテナーの主軸のサイズよりも小さいと、余分なスペースはサイズのフレックスアイテムに分配され、A、B、C、F はそれぞれ残りの空間の 12.5%、 D と E はそれぞれ残りの空間の 25% を取得します。

仕様書
---

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-grow-property |

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

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

関連情報
----

* CSS フレックスボックスガイド: *フレックスボックスの基本概念*
* CSS フレックスボックスガイド: *主軸方向のフレックスアイテムの比率の制御*
* `flex-grow` is weird. Or is it? Manuel Matuzovic による CSS-Tricks の記事で、どのように flex-grow が動作するかを解説している


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

代替スタイルシート
=========

ウェブページに**代替スタイルシート**を指定すると、ユーザーのニーズや設定に応じて複数のバージョンのページを見る方法を提供します。

Firefox では、*表示* >*スタイルシート*のサブメニューを使用して、ユーザーがスタイルシートを選択することができます。 Internet Explorer でも (IE 8 から) この機能に対応しており、*表示* >*スタイル*から利用できます。 Chrome では (バージョン 48 時点で) この機能を使用するのに拡張機能が必要です。ウェブページがユーザーからスタイルの切り替えができるユーザーインターフェイスを提供することもできます。

例: 代替スタイルシートの指定
---------------

代替スタイルシートはふつう、次のように `<link>` 要素に `rel="alternate stylesheet"` およびび `title="..."` 属性を使用することで指定されます。

```html
<link href="reset.css" rel="stylesheet" type="text/css" />

<link
 href="default.css"
 rel="stylesheet"
 type="text/css"
 title="既定のスタイル" />
<link
 href="fancy.css"
 rel="alternate stylesheet"
 type="text/css"
 title="ファンシー" />
<link
 href="basic.css"
 rel="alternate stylesheet"
 type="text/css"
 title="基本" />
```

この例では、*スタイルシート*のサブメニューに「既定のスタイル」「ファンシー」「基本」という項目が追加され、「既定のスタイル」が選択されています。ユーザーがスタイルを選択すると、ページはそのスタイルシートを使って即座に再描画されます。

どのスタイルが選択されても、 reset.css の規則が常に適用されます。

### やってみましょう

ここをクリックすると、やってみることができる例を見ることができます。

詳細
--

文書内のスタイルシートはどれも、以下のカテゴリのうち一つに当てはまります。

* **常設** (`rel="alternate"` も `title=""` もないもの): 常に文書に適用されます。
* **推奨** (`rel="alternate"` がなく、 `title="..."` があるもの): 既定で適用されますが、代替スタイルシートが選択されると無効化されます。**推奨スタイルシートは一つしか存在できません**ので、異なる title 属性を持つスタイルシートを複数指定すると、いくつかが無視されます。より詳細な説明は外部スタイルシートにおける正しいタイトルの使用をご覧ください。
* **代替** (`rel="alternate stylesheet"` および `title="..."` の指定が必要): 既定では無効で、選択することができます。

<link rel="stylesheet"> 又は `<style>` 要素で、スタイルシートが `title` 属性とともに参照された場合、そのタイトルがユーザに与えられる選択肢のひとつとなります。同じタイトルでリンクされた別のスタイルシートも、同じ選択肢の一部として扱われます。 `title` 属性を付けずにリンクされたスタイルシートは常に適用されます。

標準スタイルシートへリンクするには `rel="stylesheet"` を、代替スタイルシートへリンクするには `rel="alternate stylesheet"` を使用します。これにより、どのスタイルシートのタイトルを標準で選択すべきかがブラウザーに伝わり、代替スタイルシートに対応していないブラウザーでは標準の選択肢が適用されます。

仕様書
---

| Specification |
| --- |
| HTML Standard # rel-alternate |
| HTML Standard # the-link-is-an-alternative-stylesheet |
| HTML Standard # attr-style-title |
| HTML Standard # attr-meta-http-equiv-default-style |
| CSS Object Model (CSSOM) # css-style-sheet-collections |

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

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


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

revert-layer
============

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

**`revert-layer`** は CSS のキーワードで、`カスケードレイヤー`内のプロパティの値を、前回カスケードレイヤー内の要素に一致した CSS ルール内のプロパティの値にロールバックします。このキーワードが指定されたプロパティの値は、現在のカスケードレイヤーで対象とする要素にルールを指定していないものとして再計算されます。

一致する CSS ルールに対して他に戻すカスケードレイヤーがない場合、プロパティ値は現在のレイヤーから派生した`計算値`にロールバックします。さらに、現在のレイヤーに一致する CSS ルールがない場合、要素のプロパティ値は、前回のスタイルオリジンで定義したスタイルにロールバックされます。

このキーワードは、 CSS の一括指定プロパティ `all` を含めるために、あらゆる CSS プロパティに適用することができます。

revert-layer と revert
---------------------

`revert-layer` キーワードを使うと、スタイルを前回のカスケードレイヤーで指定したものにロールバックすることができます。すべてのカスケードレイヤーは作者オリジンに存在します。それに比べて `revert` キーワードは、作成オリジンで適用されたスタイルを除去され、ユーザーオリジンまたはユーザーエージェントオリジンのスタイルにロールバックすることができます。

`revert-layer` キーワードは理想的にはレイヤー内のプロパティに適用することを意味しています。しかし、 `revert-layer` キーワードがレイヤーの外側のプロパティに設定された場合、プロパティの値はユーザーエージェントのスタイルシート（またはユーザースタイルが存在する場合はユーザースタイル）で設定された既定値にロールバックされます。つまり、このシナリオでは `revert-layer` キーワードは `revert` キーワードのように動作します。

例
-

### 既定のカスケードレイヤーの動作

下記の例では、`base` と `special` の 2 つのカスケードレイヤーが CSS で定義されています。既定では、 `@layer` 宣言文の `base` の後に `special` が記載されているため、 `special` レイヤーのルールが `base` レイヤーの競合するルールを上書きします。

#### HTML

```html
<p>この例にはリストがあります。</p>

<ul>
  <li class="item feature">Item one</li>
  <li class="item">Item two</li>
  <li class="item">Item three</li>
</ul>
```

#### CSS

```css
@layer base, special;

@layer special {
  .item {
    color: red;
  }
}

@layer base {
  .item {
    color: blue;
  }
  .feature {
    color: green;
  }
}
```

#### 結果

すべての `<li>` 要素が `special` レイヤーの `item` ルールに一致し、赤くなります。これは既定でのカスケードレイヤーの動作で、 `special` レイヤーのルールが `base` レイヤーのルールよりも引き継がれます。

### スタイルを直前のカスケードレイヤーに戻す

`revert-layer` キーワードが既定値でカスケードレイヤーの動作をどのように変更するかを見てみましょう。この例では、 `special` レイヤーに最初の `<li>` 要素をターゲットとする `feature` ルールが追加格納されています。このルールの `color` プロパティは `revert-layer` に設定されています。

#### HTML

```html
<p>この例にはリストがあります。</p>

<ul>
  <li class="item feature">Item one</li>
  <li class="item">Item two</li>
  <li class="item">Item three</li>
</ul>
```

#### CSS

```css
@layer base, special;

@layer special {
  .item {
    color: red;
  }
  .feature {
    color: revert-layer;
  }
}

@layer base {
  .item {
    color: blue;
  }
  .feature {
    color: green;
  }
}
```

#### 結果

`color` を `revert-layer` に設定すると、 `color` プロパティの値は直前のレイヤー `base` で一致した `feature` ルールの値にロールバックされるので、 'Item one' は緑色になります。

### 直前のオリジンでのスタイルに戻す

この例では、戻す先のカスケードレイヤーがなく、かつ現在のレイヤーにプロパティ値の継承元となる一致する CSS ルールがない場合の `revert-layer` キーワードの動作を示します。

#### HTML

```html
<p>この例にはリストがあります。</p>

<ul>
  <li class="item feature">Item one</li>
  <li class="item">Item two</li>
  <li class="item">Item three</li>
</ul>
```

#### CSS

```css
@layer base {
  .item {
    color: revert-layer;
  }
}
```

#### 結果

すべての `<li>` 要素のスタイル設定は、ユーザーエージェントオリジンの既定値にロールバックされます。

仕様書
---

| Specification |
| --- |
| CSS Cascading and Inheritance Level 5 # revert-layer |

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

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

関連情報
----

* `initial` を使用すると、プロパティを初期値に設定します。
* `inherit` キーワードを使用すると、要素のプロパティを親と同じ値にします。
* `revert` キーワードを使用すると、プロパティをユーザーエージェントのスタイルシート（またはもしあれば、ユーザーのスタイル）で設定された値に初期化します。
* `unset` キーワードを使用すると、継承プロパティは継承値に、それ以外は初期値に設定します。
* `all` プロパティは、すべてのプロパティを一度に initial, inherit, revert, unset の状態にします。


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

offset
======

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

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

* Learn more
* See full compatibility
* Report feedback
**`offset`** は CSS の一括指定プロパティで、要素を定義された経路に沿って動かすのに必要なすべてのプロパティを設定します。

**メモ:** 仕様書の早期の版では、このプロパティを `motion` と呼んでいました。

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

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

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

* `offset-anchor`
* `offset-distance`
* `offset-path`
* `offset-position`
* `offset-rotate`
構文
--

```css
/\* オフセット位置 \*/
offset: auto;
offset: 10px 30px;
offset: none;

/\* オフセット経路 \*/
offset: ray(45deg closest-side);
offset: path("M 100 100 L 300 100 L 200 300 z");
offset: url(arc.svg);

/\* オフセット経路に距離と回転が加わったもの \*/
offset: url(circle.svg) 100px;
offset: url(circle.svg) 40%;
offset: url(circle.svg) 30deg;
offset: url(circle.svg) 50px 20deg;

/\* オフセットアンカーを含む \*/
offset: ray(45deg closest-side) / 40px 20px;
offset: url(arc.svg) 2cm / 0.5cm 3cm;
offset: url(arc.svg) 30deg / 50px 100px;

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

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `offset-position`: `normal`
* `offset-path`: `none`
* `offset-distance`: `0`
* `offset-anchor`: `auto`
* `offset-rotate`: `auto`
 |
| 適用対象 | 座標変換可能要素 |
| 継承 | なし |
| パーセント値 | 一括指定の次の各プロパティとして* `offset-position`: refer to the size of containing block
* `offset-distance`: パスの全長に対する相対値
* `offset-anchor`: relative to the width and the height of the element's reference box
 |
| 計算値 | 一括指定の次の各プロパティとして* `offset-position`: `length` の場合は絶対的な値、それ以外の場合はパーセント値
* `offset-path`: 指定通り
* `offset-distance`: `length` の場合は絶対的な値、それ以外の場合はパーセント値
* `offset-anchor`: `length` の場合は絶対的な値、それ以外の場合はパーセント値
* `offset-rotate`: 指定通り
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `offset-position`: position
* `offset-path`: 計算値の型による
* `offset-distance`: length または パーセント値, calc();
* `offset-anchor`: position
* `offset-rotate`: <angle>, <basic-shape>, <path()> の何れかとして
 |
| 重ね合わせコンテキストの生成 | あり |

形式文法
----
```

offset =
  [ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> || <'offset-rotate'> ]? ]? ]! [ / <'offset-anchor'> ]?

```

例
-

### 経路に沿って要素を動かす

#### HTML

```html
<div id="offsetElement"></div>
```

#### CSS

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

  to {
    offset-distance: 100%;
  }
}

#offsetElement {
  width: 50px;
  height: 50px;
  background-color: blue;
  offset: path("M 100 100 L 300 100 L 200 300 z") auto;
  animation: move 3s linear infinite;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| Motion Path Module Level 1 # offset-shorthand |

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

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

関連情報
----

* `offset-anchor`
* `offset-distance`
* `offset-path`
* `offset-position`
* `offset-rotate`


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

CSS 断片化
=======

**CSS 断片化**は CSS のモジュールの一つで、コンテンツがページ、領域、段をまたがって分割された (断片化された) ときにどのように表示するかを定義します。

断片化が発生するのは、インラインボックスが複数の行に渡る場合です。また、ブロックが段組みレイアウトコンテナーの中で複数の段にまたがる場合や、印刷時にページにまたがる場合です。その要素の表示されるそれぞれの部分は*断片*と呼ばれます。

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

* `box-decoration-break`
* `break-after`
* `break-before`
* `break-inside`
* `orphans`
* `widows`
仕様書
---

| Specification |
| --- |
| CSS Fragmentation Module Level 3  |