recursal/MDN huggingface dataset:
object-fit
==========

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

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

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

構文
--


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

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


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

### 値

`contain`

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

`cover`

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

`fill`

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

`none`

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

`scale-down`

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

公式定義
----

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

形式文法
----
```

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

例
-

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

#### HTML


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

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

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

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

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

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

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

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

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

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


#### CSS


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

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

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

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

.none {
  object-fit: none;
}

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


#### 結果

仕様書
---

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

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

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

関連情報
----

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

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

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

構文
--


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

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

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


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

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

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

### 値

`normal`

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

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


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

### 形式文法
```

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

例
-

### SVG


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

### CSS


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

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

### 結果

仕様書
---

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSS ページメディア
===========

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

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

### CSS プロパティ

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

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

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

| Specification |
| --- |
| CSS Paged Media Module Level 3  |
| CSS Fragmentation Module Level 3  |
padding-block-end
=================

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

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

構文
--


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

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

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

### 値

`<length>`

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

`<percentage>`

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

解説
--

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

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

公式定義
----

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

形式文法
----
```

padding-block-end =   
  <'padding-top'>    
  
```

例
-

### 縦書きテキストにおけるブロック方向の末尾のパディングの設定

#### HTML


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


#### CSS


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

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


#### 結果

仕様書
---

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

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

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

関連情報
----

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

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

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

構文
--


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

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

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


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

### 値

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

公式定義
----

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

形式文法
----
```

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

例
-

### インライン方向の先頭側のマージンの設定

#### HTML


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


#### CSS


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

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


#### 結果

仕様書
---

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

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

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

関連情報
----

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

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

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

構文
--


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

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


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

### 値

`<color>`

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

公式定義
----

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

形式文法
----
```

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

例
-

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

#### HTML


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


#### CSS


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

.redtext {
  color: red;
}
```


#### 結果

仕様書
---

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

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

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

関連情報
----

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

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

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

構文
--


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

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

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

### 値

`<length-percentage>`

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

`auto`

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

公式定義
----

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

形式文法
----
```

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

仕様書
---

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

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

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

関連情報
----

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

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

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

### プロパティ

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification  |
border-inline-end-style
=======================

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

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

構文
--


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

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


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

### 値

`<'border-style'>`

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

公式定義
----

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

### 形式文法
```

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

例
-

### inline-end-style の設定

#### HTML


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


#### CSS


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

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


#### 結果

仕様書
---

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

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

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

関連情報
----

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

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


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


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

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

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


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


ここで、

*charset*

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

形式文法
----

Error: could not find syntax for this item例
-

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


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

仕様書
---

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

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

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

関連情報
----

* 用語集: 文字セット
* 用語集: Unicode
-webkit-tap-highlight-color
===========================

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

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


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

構文
--

### 値

`<color>` です。

公式定義
----

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

形式文法
----

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

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

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

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

関連情報
----

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

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

基本的な例
-----

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

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

### プロパティ

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

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

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

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

| Specification |
| --- |
| CSS Shapes Module Level 1  |
min-content
===========

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

構文
--


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

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

例
-

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

#### HTML


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


#### CSS


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


#### 結果

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

#### HTML


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


#### CSS


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

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


#### 結果

仕様書
---

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

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

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

関連情報
----

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

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


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

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

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

構文
--
```

:only-child
```

例
-

### 基本的な例

#### HTML


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

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


#### CSS


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

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


#### 結果

### リストの例

#### HTML


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


#### CSS


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

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


#### 結果

仕様書
---

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

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

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

関連情報
----

* `:only-of-type`
* `:first-child`
* `:last-child`
* `:nth-child`
指定値
===

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

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

### HTML


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

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

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

### CSS


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

p {
  color: green;
}
```

### 結果

仕様書
---

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

関連情報
----

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