recursal/MDN huggingface dataset:
text-underline-offset
=====================

**`text-underline-offset`** は CSS のプロパティで、 (`text-decoration` を使用して適用された) 下線のテキスト装飾線の本来の位置からのオフセット距離を設定します。

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

`text-underline-offset` は `text-decoration` の一括指定の一部ではありません。一つの要素が複数の `text-decoration` による線を持つため、 `text-underline-offset` は下線のみに影響し、 `overline` や `line-through` などの他の装飾線には影響**しません**。

構文
--


```css
/\* 単一のキーワード \*/
text-underline-offset: auto;

/\* 長さ \*/
text-underline-offset: 0.1em;
text-underline-offset: 3px;

/\* パーセント値 \*/
text-underline-offset: 20%;

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


`text-underline-offset` プロパティは、以下のリストのうち一つの値で指定します。

### 値

`auto`

ブラウザーが下線の適切なオフセットを選択します。

`<length>`

下線のオフセットを `<length>` で指定し、フォントファイルの提案やブラウザーの既定値を上書きします。オフセットがフォントサイズに合わせて変化するように、 `em` 単位を使用することを推奨します。

`<percentage>`

下線のオフセットを、要素のフォントにおける **1 em** に対する `<percentage>` で指定します。パーセント値はは相対値として継承されるため、フォントの変化に応じて変化します。このプロパティを適用した場合、オフセットは、フォントサイズや垂直方向の配置が異なる子要素があっても、下線が適用されているボックス全体で一定となります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | すべての要素。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | あり |
| パーセント値 | 要素自身のフォントサイズに対する相対値 |
| 計算値 | 指定通り |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

text-underline-offset =   
  auto                 |  
  <length-percentage>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

### text-underline-offset のデモ


```html
<p class="oneline">Here's some text with an offset wavy red underline!</p>
<br />
<p class="twolines">
  This text has lines both above and below it. Only the bottom one is offset.
</p>
```



```css
p {
  text-decoration: underline wavy red;
  text-underline-offset: 1em;
}

.twolines {
  text-decoration-color: purple;
  text-decoration-line: underline overline;
}
```

仕様書
---

| Specification |
| --- |
| CSS Text Decoration Module Level 4 # underline-offset |

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

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

関連情報
----

* `text-decoration`
* `text-decoration-thickness`
<string>
========

**`<string>`** は CSS のデータ型で、一連の文字列を表します。文字列は `content`, `font-family`, `quotes` など、数々の CSS プロパティで使用されます。

構文
--

`<string>` データ型は任意の数の Unicode 文字を、二重引用符 (`"`) または単一引用符 (`'`) で囲んで構成します。

多くの文字は文字通りに表現されます。またすべての文字は、それぞれの 16 進数の Unicode コードポイントで表現することもできます。例えば、 `\22` は二重引用符を表し、 `\27` は単一引用符 (`'`)、 `\A9` は著作権記号 (`©`) を表します。

重要なことは、文字によっては他の方法として、バックスラッシュでエスケープすることもできます。これらには二重引用符で囲まれた文字列内で使われる二重引用符、単一引用符で囲まれた文字列内で使われる単一引用符、およびバックスラッシュ自身です。例えば、 `\\` は単一のバックスラッシュを生成します。

改行文字を出力するには、 `\A` または `\00000A` のように改行文字としてエスケープする必要があります。しかし、改行を行の末尾の文字として `\` でエスケープすると、コード内で文字列を複数行に渡らせることができます。

ただし、改行を行うためには、`white-space` プロパティに適切な値を設定する必要があります。

**メモ:** HTML エンティティ (`&nbsp;` や `&#8212;` など) は、 CSS の `<string>` の中で使用することはできません。

例
-

### 有効な文字列の例


```js
/\* 単純な文字列 \*/
"This string is demarcated by double quotes."
'This string is demarcated by single quotes.'

/\* 文字のエスケープ \*/
"This is a string with \" an escaped double quote."
"This string also has \22 an escaped double quote."
'This is a string with \' an escaped single quote.'
'This string also has \27 an escaped single quote.'
"This is a string with \\ an escaped backslash."

/\* 文字列内の改行 \*/
"This string has a \Aline break in it."

/\* 2 行にわたる文字列 (これら 2 つの文字列は同じ出力になります) \*/
"A really long \
awesome string"
"A really long awesome string"
```

仕様書
---

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

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

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

関連情報
----

* CSS の単位と値
* CSS の基本データ型
* CSS 入門: 単位と値
CSS 論理的プロパティと値
==============

**CSS 論理的プロパティと値** (CSS Logical Properties and Values) は CSS のモジュールの一つで、論理的プロパティと値を導入して、物理的ではなく論理的に方向や寸法をマッピングして、レイアウトを制御することができるようにします。

このモジュールは以前に CSS 2.1 で定義されたプロパティについて、論理的なプロパティと値を定義します。論理的プロパティは方向を定義し、これは対応する物理的なプロパティと相対的に等価になります。

### ブロックとインライン

論理的プロパティと値は、*ブロック*と*インライン*という抽象的な用語を使用して、流れに対する方向を記述します。これらの用語の物理的な意味は、書字方向に依存します。

ブロック方向

行内のテキストの流れとは垂直の方向、つまり、横書きでは垂直方向、縦書きでは水平方向です。標準的な英語のテキストでは、垂直方向になります。

インライン方向

行内のテキストの流れと平行の方向、つまり、横書きでは水平方向、縦書きでは垂直方向です。標準的な英語のテキストでは、水平方向になります。

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

### 寸法のプロパティ

* `block-size`
* `inline-size`
* `max-block-size`
* `max-inline-size`
* `min-block-size`
* `min-inline-size`
### マージン、境界、パディングのプロパティ

* `border-block`
* `border-block-color`
* `border-block-end`
* `border-block-end-color`
* `border-block-end-style`
* `border-block-end-width`
* `border-block-start`
* `border-block-start-color`
* `border-block-start-style`
* `border-block-start-width`
* `border-block-style`
* `border-block-width`
* `border-color`
* `border-inline`
* `border-inline-color`
* `border-inline-end`
* `border-inline-end-color`
* `border-inline-end-style`
* `border-inline-end-width`
* `border-inline-start`
* `border-inline-start-color`
* `border-inline-start-style`
* `border-inline-start-width`
* `border-inline-style`
* `border-inline-width`
* `border-start-start-radius`
* `border-start-end-radius`
* `border-end-start-radius`
* `border-end-end-radius`
* `border-style`
* `border-width`
* `margin` (`logical` 
Experimental
 キーワード)
* `margin-block`
* `margin-block-end`
* `margin-block-start`
* `margin-inline`
* `margin-inline-end`
* `margin-inline-start`
* `padding` (`logical` 
Experimental
 キーワード)
* `padding-block`
* `padding-block-end`
* `padding-block-start`
* `padding-inline`
* `padding-inline-end`
* `padding-inline-start`
### 浮動と位置指定のプロパティ

* `clear` (`inline-end` および `inline-start` キーワード)
* `float` (`inline-end` および `inline-start` キーワード)
* `inset`
* `inset-block`
* `inset-block-end`
* `inset-block-start`
* `inset-inline`
* `inset-inline-end`
* `inset-inline-start`
### その他のプロパティ

* `caption-side` (`inline-end` および `inline-start` キーワード)
* `overflow-block`
* `overflow-inline`
* `overscroll-behavior-block`
* `overscroll-behavior-inline`
* `resize` (`block` および `inline` キーワード)
* `text-align` (`end` および `start` キーワード)
### 非推奨のプロパティ

* `offset-block-end` 
Non-standard

非推奨
 (`inset-block-end` に置き換え)
* `offset-block-start` 
Non-standard

非推奨
 (`inset-block-start` に置き換え)
* `offset-inline-end` 
Non-standard

非推奨
 (`inset-inline-end` に置き換え)
* `offset-inline-start` 
Non-standard

非推奨
 (`inset-inline-start` に置き換え)
### ガイド

* 論理的プロパティと値の基本概念
* 寸法の論理的プロパティ
* マージン、境界、パディングの論理的プロパティ
* 浮動と位置指定の論理的プロパティ
仕様書
---

| Specification |
| --- |
| CSS Logical Properties and Values Level 1  |

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

完全な互換性情報は、それぞれのプロパティページを参照してください。
border-left
===========

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

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

他の一括指定プロパティと同様に、 `border-left` は、一部の値が指定されていなくても、設定可能なプロパティをすべて設定します。指定されていないプロパティは既定値が設定されます。つまり・・・


```css
border-left-style: dotted;
border-left: thick green;
```


・・・は、実際には以下と同じです・・・


```css
border-left-style: dotted;
border-left: none thick green;
```


・・・そして、 `border-left` の前で設定された `border-left-style` の値は無視されます。 `border-left-style` の既定値は `none` なので、 `border-style` の部分の設定は境界線なしとなります。

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

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

* `border-left-color`
* `border-left-style`
* `border-left-width`
構文
--


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

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


一括指定プロパティの 3 つの値は任意の順序で指定可能で、また、1 つまたは 2 つの値を省略することができます。

### 値

`<br-width>`

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

`<br-style>`

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

`<color>`

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

公式定義
----

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

形式文法
----
```

border-left =   
  <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>このボックスには左側に境界線があります。</div>
```


#### CSS


```css
div {
  border-left: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}
```


#### 結果

仕様書
---

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

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

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

関連情報
----

* `border`
* `border-block`
* `outline`
* 背景と境界
* CSS の学習: 背景と境界
要素型セレクター
========

CSS の**要素型セレクター** (type selector) は、ノード名で要素を一致させます。つまり、文書内にある指定された型の要素をすべて選択します。


```css
/\* すべての <a> 要素。 \*/
a {
  color: red;
}
```


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

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


```css
要素名 { スタイルプロパティ }
```

例
-

### CSS


```css
span {
  background-color: skyblue;
}
```

### HTML


```html
<span>テキストを持つ span です。</span>
<p>テキストを持つ p です。</p>
<span>追加のテキストを持つ span です。</span>
```

### 結果

### 名前空間

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


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

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # type-selectors |

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

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

関連情報
----

* CSS セレクター
* CSS の学習: セレクター
<percentage>
============

**`<percentage>`** は CSS のデータ型で、パーセント値による割合を表します。要素の親オブジェクトからの相対的な寸法を定義するためによく使われます。 `width`、 `height`, `margin`, `padding`、 `font-size` など、たくさんのプロパティでパーセント値を使うことができます。

**メモ:** 継承されるのは計算値だけです。親要素のプロパティでパーセント値が使われても、継承したプロパティではパーセント値ではなく、実数値 (`<length>` 値に向けたピクセル単位の幅など) にのみアクセスできます。

構文
--

`<percentage>` データ型は、 `<number>` とそれに続くパーセント記号 (`%`) から成ります。任意で、先行して符号 (`+` または `-`) を、負の値が許可されない値であってもすべてのプロパティに付けることができます。他の CSS の数値と同様、記号と数値の間には空白を置きません。

補間
--

アニメーションをする時、 `<percentage>` データ型は浮動小数点の実数として補間が行われます。補間の速度は、アニメーションに関連付けられたタイミング関数で定義します。

例
-

### 幅と左マージン


```html
<div style="background-color:navy;">
  <div style="width:50%; margin-left:20%; background-color:chartreuse;">
    Width: 50%, Left margin: 20%
  </div>
  <div style="width:30%; margin-left:60%; background-color:pink;">
    Width: 30%, Left margin: 60%
  </div>
</div>
```


以上の HTML は以下のような出力になります。

### font-size


```html
<div style="font-size:18px;">
  <p>Full-size text (18px)</p>
  <p><span style="font-size:50%;">50% (9px)</span></p>
  <p><span style="font-size:200%;">200% (36px)</span></p>
</div>
```


以上の HTML は以下のような出力になります。

仕様書
---

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

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

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

関連情報
----

* `<length-percentage>`
* CSS 値と単位
border-end-end-radius
=====================

**`border-end-end-radius`** は CSS のプロパティで、要素の論理的な境界の半径を定義します。これは要素の `writing-mode`, `direction`, `text-orientation` に応じて、物理的な境界の半径に対応づけられます。これはテキストの方向や書字方向に依存せずにスタイルを構築する際に便利です。


```css
/\* <length> 値 \*/
/\* 値 1 つの場合は角を円にする \*/
border-end-end-radius: 10px;
border-end-end-radius: 1em;

/\* 値 2 つの場合は角を楕円にする \*/
border-end-end-radius: 1em 2em;

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

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

このプロパティは、要素の block-end と inline-end の間の角に影響します。すなわち、書字方向が `horizontal-tb` で `ltr` の方向であれば、 `border-bottom-right-radius` プロパティに対応します。

構文
--

### 値

`<length-percentage>`

円の半径または楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の `<length>` データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対する値です。負の数は無効です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | すべての要素。ただし、ユーザーエージェントは `border-collapse` が `collapse` である場合に`table` および `inline-table` 要素に適用する必要はない。内部表要素での動作は、今のところ未定義。。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| パーセント値 | 境界ボックスの対応する寸法に対する相対値 |
| 計算値 | ２つの絶対的な `length` または `percentage` 値 |
| アニメーションの種類 | length または パーセント値, calc(); |

形式文法
----
```

border-end-end-radius =   
  <length-percentage [0,∞]>{1,2}    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

### 縦書きの時の境界の丸め

#### HTML


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


#### CSS Content


```css
div {
  background-color: rebeccapurple;
  width: 120px;
  height: 120px;
  border-end-end-radius: 10px;
}

.exampleText {
  writing-mode: vertical-rl;
  padding: 10px;
  background-color: #fff;
  border-end-end-radius: 10px;
}
```


#### 結果

仕様書
---

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

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

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

関連情報
----

* 対応する物理的プロパティ: `border-bottom-right-radius`
* `writing-mode`, `direction`, `text-orientation`
:in-range
=========

**`:in-range`** は CSS の擬似クラスで、現在の値が `min` および `max` 属性による制限範囲内にある `<input>` 要素を表します。


```css
/\* 入力範囲が設定されていて、値がその範囲に該当する
 <input> 要素をすべて選択 \*/
input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
}
```

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

この擬似クラスは、入力欄の現在の値が許可された範囲内にあることをユーザーに視覚的に示すのに便利です。

**メモ:** この擬似クラスは範囲制限を持つ（または設定できる）要素にのみ適用されます。そのような制限がない場合は、要素は "in-range" にも "out-of-range" にもなりません。

構文
--
```

:in-range
```

例
-

### HTML


```html
<form action="" id="form1">
  <ul>
    1 から 10 の間の値が有効です。
    <li>
      <input
 id="value1"
 name="value1"
 type="number"
 placeholder="1 to 10"
 min="1"
 max="10"
 value="12"
 required />
      <label for="value1">あなたの値は</label>
    </li>
  </ul>
</form>
```

### CSS


```css
li {
  list-style: none;
  margin-bottom: 1em;
}

input {
  border: 1px solid black;
}

input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
}

input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
  border: 2px solid red;
}

input:in-range + label::after {
  content: "範囲内です。";
}

input:out-of-range + label::after {
  content: "範囲外です！";
}
```

### 結果

**メモ:** 空の `<input>` は範囲外としてカウントされず、 `:out-of-range` 擬似クラスセレクターで選択されることはありません。空の入力を選択するための `:blank` 擬似クラスがありますが、この記事を書いている時点では、実験的で対応が十分ではありません。また、 `required` 属性と `:invalid` 擬似クラスを使用すると、入力を必須にするためのより一般的なロジックとスタイルを提供できます (`:invalid` は空白*および*範囲外の入力のスタイルを指定します)。

仕様書
---

| Specification |
| --- |
| HTML Standard # selector-in-range |
| Selectors Level 4 # in-range-pseudo |

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

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

関連情報
----

* `:out-of-range`
* フォームデータの検証
scroll-margin-inline-end
========================

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

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

構文
--


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

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

### 値

`<length>`

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

公式定義
----

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

形式文法
----
```

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

例
-

### 簡単なデモ

この例では、上記のインタラクティブ例と非常によく似たものを実装していますが、ここではその実装方法を説明します。

ここでの目的は、水平方向にスクロールする 4 つのブロックを作成することです。2 つ目と 3 つ目のブロックは、それぞれのブロックの右端に近いところでスナップします。

#### HTML

ブロックを表す HTML はとても簡単です。


```html
<div class="scroller">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
```


#### CSS

外側のコンテナーのスタイルは以下のようになっています。


```css
.scroller {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid #000;
  scroll-snap-type: x mandatory;
}
```


スクロールスナップに関連する主な部品は、`overflow-x: scroll` で、コンテンツがスクロールしても隠れないようにしています。また、`scroll-snap-type: x mandatory` で、スクロールのスナップは水平軸に沿って行わなければならず、スクロールは常にスナップ点で静止するようになっています。

子要素のスタイルは次のようになっています。


```css
.scroller > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: #663399;
  color: #fff;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: end;
}

.scroller > div:nth-child(2n) {
  background-color: #fff;
  color: #663399;
}
```


ここで最も重要なのは `scroll-snap-align: end` で、これは右側の端 (ここでは x 軸に沿った「末尾」) をスナップ点として指定するものです。

最後に、スクロールのマージン値を指定しますが、これは 2 番目と 3 番目の子要素に対して異なる値を指定します。


```css
.scroller > div:nth-child(2) {
  scroll-margin-inline-end: 1rem;
}

.scroller > div:nth-child(3) {
  scroll-margin-inline-end: 2rem;
}
```


つまり、真ん中の子要素を過ぎてスクロールした場合、2 番目の `<div>` のインラインの末尾から `1rem`、3 番目の `<div>` のインラインの末尾から `2rem` のところでスナップすることになります。

#### 結果

自分でやってみましょう。

仕様書
---

| 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
column-rule-style
=================

**`column-rule-style`** は CSS のプロパティで、段組みレイアウトで段の間に引かれる線 (段間罫) のスタイルを設定します。

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

構文
--


```css
/\* <'border-style'> の値 \*/
column-rule-style: none;
column-rule-style: hidden;
column-rule-style: dotted;
column-rule-style: dashed;
column-rule-style: solid;
column-rule-style: double;
column-rule-style: groove;
column-rule-style: ridge;
column-rule-style: inset;
column-rule-style: outset;

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


`column-rule-style` プロパティは、単一の `<'border-style'>` 値で指定します。

### 値

`<'border-style'>`

`border-style` で定義されているキーワードで、段間罫のスタイルを指定します。スタイルは collasped の境界線モデルで解釈されます。

公式定義
----

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

形式文法
----
```

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

例
-

### 破線の段間罫を設定

#### HTML


```html
<p>
  This is a bunch of text split into three columns. The `column-rule-style`
  property is used to change the style of the line that is drawn between
  columns. Don't you think that's wonderful?
</p>
```


#### CSS


```css
p {
  column-count: 3;
  column-rule-style: dashed;
}
```


#### 結果

仕様書
---

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

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

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

関連情報
----

* 段組みレイアウト
* `column-rule`
* `column-rule-width`
* `column-rule-color`
初期値
===

**初期値 (initial value)** は CSS のプロパティの既定値であり、仕様書の定義表に挙げられているものです。初期値の使い方はプロパティが継承されているかどうかで異なります。

* 継承されるプロパティでは、初期値は*ルート要素に対してのみ*、指定値が指定されていない場合に限り使用されます。
* 継承されないプロパティでは、初期値は*すべての要素*において、指定値が指定されていない場合に限り使用されます。

`initial` キーワードを使用すると、明示的に初期値を指定することができます。

**メモ:** 初期値をブラウザーのスタイルシートで指定された値と混同しないでください。

仕様書
---

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

関連情報
----

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

`math-style` プロパティは、 MathML の数式を通常の高さで表示するか、コンパクトな高さで表示するかを指定します。

構文
--


```css
/\* キーワード値 \*/
math-style: normal;
math-style: compact;

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

### 値

`normal`

初期値であり、通常のレンダリングを示します。

`compact`

子孫の数式のレイアウトの論理高を最小化しようとします。

公式定義
----

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

形式文法
----
```

math-style =   
  normal   |  
  compact    
  
```

例
-

### 数式のスタイルを compact に変更

#### CSS


```css
math {
  math-style: normal;
}
.compact {
  math-style: compact;
}
```


#### HTML


```html
<p>
  Normal height
  <math>
    <mrow>
      <munderover>
        <mo>∑</mo>
        <mrow>
          <mi>n</mi>
          <mo>=</mo>
          <mn>1</mn>
        </mrow>
        <mrow>
          <mo>+</mo>
          <mn>∞</mn>
        </mrow>
      </munderover>
    </mrow>
  </math>
  and compact height
  <math class="compact">
    <mrow>
      <munderover>
        <mo>∑</mo>
        <mrow>
          <mi>n</mi>
          <mo>=</mo>
          <mn>1</mn>
        </mrow>
        <mrow>
          <mo>+</mo>
          <mn>∞</mn>
        </mrow>
      </munderover>
    </mrow>
  </math>
  equations.
</p>
```


#### 結果

仕様書
---

| Specification |
| --- |
| MathML Core # the-math-style-property |

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

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

関連情報
----

* `math-depth`
* `font-size`
列結合子
====

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

**列結合子** (column combinator, `||`) は、2 つの CSS セレクターの間に配置されます。前者のセレクターに一致する列要素に所属する、後者のセレクターに一致する要素に一致します。


```css
/\* 表の "selected" クラスの列に所属するセル \*/
col.selected||td {
  background: gray;
}
```

構文
--


```css
column-selector||cell-selector {
  /\* スタイルプロパティ \*/
}
```

例
-

### HTML


```html
<table border="1">
  <colgroup>
    <col span="2" />
    <col class="selected" />
  </colgroup>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td colspan="2">D</td>
      <td>E</td>
    </tr>
    <tr>
      <td>F</td>
      <td colspan="2">G</td>
    </tr>
  </tbody>
</table>
```

### CSS


```css
col.selected||td {
  background: gray;
  color: white;
  font-weight: bold;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # the-column-combinator |

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

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

関連情報
----

* `<col>`
* `<colgroup>`
* `grid`
* `:nth-col` (en-US)
* `:nth-last-col` (en-US)
@page
=====

**`@page`** は CSS のアットルールで、文書を印刷するときに一部の CSS プロパティを変更するために使用します。

構文
--


```css
@page {
  margin: 1cm;
}

@page :first {
  margin: 2cm;
}
```

### 記述子

`size`

対象となるページボックスの包含ブロックの寸法と向きを指定します。一般的な場合、1つのページボックスが1枚の用紙に印刷され、対象となる用紙の寸法を示します。

解説
--

`@page` ですべての CSS プロパティを変更できるわけではありません。変更できるのは、マージン、orphans、widows と、文書のページ区切りだけです。これ以外の CSS プロパティを変えようとしても、無視されます。

`@page` アットルールには、 CSS オブジェクトモデルインターフェイスの `CSSPageRule` からアクセスできます。

**メモ:** W3C は、ビューポートに関する `<length>` の単位、`vh`、`vw`、`vmin`、`vmax` の取り扱い方について議論中です。差し当たっては、これらを `@page` アットルールの中で使わないでください。

形式文法
----
```

@page =   
  @page <page-selector-list>? { <declaration-rule-list> }    
  
<page-selector-list> =   
  <page-selector>#    
  
<page-selector> =   
  [ <ident-token>? <pseudo-page>\* ]!    
  
<pseudo-page> =   
  ':' [ left | right | first | blank ]    
  
```

例
-

### @page 擬似クラスの例

さまざまな `@page` の擬似クラスのページにある例を参照してください。

* `:blank`
* `:first`
* `:left`
* `:right`
* `:recto` 
Experimental
* `:verso` 
Experimental
仕様書
---

| Specification |
| --- |
| CSS Paged Media Module Level 3 # at-page-rule |
| CSS Logical Properties and Values Level 1 # page |

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

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

関連情報
----

* この件 (ページベースのカウンターなど) に関する進捗の追跡は、 Bugzilla のチケット [META] CSS Paged Media Module Level 3 を参照してください。