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

margin-top
==========

**`margin-top`** は CSS のプロパティで、要素の上側のマージン領域を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。

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

このプロパティは、置換要素ではないインライン要素、例えば `<span>` や `<code>` には効果がありません。

構文
--

```css
/\* <length> 値 \*/
margin-top: 10px; /\* 絶対的な寸法 \*/
margin-top: 1em; /\* 文字の寸法からの相対 \*/
margin-top: 5%; /\* 直近のブロックコンテナーの幅からの相対 \*/

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

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

`margin-top` プロパティは `auto` キーワード、または `<length>` や `<percentage>` で指定されます。正の数、ゼロ、負の数が指定できます。

### 値

`<length>`

マージンの寸法を固定値で表したものです。

`<percentage>`

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

`auto`

ブラウザーが適切な値を選択して使用します。 `margin` を参照してください。

公式定義
----

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

形式文法
----
```

margin-top =
  <length-percentage>  |
  auto

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

```

例
-

### 正と負の上マージンの設定

```css
.content {
  margin-top: 5%;
}
.sidebox {
  margin-top: 10px;
}
.logo {
  margin-top: -5px;
}
#footer {
  margin-top: 1em;
}
```

仕様書
---

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

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

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

関連情報
----

* `margin-right`, `margin-bottom`, `margin-left` と `margin` 一括指定
* 対応付けられる論理的プロパティ: `margin-block-start`, `margin-block-end`, `margin-inline-start`, `margin-inline-end` および一括指定の `margin-block` と `margin-inline`


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

ruby-position
=============

**`ruby-position`** は CSS のプロパティで、ベース要素に対するルビ要素の位置を定義します。要素の上方 (`over`)、下方 (`under`)、文字の間の右側 (`inter-character`) に配置できます。

構文
--

```css
/\* キーワード値 \*/
ruby-position: over;
ruby-position: under;
ruby-position: inter-character;
ruby-position: alternate;

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

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

### 値

`over`

![over の例](/ja/docs/Web/CSS/ruby-position/screen_shot_2015-03-04_at_13.02.20.png)ルビを主テキストの上 (横書きの場合) または右 (縦書きの場合) に配置することを示すキーワードです。

`under`

![under の例](/ja/docs/Web/CSS/ruby-position/screen_shot_2015-03-04_at_13.02.07.png)ルビを主テキストの下 (横書きの場合) または左 (縦書きの場合) に配置することを示すキーワードです。

`inter-character`

ルビをそれぞれの文字の間に配置することを示すキーワードです。

`alternate`

複数のレベルの注釈があった場合に、ルビが上と下の間で交互に表示されることを示すキーワードです。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `alternate` |
| 適用対象 | ルビ注釈コンテナー |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

ruby-position =
  [ alternate || [ over | under ] ]  |
  inter-character

```

例
-

### テキストの上に配置したルビ

#### HTML

```html
<ruby>
  <rb>超電磁砲</rb>
  <rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>
```

#### CSS

```css
ruby {
  ruby-position: over;
}
```

#### 結果

### テキストの下に配置したルビ

#### HTML

```html
<ruby>
  <rb>超電磁砲</rb>
  <rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>
```

#### CSS

```css
ruby {
  ruby-position: under;
}
```

#### 結果

### 交互のルビ

#### HTML

```html
<ruby>
  <rb>A</rb><rb>B</rb><rb>C</rb>
  <rtc>Above</rtc>
  <rtc>Below</rtc>
</ruby>
```

#### CSS

```css
ruby {
  ruby-position: alternate; /\* 初期値でもある \*/
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Ruby Annotation Layout Module Level 1 # rubypos |

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

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

関連情報
----

* HTML のルビ関連要素: `<ruby>`, `<rt>`, `<rp>`, `<rtc>`
* CSS のルビ関連プロパティ: `ruby-align`, `ruby-merge`


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

scroll-padding-block
====================

`scroll-padding-block` は一括指定プロパティで、要素のブロック軸のスクロールパディングを設定します。

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

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

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

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

* `scroll-padding-block-end`
* `scroll-padding-block-start`
構文
--

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

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

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

### 値

`<length-percentage>`

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

`auto`

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

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `scroll-padding-block-start`: `auto`
* `scroll-padding-block-end`: `auto`
 |
| 適用対象 | スクロールコンテナー |
| 継承 | なし |
| パーセント値 | スクロールコンテナーのスクロールポートに対する相対値 |
| 計算値 | 一括指定の次の各プロパティとして* `scroll-padding-block-start`: 指定通り
* `scroll-padding-block-end`: 指定通り
 |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

scroll-padding-block =
  [ auto | <length-percentage [0,∞]> ]{1,2}

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

```

仕様書
---

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # propdef-scroll-padding-block |

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

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

関連情報
----

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


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

mask-origin
===========

**`mask-origin`** は CSS のプロパティで、マスクの原点を設定します。

```css
/\* キーワード値 \*/
mask-origin: content-box;
mask-origin: padding-box;
mask-origin: border-box;
mask-origin: margin-box;
mask-origin: fill-box;
mask-origin: stroke-box;
mask-origin: view-box;

/\* 複数の値 \*/
mask-origin: padding-box, content-box;
mask-origin: view-box, fill-box, border-box;

/\* 標準外のキーワード値 \*/
-webkit-mask-origin: content;
-webkit-mask-origin: padding;
-webkit-mask-origin: border;

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

単純なボックスとして描画される要素では、このプロパティはマスクを配置する領域を指定します。言い換えれば、このプロパティは `mask-image` プロパティで指定された画像の原点を指定します。複数のボックスとして描画される要素、例えば複数行にまたがるインラインボックスや複数のページにまたがるボックスなどでは、マスクの配置領域を決定するために `box-decoration-break` がどのボックスに作用するかを指定します。

構文
--

1 つまたは複数の以下に挙げたキーワード値を、カンマで区切って指定します。

### 値

`content-box`

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

`padding-box`

位置がパディングボックスからの相対位置になります。単純なボックスでは `0 0` がパディング辺の左上隅で、 `100% 100%` は右下隅です。

`border-box`

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

`margin-box`

位置がマージンボックスからの相対位置になります。

`fill-box`

位置がオブジェクトの囲みボックスからの相対位置になります。

`stroke-box`

位置が輪郭線ボックスからの相対位置になります。

`view-box`

直近の SVG ビューポートを参照ボックスとして使用します。 `viewBox` 属性が SVG ビューポートを作成している要素に指定されると、参照ボックスは `viewBox` 属性で示された座標系の原点に配置され、参照ボックスの寸法は `viewBox` 属性の幅と高さに設定されます。

`content`
Non-standard

`content-box` と同じです。

`padding`
Non-standard

`padding-box` と同じです。

`border`
Non-standard

`border-box` と同じです。

公式定義
----

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

形式文法
----
```

mask-origin =
  <coord-box>#

<coord-box> =
  <paint-box>  |
  view-box

<paint-box> =
  <visual-box>  |
  fill-box      |
  stroke-box

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

```

例
-

### マスクの原点を border-box に設定する

下のボックス内の CSS を更新して、他の可能な値を試してみてください。

仕様書
---

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask-origin |

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

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

関連情報
----

* Clipping and Masking in CSS


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

visibility
==========

**`visibility`** は CSS のプロパティで、文書のレイアウトを変更することなく要素を表示したり非表示にしたりします。このプロパティは `<table>` の行や列を隠すこともできます。

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

要素を不可視にして*レイアウトから除去する*には、 `visibility` を使用する代わりに `display` プロパティを `none` に設定してください。

構文
--

```css
/\* キーワード値 \*/
visibility: visible;
visibility: hidden;
visibility: collapse;

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

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

### 値

`visible`

要素のボックスが可視になります。

`hidden`

要素のボックスは不可視になります (描画されません) が、レイアウトには通常通り影響します。子孫要素は `visibility` が `visible` に設定されていれば可視になります。(タブ順で操作された時などに) 要素はフォーカスを受け取ることができません。

`collapse`

* `<table>` の行、列、列グループ、行グループでは、行や列が不可視になり、 (表の列や行に ``display`: none` が適用された場合のように) 占めていた領域も除去されます。しかし、他の行や列の寸法は、不可視になった行や列のセルが存在するときのように計算されます。この値は表全体の幅や高さを強制的に再計算することなく、すばやく行や列を不可視にすることができます。
* フレックス項目では、不可視になり、占めていた領域は削除されます。
* XUL 要素では、通常は寸法に影響するその他のスタイルに関わらず、要素の寸法が常にゼロと計算されますが、マージンは有効になります。
* その他の要素では、 `collapse` は `hidden` と同じと扱われます。

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

要素の `visibility` の値に `hidden` を使用すると、 アクセシビリティツリーから削除されます。これは要素及びその子孫要素が読み上げ技術でアナウンスされない結果になります。

補間
--

visibility の値は*可視*及び*不可視*の間で補間可能です。従って、開始または終了の値の一つが `visible` でない限りは、補間は行われません。値は離散的なステップとして補間され、タイミング関数の `0` と `1` 間の値が、 `visible` に対応し、タイミング関数の他の値 (トランジションの開始点または終了点でのみ、または [0、1] の外側の y 値を有する `cubic-bezier()` 関数の結果として) はより近い終了点に対応します。

注
-

* 現在の一部のブラウザーでは、 `visibility:collapse` の対応がないか、部分的に不正確です。表の行や列以外の要素に用いた場合、誤って `visibility:hidden` のように扱われることがあります。
* `visibility:collapse` を用いた表の、折り畳まれたセルに入れ子の表があると、入れ子の表で `visibility:visible` が明示的に指定されていない限りは、表のレイアウトが変わる可能性があります。
公式定義
----

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

形式文法
----
```

visibility =
  visible   |
  hidden    |
  collapse

```

例
-

### 基本的な例

#### HTML

```html
<p class="visible">The first paragraph is visible.</p>
<p class="not-visible">The second paragraph is NOT visible.</p>
<p class="visible">
  The third paragraph is visible. Notice the second paragraph is still occupying
  space.
</p>
```

#### CSS

```css
.visible {
  visibility: visible;
}

.not-visible {
  visibility: hidden;
}
```

### 表の例

#### HTML

```html
<table>
  <tr>
    <td>1.1</td>
    <td class="collapse">1.2</td>
    <td>1.3</td>
  </tr>
  <tr class="collapse">
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table>
```

#### CSS

```css
.collapse {
  visibility: collapse;
}

table {
  border: 1px solid red;
}

td {
  border: 1px solid gray;
}
```

仕様書
---

| Specification |
| --- |
| CSS Display Module Level 3 # visibility |

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

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

関連情報
----

* `display`


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

text-transform
==============

**`text-transform`** は CSS のプロパティで、要素のテキストを大文字表記する方法を指定します。テキストをすべて大文字にしたり、すべて小文字にしたり、各単語の先頭を大文字にしたりすることを指定します。フリガナの読みやすさを向上するのにも役立ちます。

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

`text-transform` プロパティは、以下のように言語固有の大文字小文字の扱いを考慮します。

* トルコ語 (`tr`)、アゼルバイジャン語 (`az`)、クリミア・タタール語 (`crh`)、ヴォルガ・タタール語 (`tt`)、バシキール語 (`ba`) などのチュルク語族にはドットの有無が異なる 2 種類の `i` があり、大文字・小文字のペアも `i`/`İ` と `ı`/`I` の 2 組があります。
* ドイツ語 (`de`) では、`ß` の大文字が `SS` になります。
* オランダ語 (`nl`) では二重音字 `ij` が、単語の最初の文字のみ大文字にする `text-transform: capitalize` を指定しても `IJ` になります。
* ギリシャ語 (`el`) では離接的接続のエータ (`ή`/`Ή`) を除き、単語全体が大文字であるときに母音のアクセント記号がなくなります (`ά`/`Α`)。また、1 文字目にアクセント記号がある二重母音はアクセント記号がなくなり、2 文字目の母音にトレマがつきます (`άι`/`ΑΪ`)。
* ギリシャ語 (`el`) で、小文字のシグマは `σ` と `ς` の 2 種類あります。`ς` は、単語の末尾にあるシグマに限り使用します。大文字のシグマ (`Σ`) に `text-transform: lowercase` を適用すると、ブラウザーは状況に応じて正しい小文字を選択しなければなりません。
* アイルランド語 (`ga`) では、頭文字が大文字化されていても特定の接頭辞文字が小文字のままになります。例えば `text-transform: uppercase` は `ar aon tslí` を、予想される `AR AON TSLÍ` ではなく `AR AON tSLÍ` にします (Firefox に限る)。大文字化によりハイフンが削除される場合もあり、`an t-uisce` は `AN tUISCE` になります (また、`text-transform: lowercase` ではハイフンが適切に再挿入されます)。

言語は HTML の `lang` 属性や XML の `xml:lang` (en-US) 属性で定義します。

**メモ:** これらの特定のケースはブラウザーにより異なりますので、ブラウザーの互換性を確認してください。

構文
--

```css
/\* キーワード値 \*/
text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: full-width;
text-transform: full-size-kana;

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

`capitalize`

それぞれの単語の最初の*文字*を強制的に大文字に変換させるキーワードです。ほかの文字は変更しません。すなわち、要素のテキストで記載した元の表記を維持します。文字とは、文字または数字の一般カテゴリーの一部である任意の Unicode 文字です
Experimental
。単語の先頭にある句読点や記号は無視されます。

**メモ:** `capitalize` が言語固有の先頭文字を大文字にする慣習 (英語で冠詞を除外するなど) に従うと期待するべきではありません。

**メモ:** `capitalize` キーワードは CSS 1 および CSS 2.1 で定義されていたものでした。この結果、最初の文字を計算する方法は、ブラウザーによって異なっていました (Firefox は `-` および `_` を文字として捉えていましたが、他はそうではありませんでした。 Webkit 及び Gecko は `ⓐ` のような文字から作られた記号を、誤って文字として認識していました。 Internet Explorer 9 は最も CSS 2 の定義に近かったのですが、いくつかおかしいものがありました)。正しいふるまいを詳細に定義したので、 CSS Text Level 3 ではこれを一掃しました。ブラウザーの互換性表の `capitalize` の行は、それぞれのエンジンがこの詳細に定義された振る舞いに対応し始めたバージョンを記載しています。

`uppercase`

すべての文字を大文字に変換させるキーワードです。

`lowercase`

すべての文字を小文字に変換させるキーワードです。

`none`

すべての文字を変換させないキーワードです。

`full-width`

一般的な東アジアの文字 (中国語や日本語など) において、強制的に文字 — 主に記号やラテン文字 — を正方形の枠内に (全角で) 表記して、揃えて表示するキーワードです。

`full-size-kana`

このキーワードは一般に `<ruby>` によるフリガナで使用され、すべての小文字の仮名文字を同等の大文字の仮名文字に変換することで、ルビで使われるフォントの大きさによる読みやすさの問題を解消します。

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

テキストの長い区間に `text-transform` の値を `uppercase` で設定すると、失読症のような認知障碍を持つ人にとって読むのが難しくなることがあります。

* MDN "WCAG を理解する ― ガイドライン 1.4 の解説"
* W3C Understanding WCAG 2.1
公式定義
----

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

形式文法
----
```

text-transform =
  none                                                |
  [ capitalize | uppercase | lowercase ] || full-width || full-size-kana  |
  math-auto

```

例
-

### `none`

```html
<p>
  Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
</p>
<p>
  text-transform: none
  <strong
 ><span
 >Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span
 ></strong
 >
</p>
```

```css
span {
  text-transform: none;
}
strong {
  float: right;
}
```

文字を変換しない例です。

### capitalize (一般的)

```html
<p>
  Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
</p>
<p>
  text-transform: capitalize
  <strong
 ><span
 >Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span
 ></strong
 >
</p>
```

```css
span {
  text-transform: capitalize;
}
strong {
  float: right;
}
```

頭文字を大文字にする例です。

### capitalize (句読点)

```html
<p>
  Initial String
  <strong
 >(this) "is" [a] –short– -test- «for» *the* _css_ ¿capitalize?
    ?¡transform!</strong
 >
</p>
<p>
  text-transform: capitalize
  <strong
 ><span
 >(this) "is" [a] –short– -test- «for» *the* _css_ ¿capitalize?
      ?¡transform!</span
 ></strong
 >
</p>
```

```css
span {
  text-transform: capitalize;
}
strong {
  float: right;
}
```

単語の前の区切り記号が無視される様子を示す例です。このキーワードは、文字または数字の一般カテゴリに含まれる Unicode 文字である、最初の文字が対象です。

### capitalize (記号)

```html
<p>
  Initial String
  <strong>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</strong>
</p>
<p>
  text-transform: capitalize
  <strong><span>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</span></strong>
</p>
```

```css
span {
  text-transform: capitalize;
}
strong {
  float: right;
}
```

頭文字の記号が無視されるかを示す例です。このキーワードは、文字または数字の一般カテゴリーに含まれる Unicode 文字である、最初の文字が対象です。

### capitalize (オランダ語の二重音字 ij)

```html
<p>
  Initial String
  <strong lang="nl">The Dutch word: "ijsland" starts with a digraph.</strong>
</p>
<p>
  text-transform: capitalize
  <strong
 ><span lang="nl"
 >The Dutch word: "ijsland" starts with a digraph.</span
 ></strong
 >
</p>
```

```css
span {
  text-transform: capitalize;
}
strong {
  float: right;
}
```

オランダ語の二重音字 *ij* を 1 文字として扱わなければならないことを示す例です。

### uppercase (一般的)

```html
<p>
  Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
</p>
<p>
  text-transform: uppercase
  <strong
 ><span
 >Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span
 ></strong
 >
</p>
```

```css
span {
  text-transform: uppercase;
}
strong {
  float: right;
}
```

テキストを大文字に変換する例です。

### uppercase (ギリシャ語の母音字)

```html
<p>
  Initial String
  <strong>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</strong>
</p>
<p>
  text-transform: uppercase
  <strong
 ><span lang="el">Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</span></strong
 >
</p>
```

```css
span {
  text-transform: uppercase;
}
strong {
  float: right;
}
```

離接的接続の *eta* を除くギリシャ語の母音字はアクセント記号を持たないこと、および二重母音の最初の文字のアクセント記号が 2 文字目の母音字のトレマになることを示す例です。

### lowercase (一般的)

```html
<p>
  Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
</p>
<p>
  text-transform: lowercase
  <strong
 ><span
 >Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span
 ></strong
 >
</p>
```

```css
span {
  text-transform: lowercase;
}
strong {
  float: right;
}
```

テキストを小文字に変換する例です。

### lowercase (ギリシャ文字 Σ)

```html
<p>
  Initial String
  <strong>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</strong>
</p>
<p>
  text-transform: lowercase
  <strong
 ><span
 >Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</span
 ></strong
 >
</p>
```

```css
span {
  text-transform: lowercase;
}
strong {
  float: right;
}
```

ギリシャ文字のシグマ (`Σ`) が、状況に応じて一般的な小文字のシグマ (`σ`) または単語の末尾での表記 (`ς`) に変換される例です。

### lowercase (リヒテンシュタイン語)

```html
<p>
  Initial String
  <strong>Ĩ is a Lithuanian LETTER as is J́</strong>
</p>
<p>
  text-transform: lowercase
  <strong><span lang="lt">Ĩ is a Lithuanian LETTER as is J́</span></strong>
</p>
```

```css
span {
  text-transform: lowercase;
}
strong {
  float: right;
}
```

これはリヒテンシュタインの文字 `Ĩ` および `J́` が小文字に変換されるとドットを保持する様子を示します。

### full-width (一般)

```html
<p>
  Initial String
  <strong
 >0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</strong
 >
</p>
<p>
  text-transform: full-width
  <strong
 ><span
 >0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</span
 ></strong
 >
</p>
```

```css
span {
  text-transform: full-width;
}
strong {
  width: 100%;
  float: right;
}
```

一部の文字は半角と全角の 2 種類の表現があり、それらは別々の Unicode コードポイントを持ちます。全角文字は、アジア圏の表意文字と自然な形で混在させるために使用します。

### full-width (日本語の半角カタカナ)

```html
<p>
  Initial String
  <strong>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</strong>
</p>
<p>
  text-transform: full-width
  <strong><span>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</span></strong>
</p>
```

```css
span {
  text-transform: full-width;
}
strong {
  width: 100%;
  float: right;
}
```

日本語の半角カタカナは、8 ビットの文字コードでカタカナを表現するために使われていました。通常の (全角の) カタカナ文字とは異なり、濁点の付いた文字は、文字本体と濁点の 2 つのコードポイントで表現されます。 `full-width` は、これらの文字を全角に変換する際に、1 つのコードポイントにまとめます。

### full-size-kana

```html
<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
</p>
```

```css
p:nth-of-type(2) {
  text-transform: full-size-kana;
}
```

仕様書
---

| Specification |
| --- |
| CSS Text Module Level 3 # text-transform |

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

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

関連情報
----

* `font-variant`


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

word-break
==========

**`word-break`** は CSS のプロパティで、改行しなければテキストがコンテンツボックスからあふれる場合に、ブラウザーが改行を挿入するかどうかを指定します。

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

構文
--

```css
/\* キーワード値 \*/
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word; /\* 非推奨 \*/

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

`word-break` プロパティは、下記のリストの中から 1 つを選んで指定します。

### 値

`normal`

既定の改行規則を使用します。

`break-all`

CJK (中国語、台湾語、日本語、韓国語) 以外のテキストにおいて、単語中などでの文字の改行に関する禁則処理を解除し、どの文字の間でも改行するようにします。

`keep-all`

CJK テキストの改行を許可しません。 CJK 以外のテキストについては `normal` と同じ挙動となります。

`break-word`
非推奨

`overflow-wrap` プロパティの値とは関係なく、 `word-break: normal` や `overflow-wrap: anywhere` と同じ効果になります。

**メモ:** `word-break: break-word` および `overflow-wrap: break-word` (`overflow-wrap` を参照) とは対照的に、 `word-break: break-all` はテキストがコンテナーからちょうどあふれたところで (単語全体を次の行に送れば途中で改行を防ぐことができる場合であっても) 位置で改行を生成します。

**メモ:** `word-break: break-word` は非推奨ですが、指定した場合は `overflow-wrap` プロパティの値とは関係なく、 `word-break: normal` や `overflow-wrap: anywhere` と同じ効果になります。

公式定義
----

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

形式文法
----
```

word-break =
  normal      |
  keep-all    |
  break-all   |
  break-word

```

例
-

### HTML

```html
<p>1. <code>word-break: normal</code></p>
<p class="normal narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>2. <code>word-break: break-all</code></p>
<p class="breakAll narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>3. <code>word-break: keep-all</code></p>
<p class="keepAll narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>4. <code>word-break: break-word</code></p>
<p class="breakWord narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>
```

### CSS

```css
.narrow {
  padding: 10px;
  border: 1px solid;
  width: 500px;
  margin: 0 auto;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 1px;
}

.normal {
  word-break: normal;
}

.breakAll {
  word-break: break-all;
}

.keepAll {
  word-break: keep-all;
}

.breakWord {
  word-break: break-word;
}
```

仕様書
---

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

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

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

関連情報
----

* `overflow-wrap`
* `hyphens`
* `line-break`
* テキストの分割と折り返しのガイド


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

left
====

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

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

構文
--

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

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

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

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

### 値

`<length>`

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

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

`<percentage>`

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

`auto`

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

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

`inherit`

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

解説
--

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

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

`left` と `right` の両方が定義されていて、幅の制約がない場合、要素は両方を満たすように伸縮されます。要素が両方を満たすように伸縮できない場合、要素の位置は*過剰指定*になります。このような場合、包含ブロックが左書きの場合は `left` の値が優先され、包含ブロックが右書きの場合は `right` の値が優先されます。

公式定義
----

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

形式定義
----
```

left =
  auto                 |
  <length-percentage>

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

```

例
-

### 位置指定要素

#### HTML

```html
<div id="wrap">
  <div id="example\_1">
    <pre>
      position: absolute;
      left: 20px;
      top: 20px;
    </pre>
    <p>
      The only containing element for this div is the main window, so it
      positions itself in relation to it.
    </p>
  </div>

  <div id="example\_2">
    <pre>
      position: relative;
      top: 0;
      right: 0;
    </pre>
    <p>Relative position in relation to its siblings.</p>
  </div>

  <div id="example\_3">
    <pre>
      float: right;
      position: relative;
      top: 20px;
      left: 20px;
    </pre>
    <p>Relative to its sibling div above, but removed from flow of content.</p>

    <div id="example\_4">
      <pre>
        position: absolute;
        bottom: 10px;
        right: 20px;
      </pre>
      <p>Absolute position inside of a parent with relative position</p>
    </div>

    <div id="example\_5">
      <pre>
        position: absolute;
        right: 0;
        left: 0;
        top: 200px;
      </pre>
      <p>Absolute position with both left and right declared</p>
    </div>
  </div>
</div>
```

#### CSS

```css
#wrap {
  width: 700px;
  margin: 0 auto;
  background: #5c5c5c;
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  white-space: pre-line;
  word-wrap: break-word;
}

#example\_1 {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 20px;
  top: 20px;
  background-color: #d8f5ff;
}

#example\_2 {
  width: 200px;
  height: 200px;
  position: relative;
  top: 0;
  right: 0;
  background-color: #c1ffdb;
}
#example\_3 {
  width: 600px;
  height: 400px;
  position: relative;
  top: 20px;
  left: 20px;
  background-color: #ffd7c2;
}

#example\_4 {
  width: 200px;
  height: 200px;
  position: absolute;
  bottom: 10px;
  right: 20px;
  background-color: #ffc7e4;
}
#example\_5 {
  position: absolute;
  right: 0;
  left: 0;
  top: 100px;
  background-color: #d7ffc2;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Positioned Layout Module Level 3 # insets |

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

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

関連情報
----

* `inset`: 関連するすべてのプロパティである `top`, `bottom`, `left`, `right` の一括指定
* 対応する論理的プロパティ: `inset-block-start`, `inset-block-end`, `inset-inline-start`, `inset-inline-end` および一括指定の `inset-block` と `inset-inline`
* `position`


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

margin-inline-end
=================

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

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

構文
--

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

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

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

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

### 値

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

公式定義
----

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

形式文法
----
```

margin-inline-end =
  <'margin-top'>

```

例
-

### インライン方向の末尾側のマージンの設定

#### HTML

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

#### CSS

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

.exampleText {
  writing-mode: vertical-lr;
  margin-inline-end: 20px;
  background-color: #c8c800;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

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


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

-webkit-mask-attachment
=======================

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

`mask-image` が指定されている場合、 `-webkit-mask-attachment` はそのマスク画像の位置をビューポート内で固定するか、それとも包含ブロックと共にスクロールするかを指定します。

```css
/\* キーワード値 \*/
-webkit-mask-attachment: scroll;
-webkit-mask-attachment: fixed;
-webkit-mask-attachment: local;

/\* 複数の値 \*/
-webkit-mask-attachment: scroll, local;
-webkit-mask-attachment: fixed, local, scroll;

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

構文
--

### 値

scroll

`scroll` が指定された場合、マスク画像はマスク画像を含むブロックと共にビューポート内でスクロールします。

fixed

`fixed` が指定された場合、マスク画像は包含する要素と共にスクロールせず、ビューポート内の一定の場所に残ります。

公式定義
----

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

形式文法
----

Error: could not find syntax for this item例
-

### ビューポートにマスク画像を固定

```css
body {
  -webkit-mask-image: url("images/mask.png");
  -webkit-mask-attachment: fixed;
}
```

仕様書
---

Not part of any standard.

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

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

関連情報
----

* `mask`
* `mask-clip`
* `-webkit-mask-box-image`
* `mask-origin`
* `mask-image`
* `-webkit-mask-composite`
* `mask-repeat`


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

::spelling-error
================

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

**`::spelling-error`** は CSS の擬似要素で、綴りが正しくないとユーザーエージェントが判断したテキストの区間を示します。

利用できるプロパティ
----------

`::spelling-error` 擬似要素では、一部の CSS プロパティのみが利用できます。

* `color`
* `background-color`
* `cursor`
* `caret-color`
* `outline` およびその個別指定プロパティ
* `text-decoration` および関連プロパティ
* `text-emphasis-color`
* `text-shadow`
構文
--

```css
::spelling-error {}
```

例
-

### 文書の単純なスペルチェック

この例では、最終的に対応しているブラウザーでは、表示されたスタイルでフラグ付きのスペルミスを強調表示します。

#### HTML

```html
<p contenteditable spellcheck="true">
  My friends are coegdfgfddffbgning to the party tonight.
</p>
```

#### CSS

```css
::spelling-error {
  text-decoration: wavy red;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # selectordef-spelling-error |

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

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

関連情報
----

* `::grammar-error`


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

overscroll-behavior-x
=====================

**`overscroll-behavior-x`** は CSS のプロパティで、スクロール領域の水平方向の境界に達したときのブラウザーの挙動を設定します。

全体的な説明は `overscroll-behavior` を参照してください。

```css
/\* キーワード値 \*/
overscroll-behavior-x: auto; /\* 既定値 \*/
overscroll-behavior-x: contain;
overscroll-behavior-x: none;

/\* グローバル値 \*/
overscroll-behavior-x: inherit;
overscroll-behavior-x: initial;
overscroll-behavior-x: unset;
```

構文
--

`overscroll-behavior-x` プロパティは、次の値の一覧のうち一つのキーワードで指定します。

### 値

`auto`

スクロールの末端における既定の振る舞いが通常通りに発生します。

`contain`

この値が設定された要素の内部では、スクロールの末端における既定の振る舞いが見られますが、隣接するスクロール領域に対するスクロール連鎖はありません。例えば、基底となる要素はスクロールしません。

`none`

隣接するスクロール領域に対するスクロール連鎖はなく、スクロールの末端における既定の振る舞いが抑制されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | 非置換ブロックレベル要素と非置換インラインブロック要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

overscroll-behavior-x =
  contain  |
  none     |
  auto

```

例
-

### 背後にある要素が横にスクロールするのを防ぐ

簡単な overscroll-behavior-x の例 (ソースコードも参照) の中で、一方がもう一方の中にある二つのブロックレベルボックスがあります。外側のボックスは広い `width` を持っているので、ページは水平にスクロールします。内側のボックスは width (と `height`) が小さく、ビューポート内にきちんと収まりますが、内容は広い `width` を持ち、水平にスクロールします。

既定では、内側のボックスがスクロールして境界に達すると、ページ全体がスクロールし始めますが、これはおそらく望ましくない動きです。これを防ぐために、内側のボックスに `overscroll-behavior-x: contain` を設定することができます。

```css
main > div {
  height: 300px;
  width: 500px;
  overflow: auto;
  position: relative;
  top: 100px;
  left: 100px;
  overscroll-behavior-x: contain;
}
```

仕様書
---

| Specification |
| --- |
| CSS Overscroll Behavior Module Level 1 # overscroll-behavior-longhands-physical |

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

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

関連情報
----

* スクロールを制御する: 引いて更新や末端の効果のカスタマイズ
* 対応付けられる論理的プロパティ: `overscroll-behavior-inline`, `overscroll-behavior-block`


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

border-block-start
==================

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

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

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

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

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

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

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

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

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

### 値

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

`<'border-width'>`

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

`<'border-style'>`

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

`<'color'>`

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

公式定義
----

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

形式文法
----
```

border-block-start =
  <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-start: 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`


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

border-width
============

**`border-width`** は一括指定の CSS のプロパティで、要素の境界の幅を設定します。

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

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

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

* `border-bottom-width`
* `border-left-width`
* `border-right-width`
* `border-top-width`
構文
--

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

/\* <length> 値 \*/
border-width: 4px;
border-width: 1.2rem;

/\* 上下 | 左右 \*/
border-width: 2px 1.5em;

/\* 上 | 左右 | 下 \*/
border-width: 1px 2em 1.5cm;

/\* 上 | 右 | 下 | 左 \*/
border-width: 1px 2em 0 4rem;

/\* グローバルキーワード \*/
border-width: inherit;
border-width: initial;
border-width: revert;
border-width: unset;
```

`border-width` プロパティは 1 つ、2 つ、3 つ、4 つの値を使って指定することができます。

* 値が **1 つ**指定された場合、**全 4 辺**に同じ幅が適用される。
* 値が **2 つ**指定された場合、1 つ目の幅は**上下**、2 つ目は**左右**の辺に適用される。
* 値が **3 つ**指定された場合、1 つ目の幅は**上**、2 つ目は**左右**、3 つ目は**下**の辺に適用される。
* 値が **4 つ**指定された場合、幅はそれぞれ**上**、**右**、**下**、**左**の順 (時計回り) に適用される。
### 値

`<line-width>`

境界の幅を、明示的な非負の `<length>` またはキーワードで定義します。キーワードの場合は、以下の値の何れかでなければなりません。

* `thin`
* `medium`
* `thick`

**メモ:** 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、何れか 1つを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `border-top-width`: `medium`
* `border-right-width`: `medium`
* `border-bottom-width`: `medium`
* `border-left-width`: `medium`
 |
| 適用対象 | すべての要素。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `border-bottom-width`: 絶対的な長さ、または `border-bottom-style` が `none` または `hidden` の場合は `0`
* `border-left-width`: 絶対的な長さ、または `border-left-style` が `none` または `hidden` の場合は `0`
* `border-right-width`: 絶対的な長さ、または `border-right-style` が `none` または `hidden` の場合は `0`
* `border-top-width`: 絶対的な長さ、または `border-top-style` が `none` または `hidden` の場合は `0`
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `border-bottom-width`: length
* `border-left-width`: length
* `border-right-width`: length
* `border-top-width`: length
 |

形式文法
----
```

border-width =
  <line-width>{1,4}

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

```

例
-

### 値と長さの組み合わせ

#### HTML

```html
<p id="sval">one value: 6px wide border on all 4 sides</p>
<p id="bival">
  two different values: 2px wide top and bottom border, 10px wide right and left
  border
</p>
<p id="treval">
  three different values: 0.3em top, 9px bottom, and zero width right and left
</p>
<p id="fourval">
  four different values: "thin" top, "medium" right, "thick" bottom, and 1em
  left
</p>
```

#### CSS

```css
#sval {
  border: ridge #ccc;
  border-width: 6px;
}
#bival {
  border: solid red;
  border-width: 2px 10px;
}
#treval {
  border: dotted orange;
  border-width: 0.3em 0 9px;
}
#fourval {
  border: solid lightgreen;
  border-width: thin medium thick 1em;
}
p {
  width: auto;
  margin: 0.25em;
  padding: 0.25em;
}
```

#### Result

仕様書
---

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

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

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

関連情報
----

* 境界線に関する一括指定プロパティ: `border`, `border-style`, `border-color`
* 境界線の幅に関するプロパティ: `border-bottom-width`, `border-left-width`, `border-right-width`, `border-top-width`


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

<color>
=======

**`<color>`** は CSS のデータ型で、一つの色を表します。
 `<color>` はアルファチャネルの*透過値*を含むことがあり、この色を背景とどれだけ混合するかを示すこともできます。

**メモ:** `<color>` の色は詳細に定義されていますが、出力機器によって（時には著しく）違って見えるかもしれません。出力機器の大半は色補正がされておらず、ブラウザーによっては出力機器の色プロファイルに対応していないからです。

構文
--

```css
/\* 名前付きの色 \*/
rebeccapurple
aliceblue

/\* RGB 16 進値 \*/
#f09
#ff0099

/\* RGB (Red, Green, Blue) \*/
rgb(255 0 153)
rgb(255 0 153 / 80%)

/\* HSL (Hue, Saturation, Lightness) \*/
hsl(150 30% 60%)
hsl(150 30% 60% / 0.8)

/\* HWB (Hue, Whiteness, Blackness) \*/
hwb(12 50% 0%)
hwb(194 0% 0% / 0.5)

/\* LAB (Lightness, A-axis, B-axis) \*/
lab(50% 40 59.5)
lab(50% 40 59.5 / 0.5)

/\* LCH (Lightness, Chroma, Hue) \*/
lch(52.2% 72.2 50)
lch(52.2% 72.2 50 / 0.5)

/\* Oklab (Lightness, A-axis, B-axis) \*/
oklab(59% 0.1 0.1)
oklab(59% 0.1 0.1 / 0.5)

/\* Oklch (Lightness, Chroma, Hue) \*/
oklch(60% 0.15 50)
oklch(60% 0.15 50 / 0.5)

/\* light-dark \*/
light-dark(white, black)
light-dark(rgb(255 255 255), rgb(0 0 0))
```

`<color>` は以下の何れかの方法で定義することができます。

* キーワード: `<named-color>` （`blue` や `pink` など）、`<system-color>`、`currentcolor`
* 16 進記法: `<hex-color>` （`#ff0000` など）
* 色空間の引数を関数記法を使用して:
    + sRGB 色空間: `hsl()`, `hwb()`, `rgb()`
    + CIELAB 色空間: `lab()`, `lch()`
    + Oklab 色空間: `oklab()`, `oklch()`
    + その他の色空間: `color()`
* 2 色の混合: `color-mix()`
* 2 つの色の指定。 1 つ目の色は明るいカラースキームに、 2 つ目は暗いカラースキームに使用: `light-dark()`
### currentcolor キーワード

`currentcolor` キーワードは、要素の `color` プロパティの値を表します。これで `color` の値をプロパティが既定で受け取らなくても利用することができます。

`currentcolor` が `color` プロパティの値として使用された場合、 `color` プロパティが継承した値が使用されます。

```html
<div style="color: blue; border: 1px dashed currentcolor;">
  この文字列の色は青です。
  <div style="background: currentcolor; height:9px;"></div>
  このブロックは青い境界線で囲まれています。
</div>
```

### 色成分の欠落

CSS 色関数の各成分（古いカンマ区切り文字を使用するものを除く）は、キーワード `none` を指定することで、欠落成分として指定することができます。

色の補間 では、一部の色成分を補間したいが他の色成分は補間したくない場合に、欠落成分を明示的に指定するのに有益です。ほかはすべて、欠落した成分は適切な単位で値がゼロになります（`0`、`0%`、`0deg` など）。例えば、次の例は補間以外で使用しても等価な色です。

```css
/\* これらは等価 \*/
color: oklab(50% none -0.25);
color: oklab(50% 0 -0.25);

/\* これらは等価 \*/
background-color: hsl(none 100% 50%);
background-color: hsl(0deg 100% 50%);
```

補間
--

色の補間はグラデーション、トランジション、アニメーションで発生します。

`<color>` 値を補完する場合、まずは色が指定された色空間へ変換され、その計算値のそれぞれの成分が直線状に補間され、補間の速度はトランジションやアニメーションではイージング関数で定められます。
 補間色空間の既定値は Oklab ですが、一部の色関連の関数記法では `<color-interpolation-method>` で上書きできます。

### 成分が欠落した補間

#### 同じ色空間での色の補間

 補間色空間内に正確に収まる色を補間するときは、一方の色から欠落している部品は、他の色から持っ ている同じ成分の値に置き換えられます。
 例えば、 次の 2 つの表現は等価です。

```css
color-mix(in oklch, oklch(none 0.2 10), oklch(60% none 30))
color-mix(in oklch, oklch(60% 0.2 10), oklch(60% 0.2 30))
```

**メモ:** 両方の色から成分が欠落している場合、この成分は補間後に欠落します。

#### 異なる色空間からの色の補間: 類似成分

補間される色が補間色空間にない場合は、以下の表に記述されているように、同じカテゴリーの**類似成分**に基づいて、その欠落した成分が変換後の色に変換されます。

| カテゴリー | 類似成分 |
| --- | --- |
| 赤 | `R`, `X` |
| 緑 | `G`, `Y` |
| 青 | `B`, `Z` |
| 明度 | `L` |
| 彩度 | `C`, `S` |
| 色相 | `H` |
| a | `a` |
| b | `b` |

例

* `color(xyz 0.2 0.1 0.6)` における `X` (`0.2`) は `rgb(50% 70% 30%)` における `R` (`50%`) の類似です。
* `hsl(0deg 100% 80%)` における `H` (`0deg`) は `oklch(80% 0.1 140)` における `H` (`140`) の類似です。

補間色空間として Oklch を使用し、下記の 2 色を例とします。

```css
lch(80% 30 none)
color(display-p3 0.7 0.5 none)
```

前処理の手順は次の通りです。

1. 両方の色で欠けている成分をゼロ値で置き換えます。

```css
lch(80% 30 0)
color(display-p3 0.7 0.5 0)
```

2. 両方の色を補間色空間に変換します。

```css
oklch(83.915% 0.0902 0.28)
oklch(63.612% 0.1522 78.748)
```

3. 変換された色の成分が、対応する元の色の欠落した成分と類似している場合は、欠落した成分としてリセットします。

```css
oklch(83.915% 0.0902 none)
oklch(63.612% 0.1522 78.748)
```

4. 欠落している部品は、他の変換された色の同じ部品で置き換えます。

```css
oklch(83.915% 0.0902 78.748)
oklch(63.612% 0.1522 78.748)
```

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

色を見分けることが難しい人がいます。 WCAG 2.2 (en-US) 勧告では、色を特定のメッセージ、動作、結果を伝える唯一の手段として使用することを避けるよう強く勧告しています。詳しくは色と色のコントラスト (en-US)をご覧ください。

形式文法
----
```

<color> =
  <absolute-color-base>  |
  currentcolor           |
  <system-color>

<absolute-color-base> =
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent

<absolute-color-function> =
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>

<rgb()> =
  <legacy-rgb-syntax>  |
  <modern-rgb-syntax>

<rgba()> =
  <legacy-rgba-syntax>  |
  <modern-rgba-syntax>

<hsl()> =
  <legacy-hsl-syntax>  |
  <modern-hsl-syntax>

<hsla()> =
  <legacy-hsla-syntax>  |
  <modern-hsla-syntax>

<hwb()> =
  hwb( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<lab()> =
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<lch()> =
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )

<oklab()> =
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<oklch()> =
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )

<color()> =
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )

<legacy-rgb-syntax> =
  rgb( <percentage>#{3} , <alpha-value>? )  |
  rgb( <number>#{3} , <alpha-value>? )

<modern-rgb-syntax> =
  rgb( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )

<legacy-rgba-syntax> =
  rgba( <percentage>#{3} , <alpha-value>? )  |
  rgba( <number>#{3} , <alpha-value>? )

<modern-rgba-syntax> =
  rgba( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )

<legacy-hsl-syntax> =
  hsl( <hue> , <percentage> , <percentage> , <alpha-value>? )

<modern-hsl-syntax> =
  hsl( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<legacy-hsla-syntax> =
  hsla( <hue> , <percentage> , <percentage> , <alpha-value>? )

<modern-hsla-syntax> =
  hsla( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<hue> =
  <number>  |
  <angle>

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

<colorspace-params> =
  <predefined-rgb-params>  |
  <xyz-params>

<predefined-rgb-params> =
  <predefined-rgb> [ <number> | <percentage> | none ]{3}

<xyz-params> =
  <xyz-space> [ <number> | <percentage> | none ]{3}

<predefined-rgb> =
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020

<xyz-space> =
  xyz      |
  xyz-d50  |
  xyz-d65

```

例
-

### 色の値のテスター

この例では、 `<div>` とテキスト入力を用意しています。入力欄に有効な色を入力すると、 `<div>` にその色が採用され、色の値をテストすることができます。

#### HTML

```html
<div></div>
<hr />
<label for="color">有効な色の値を入力してください:</label>
<input type="text" id="color" />
```

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

```
const inputElem = document.querySelector("input");
const divElem = document.querySelector("div");

function validTextColor(stringToTest) {
  if (stringToTest === "inherit" || stringToTest === "transparent") {
    return false;
  }

  const div = document.createElement("div");
  div.style.color = stringToTest;
  return !!div.style.color;
}

inputElem.addEventListener("input", () => {
  if (validTextColor(inputElem.value)) {
    divElem.style.backgroundColor = inputElem.value;
    divElem.textContent = "";
  } else {
    divElem.removeAttribute("style");
    divElem.textContent = "Invalid color value";
  }
});
```

#### 結果

### 彩度最高の色

この例では、 sRGB 色空間で彩度が最高の sRGB 色を表示させています。

#### HTML

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

#### CSS
```

body {
  display: flex;
  flex-wrap: wrap;
}
div {
  height: 80px;
  margin: 10px;
  width: 80px;
}
```

```css
div:nth-child(1) {
  background-color: hsl(0 100% 50%);
}
div:nth-child(2) {
  background-color: hsl(30 100% 50%);
}
div:nth-child(3) {
  background-color: hsl(60 100% 50%);
}
div:nth-child(4) {
  background-color: hsl(90 100% 50%);
}
div:nth-child(5) {
  background-color: hsl(120 100% 50%);
}
div:nth-child(6) {
  background-color: hsl(150 100% 50%);
}
div:nth-child(7) {
  background-color: hsl(180 100% 50%);
}
div:nth-child(8) {
  background-color: hsl(210 100% 50%);
}
div:nth-child(9) {
  background-color: hsl(240 100% 50%);
}
div:nth-child(10) {
  background-color: hsl(270 100% 50%);
}
div:nth-child(11) {
  background-color: hsl(300 100% 50%);
}
div:nth-child(12) {
  background-color: hsl(330 100% 50%);
}
```

#### 結果

### さまざまな明度の赤

この例では、 sRGB 色空間で様々な明度の赤を表示しています。

#### HTML

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

#### CSS
```

body {
  display: flex;
  flex-wrap: wrap;
}
div {
  box-sizing: border-box;
  height: 80px;
  margin: 10px;
  width: 80px;
}
```

```css
div:nth-child(1) {
  background-color: hsl(0 100% 0%);
}
div:nth-child(2) {
  background-color: hsl(0 100% 20%);
}
div:nth-child(3) {
  background-color: hsl(0 100% 40%);
}
div:nth-child(4) {
  background-color: hsl(0 100% 60%);
}
div:nth-child(5) {
  background-color: hsl(0 100% 80%);
}
div:nth-child(6) {
  background-color: hsl(0 100% 100%);
  border: solid;
}
```

#### 結果

### 様々な彩度の赤

この例では、 sRGB 色空間でさまざまな彩度の赤を表示させています。

#### HTML

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

#### CSS
```

body {
  display: flex;
  flex-wrap: wrap;
}
div {
  height: 80px;
  margin: 10px;
  width: 80px;
}
```

```css
div:nth-child(1) {
  background-color: hsl(0 0% 50%);
}
div:nth-child(2) {
  background-color: hsl(0 20% 50%);
}
div:nth-child(3) {
  background-color: hsl(0 40% 50%);
}
div:nth-child(4) {
  background-color: hsl(0 60% 50%);
}
div:nth-child(5) {
  background-color: hsl(0 80% 50%);
}
div:nth-child(6) {
  background-color: hsl(0 100% 50%);
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Color Module Level 4 # color-syntax |

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

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

関連情報
----

* `opacity` プロパティは要素レベルで色の透明度を定義できます。
* `<hue>` データ型は色を色相関で表します。
* このデータ型を使用するよく使われるプロパティ: `color`, `background-color`, `border-color`, `box-shadow`, `outline-color`, `text-shadow`
* CSS を使った HTML の要素への色の適用
* New functions, gradients, and hues in CSS colors (Level 4) (MDN blog, 2023)


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

:right
======

**`:right`** は CSS の擬似クラスで、`@page` アットルールで使われ、印刷文書の右側のページすべてを表します。

```css
/\* 印刷時に右側のページを選択 \*/
@page :right {
  margin: 2in 3in;
}
```

そのページが左側か右側かは、文書の主要な書字方向によって決まります。例えば、最初のページの主な書字方向が左から右であれば `:right` ページになります。書字方向が右から左であれば `:left` ページになります。

**メモ:** この擬似クラスは、*ページボックス*の `margin`, `padding`, `border`, `background` の各プロパティのみを変更するために使用することができます。他のすべてのプロパティは無視され、ページ内の文書コンテンツではなく、ページボックスにのみ影響します。

構文
--
```

:right
```

例
-

### 右側のページにマージンを設定

```css
@page :right {
  margin: 2in 3in;
}
```

仕様書
---

| Specification |
| --- |
| CSS Paged Media Module Level 3 # left-right-first |

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

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

関連情報
----

* `@page`
* ページに関する他の擬似クラス: `:first`, `:left`


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

padding-bottom
==============

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

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

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

![CSS の padding-bottom プロパティの要素ボックスへの影響](/ja/docs/Web/CSS/padding-bottom/padding-bottom.svg)

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

構文
--

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

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

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

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

### 値

`<length>`

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

`<percentage>`

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

公式定義
----

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

形式文法
----
```

padding-bottom =
  <length-percentage [0,∞]>

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

```

例
-

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

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

仕様書
---

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

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

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

関連情報
----

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


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

flex-basis
==========

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-basis`** は CSS のプロパティで、フレックスアイテムの主要部分の初期の寸法を設定します。 `box-sizing` で設定していない限り、このプロパティはコンテンツボックスの寸法を定義します。

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

この例では、3 つすべてのアイテムの `flex-grow` と `flex-shrink` プロパティがともに `1` に設定されており、フレックスアイテムが初期の `flex-basis` から伸長したり縮小したりできることを示しています。

このデモでは、最初のアイテムの `flex-basis` を変更します。そして、その `flex-basis` を基準にして伸長したり縮小したりします。つまり、例えば最初のアイテムの `flex-basis` が `200px` の場合、最初は 200px で表示されますが、他のアイテムが最低でも `min-content` の大きさであることを考慮して、利用可能な空間に合わせて縮小されます。

下記の図は、 Firefox の Flexbox インスペクターがアイテムがどのような寸法になるのかを理解するのに役立つことを示しています。

![Firefox の Flexbox インスペクターでは、アイテムが縮小された後のサイズが表示されます。](/ja/docs/Web/CSS/flex-basis/firefox-flex-basis.png)

**メモ:** (`auto` 以外の) `flex-basis` と `width` (または `flex-direction: column` の場合は `height`) の両方が要素に設定されていた場合、 `flex-basis` が優先されます。

構文
--

```css
/\* 幅を指定する \*/
flex-basis: 10em;
flex-basis: 3px;
flex-basis: 50%;
flex-basis: auto;

/\* 固有のサイズ指定キーワード \*/
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/\* フレックスアイテムの内容に基づいて自動設定する \*/
flex-basis: content;

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

`flex-basis` プロパティは、`content` キーワードまたは `<'width'>` で指定します。

### 値

`<'width'>`

以下の単位のいずれかです。

* `<length>` は絶対的な値を設定します。
* `<percentage>` は包含ブロックのコンテンツ領域の幅または高さに対する割合を設定します。
* `auto` は横書きモードでは width の値、縦書きモードでは height の値を使用します。対応する値も `auto` であった場合、代わりに `content` の値が使用されます。
* `max-content` は幅の内在的な推奨値を設定します。
* `min-content` は幅の内在的な最小値を設定します。
* `fit-content` は、現在の要素のコンテンツに基づいて計算された、 `min-content` と `max-content` の値で囲まれた、包含ブロックのコンテンツ領域の使用可能な最大サイズを設定します。

`content`

フレックスアイテムの内容物に基づいて、自動的に大きさを決めます。

**メモ:** この値はフレックスボックスレイアウトの初期リリースでは定義されていませんでしたので、古い実装では対応していない場合があります。主軸方向の寸法 (width または height) を `auto` にするのと合わせて `auto` を使用することで、同等の効果を得られます。

* もともと、`flex-basis:auto` は「自身の `width` または `height` プロパティを参照する」という意味でした。
* その後 `flex-basis:auto` の意味が自動拡大縮小設定に変わり、また「自身の `width` または `height` プロパティを参照する」キーワードとして "main-size" を導入しました。これは Firefox バグ 1032922 で実装しました。
* さらに、この変更が Firefox バグ 1093316 で戻されて `auto` が再び「自身の `width` または `height` プロパティを参照する」になり、自動拡大縮小設定を行うための `content` キーワードを新たに導入しました (content キーワードの追加は Firefox バグ 1105111 で扱っています)。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | フロー内の擬似要素を含むフレックスアイテム |
| 継承 | なし |
| パーセント値 | フレックスコンテナーの内部の主要な寸法に対する相対値 |
| 計算値 | 指定通り。ただし相対的な長さはは絶対的な長さに変換される |
| アニメーションの種類 | length または パーセント値, calc(); |

形式文法
----
```

flex-basis =
  content    |
  <'width'>

```

例
-

### フレックスアイテムの初期の寸法の設定

`flex-basis` の様々な値を設定した例です。

#### HTML

```html
<ul class="container">
  <li class="flex flex1">1: flex-basis test</li>
  <li class="flex flex2">2: flex-basis test</li>
  <li class="flex flex3">3: flex-basis test</li>
  <li class="flex flex4">4: flex-basis test</li>
  <li class="flex flex5">5: flex-basis test</li>
</ul>

<ul class="container">
  <li class="flex flex6">6: flex-basis test</li>
</ul>
```

#### CSS

```css
.container {
  font-family: arial, sans-serif;
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
}

.flex {
  background: #6ab6d8;
  padding: 10px;
  margin-bottom: 50px;
  border: 3px solid #2e86bb;
  color: white;
  font-size: 14px;
  text-align: center;
  position: relative;
}

.flex::after {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 100%;
  margin-top: 10px;
  width: 100%;
  color: #333;
  font-size: 12px;
}

.flex1 {
  flex-basis: auto;
}

.flex1::after {
  content: "auto";
}

.flex2 {
  flex-basis: max-content;
}

.flex2::after {
  content: "max-content";
}

.flex3 {
  flex-basis: min-content;
}

.flex3::after {
  content: "min-content";
}

.flex4 {
  flex-basis: fit-content;
}

.flex4::after {
  content: "fit-content";
}

.flex5 {
  flex-basis: content;
}

.flex5::after {
  content: "content";
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* CSS フレックスボックスガイド: *フレックスボックスの基本概念*
* CSS フレックスボックスガイド: *主軸方向のフレックスアイテムの比率の制御*
* `width`


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

symbols()
=========

**`symbols()`** は CSS の関数で、カウンタースタイルをインラインで、 `list-style` のようなプロパティの値で直接定義することができます。 `@counter-style` とは異なり、 `symbols()` は*無名*です (すなわち一度しか使用できません)。 `@counter-style` よりも機能は劣りますが、より簡単でより短く書くことができます。

構文
--

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

`<symbols-type>` は以下のうちの一つで指定することができます。

* `cyclic`: このシステムでは、与えられた値を定義された順に循環させ、最後に到達すると最初に戻ります。
* `numeric`: このシステムでは、与えられた値を位取り記数法の連続した単位として解釈します。
* `alphabetic`: このシステムでは、与えられた値をアルファベット記数法として解釈します。位取り記数法と似ていますが、 `0` がありません。
* `symbolic`: このシステムでは値を循環させ、循環ごとに数を増やします（最初の循環では 1 回、 2 回目は 2 回、など）。
* `fixed`: このシステムでは与えられた値を一度ずつ使用し、その後はアラビア数字で代替します。
例
-

### HTML

```html
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ol>
```

### CSS

```css
ol {
  list-style: symbols(cyclic "\*" "†" "‡");
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Counter Styles Level 3 # symbols-function |

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

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

関連情報
----

* `@counter-style`
* `list-style-type` および対応する一括指定である `list-style`


全称セレクター - CSS: カスケーディングスタイルシート

全称セレクター
=======

CSS の**全称セレクター** (universal selector) (`*`) は、すべての種類の要素に一致します。

```css
/\* すべての要素を選択 \*/
\* {
  color: green;
}
```

全称セレクターは `@namespace` を使用して名前空間を付けることができます。これは、複数の名前空間を含む文書、例えば HTML5 とインライン SVG または MathML、または複数の語彙が混在した XML などを扱うのに有用です。

* `ns|*` - 名前空間 *ns* の中ですべての要素に一致します
* `*|*` - すべての要素に一致します
* `|*` - 名前空間が宣言されていないすべての要素に一致します
構文
--

```css
\* { スタイルプロパティ }
```

アスタリスクは単純セレクターを伴う場合に省略可能です。たとえば、 `*.warning` と `.warning` は等価です。

例
-

### CSS

```css
\* [lang^="en"] {
  color: green;
}

\*.warning {
  color: red;
}

\*#maincontent {
  border: 1px solid blue;
}

.floating {
  float: left;
}

/\* 浮動要素の後の兄弟要素で自動的に浮動を解除する \*/
.floating + \* {
  clear: left;
}
```

### HTML

```html
<p class="warning">
  <span lang="en-us">A green span</span> in a red paragraph.
</p>
<p id="maincontent" lang="en-gb">
  <span class="warning">A red span</span> in a green paragraph.
</p>
```

### 結果

### 名前空間

この例では、セレクターは example 名前空間内の要素にのみ一致します。

```css
@namespace example url(http://www.example.com);
example|\* {
  color: blue;
}
```

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # the-universal-selector |

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

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

関連情報
----

* CSS セレクター
* CSS の学習: セレクター


CSS 基本ユーザーインターフェイス - CSS: カスケーディングスタイルシート

CSS 基本ユーザーインターフェイス
==================

**CSS 基本ユーザーインターフェイス** (CSS Basic User Interface) モジュールでは、輪郭線プロパティ、ポインティングデバイスやキーボードへの視覚的フィードバック、 UI ウィジェットの既定の外見の変更など、ユーザーインターフェイス関連の機能のレンダリングや機能を定義することができます。

基本ユーザーインターフェイスプロパティは、操作している要素に視覚的な手がかりを提供することで、使い勝手やアクセシビリティを向上させるために使用することができます。これには、マウスカーソルやキーボード方向のフォーカスナビゲーションのスタイル設定、編集可能な要素にフォーカスがあるときのキャレットカーソルのスタイル設定などがあります。このモジュールは、要素のボックスモデルの寸法とスタイル設定に影響を与えることなく、フォーカスされた（またはフォーカスされていない）要素に輪郭線を提供するために指定されました。この UI モジュールは、ユーザーインターフェイスコントロールのスタイル設定も可能にします。

### 基本ユーザーインターフェイスの操作

基本ユーザーインターフェイスプロパティが UI 機能の外観をどのように変化させるかを見るには、この例の要素を操作してください。なお、このサンプルの機能の中には、使い勝手を向上させるものもあれば、ユーザー体験を損なうものもあります。

CSS の `outline` と `outline-offset` プロパティは、どの要素が現在フォーカスを持っているかをユーザーにフィードバックするために使用されました。 `accent-color` は、すべてのフォームコントロールにテーマ色を提供します。テキスト編集時に現れるキャレットは、 `caret-color` プロパティのおかげで同じ色になっています。これらはすべて UI の改善と考えることができます。

いくつかの機能はユーザビリティを損ないます。 `cursor` プロパティは、ブラウザー既定値からカーソルを変更するために使用され、混乱を招きます。 `resize` プロパティは 2 つ目の `<textarea>` がリサイズ可能になるのを防ぎ、 `pointer-events` プロパティは 3 つ目の `<textarea>` がクリックイベントを受け取るのを防ぎます。キーボードを使用してフォーカスを移動することは可能です。

この基本ユーザーインターフェイスサンプルのコードを見るには、 GitHub でソースを見てください。

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

プロパティ
-----

* `accent-color`
* `appearance`
* `caret`、以下の一括指定
    + `caret-color`
    + `caret-shape`
* `cursor`
* `nav-down`
Experimental
* `nav-left`
Experimental
* `nav-right`
Experimental
* `nav-up`
Experimental
* `outline`、以下の一括指定
    + `outline-color`
    + `outline-style`
    + `outline-width`
* `outline-offset`
* `pointer-events`
* `resize`
* `user-select`
ガイド
---

フォームの学習: フォームへの高度なスタイル設定

`appearance` を使用してフォームコントロールをスタイル設定する方法を説明します。

関連概念
----

* CSS の `cursor` プロパティ
* SVG の `cursor` (en-US) 属性
* CSS の `:focus`, `:focus-within`, `:focus-visible` 擬似クラス
* `CaretPosition` インターフェイス
仕様書
---

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

関連情報
----

* Tips for Designing Useful and Usable Focus Indicators (2016)


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

object-position
===============

**`object-position`** は CSS のプロパティで、ボックス内における置換要素の中身の配置を指定します。ボックスの領域内で置換要素のオブジェクトに覆われていない部分は、要素の背景が表示されます。

置換要素のオブジェクトの内在サイズ（すなわち、自然なサイズ）を、その要素のボックス内に合わせる方法を調整するために、`object-fit` プロパティを使用することができます。

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

構文
--

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

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

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

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

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

### 値

`<position>`

要素のボックスの端に対する 2D 上の位置を表す、1 個から 4 個の値です。相対値または絶対値のオフセットを指定できます。

**メモ:** 置換要素がボックス外にはみ出る位置も指定できます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `50% 50%` |
| 適用対象 | 置換要素 |
| 継承 | あり |
| パーセント値 | 要素自身の幅と高さに対する相対値 |
| 計算値 | 指定通り |
| アニメーションの種類 | 反復可能リスト |

形式文法
----
```

object-position =
  <position>

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

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

```

例
-

### 画像の内容の配置を設定

#### HTML

それぞれ MDN のロゴを表示する 2 つの `<img>` 要素があります。

```html
<img id="object-position-1" src="mdn.svg" alt="MDN Logo" />
<img id="object-position-2" src="mdn.svg" alt="MDN Logo" />
```

#### CSS

この CSS には、`<img>` 要素自体の既定のスタイルと、2 つの画像それぞれに個別のスタイルが含まれています。

```css
img {
  width: 300px;
  height: 250px;
  border: 1px solid black;
  background-color: silver;
  margin-right: 1em;
  object-fit: none;
}

#object-position-1 {
  object-position: 10px;
}

#object-position-2 {
  object-position: 100% 10%;
}
```

1 枚目の画像は、その左端が要素のボックスの左端から 10 ピクセルはみ出して配置されています。2 番目の画像は、その右端が要素のボックスの右端と同じ位置にあり、要素のボックスの高さの 10% の位置にあります。

#### 結果

仕様書
---

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

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

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

関連情報
----

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


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

box-flex-group
==============

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

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

**`box-flex-group`** は CSS のプロパティで、フレックスボックスの子要素をフレックスグループに割り当てます。

```css
/\* <integer> 値 \*/
box-flex-group: 1;
box-flex-group: 5;

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

フレックスグループに割り当てられたフレックス要素について、最初のフレックスグループは 1 であり、より高い値は下位のフレックスグループを示します。初期値は 1 です。ボックスの余白が分割されるとき、ブラウザーは最初にすべての要素が最初のフレックスグループに入ると想定します。そのグループ内のそれぞれの要素は、同じフレックスグループ内の他の要素のフレックス係数と比較した、その余蘊そのフレックス係数に基づいて余白が与えられます。グループ内のすべてのフレックスな子の余白が最大まで増加した場合は、前のフレックスグループから残っている余白を使用して、次のフレックスグループ内の子に対して処理が繰り返されます。フレックスグループがなくなり、まだ余白が残っている場合は、 `box-pack` プロパティに従って、追加の余白が包含ボックス内で配分されます。

推奨される子の余白が計算された後でボックスがあふれた場合は、追加の余白を追加するときに使用されるのと同様の方法で、フレックス要素からスペースが削除されます。各フレックスグループを順番に調べ、各要素のフレックス係数の比率に従ってスペースを削除します。要素は最小幅より小さくはなりません。

構文
--

`box-flex-group` プロパティは、任意の正の `<integer>` で指定します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `1` |
| 適用対象 | フロー内のボックス要素の子 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----

Error: could not find syntax for this item例
-

### シンプルな使用例

当初のフレックスボックスの仕様書では、 `box-flex-group` を使用してフレックスの子を異なるグループに割り当て、自由な空間を配分できるようになっていました。

```css
article:nth-child(1) {
  -webkit-box-flex-group: 1;
}

article:nth-child(2) {
  -webkit-box-flex-group: 2;
}
```

これは WebKit ベースのブラウザーのみが接頭辞つきで対応しましたが、仕様書のその後の版ではこれとは同等の機能ではありませんでした。代わりに、フレックスコンテナー内の空間の配分は、 `flex-basis`, `flex-grow`, `flex-shrink` を使用して制御するようになっています。

仕様書
---

どの仕様書にも含まれていません。

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

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

関連情報
----

* `box-flex`
* `box-ordinal-group`
* `box-pack`


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

block-size
==========

**`block-size`** は CSS のプロパティで、書字方向に応じた要素ブロックの水平または垂直方向の寸法を定義します。これは `width` または `height` プロパティに相当し、 `writing-mode` の値によって変わります。

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

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

構文
--

```css
/\* <length> 値 \*/
block-size: 300px;
block-size: 25em;

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

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

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

### 値

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

公式定義
----

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

形式文法
----
```

block-size =
  <'width'>

```

例
-

### 縦書き時のブロック方向の寸法

#### HTML

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

#### CSS

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

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # dimension-properties |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

関連情報
----

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


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

image-orientation
=================

**`image-orientation`** は CSS のプロパティで、画像の向きのレイアウトに依存しない修正を指定します。

```css
/\* キーワード値 \*/
image-orientation: none;
image-orientation: from-image; /\* 画像の EXIF データを使用 \*/

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

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

構文
--

### 値

`none`

既定の初期値です。追加の画像の回転を適用しません。画像はエンコードされた方向、または他の CSS プロパティの値で決められた方向になります。

`from-image`

画像に含まれている EXIF 情報を使用して、画像の向きを適切にします。

解説
--

このプロパティは、回転したカメラで撮影された画像の方向を修正するため*だけ*を目的としています。自由に回転させるために使用するべきでは*ありません*。撮影やスキャンで回転してしまった画像の向きを修正する以外の用途の場合は、`transform` プロパティに `rotate` キーワードを付けて回転を指定してください。これはユーザーによる画像の向きの変更や、印刷時に縦向きと横向きを変更する必要がある場合も含みます。

`<transform-function>` などの他の CSS プロパティとの組み合わせで使用された場合、 `image-orientation` による回転は、常に他の変形が行われる前に適用されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `from-image` |
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | `0deg` から次の 4 分の 1 回転に丸めて正規化した `angle` を `1turn` で割った余り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

image-orientation =
  from-image           |
  none                 |
  [ <angle> || flip ]

```

例
-

### 画像データから画像の向きを変更

以下の画像は 180 度回転しており、 `image-orientation` プロパティを使用して、画像内の EXIF データに基づいて向きを修正しています。 `image-orientation` を `none` に変更すると、このプロパティの効果を見ることができます。

#### CSS

```css
#image {
  image-orientation: from-image; /\* ライブサンプルの中で変更することができます \*/
}
```

```
img {
  margin: 0.5rem 0;
}

label {
  font-family: monospace;
}
```

```
<img id="image" src="oriole.jpg" alt="Orientation taken from the image" />

<div>
  <input
 type="radio"
 id="from-image"
 name="orientation"
 value="from-image"
 checked />
  <label for="from-image">from-image</label>
</div>

<div>
  <input type="radio" id="none" name="orientation" value="none" />
  <label for="none">none</label>
</div>
```

```
document.addEventListener("change", (evt) => {
  document.getElementById("image").style.imageOrientation = evt.target.value;
});
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Images Module Level 3 # the-image-orientation |

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

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

関連情報
----

* その他の画像関連 CSS プロパティ: `object-fit`, `object-position`, `image-orientation`, `image-rendering`, `image-resolution`
* `transform` および `rotate`


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

:focus-within
=============

**`:focus-within`** は CSS の擬似クラスで、その要素または子孫要素にフォーカスがある場合に一致します。言い換えれば、それ自身が `:focus` 擬似クラスに該当するか、子孫に `:focus` に該当する要素がある要素を表します。（これはシャドウツリーにおける子孫も含みます。）

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

このセレクターは、よくある例のように、 `<input>` 欄の一つにユーザーがフォーカスを置いたときに、それを含む `<form>` 全体を強調する場合に便利です。

構文
--

```css
:focus-within {
  /\* ... \*/
}
```

例
-

この例では、何れかの入力欄にフォーカスが当たった時、特殊な色のスタイルにします。

### HTML

```html
<p>このフォームに入力してみてください。</p>

<form>
  <label for="given\_name">名前:</label>
  <input id="given\_name" type="text" />
  <br />
  <label for="family\_name">苗字:</label>
  <input id="family\_name" type="text" />
</form>
```

### CSS

```css
form {
  border: 1px solid;
  color: gray;
  padding: 4px;
}

form:focus-within {
  background: #ff8;
  color: black;
}

input {
  margin: 4px;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # the-focus-within-pseudo |

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

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

関連情報
----

* `:focus`
* `:focus-visible`
* Grab your user's attention with the focus-within selector


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

text-justify
============

**`text-justify`** は CSS のプロパティで、要素に `text-align``: justify;` が設定された時にテキストに適用される両端揃えの種類を設定します。

構文
--

```css
text-justify: none;
text-justify: auto;
text-justify: inter-word;
text-justify: inter-character;
text-justify: distribute; /\* 非推奨の値 \*/

/\* Global values \*/
text-justify: inherit;
text-justify: initial;
text-justify: revert;
text-justify: unset;
```

### 値

`none`

テキストの両端揃えは行われません。これは `text-align` をまったく設定しない場合と同様の効果を持ちますが、何らかの理由で両端揃えを有効または無効にする必要があるときに便利です。

`auto`

ブラウザーは性能と品質の釣り合いに基づいて、テキストの言語 (例えば英語か、日本語か、中国語かなど) に最も適切なものは何かも加味して、現在の状況のために最適な種類の揃え方を選択します。これは `text-justify` をまったく設定しない場合に使われる既定の揃え方です。

`inter-word`

単語間に間隔を挿入する (事実上 `word-spacing` を変化させる) ことでテキストを揃えるもので、これは英語や韓国語のように、空白で単語を区切る言語に最も適しています。

`inter-character`

文字間に間隔を挿入する (事実上 `letter-spacing` を変化させる) ことでテキストを揃えるもので、これは日本語のような言語に最も適しています。

`distribute`
非推奨

`inter-character` と同じ動作を見せます。この値は後方互換性のためのものです。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | インラインレベルおよびテーブルセル要素 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

text-justify =
  auto             |
  none             |
  inter-word       |
  inter-character

```

例
-

### text-justify の様々な値のデモ
```

<p class="none">
  <code>text-justify: none</code> —<br />Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id
  mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat
  justo id, feugiat leo. Cras eu elementum dui.
</p>
<p class="auto">
  <code>text-justify: auto</code> —<br />Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id
  mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat
  justo id, feugiat leo. Cras eu elementum dui.
</p>
<p class="dist">
  <code>text-justify: distribute</code> —<br />Lorem ipsum dolor sit amet,
  consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit,
  dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar,
  consequat justo id, feugiat leo. Cras eu elementum dui.
</p>
<p class="word">
  <code>text-justify: inter-word</code> —<br />Lorem ipsum dolor sit amet,
  consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit,
  dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar,
  consequat justo id, feugiat leo. Cras eu elementum dui.
</p>
<p class="char">
  <code>text-justify: inter-character</code> —<br />Lorem ipsum dolor sit amet,
  consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit,
  dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar,
  consequat justo id, feugiat leo. Cras eu elementum dui.
</p>
```

```css
p {
  font-size: 1.5em;
  border: 1px solid black;
  padding: 10px;
  width: 95%;
  margin: 10px auto;
  text-align: justify;
}

.none {
  text-justify: none;
}

.auto {
  text-justify: auto;
}

.dist {
  text-justify: distribute;
}

.word {
  text-justify: inter-word;
}

.char {
  text-justify: inter-character;
}
```

仕様書
---

| Specification |
| --- |
| CSS Text Module Level 3 # text-justify-property |

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

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

関連情報
----

* `text-align`


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

repeat()
========

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

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

* Learn more
* See full compatibility
* Report feedback
**`repeat()`** は CSS の関数で、トラックリスト内での部分的な繰り返しを表し、繰り返しパターンを示す多数の列や行を、よりコンパクトな形式で記述することができます。

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

この関数は CSS グリッドのプロパティである `grid-template-columns` と `grid-template-rows` の中で使うことができます。

構文
--

```css
/\* <track-repeat> 値 \*/
repeat(4, 1fr)
repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])
repeat(4, [col-start] 1fr [col-end])
repeat(4, [col-start] min-content [col-end])
repeat(4, [col-start] max-content [col-end])
repeat(4, [col-start] auto [col-end])
repeat(4, [col-start] minmax(100px, 1fr) [col-end])
repeat(4, [col-start] fit-content(200px) [col-end])
repeat(4, 10px [col-start] 30% [col-middle] auto [col-end])
repeat(4, [col-start] min-content [col-middle] max-content [col-end])

/\* <auto-repeat> 値 \*/
repeat(auto-fill, 250px)
repeat(auto-fit, 250px)
repeat(auto-fill, [col-start] 250px [col-end])
repeat(auto-fit, [col-start] 250px [col-end])
repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end])
repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end])

/\* <fixed-repeat> 値 \*/
repeat(4, 250px)
repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])
repeat(4, [col-start] minmax(100px, 1fr) [col-end])
repeat(4, [col-start] fit-content(200px) [col-end])
repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])
```

`repeat()` 関数は 2 つの引数を取ります。

* **反復回数**: 最初の引数は、トラックリストが繰り返される回数を指定します。これは 1 以上の整数値で指定するか、キーワード値 `auto-fill` または `auto-fit` で指定します。これらのキーワード値は、グリッドコンテナーを埋めるのに必要な回数だけトラックの組み合わせを繰り返します。
* **トラック**: 2 番目の引数は、繰り返されるトラックの組み合わせを指定します。基本的にこれは 1 つ以上の値で構成され、それぞれの値はそのトラックのサイズを表します。それぞれのサイズは `<track-size>` または `<fixed-size>` で指定します。また、トラックサイズの前後に `<line-names>` 値を提供することで、各トラックの前後に 1 つ以上の行名を指定することもできます。

`auto-fill` や `auto-fit` を使用して反復回数を設定する場合、`<fixed-size>` 型を使用してのみトラックサイズを指定することができ、 `<track-size>` 型を使用することはできません。これで `repeat()` の構文が 3 種類になりました。

* `<track-repeat>` は次のいずれかです。
    + 反復回数を設定する整数
    + トラックのサイズを設定する `<track-size>` 値
* `<auto-repeat>` は次のいずれかです。
    + 反復回数を設定する `auto-fill` または `auto-fit`
    + トラックのサイズを設定する `<fixed-size>` 値
* `<fixed-repeat>` は次のいずれかです。
    + 反復回数を設定する整数
    + トラックのサイズを設定する `<fixed-size>` 値

プロパティ宣言で `<auto-repeat>` を用いた場合、`<fixed-repeat>` を使用するのは `repeat()` を呼び出すときだけです。例えば、この例は `<auto-repeat>` 形式と `<track-repeat>` 形式を結合しているので不正です。

```css
.wrapper {
  grid-template-columns:
    repeat(auto-fill, 10px)
    repeat(2, minmax(min-content, max-content));
}
```

サブグリッドに行名を追加するために使用する `<name-repeat>` という第 4 の形式があります。これは `subgrid` キーワードでのみ使用し、行名のみを指定し、トラックサイズは指定しません。

### 値

`<fixed-size>`

以下の形式のいずれかです。

* `<length-percentage>` 値
* `minmax()` 関数
    + `min` は `<length-percentage>` 値で指定
    + `max` は `<length-percentage>` 値、 `<flex>` 値、または `min-content`, `max-content`, `auto` のキーワード値のいずれかで指定
* `minmax()` 関数
    + `min` は `<length-percentage>` 値または `min-content`, `max-content`, `auto` のキーワード値のいずれかで指定
    + `max` は `<length-percentage>` 値で指定

`<flex>`

単位 `fr` でトラックのフレックス係数を指定します。それぞれの `<flex>` サイズのトラックは、そのフレックス係数に比例して残りの空間を占めます。

`<length>`

正の整数の長さです。

`<line-names>`

0 個以上の空白区切りの `<custom-ident>` 値を角括弧で囲んだもの。例えば `[first header-start]`。

`<percentage>`

列グリッドトラックではグリッドコンテナーのインラインサイズ、行グリッドトラックではグリッドコンテナーのブロックサイズに対する、非負のパーセントを指定します。グリッドコンテナーのサイズがトラックのサイズに依存する場合、 `<percentage>` は `auto` として扱われなければなりません。ユーザーエージェントは、トラックの内在サイズの寄与をグリッドコンテナーのサイズに調整し、パーセント値を尊重する結果となる最小量だけトラックの最終サイズを大きくすることができます。

`<track-size>`

以下の形式のいずれかです。

* `<length-percentage>` 値、 `<flex>` 値、または `min-content`, `max-content`, `auto` のキーワード値のいずれかで指定
* `minmax()` 関数
    + `min` は `<length-percentage>` 値、または `min-content`, `max-content`, `auto` のキーワード値のいずれかで指定
    + `max` は `<length-percentage>` 値、 `<flex>` 値、または `min-content`, `max-content`, `auto` のキーワード値のいずれかで指定
* `fit-content()` 関数に `<length-percentage>` 値を渡したもの

`auto`

最大値としては、 `max-content` と同じです。最小値としては、グリッドトラックを占めるグリッドアイテムの最大最小サイズ（`min-width`/`min-height` で指定されたもの）を表します。

`auto-fill`

グリッドコンテナーが関連する軸に、定義されたまたは最大の幅を持っている場合、繰り返しの数は、グリッドコンテナーをオーバーフローさせない最大の正の数になります。各トラックは定義されているならば、最大トラック幅を調整する関数（`grid-template-rows` または `grid-template-columns` を定義するために使用されるそれぞれ独立した値）として扱われます。それ以外の場合は、最小トラック幅を調整する関数として扱い、グリッドギャップを考慮に入れます。何回繰り返してもオーバーフローしてしまう場合は、繰り返しを 1 とする。そうでなければ、グリッドコンテナーが関連する軸に、定義された最小の寸法をもっている場合、繰り返しの数は最小の要件を満たす可能性がある最小の正の整数になります。その他の場合は、指定されたトラックリストは `1` 回のみ繰り返します。

`auto-fit`

`auto-fill` と同様に動作しますが、グリッドアイテムを配置した後、空の繰り返しトラックが折りたたまれる点が異なります。空のトラックとは、フロー内のグリッドアイテムが配置されていない、またはそれをまたいで配置されているものがないトラックのことです。（これは、すべてのトラックが空の場合、すべてのトラックが折りたたまれる結果になる可能性があります。）

折りたたまれたトラックは、`0px`の単一の固定されたトラックサイジング関数を持つものとして扱われ、その両側の溝は折りたたまれます。

自動反復トラックの数を探すため、ユーザーエージェントはトラックサイズをユーザーエージェントが指定する値（例えば、`1px`）で割り、ゼロによる除算を避けます。

`max-content`

グリッドトラックを占めるグリッドアイテムの最も大きな最大コンテンツ寄与を表します。

`min-content`

グリッドトラックを占めるグリッドアイテムの最も大きな最小コンテンツ寄与を表します。

例
-

### repeat() を使用したグリッド列の指定

#### HTML

```html
<div id="container">
  <div>このアイテムの幅は 50 ピクセルです。</div>
  <div>幅が自由なアイテムです。</div>
  <div>このアイテムの幅は 50 ピクセルです。</div>
  <div>幅が自由なアイテムです。</div>
  <div>幅 100 ピクセルの柔軟性のないアイテムです。</div>
</div>
```

#### CSS

```css
#container {
  display: grid;
  grid-template-columns: repeat(2, 50px 1fr) 100px;
  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 Grid Layout Module Level 2 # repeat-notation |

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

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

関連情報
----

* 関連する CSS プロパティ: `grid-template`, `grid-template-rows`, `grid-template-columns`, `grid-template-areas`, `grid-auto-columns`, `grid-auto-rows`, `grid-auto-flow`
* グリッドレイアウトガイド: 線に基づく配置を使用したグリッドレイアウト
* グリッドレイアウトガイド: グリッドテンプレート領域 - グリッド定義の一括指定


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

max-inline-size
===============

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

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

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

構文
--

```css
/\* <length> 値 \*/
max-inline-size: 300px;
max-inline-size: 25em;

/\* <percentage> 値 \*/
max-inline-size: 75%;

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

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

### 値

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

公式定義
----

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

形式文法
----
```

max-inline-size =
  <'max-width'>

```

例
-

### インライン方向の最大寸法をピクセル単位で設定

#### HTML

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

#### CSS

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

#### 結果

仕様書
---

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

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

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

関連情報
----

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


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

empty-cells
===========

**`empty-cells`** は CSS のプロパティで、表のセルが目に見える内容を持たない場合に、周囲の境界と背景をユーザーエージェントがどのように描画するかを指定します。

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

このプロパティは、 `border-collapse` プロパティが `separate` であった場合のみ効果があります。

構文
--

```css
/\* キーワード値 \*/
empty-cells: show;
empty-cells: hide;

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

`empty-cells` プロパティは、以下のキーワード値のうちの一つで指定します。

### 値

`show`

通常のセルのように、境界や背景を描くことを示すキーワードです。

`hide`

境界や背景を描かないことを示すキーワードです。

公式定義
----

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

形式文法
----
```

empty-cells =
  show  |
  hide

```

例
-

### 表の空のセルの表示・非表示

#### HTML

```html
<table class="table\_1">
  <tr>
    <td>Moe</td>
    <td>Larry</td>
  </tr>
  <tr>
    <td>Curly</td>
    <td></td>
  </tr>
</table>
<br />
<table class="table\_2">
  <tr>
    <td>Moe</td>
    <td>Larry</td>
  </tr>
  <tr>
    <td>Curly</td>
    <td></td>
  </tr>
</table>
```

#### CSS

```css
.table\_1 {
  empty-cells: show;
}

.table\_2 {
  empty-cells: hide;
}

td,
th {
  border: 1px solid gray;
  padding: 0.5rem;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* `border-collapse`
* 表のスタイル付け


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

line-height-step
================

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

**`line-height-step`** は CSS のプロパティで、行ボックスの高さにおける刻みの単位を設定します。このプロパティが設定された場合、行ボックスの高さは単位の倍数のうち最も近いものに切り上げられます。

```css
/\* ポイント値 \*/
line-height-step: 18pt;

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

構文
--

`line-height-step` プロパティは、以下のうちの一つで指定します。

* `<length>` です。
### 値

`<length>`

指定された `<length>` が、行ボックスの高さの刻みの計算に使用されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | ブロックコンテナー |
| 継承 | あり |
| 計算値 | 絶対的な`長さ` |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

line-height-step =
  <length [0,∞]>

```

例
-

### 行ボックスの高さに刻みの単位を設定

以下の例では、それぞれの段落の行ボックスの高さは、刻みの単位に切り上げられます。 `<h1>` の行ボックスの高さは 1 つの刻みに収まらないので 2 つ分を占有しますが、その中の中央に配置されます。

```css
:root {
  font-size: 12pt;
  --my-grid: 18pt;
  line-height-step: var(--my-grid);
}
h1 {
  font-size: 20pt;
  margin-top: calc(2 * var(--my-grid));
}
```

これらのルールの結果は、次のスクリーンショットのようになります。

![どのように line-height-step プロパティがテキストの表示に影響するか](/ja/docs/Web/CSS/line-height-step/line-grid-center.png)

仕様書
---

| Specification |
| --- |
| CSS Rhythmic Sizing # line-height-step |

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

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

関連情報
----

* `font`
* `font-size`
* `line-height`


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

border-top-color
================

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

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

構文
--

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

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

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

### 値

`<color>`

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

公式定義
----

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

形式文法
----
```

border-top-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-top-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-top`, `border-color`.
* 他の境界線の色に関する CSS プロパティ: `border-right-color`, `border-bottom-color`, `border-left-color`
* 同じ境界線に適用される他の境界関連の CSS プロパティ: `border-top-style`, `border-top-width`


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

border-inline-color
===================

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

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

他の方向の境界色については、 `border-block-color` によって `border-block-start-color` と `border-block-end-color` を設定することができます。

構文
--

```css
border-inline-color: yellow;
border-inline-color: #f5f6f7;

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

### 値

`<'color'>`

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

公式定義
----

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

形式文法
----
```

border-inline-color =
  <'border-top-color'>{1,2}

```

例
-

### テキストが垂直方向の場合の境界色

#### HTML

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

#### CSS

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

.exampleText {
  writing-mode: vertical-lr;
  border: 10px solid blue;
  border-inline-color: red;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* このプロパティは `border-top-color`、`border-right-color`、`border-bottom-color`、`border-left-color` のうちの 1 つに対応します
* `writing-mode`、`direction`、`text-orientation`+ bug 1297097


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

scroll-padding-top
==================

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

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

構文
--

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

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

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

### 値

``<length-percentage>``

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

`auto`

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

公式定義
----

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

形式文法
----
```

scroll-padding-top =
  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


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

color
=====

CSS の **`color`** プロパティは、要素のテキストやテキスト装飾における前景色の色の値を設定し、 `currentcolor` の値を設定します。`currentcolor` は*他の*プロパティの間接的な値として使用される可能性があり、 `border-color` のような他の色に関するプロパティの既定値にもなったりします。

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

HTML における色の使用の概要については、CSS を使用した HTML 要素への色の適用をご覧ください。

構文
--

```css
/\* キーワード値 \*/
color: currentcolor;

/\* <named-color> 値 \*/
color: red;
color: orange;
color: tan;
color: rebeccapurple;

/\* <hex-color> 値 \*/
color: #090;
color: #009900;
color: #090a;
color: #009900aa;

/\* <rgb()> 値 \*/
color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.3);
color: rgb(34 12 64 / 60%);
color: rgba(34.6 12 64 / 30%);

/\* <hsl()> 値 \*/
color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);
color: hsl(30 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);

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

`color` プロパティは単一の `<color>` 値で指定します。

なお、値は `color` の形でなければなりません。 `<gradient>` は実際の型が `<image>` であるため使用できません。

### 値

`<color>`

要素のテキストや装飾部分の色を設定します。

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

背景色とその上に配置されたテキストの色のコントラスト比が、弱視の人がページのコンテンツを読むことができる程度に高いことを確認することが重要です。

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

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

|  |  |
| --- | --- |
| 初期値 | `canvastext` |
| 適用対象 | すべての要素とテキスト。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | あり |
| 計算値 | 色の計算値 |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

color =
  <color>

```

例
-

### テキストを赤くする

以下の例はすべて、要素のテキストを赤色にします。

```css
p {
  color: red;
}
p {
  color: #f00;
}
p {
  color: #ff0000;
}
p {
  color: rgb(255, 0, 0);
}
p {
  color: rgb(100%, 0%, 0%);
}
p {
  color: hsl(0, 100%, 50%);
}

/\* 50% 透過 \*/
p {
  color: #ff000080;
}
p {
  color: rgba(255, 0, 0, 0.5);
}
p {
  color: hsla(0, 100%, 50%, 0.5);
}
```

仕様書
---

| Specification |
| --- |
| CSS Color Module Level 4 # the-color-property |

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

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

関連情報
----

* `<color>` データ型
* 他の色に関するプロパティ: `background-color`, `border-color`, `outline-color`, `text-decoration-color`, `text-emphasis-color`, `text-shadow`, `caret-color`, `column-rule-color`, `color-adjust`
* CSS を使用した HTML 要素への色の適用


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

-webkit-mask-composite
======================

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

**`webkit-mask-composite`** プロパティは、同じ要素に適用された複数のマスク画像を互いに合成する方法を指定します。マスク画像は、`-webkit-mask-image` (en-US) プロパティで宣言された順序とは逆に合成されます。

```css
/\* キーワード値 \*/
-webkit-mask-composite: clear;
-webkit-mask-composite: copy;
-webkit-mask-composite: source-over;
-webkit-mask-composite: source-in;
-webkit-mask-composite: source-out;
-webkit-mask-composite: source-atop;
-webkit-mask-composite: destination-over;
-webkit-mask-composite: destination-in;
-webkit-mask-composite: destination-out;
-webkit-mask-composite: destination-atop;
-webkit-mask-composite: xor;

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

**メモ:** この標準外のプロパティの一部を別のキーワードでカバーする、標準化された `mask-composite` プロパティがあります。

構文
--

### 値

`clear`

元のマスク画像と合成用マスク画像の重なり合ったピクセルがクリアされます。

`copy`

コピー元のマスク画像をコピー先のマスク画像に置き換えます。

`source-over`

元のマスク画像を合成用のマスク画像の上にレンダリングします。

`source-in`

元のマスク画像と合成用マスク画像の重なり合ったピクセルが、元のマスク画像のピクセルで置き換えられ、それ以外のピクセルはクリアされます。

`source-out`

元のマスク画像と合成用マスク画像の重なり合ったピクセルがクリアされ、元のマスク画像の残りのピクセルがすべてレンダリングされます。

`source-atop`

合成用マスク画像のピクセルがレンダリングされます。元のマスク画像のピクセルは、合成用マスク画像の非透過部分と重なっている場合にのみレンダリングされます。これにより、元のマスク画像の効果はありません。

`destination-over`

合成用マスク画像は、元のマスク画像の上にレンダリングされます。

`destination-in`

元のマスク画像と合成用マスク画像で重複するピクセルは、合成用マスク画像のピクセルのままとなり、それ以外のピクセルはクリアされます。

`destination-out`

元のマスク画像と合成用マスク画像の重なり合ったピクセルはクリアされ、元のマスク画像の残りのピクセルはすべてレンダリングされます。

`destination-atop`

元のマスク画像のピクセルがレンダリングされます。合成用マスク画像のピクセルは、合成用マスク画像の非透過部分と重なっている場合にのみレンダリングされます。これにより、合成用マスク画像は何の影響も受けません。

`xor`

元のマスク画像と合成用マスク画像の重なっているピクセルは、両者が完全に不透明であれば完全に透明になります。

公式定義
----

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

形式文法
----

Error: could not find syntax for this item例
-

### XOR で合成する

```css
.example {
  -webkit-mask-image: url(mask1.png), url("mask2.png");
  -webkit-mask-composite: xor, source-over;
}
```

仕様書
---

標準には含まれていません。このプロパティは `mask-composite` として異なる値で定義されています。

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

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

関連情報
----

* `mask-composite`