recursal/MDN huggingface dataset:
padding-top
===========

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

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

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

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

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

構文
--


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

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

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


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

### 値

`<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-top =   
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

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


```css
.content {
  padding-top: 5%;
}
.sidebox {
  padding-top: 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-right`, `padding-bottom`, `padding-left` および `padding` 一括指定
* 対応付けられる論理的プロパティ: `padding-block-start`, `padding-block-end`, `padding-inline-start`, `padding-inline-end` および一括指定の `padding-block` と `padding-inline`
:user-invalid (:-moz-ui-invalid)
================================

**`:user-invalid`** は CSS の擬似クラスで、ユーザーの操作の後、制約検証に基づき有効と判断されなかった検証済みのフォーム要素を表します。

`:user-invalid` 擬似クラスは、ユーザーがフォームの送信を試みた後、そのフォーム要素を再び操作するまで、 `:invalid`, `:out-of-range`, `:required` で空欄の要素に一致します。

**メモ:** この擬似クラスは標準外の `:-moz-ui-invalid` 擬似クラスと同じように動作します。

構文
--

Error: could not find syntax for this item例
-

### :user-invalid で色と記号を設定する

 以下の例では、次の例では、赤枠と❌はユーザーがフィールドを操作した場合にのみ表示されます。
 メールアドレス以外を入力してみて、その動作を確認してみてください。


```html
<form>
  <label for="email">Email *: </label>
  <input id="email" name="email" type="email" required />
  <span></span>
</form>
```



```css
input:user-invalid {
  border: 2px solid red;
}

input:user-invalid + span::before {
  content: "✖";
  color: red;
}
```

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # user-invalid-pseudo |

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

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

関連情報
----

* `:valid`
* `:invalid`
* `:required`
* `:optional`
* `:user-valid`
margin-block-start
==================

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

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

構文
--


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

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

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


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

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

### 値

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

公式定義
----

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

形式文法
----
```

margin-block-start =   
  <'margin-top'>    
  
```

例
-

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

#### HTML


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


#### CSS


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

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


#### 結果

仕様書
---

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

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

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

関連情報
----

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

**`aspect-ratio`** は CSS のプロパティで、ボックスの**推奨アスペクト比**を設定します。これは auto の大きさを計算したり、他のレイアウト関数で使用されたりします。


```css
aspect-ratio: 1 / 1;
aspect-ratio: 1;

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

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

### 値

`auto`

内在的なアスペクト比がある置換要素の場合は、*その*アスペクト比を使用し、それ以外の場合はボックスに推奨アスペクト比が設定されません。内在的なアスペクト比を使用して寸法を計算する際には、常にコンテンツボックスの寸法に対して行われます。

`<ratio>`

ボックスの推奨アスペクト比は、`width` / `height` で指定された比率です。`height` とそれに先立つスラッシュ文字が省略された場合、`height` の既定値は `1` です。推奨アスペクト比を含む寸法の計算では、`box-sizing` で指定されたボックスの寸法で行われます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | インラインボックスおよび内部のルビまたは表ボックスを除くすべての要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

aspect-ratio =   
  auto     ||  
  <ratio>    
  
<ratio> =   
  <number [0,∞]> [ / <number [0,∞]> ]?    
  
```

例
-

### aspect-ratio の値の例


```css
aspect-ratio: 1 / 1;
aspect-ratio: 16 / 9;
aspect-ratio: 0.5;
```

幅と高さの aspect-ratio への対応付け
-------------------------

ブラウザーは、内部の `aspect-ratio` プロパティを追加しました。これは置換要素や、 `width` と `height` 属性を受け入れるその他の関連要素に適用されます。これは、ブラウザーの内部 UA スタイルシートに現れます。

Firefox では、内部のスタイルシートルールはこのようになっています。


```css
img,
input[type="image"],
video,
embed,
iframe,
marquee,
object,
table {
  aspect-ratio: attr(width) / attr(height);
}
```


この機能については画像に高さと幅を設定することが再び重要に (英語) で詳しく読むことができます。

仕様書
---

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # aspect-ratio |

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

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

関連情報
----

* メディアのコンテナー要素の幅と高さの属性をアスペクト比にマッピングする
* Designing an aspect ratio unit for CSS
* Setting Height And Width On Images Is Important Again
::backdrop
==========

CSS の **`::backdrop`** 擬似要素は、何らかの要素が全画面モード (top layer (en-US)) で表示される直下に直接表示される viewport の寸法のボックスです。

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

構文
--


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

説明
--

Backdrop は以下の状況で現れます。

* Fullscreen API の `Element.requestFullscreen()` メソッドを使用した全画面モードに配置される要素
* `HTMLDialogElement.showModal()` の呼び出しにより最上位レイヤーで表示される `<dialog>` 要素
* `HTMLElement.showPopover()` の呼び出しにより最上位レイヤーで表示される Popover の要素

全画面モードで複数の要素が配置されたときは、それぞれに自身の `::backdrop` 疑似要素があります。


```css
/\* backdrop はダイアログが dialog.showModal() が開いている時のみ表示されます \*/
dialog::backdrop {
  background: rgba(255, 0, 0, 0.25);
}
```


すべての全画面要素は、最上位レイヤー、すなわちビューポートで常にコンテンツが画面に描画される前に最後に (すなわち最上位に) 描画される特殊なレイヤーの中で、後入れ先出し (LIFO) で配置されます。`::backdrop` 擬似要素は、最上位レイヤーの一番上に来たときに、その下に位置するものをぼかしたり、スタイル付けしたり、完全に隠したりすることができます。

`::backdrop` 擬似要素はどの要素にも継承せず、どの要素からも継承しません。この擬似要素に適用するプロパティの制限はありません。

例
-

### 全画面動画の背景のスタイル付け

この例では、動画が全画面モードに移行したときの backdrop スタイルが、多くのブラウザーでの既定値である黒ではなく、青灰色に構成しています。


```css
video::backdrop {
  background-color: #448;
}
```


結果の画面は以下のようになります。

![ほぼ全画面のビデオプレイヤー。ビデオプレイヤーが完全に画面を覆わないので、プレイヤーの上下に紫が見える。](/ja/docs/Web/CSS/::backdrop/bbb-backdrop.png)

動作例を見てみてください。背景の色を変更した後、動画を全画面表示にすると、背景色の変更を確認することができます。

仕様書
---

| Specification |
| --- |
| CSS Positioned Layout Module Level 4 # backdrop |

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

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

関連情報
----

* `:fullscreen` 疑似クラス
* `<dialog>` HTML 要素
* Fullscreen API
CSS ボックスモデル
===========

**CSS ボックスモデル**は、要素に対して作成され、パディングやマージンを含む長方形のボックスを定義します。これは視覚整形モデルによってレイアウトされます。

ボックスモデルの概要
----------

CSS のボックスは、テキスト、画像、その他の HTML 要素が表示されるコンテンツ領域で構成されています。この領域は、パディング、境界、マージンによって、1 つ以上の辺で囲まれることがあります。ボックスモデルは、これらの要素がどのように連携して CSS で表示されるボックスを作成するかを説明します。詳しくは、CSS ボックスモデル入門をご覧ください。

### ボックスの辺のキーワード

ボックスモデルの仕様書では、ボックスの各部分の辺を参照する一連のキーワードが定義されています。これらは、`box-sizing` プロパティの値など、CSS のキーワード値としても使用され、ボックスモデルがどのように寸法を計算するかを制御します。

`content-box`

そのボックスのコンテンツ領域の辺です。

`padding-box`

そのボックスのパディングの辺です。その方向にパディングがなかった場合は、 `content-box` と同じになります。

`border-box`

そのボックスの境界の辺です。その方向に境界がなかった場合は、 `padding-box` と同じになります。

`margin-box`

そのボックスのマージンの辺です。その方向にマージンがなかった場合は、 `border-box` と同じになります。

`stroke-box`

SVG では、ストロークの囲みボックスを指します。 CSS では `content-box` として扱われます。

`view-box`

SVG では、最も近い SVG ビューポート要素の原点ボックスを指します。これはその要素の `viewBox` 属性によって確立された初期の SVG ユーザー座標系の幅と高さを持つ長方形です。CSS では `border-box` として扱われます。

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

**メモ:** 本仕様では、物理的なパディングとマージンのプロパティを定義しています。テキストの書字方向に関係するフローに関連したプロパティは、論理的プロパティと値で定義されています。

#### ボックスのマージンを制御するプロパティ

マージンは、ボックスの境界を囲み、ボックス同士の間隔を確保するものです。

* `margin`
* `margin-bottom`
* `margin-left`
* `margin-right`
* `margin-top`
* `margin-trim` 
Experimental

#### ボックスのパディングを制御するプロパティ

パディングは、ボックスの境界の縁と内容物の縁の間に挿入されます。

* `padding`
* `padding-bottom`
* `padding-left`
* `padding-right`
* `padding-top`

#### その他のプロパティ

ボックスモデルに関連するプロパティは他にもあり、それらは別の場所で定義されています。

境界

境界のプロパティは、境界の太さ、描画スタイル、色を指定します。

オーバーフロー

内容物が多すぎてボックスに入りきらない場合に起こることを制御します。

ガイド
---

CSS ボックスモデルの紹介

CSS の基礎的概念の 1 つである、ボックスモデルを解説します。このモデルは CSS が要素とそのコンテンツ領域、パディング領域、境界領域、マージン領域をどのように配置するかを定義しています。

マージンの相殺の理解

2 つの隣接するマージンが 1 つに相殺されることがあります。この記事ではいつなぜそれが発生し、どのように制御するかを説明します。

視覚整形モデル

視覚整形モデルを説明します。

仕様書
---

| Specification |
| --- |
| CSS Box Model Module Level 3  |
unset
=====

**`unset`** は CSS のキーワードで、プロパティをリセットし、親から自然に継承された場合は継承値、そうでなければ初期値を設定します。言い換えれば、前者の継承プロパティの場合は `inherit` キーワードのように動作し、後者の非継承プロパティの場合は `initial` キーワードのように動作します。

**`unset`** は一括指定の `all` を含む、あらゆる CSS プロパティに対して適用することができます。

例
-

### 色

`color` は継承プロパティです。

#### HTML


```html
<p>このテキストは赤です。</p>
<div class="foo">
  <p>このテキストも赤です。</p>
</div>
<div class="bar">
  <p>このテキストは緑色（既定の継承値）です。</p>
</div>
```


#### CSS


```css
.foo {
  color: blue;
}

.bar {
  color: green;
}

p {
  color: red;
}

.bar p {
  color: unset;
}
```


#### 結果

### 境界線

`border` は非継承プロパティです。

#### HTML


```html
<p>このテキストには赤い境界線があります。</p>
<div>
  <p>このテキストには赤い境界線があります。</p>
</div>
<div class="bar">
  <p>このテキストには黒い境界線があります（既定値、継承なし）。</p>
</div>
```


#### CSS


```css
div {
  border: 1px solid green;
}

p {
  border: 1px solid red;
}

.bar p {
  border-color: unset;
}
```


#### 結果

仕様書
---

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

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

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

関連情報
----

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

**`:last-of-type`** は CSS の擬似クラスで、兄弟要素のグループの中でその種類の最後の要素を表します。

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

構文
--


```css
:last-of-type {
  /\* ... \*/
}
```

例
-

### 最後の段落の整形

#### HTML


```html
<h2>見出し</h2>
<p>段落 1</p>
<p>段落 2</p>
```


#### CSS


```css
p:last-of-type {
  color: red;
  font-style: italic;
}
```


#### 結果

### 入れ子になった要素

この例は、入れ子になった要素を対象に含める方法を示します。なお、要素型セレクターが書かれていない場合は、全称セレクター (`*`) が暗黙に含まれます。

#### HTML


```html
<article>
  <div>これは最初の `div` です。</div>
  <div>これは<span>内側で最後の `span`</span> です。</div>
  <div>
    これは<em>内側で最初の `em`</em>で、一方これは<em>最後の `em` </em>です。
  </div>
  <p>これは `p` で修飾しています。</p>
  <div>これは最後の `div` です。</div>
</article>
```


#### CSS


```css
article :last-of-type {
  background-color: pink;
}
```


#### 結果

### 複数セレクターの要素

この HTML の例では、さまざまな種類の要素が入れ子になっています。 CSS には、型セレクターとクラスセレクターの両方が含まれています。

#### HTML


```html
<p>この `p` は選択されていません。</p>
<p>この `p` も選択されていません。</p>
<p>
  この `p` は `p` 要素型セレクターで選択された `body` などの親の最後の `p` 要素です。
</p>
<div class="container">
  <div class="item">この `div` は選択されていません。</div>
  <div class="item">この `div` も選択されていません。</div>
  <div class="item">
    この `div` は親 `div` の `.container .item` クラスセレクターで選択される最後の `div` 要素です。
  </div>
  <p class="item">
    この `p` は親 `div` の `.container .item` クラスセレクターで選択される最後の `p` 要素です。
  </p>
</div>
```


#### CSS


```css
p:last-of-type {
  background: skyblue;
}

.container .item:last-of-type {
  color: red;
  font-weight: bold;
}
```


#### 結果

最後の `<div>` と最後の `<p>` はどちらも赤で太字になっています。これは `.item:last-of-type` がすべての型の最後の要素を選択するためで、その最後の要素は `item` クラスも持っています。

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # last-of-type-pseudo |

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

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

関連情報
----

* `:last-child`, `:nth-last-of-type`
scrollbar-width
===============

**`scrollbar-width`** プロパティは、要素のスクロールバーが表示される時の最大の太さを設定することができます。

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

構文
--


```css
/\* キーワード値 \*/
scrollbar-width: auto;
scrollbar-width: thin;
scrollbar-width: none;

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

### 値

*<scrollbar-width>*

スクロールバーの幅を、長さまたはキーワードのどちらかで定義します。キーワードが使用する場合は、以下の値のうちの一つでなければなりません。

|  |  |
| --- | --- |
| `auto` | プラットフォーム既定のスクロールバーの幅です。 |
| `thin` | プラットフォームが提供している細いスクロールバー、またはプラットフォーム既定のスクロールバーの幅よりも細いスクロールバーです。 |
| `none` | スクロールバーが表示されませんが、要素はスクロール可能です。 |

**メモ:** ユーザーエージェントは、ビューポートのルート要素に何らかの `scrollbar-width` の値を設定する必要があります。

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

このプロパティは注意して使用してください。 — `scrollbar-width` を `thin` または `none` に設定すると、作者が別なスクロールの仕組みを提供していない限り、スクロールすることが困難または不可能になります。そのようなコンテンツはスワイプのジェスチャーやマウスホイールでスクロールできるものの、端末によっては代替スクロール手段がないことがあります。

WCAG 基準 2.1.1 (キーボード) は、長らく基本的なキーボードのアクセシビリティを勧告してきており、これはコンテンツ領域のスクロールも含みます。また、 WCAG 2.1 で導入された基準 2.5.5 (対象の寸法) では、タッチ対象の幅と高さを 44px 以上にすることを推奨しています (ただし、この問題は高解像度の画面ではさらに複雑になるため、十分なテストが必要です)。

* MDN WCAG の理解、ガイドライン 2.1 の説明
* MDN WCAG の理解、ガイドライン 2.5 の説明
* Understanding Success Criterion 2.1.1 | W3C Understanding WCAG 2.1
* Understanding Success Criterion 2.5.5 | W3C Understanding WCAG 2.1
公式定義
----

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

形式文法
----
```

scrollbar-width =   
  auto  |  
  thin  |  
  none    
  
```

例
-

### あふれた際のスクロールバーの大きさを調整

#### CSS


```css
.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-width: thin;
}
```


#### HTML


```html
<div class="scroller">
  Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
  daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
  corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
  fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
  earthnut pea peanut soko zucchini.
</div>
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Scrollbars Styling Module Level 1 # scrollbar-width |

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

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

関連情報
----

* `-ms-overflow-style`
* `::-webkit-scrollbar`
border-block-start-color
========================

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

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

構文
--


```css
border-block-start-color: blue;
border-block-start-color: #4c5d21;

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


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

### 値

`<'color'>`

`border-color` を参照してください。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `currentcolor` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 色の計算値 |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

border-block-start-color =   
  <color>     |  
  <image-1D>    
  
<image-1D> =   
  <stripes()>    
  
<stripes()> =   
  stripes( <color-stripe># )    
  
<color-stripe> =   
  <color>                            &&  
  [ <length-percentage> | <flex> ]?    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

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

#### HTML


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


#### CSS


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

.exampleText {
  writing-mode: vertical-lr;
  border: 10px solid blue;
  border-block-start-color: red;
}
```


#### 例

仕様書
---

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

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

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

関連情報
----

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

**`scale`** は CSS のプロパティで、 `transform` とは個別に独立しての変倍変換を指定することができます。これは一般のユーザーインターフェイスの利用においてはより適しており、 `transform` の値で座標変換関数を指定する実際の順序を思い出す手間を軽減します。

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

構文
--


```css
/\* キーワード値 \*/
scale: none;

/\* 1 つの値 \*/
/\* 1 または 100% より大きい値で要素を拡大 \*/
scale: 2;
/\* 1 または 100% より小さい値で要素を縮小 \*/
scale: 50%;

/\* 2 つの値 \*/
scale: 2 0.5;

/\* 3 つの値 \*/
scale: 200% 50% 200%;

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

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

### 値

1 つの数値

該当する要素の変倍率を指定する `<number>` または `<percentage>` であり、 X および Y 軸で同じの変倍になります。 `scale()` （2D の変倍）関数に 1 つの値を指定した場合と等価です。

2 つの長さ/パーセント値

2 つの `<number>` または `<percentage>` 値で、2D の変倍における X 軸と Y 軸の変倍率を（それぞれ）指定します。 `scale()` （2D の変倍）関数に 2 つの値を指定した場合と等価です。

3 つの長さ/パーセント値

3 つの `<number>` または `<percentage>` 値で、3D の変倍における X 軸と Y 軸と Z 軸の変倍率を（それぞれ）指定します。 `scale3d()` （3D の変倍）関数と等価です。

`none`

変倍が適用されないことを示します。

公式定義
----

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

形式文法
----
```

scale =   
  none                              |  
  [ <number> | <percentage> ]{1,3}    
  
```

例
-

### ホバー時の要素の変倍

 次の例は、ホバー時に要素を変倍する方法を示しています。
 2 つのボックスが表示されており、 1 つは 1 つの `scale` 値を持ち、両軸に沿って要素を変倍します。
 2 つ目のボックスには2つの `scale` 値が示されており、 X 軸と Y 軸のそれぞれに沿って要素を変倍します。

#### HTML


```html
<div class="box" id="box1">single value</div>
<div class="box" id="box2">two values</div>
```


#### CSS


```css
.box {
  float: left;
  margin: 1em;
  width: 7em;
  line-height: 7em;
  text-align: center;
  transition: 0.5s ease-in-out;
  border: 3px dotted;
}

#box1:hover {
  scale: 1.25;
}

#box2:hover {
  scale: 1.25 0.75;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 2 # individual-transforms |

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

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

関連情報
----

* `translate`
* `rotate`
* `transform`

メモ: `skew` には独立した `transform` の値はありません
box-align
=========

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

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**警告:** このプロパティは、当初の CSS Flexible Box Layout Module の草案段階のものでしたが、より新しい標準で置き換えられました。

**`box-align`** は CSS のプロパティで、交差軸方向に子要素をどう整列させるかを定義します。ボックス内に余分な空間がある場合にかぎり、その効果を確認することができます。

現在の標準仕様に関する情報については、フレックスボックスを確認してください。


```css
/\* キーワード値 \*/
box-align: start;
box-align: center;
box-align: end;
box-align: baseline;
box-align: stretch;

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


配置する方向は、その要素の向き (水平か垂直か) に依存します。

構文
--

`box-align` プロパティは、 以下に記載する値で定義されます。

### 値

`start`

ボックス内のコンテンツを先頭に寄せて、末尾に余分な空間を残します。

`center`

ボックス内のコンテンツを中央に寄せて、余分な空間を等分に分割し先頭と末尾に残します。

`end`

ボックス内のコンテンツを末尾に寄せて、先頭に余分な空間を残します。

`baseline`

ボックス内のコンテンツが持つテキストのベースラインに整列させます。これはボックス内のコンテンツの向きが水平である場合にのみ適用されます。

`stretch`

ボックス内に余分な空間がなくなるようコンテンツを引き伸ばします。

メモ
--

整列のために *start* と指定されたボックスの辺は、ボックスの方向によって異なります。

* 水平方向の要素の場合、 *start* は上端になります。
* 垂直方向の要素の場合、 *start* は左端になります。

start の反対側の端は *end* となります。

要素の `align` 属性で配置が設定されている場合、このスタイルは無視されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `stretch` |
| 適用対象 | CSS の `display` の値が `box` または `inline-box` である要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

box-align =
  start | center | end | baseline | stretch
```

例
-

### ボックス配置の設定


```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>CSS box-align example</title>
    <style>
 div.example {
 display: box; /\* 仕様書通り \*/
 display: -moz-box; /\* Mozilla \*/
 display: -webkit-box; /\* WebKit \*/

 /\* ボックスの高さを子要素より高くし、
 box-pack のためのスペースを確保する \*/
 height: 400px;

 /\* ボックスの幅を子要素より広くし、
 box-align のためのスペースを確保する \*/
 width: 300px;

 /\* 子要素の向きは垂直方向にする \*/
 box-orient: vertical; /\* 仕様書通り \*/
 -moz-box-orient: vertical; /\* Mozilla \*/
 -webkit-box-orient: vertical; /\* WebKit \*/

 /\* 子要素をボックス内の水平方向に対して中央に整列させる \*/
 box-align: center; /\* 仕様書通り \*/
 -moz-box-align: center; /\* Mozilla \*/
 -webkit-box-align: center; /\* WebKit \*/

 /\* 子要素をボックス内の末尾に寄せる \*/
 box-pack: end; /\* 仕様書通り \*/
 -moz-box-pack: end; /\* Mozilla \*/
 -webkit-box-pack: end; /\* WebKit \*/
 }

 div.example > p {
 /\* 子要素を親要素の幅より狭くし、
 box-align のためのスペースを確保する \*/
 width: 200px;
 }
 </style>
  </head>
  <body>
    <div class="example">
      <p>
        I will be second from the bottom of div.example, centered horizontally.
      </p>
      <p>I will be on the bottom of div.example, centered horizontally.</p>
    </div>
  </body>
</html>
```

仕様書
---

標準仕様には含まれていません。

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

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

関連情報
----

* `align-items`, `box-orient`, `box-direction`, `box-pack`
border-block-end-color
======================

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

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

構文
--


```css
border-block-end-color: yellow;
border-block-end-color: #f5f6f7;

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


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

### 値

`<'color'>`

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

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `currentcolor` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 色の計算値 |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

border-block-end-color =   
  <color>     |  
  <image-1D>    
  
<image-1D> =   
  <stripes()>    
  
<stripes()> =   
  stripes( <color-stripe># )    
  
<color-stripe> =   
  <color>                            &&  
  [ <length-percentage> | <flex> ]?    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

### 垂直テキストの境界線の色

#### HTML


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


#### CSS


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

.exampleText {
  writing-mode: vertical-lr;
  border: 10px solid blue;
  border-block-end-color: red;
}
```


#### 結果

仕様書
---

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

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

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

関連情報
----

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