recursal/MDN huggingface dataset:
font-variant-numeric
====================

**`font-variant-numeric`** は CSS のプロパティで、数字、分数、序数記号の表記を制御するために使用します。

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

構文
--


```css
font-variant-numeric: normal;
font-variant-numeric: ordinal;
font-variant-numeric: slashed-zero;
font-variant-numeric: lining-nums; /\* <numeric-figure-values> \*/
font-variant-numeric: oldstyle-nums; /\* <numeric-figure-values> \*/
font-variant-numeric: proportional-nums; /\* <numeric-spacing-values> \*/
font-variant-numeric: tabular-nums; /\* <numeric-spacing-values> \*/
font-variant-numeric: diagonal-fractions; /\* <numeric-fraction-values> \*/
font-variant-numeric: stacked-fractions; /\* <numeric-fraction-values> \*/
font-variant-numeric: oldstyle-nums stacked-fractions;

/\* グローバル値 \*/
font-variant-numeric: inherit;
font-variant-numeric: initial;
font-variant-numeric: revert;
font-variant-numeric: unset;
```


このプロパティは 2 つの形のうちの 1 つを取ります。

* キーワード値 `normal`
* 以下の一覧にあるその他の値を空白区切り、自由な順番で
### 値

`normal`

このキーワードは、別形式の表記の使用を無効にします。

`ordinal`

このキーワードは、序数記号に対して特別な表記を使用します。英語では 1st, 2nd, 3rd, 4th、イタリア語では 1a です。 OpenType の `ordn` の値に対応します。

`slashed-zero`

このキーワードは、スラッシュ付きの 0 を使用します。これは O と 0 を明確に区別する必要がある場合に便利です。 OpenType の `zero` の値に対応します。

*<numeric-figure-values*>

これらの値は、数字の形状を制御します。2 つの値が利用できます。

* `lining-nums` は、全てをベースライン上に並べる表記を有効にします。 OpenType の `lnum` の値に対応します。
* `oldstyle-nums` は、 3, 4, 7, 9 などいくつかの数字を下げる表記を有効にします。 OpenType の `onum` の値に対応します。

*<numeric-spacing-values*>

これらの値は、数字の表記の大きさを制御します。2 つの値が利用できます。

* `proportional-nums` は、数字をすべて同じ大きさにしない表記を有効にします。 OpenType の `pnum` の値に対応します。
* `tabular-nums` は、数字を同じ大きさにする表記を有効にし、表の中に配置しやすくします。 OpenType の `tnum` の値に対応します。

*<numeric-fraction-values*>

これらの値は、分数の表示に使う表記を制御します。2 つの値が利用できます。

* `diagonal-fractions` は、分子と分母が小さめになり、スラッシュで区切られる表記を有効にします。 OpenType の `frac` の値に対応します。
* `stacked-fractions` は、分子と分母が小さめになり、積み重ねられて水平線で区切られた表記を有効にします。 OpenType の `afrc` の値に対応します。

公式定義
----

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

形式文法
----
```

font-variant-numeric =   
  normal                                              |  
  [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ]    
  
<numeric-figure-values> =   
  lining-nums    |  
  oldstyle-nums    
  
<numeric-spacing-values> =   
  proportional-nums  |  
  tabular-nums         
  
<numeric-fraction-values> =   
  diagonal-fractions  |  
  stacked-fractions     
  
```

例
-

### 序数形式の設定

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-variant-numeric-prop |

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

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

関連情報
----

* `font-variant-alternates`
* `font-variant-caps`
* `font-variant-east-asian`
* `font-variant-ligatures`
* `font-variant`
overflow-clip-margin
====================

**`overflow-clip-margin`** は CSS のプロパティで、 `overflow: clip` を持つ要素がクリップされる前に、要素の辺からどれだけ外側に描画できるかを指定します。

構文
--


```css
overflow-clip-margin: 20px;
overflow-clip-margin: 1em;

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


`overflow-clip-margin` プロパティは長さで指定します。負の値は許可されていません。

**メモ:** `overflow: clip` を持たない要素では、このプロパティは無視されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0px` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | the computed <length> and a <visual-box> keyword |
| アニメーションの種類 | 離散値 |

形式文法
----
```

overflow-clip-margin =   
  <visual-box>    ||  
  <length [0,∞]>    
  
<visual-box> =   
  content-box  |  
  padding-box  |  
  border-box     
  
```

例
-

### HTML


```html
<div class="box">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur.
</div>
```

### CSS


```css
.box {
  border: 3px solid black;
  width: 250px;
  height: 100px;
  overflow: clip;
  overflow-clip-margin: 20px;
}
```

### 例

仕様書
---

| Specification |
| --- |
| CSS Overflow Module Level 3 # overflow-clip-margin |

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

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

関連情報
----

* 関連する CSS プロパティ: `text-overflow`, `white-space`, `overflow`, `overflow-inline`, `overflow-x`, `overflow-y`, `clip`, `display`
text-shadow
===========

**`text-shadow`** は CSS のプロパティで、テキストに影を追加します。文字列およびその装飾 (`decoration`) に適用される影のリストをカンマで区切ったリストで受け付けます。それぞれの影は、要素からの X および Y オフセット、影の明るさ、影の色のうちいくつかの組み合わせで記述します。

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

構文
--


```css
/\* offset-x | offset-y | blur-radius | color \*/
text-shadow: 1px 1px 2px black;

/\* color | offset-x | offset-y | blur-radius \*/
text-shadow: #fc0 1px 0 10px;

/\* offset-x | offset-y | color \*/
text-shadow: 5px 5px #558abb;

/\* color | offset-x | offset-y \*/
text-shadow: white 2px 5px;

/\* offset-x | offset-y
/\* color および blur-radius は既定値を使用 \*/
text-shadow: 5px 10px;

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


このプロパティは、影のカンマで区切られたリストとして指定します。

それぞれの影は 2 つまたは 3 つの `<length>` 値と、任意でその後に `<color>` 値を続けることで指定します。最初の 2 つの `<length>` 値は、 `<offset-x>` および `<offset-y>` の値です。3 番目の `<length>` 値は任意で `<blur-radius>` です。 `<color>` 値は影の色です。

複数の影が与えられた場合は、影は手前から奥に向けて適用され、最初に指定された影が一番上になります。

このプロパティは `::first-line` および `::first-letter` の両方の擬似要素に適用されます。

### 値

`<color>`

省略可。影の色です。オフセット値の前か後に指定できます。色が指定されなければ、ユーザーエージェントが選択した色が使われるので、ブラウザー間で一貫性を保つために、明示的に定義することが求められます。

`<offset-x> <offset-y>`

必須。これらの `<length>` 値はテキストに対する影のオフセットを指定します。 `<offset-x>` は水平方向の距離を指定します。負の値であればテキストの左に影を配置します。 `<offset-y>` は垂直方向の距離を指定します。負の値であればテキストの上に影を配置します。両方の値が `0` ならば、影はテキストの真後ろに配置されますが、 `<blur-radius>` の効果により一部だけが見えるかもしれません。

`<blur-radius>`

省略可。これは `<length>` 値です。指定されなければ、既定では `0` になります。この値が大きいほど、ぼかしは大きくなり、影は広く薄くなります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | すべての要素。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | あり |
| 計算値 | 色に続いて絶対的な長さ 3 つ |
| アニメーションの種類 | a 影のリスト |

形式文法
----
```

text-shadow =   
  none                            |  
  [ <color>? && <length>{2,3} ]#    
  
```

例
-

### 単純な影


```css
.red-text-shadow {
  text-shadow: red 0 -2px;
}
```



```html
<p class="red-text-shadow">
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
  doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.
</p>
```

### 複数の影


```css
.white-text-with-blue-shadow {
  text-shadow:
    1px 1px 2px black,
    0 0 1em blue,
    0 0 0.2em blue;
  color: white;
  font:
    1.5em Georgia,
    serif;
}
```



```html
<p class="white-text-with-blue-shadow">
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
  doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.
</p>
```

仕様書
---

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-shadow-property |

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

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

関連情報
----

* `<color>` データ型（影の色を指定するため）
* CSS を使った HTML の要素への色の適用
* `box-shadow`
* `drop-shadow()`
* Applying color to HTML elements using CSS
<number>
========

CSS の **`<number>`** データ型は、整数または小数部分のある数値を表します。

構文
--

`<number>` の構文は `<integer>` 構文を拡張したものです。小数は `.` と続く1桁以上の10進数で表し、整数部に追加することができます。数値に関連付けられた単位はありません。

補間
--

`<number>` データ型の値はアニメーション用に補間可能です。実数、浮動小数点数として補間されます。補間の速度は、アニメーションに関連付けられたタイミング関数で決められます。

例
-

### 有効な数値


```css
12          生の <integer> は <number> でもある
4.01        正の実数
-456.8      負の実数
0.0         ゼロ
+0.0        + に続くゼロ
-0.0        - に続くゼロ
.60         前のゼロがない小数値
10e3        指数表記
-3.4e-2     複雑な指数表記
```

### 無効な数値


```css
12.         小数点の後ろには数字が続かなくてはなりません
+-12.2      前に置ける +/- は 1 つだけです
12.1.1      小数点は1つしか置けません
```

仕様書
---

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

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

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

関連情報
----

* `<integer>`
border-image-outset
===================

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

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

* Learn more
* See full compatibility
* Report feedback
**`border-image-outset`** は CSS のプロパティで、要素の境界画像が境界ボックスからはみ出す幅を設定します。

境界画像のうち、 `border-image-outset` によって要素の境界ボックスの外に表示された部分は、はみ出した際にスクロールバーを表示させたり、マウスイベントを受け取ったりすることはありません。

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

構文
--


```css
/\* <length> 値 \*/
border-image-outset: 1rem;

/\* <number> 値 \*/
border-image-outset: 1.5;

/\* 上下 | 左右 \*/
border-image-outset: 1 1.2;

/\* 上 | 左右 | 下 \*/
border-image-outset: 30px 2 45px;

/\* 上 | 右 | 下 | 左 \*/
border-image-outset: 7px 12px 14px 5px;

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


`border-image-outset` プロパティは、1 つから 4 つの値を使用して指定することができます。それぞれの値は `<length>` または `<number>` です。負の値は無効であり、指定すると `border-image-outset` の宣言が無効になります。

1. 値が **1 つ**指定された場合は、**全四辺**に適用されます。
2. 値が **2 つ**指定された場合は、1 つ目が**上下**に、2 つ目が**左右**に適用されます。
3. 値が **3 つ**指定された場合は、1 つ目が**上**に、2 つ目が**左右**に、3 つ目が**下**に適用されます。
4. 値が **4 つ**指定された場合は、**上**、**右**、**下**、**左**の順 (時計回り) で適用されます。
### 値

`<length>`

`border-image` がはみ出す寸法を長さ — 数値と単位で指定します。

`<number>`

`border-image` がはみ出す寸法を、要素の対応する `border-width` の倍数で指定します。例えば、要素が `border-width: 1em 2px 0 1.5rem` で、 `border-image-outset: 2` であると、最終的な `border-image-outset` は `2em 4px 0 3rem` として計算されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | すべての要素。ただし `border-collapse` が `collapse` のときはテーブル要素内部にあるものを除く。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| 計算値 | 指定通り。ただし相対的な長さはは絶対的な長さに変換される |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

border-image-outset =   
  [ <length [0,∞]> | <number [0,∞]> ]{1,4}    
  
```

例
-

### 境界画像をはみ出させる

#### HTML


```html
<div id="outset">この要素の境界画像ははみ出しています。</div>
```


#### CSS


```css
#outset {
  width: 10rem;
  background: #cef;
  border: 1.4rem solid;
  border-image: radial-gradient(#ff2, #55f) 40;
  border-image-outset: 1.5; /\* 1.5 × 1.4rem = 2.1rem \*/
  margin: 2.1rem;
}
```


#### 例

仕様書
---

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

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

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

関連情報
----

* 背景と境界
* CSS の学習: 背景と境界
:read-only
==========

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
**`:read-only`** は CSS の擬似クラスで、ユーザーが編集できない要素 (`input` や `textarea` など) を表します。


```css
input:read-only,
textarea:read-only {
  background-color: #ccc;
}

p:read-only {
  background-color: #ccc;
}
```

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

構文
--
```

:read-only
```

例
-

### 読み取り専用/読み書きコントロールによるフォーム情報の確認

`readonly` のフォームコントロールの使用方法の一つは、ユーザーが以前のフォームに入力した情報 (例えば、配送方法の詳細など) をチェックして確認しながら、フォームの残りの部分と一緒に情報を送信することができるようにすることです。以下の例では、これを実現しています。

`:read-only` 擬似クラスは、入力欄をクリック可能なフィールドのように見せるスタイル付けをすべて削除するために使用されており、読み取り専用の段落のように見えます。一方、 `:read-write` 擬似クラスは、編集可能な `<textarea>` により良いスタイル付けを行うために使用されています。


```css
input:-moz-read-only,
textarea:-moz-read-only,
input:read-only,
textarea:read-only {
  border: 0;
  box-shadow: none;
  background-color: white;
}

textarea:-moz-read-write,
textarea:read-write {
  box-shadow: inset 1px 1px 3px #ccc;
  border-radius: 5px;
}
```


完全なソースコードは readonly-confirmation.html にあります。以下のように表示されます。

### フォーム以外の読み取り専用コントロールのスタイル付け

このセレクターは `<input>`/`<textarea>` 要素に `readonly` が設定されているものだけを選択するのではありません。ユーザーが編集できない*あらゆる*要素を選択します。


```html
<p contenteditable>この段落は編集可能です。読み書き可です。</p>

<p>この段落は編集できません。読み取り専用です。</p>
```



```css
p {
  font-size: 150%;
  padding: 5px;
  border-radius: 5px;
}

p:read-only {
  background-color: red;
  color: white;
}

p:read-write {
  background-color: lime;
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # selector-read-only |
| Selectors Level 4 # rw-pseudos |

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

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

関連情報
----

* `:read-write`
* HTML の `contenteditable` 属性
CSS レイアウト料理帳
============

CSS レイアウト料理帳は、よくあるレイアウトパターンや、自分のサイトに実装する可能性がある事柄のレシピを共有するためのものです。プロジェクトの出発点として使うことができるコードを提供することに加えて、これらのレシピは様々な方法のレイアウト仕様書を使用することができることに光を当て、開発者として選択ができるようにします。

**メモ:** CSS のレイアウトが初めてならば、最初に CSS レイアウト学習モジュールを見て、ここのレシピを活用するのに必要な基本的な背景知識を得た方が良いかもしれません。

レシピ
---

| レシピ | 説明 | レイアウト手法 |
| --- | --- | --- |
| メディアオブジェクト | 一方が画像でもう一方が説明テキストである二列のボックス。 例えば Facebook の投稿やツイート。 | CSS グリッド、`float` による代替、`fit-content` による寸法制御 |
| 欄 | 段組みレイアウト、フレックスボックス、グリッドの選択 | CSS グリッド, 段組み, フレックスボックス |
| 要素を中央に配置 | アイテムを水平および垂直方向に中央に配置する方法 | フレックスボックス, ボックス配置 |
| 張り付くフッター | コンテンツが短い場合にコンテナーまたはビューポートの最下部に配置されるフッターの作成。 | CSS グリッド, フレックスボックス |
| ナビゲーションの分割 | 一部のリンクが他と視覚的に分割されているナビゲーションパターン。 | フレックスボックス, `margin` |
| パンくずナビゲーション | 来訪者がページ階層の上の階層に戻ることができるリンクのリストの作成。 | フレックスボックス |
| バッジ付きリストグループ | カウントを表示するバッジの付いたアイテムのリスト。 | フレックスボックス, ボックス配置 |
| ページ付け | コンテンツのページへのリンク (検索結果など)。 | フレックスボックス, ボックス配置 |
| カード | カードのグリッドで表示されるカードコンポーネント。 | CSS グリッド |
| グリッドラッパー | グリッドコンテンツを中央のラッパー内に配置するためのもので、はみ出すこともできます。 | CSS グリッド |

レシピにご協力を
--------

MDN 全体として、上記にあるものと同じ形式のレシピを提供していただけると助かります。 例を書くテンプレートやガイドラインはこちらのページを見てください。
解決値
===

**解決値** は CSS プロパティにおいて、 `getComputedStyle()` で返される値です。

ほとんどのプロパティでは計算値がそのまま解決値となりますが、古いプロパティ（`width` と `height` を含む）では、代わりに使用値が解決値となります。プロパティごとの詳細については、以下の仕様書のリンクを参照してください。

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # resolved-values |

関連情報
----

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

`scroll-margin-block-end` プロパティは、スクロールスナップ領域のインライン方向における末尾側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。

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

構文
--


```css
/\* <length> 値 \*/
scroll-margin-block-end: 10px;
scroll-margin-block-end: 1em;

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

### 値

`<length>`

スクロールコンテナーのブロック方向における末尾側の辺からみた外部の距離です。

公式定義
----

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

形式文法
----
```

scroll-margin-block-end =   
  <length>    
  
```

仕様書
---

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

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

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

関連情報
----

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

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

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

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

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

構文
--


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

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

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


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

### 値

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

例
-

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


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

**`column-rule`** は一括指定を行う CSS のプロパティで、段組みレイアウトで段間に引かれる線（段間罫）の太さ、スタイル、色を設定します。

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

これは一括指定プロパティであり、一回の便利な宣言で個別の `column-rule-*` プロパティ (`column-rule-width`, `column-rule-style`, `column-rule-color`) を設定できます。

**メモ:** 他の一括指定プロパティと同様に、指定されなかった個別の値は初期値が設定されます (以前に個別指定プロパティを使用して設定された値を上書きする可能性があります)。

構文
--


```css
column-rule: dotted;
column-rule: solid 8px;
column-rule: solid blue;
column-rule: thick inset blue;

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


`column-rule` プロパティは、以下に挙げる値のうち 1 ～ 3 個を任意の順序で指定します。

### 値

`<'column-rule-width'>`

`<length>` または 3 つのキーワード、 `thin`、`medium`、`thick` のうちの 1 つです。詳しくは `border-width` を参照してください。

`<'column-rule-style'>`

有効な値と詳細は `border-style` を参照してください。

`<'column-rule-color'>`

`<color>` 値です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `column-rule-width`: `medium`
* `column-rule-style`: `none`
* `column-rule-color`: `currentcolor`
 |
| 適用対象 | 段組み要素 |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `column-rule-color`: 色の計算値
* `column-rule-style`: 指定通り
* `column-rule-width`: 絶対的な長さ、列の罫線のスタイルが `none` か `hidden` なら `0`
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `column-rule-color`: 色
* `column-rule-style`: 離散値
* `column-rule-width`: length
 |

形式文法
----
```

column-rule =   
  <'column-rule-width'>  ||  
  <'column-rule-style'>  ||  
  <'column-rule-color'>    
  
```

例
-

### 例 1


```css
/\* "medium dotted currentcolor" と同じ \*/
p.foo {
  column-rule: dotted;
}

/\* "medium solid blue" と同じ \*/
p.bar {
  column-rule: solid blue;
}

/\* "8px solid currentcolor" と同じ \*/
p.baz {
  column-rule: solid 8px;
}

p.abc {
  column-rule: thick inset blue;
}
```

### 例 2

#### HTML


```html
<p class="content-box">
  This is a bunch of text split into three columns. Take note of how the
  `column-rule` property is used to adjust the style, width, and color of the
  rule that appears between the columns.
</p>
```


#### CSS


```css
.content-box {
  padding: 0.3em;
  background: #ff7;
  column-count: 3;
  column-rule: inset 2px #33f;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Multi-column Layout Module Level 1 # column-rule |

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

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

関連情報
----

* 段組みレイアウト
* `column-rule-style`
* `column-rule-width`
* `column-rule-color`
initial
=======

**`initial`** は CSS のキーワードで、要素にプロパティの初期値（または既定値）を設定します。どの CSS プロパティにも適用できます。これは、 CSS の一括指定プロパティ `all` を 含め、すべての CSS プロパティに適用することができます。 `all` を `initial` に設定すると、すべての CSS プロパティをそれぞれの初期値に戻すことができます。

継承プロパティでは、初期値は予期せぬ値になるかもしれません。代わりに `inherit`, `unset`, `revert`, `revert-layer` キーワードを使用することを検討してください。

例
-

### initial を使用して要素の色を初期化

#### HTML


```html
<p>
  <span>このテキストは赤です。</span>
  <em>このテキストは初期値（ふつうは黒）です。</em>
  <span>これは再び赤です。</span>
</p>
```


#### CSS


```css
p {
  color: red;
}

em {
  color: initial;
}
```


#### 結果

この例では `initial` キーワードにより、`em` 要素の `color` 値は、仕様書で定義されている `color` の初期値に戻されます。

仕様書
---

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

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

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

関連情報
----

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

**`<frequency>`** は CSS のデータ型で、話し声の高さなどの周波数の値を表します。今のところ、どの CSS プロパティでも使われていません。

構文
--

`<frequency>` データ型は、 `<number>` とその後に以下に挙げる単位のうちの一つから成ります。他の CSS の数値と同様、単位と数値の間には空白を置きません。

### 単位

`Hz`

周波数をヘルツで表します。例： `0Hz`、 `1500Hz`、 `10000Hz`

`kHz`

周波数をキロヘルツで表します。例： `0kHz`、 `1.5kHz`、 `10kHz`


**メモ:** `0` の数値は単位に関わらず常に同じですが、単位は省略できません。言い換えれば、 `0` は無効で `0Hz` や `0kHz` を表すものではありません。単位の大文字と小文字は区別されませんが、国際単位系の表記に従って、 `Hz` や `kHz` の H を大文字にするのが良い習慣です。

例
-

### 有効な周波数の値
```

12Hz     正の整数
4.3Hz    非整数
14KhZ    単位は大文字小文字を区別しません（ただ、国際単位系の表記が推奨されます）
+0Hz     先行する + のあるゼロと単位
-0kHz    先行する - のあるゼロと単位
```

### 無効な周波数の値
```

12.0     これは <number> であり、<frequency> ではありません。単位が必須です。
7 Hz     数値と単位の間に空白を置いてはいけません
0        単位のないゼロは <length> では利用できますが、<frequency> では無効です。
```

仕様書
---

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

**メモ:** このデータ型は初め、 CSS Level 2 の現在は廃止された aural メディア種別で、音声の高さを定義するために導入されました。現時点ではこのデータ型を使う CSS プロパティはありませんが、 CSS 3 で `<frequency>` データ型が再導入されました。

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

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

関連情報
----

* `<frequency-percentage>`
* CSS 値と単位
:last-child
===========

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

/* 兄弟要素の中で最後の <p> を
   すべてを選択 */
p:last-child {
  color: lime;
}
```

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

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

構文
--
```

:last-child
```

例
-

### 基本的な例

#### HTML


```html
<div>
  <p>このテキストは選択されません。</p>
  <p>このテキストは選択されます！</p>
</div>

<div>
  <p>このテキストは選択されません。</p>
  <h2>このテキストは選択されません。 `p` ではありません。</h2>
</div>
```


#### CSS


```css
p:last-child {
  color: lime;
  background-color: black;
  padding: 5px;
}
```


#### 結果

### リストのスタイル付け

#### HTML


```html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1</li>
      <li>Item 3.2</li>
      <li>Item 3.3</li>
    </ul>
  </li>
</ul>
```


#### CSS


```css
ul li {
  color: blue;
}

ul li:last-child {
  border: 1px solid red;
  color: red;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # the-last-child-pseudo |

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

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

関連情報
----

* `:-moz-last-node` 
Non-standard
* `:last-of-type`
* `:first-child`
* `:nth-child`