recursal/MDN huggingface dataset:
<hex-color>
===========

**`<hex-color>`** は CSS のデータ型で、sRGB 色の原色成分（赤、緑、青）を 16 進数で記述し、その透明度も記述する記法です。

`<hex-color>` 値は、 `<color>` が使用できるところならどこでも使用することができます。

構文
--
```

#RGB        // 値 3 つの構文
#RGBA       // 値 4 つの構文
#RRGGBB     // 値 6 つの構文
#RRGGBBAA   // 値 8 つの構文
```

### 値

`R` または `RR`

色の赤の成分であり、`0` から `ff` (255) までの間の 16 進数で、大文字小文字を区別しません。数値が 1 つだけの場合は `1` が `11` になるように複製されます。

`G` または `GG`

色の緑の成分であり、`0` から `ff` (255) までの間の 16 進数で、大文字小文字を区別しません。数値が 1 つだけの場合は `c` が `cc` になるように複製されます。

`B` または `BB`

色の青の成分であり、`0` から `ff` (255) までの間の 16 進数で、大文字小文字を区別しません。数値が 1 つだけの場合は `9` が `99` になるように複製されます。

`A` または `AA` 省略可

色のアルファ成分であり、`0` から `ff` (255) までの間の 16 進数で、大文字小文字を区別しません。数値が 1 つだけの場合は `e` が `ee` になるように複製されます。 `0` または `00` は完全に透明な色で、 `f` または `ff` は完全に不透明な色です。


**メモ:** 構文は大文字小文字の区別がなく、 `#00ff00` は `#00FF00` と同じです。

例
-

### 完全に不透明なホットピンクの 16 進構文

#### HTML


```html
<span>
  #f09
  <div class="c1"></div>
</span>
<span>
  #F09
  <div class="c2"></div>
</span>
<span>
  #ff0099
  <div class="c3"></div>
</span>
<span>
  #FF0099
  <div class="c4"></div>
</span>
```


#### CSS
```

body {
  display: flex;
  justify-content: space-evenly;
}
```



```css
div {
  width: 40px;
  height: 40px;
}
.c1 {
  background: #f09;
}
.c2 {
  background: #f09;
}
.c3 {
  background: #ff0099;
}
.c4 {
  background: #ff0099;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Color Module Level 4 # hex-notation |

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

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

関連情報
----

* `<color>`: 色のデータ型
* `rgb()`: 色の 3 成分および透明度を 10 進数で使用するように設定する関数
* CSS 色モジュール
text-align-last
===============

**`text-align-last`** は CSS のプロパティで、ブロックの最後の行、あるいは強制的な改行の直前の行をどのように配置するかを設定します。

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

構文
--


```css
/\* キーワード値 \*/
text-align-last: auto;
text-align-last: start;
text-align-last: end;
text-align-last: left;
text-align-last: right;
text-align-last: center;
text-align-last: justify;

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

### 値

`auto`

`text-align` の値と同じ方向に配置されます。ただし `text-align` が `justify` である場合は、`text-align-last` に `start` を設定した場合と同じ効果になります。

`start`

書字方向が左書きであれば `left`、右書きであれば `right` と同じです。

`end`

書字方向が左書きであれば `right`、右書きであれば `left` と同じです。

`left`

インラインコンテンツが行ボックスの左端に配置されます。

`right`

インラインコンテンツが行ボックスの右端に配置されます。

`center`

インラインコンテンツが行ボックスの中央に配置されます。

`justify`

テキストは両端揃えになります。テキストは段落の左端から右端までに配置されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | ブロックコンテナー |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

text-align-last =   
  auto          |  
  start         |  
  end           |  
  left          |  
  right         |  
  center        |  
  justify       |  
  match-parent    
  
```

例
-

### 最後の行を中央揃えにする
```

<p>
  Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
  in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
```


#### CSS


```css
p {
  font-size: 1.4em;
  text-align: justify;
  text-align-last: center;
}
```


#### 結果s

仕様書
---

| Specification |
| --- |
| CSS Text Module Level 3 # text-align-last-property |

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

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

関連情報
----

* `text-align`
:blank
======

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

**メモ:** セレクターは、CSSWG が変更を続けているため、使用するリスクを考慮する必要があります。

CSSWG issue #1967 を参照してください。

**`:blank`** は CSS の擬似クラスで、空のユーザー入力要素 (例えば `<input>` や `<textarea>`) を選択します。

構文
--
```

:blank
```

例
-

### 単純な :blank の例

最終的に対応しているブラウザーでは、 `:blank` 擬似クラスを使用することで、開発者は、必須ではないが、まだ何も記入されていない入力コントロールを、何らかの方法で強調表示することができるようになります。

#### HTML


```html
<textarea></textarea>
```


#### CSS


```css
textarea:blank {
  border: 3px solid red;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # blank-pseudo |

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

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

関連情報
----

* `:empty`
text-emphasis-position
======================

**`text-emphasis-position`** は CSS のプロパティで、圏点が描かれる位置を設定します。ルビのテキストと同様、圏点のために十分な空間がない場合は、行の高さが広げられます。

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

構文
--


```css
/\* 初期値 \*/
text-emphasis-position: over right;

/\* キーワード値 \*/
text-emphasis-position: over left;
text-emphasis-position: under right;
text-emphasis-position: under left;

text-emphasis-position: left over;
text-emphasis-position: right under;
text-emphasis-position: left under;

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

### 値

`over`

横書きモードでテキストの上に圏点を描きます。

`under`

横書きモードでテキストの下に圏点を描きます。

`right`

縦書きモードでテキストの右に圏点を描きます。

`left`

縦書きモードでテキストの左に圏点を描きます。

解説
--

圏点の望ましい位置は言語に依存します。例えば日本語では、望ましい位置は `over right` です。一方、中国語では、望ましい位置は `under right` となります。下記の情報の表は、日本語、モンゴル語、中国語における望ましい圏点の位置をまとめたものです。

望ましい圏点とルビの位置| 言語 | 望ましい位置 | 図 |
| --- | --- | --- |
| 横書き | 縦書き |
| 日本語 | over | right | 日本語の横書きテキストでは、圏点は強調される各文字の上に表示されます。 | 日本語の縦書きテキストでは、圏点が強調される各文字の右に表示されます。 |
| 韓国語 |
| モンゴル語 |
| 中国語 | under | right | 中国語簡体字の横書きテキストでは、圏点は強調される各文字の下に表示されます。 |

**メモ:** `text-emphasis` 一括指定プロパティを使用して、 `text-emphasis-position` を設定することはできず、また初期化されることもありません。

公式定義
----

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

形式文法
----
```

text-emphasis-position =   
  [ over | under ]   &&  
  [ right | left ]?    
  
```

例
-

### ルビを圏点より優先させる場合

編集者によっては、ルビと競合する場合に圏点を隠すことを好みます。 HTML では、これは次のスタイル規則で実現できます。


```css
ruby {
  text-emphasis: none;
}
```

### 圏点よりルビを優先させる場合

編集者によっては、圏点と競合する場合にルビを隠すことを好みます。 HTML では、これは次のパターンで実現できます。


```css
em {
  text-emphasis: dot; /\* text-emphasis を <em> 要素に設定 \*/
}

em rt {
  display: none; /\* <em> 要素内のルビを隠す \*/
}
```

仕様書
---

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

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

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

関連情報
----

* 個別指定プロパティ `text-emphasis-style`, `text-emphasis-color` および対応する一括指定プロパティ `text-emphasis`
:host()
=======

**`:host()`** は CSS の擬似クラス関数で、その中で使われている CSS を含むシャドウ DOM のシャドウホストを選択します（従ってカスタム要素をそのシャドウ DOM 内部から選択できます）。ただし、関数の引数として与えられたセレクターがシャドウホストと一致した場合のみです。

この最も明白な使用法は、特定のカスタム要素インスタンスにのみクラス名を付け、関数の引数として関連するクラスセレクターを指定することです。特定の祖先の内部にあるカスタム要素のインスタンスのみを選択するために、子孫セレクター式でこれを使用することはできません。それは `:host-context()` の仕事です。

**メモ:** これは、シャドウ DOM の外部で使用されても効果がありません。


```css
/\* セレクターの引数に一致する場合のみ、
 シャドウルートのホストを選択 \*/
:host(.special-custom-element) {
  font-weight: bold;
}
```

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

構文
--
```

:host( <compound-selector> )
```

例
-

### シャドウホストの選択的なスタイル付け

以下のスニペットは、 host-selectors example (ライブでも確認) から引用したものです。

この例では、テキストを囲むことができるシンプルなカスタム要素 `<context-span>` を用意しています。


```html
<h1>
  Host selectors <a href="#"><context-span>example</context-span></a>
</h1>
```


要素のコンストラクター内で `style` と `span` の各要素を作成し、 `span` にカスタム要素の内容を入れ、 `style` 要素にいくつかの CSS ルールを入れています。


```js
let style = document.createElement("style");
let span = document.createElement("span");
span.textContent = this.textContent;

const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(style);
shadowRoot.appendChild(span);

style.textContent =
  "span:hover { text-decoration: underline; }" +
  ":host-context(h1) { font-style: italic; }" +
  ':host-context(h1):after { content: " - no links in headers!" }' +
  ":host-context(article, aside) { color: gray; }" +
  ":host(.footer) { color : red; }" +
  ":host { background: rgba(0,0,0,0.1); padding: 2px 5px; }";
```


ルール `:host(.footer) { color : red; }` は、文書内の `<context-span>` 要素（この例ではシャドウホスト）のインスタンスで `footer` クラスがあるものにスタイルを設定します。このルールを使って `<footer>` 内の要素のインスタンスに特殊な色を設定しています。

仕様書
---

| Specification |
| --- |
| CSS Scoping Module Level 1 # host-selector |

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

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

関連情報
----

* ウェブコンポーネント
* `:host`
* `:host-context()`
CSS 表示方法
========

**CSS 表示方法** (CSS Display) は CSS のモジュールの一つで、 CSS の整形ボックスツリーがどのように文書の要素ツリーから生成されるかを定義し、制御するプロパティを定義します。

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

### CSS プロパティ

* `display`
### CSS データ型

* `<display-outside>`
* `<display-inside>`
* `<display-listitem>`
* `<display-box>`
* `<display-internal>`
* `<display-legacy>`
ガイド
---

* display の新しい 2 値構文への対応
### CSS フローレイアウト (`display: block`, `display: inline`)

* 通常フローでのブロックおよびインラインレイアウト
* フローレイアウトとオーバーフロー
* フローレイアウトと書字方向
* 整形コンテキストの紹介
* フロー内とフローの外
### `display: flex`

* フレックスボックスの基本概念
* フレックスコンテナー内のアイテムの配置
* 主軸方向のフレックスアイテムの比率の制御
* フレックスアイテムの折り返しをマスターする
* フレックスアイテムの順序
* フレックスボックスと他のレイアウト方法の関係
* フレックスボックスの後方互換性
* フレックスボックスの典型的な用途
### `display: grid`

* グリッドレイアウトの基本概念
* グリッドレイアウトと他のレイアウト方法との関係
* 線に基づく配置を使用したグリッドレイアウト
* グリッドテンプレート領域
* 名前付きグリッド線を使用したレイアウト
* グリッドレイアウトでの自動配置
* グリッドレイアウトのボックス配置
* グリッド、論理的な値、書字方向
* グリッドレイアウトとアクセシビリティ
* CSS グリッドレイアウトとプログレッシブエンハンスメント
* グリッドを使用したよくあるレイアウトの実現
仕様書
---

| Specification |
| --- |
| CSS Display Module Level 3 # the-display-properties |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
caret-color
===========

**`caret-color`** は CSS のプロパティで、次に入力された文字が挿入される位置を示す可視マーカーである**入力キャレット**の色を設定します。これは**テキスト入力カーソル**と呼ばれることもあります。キャレットは `<input>` または `contenteditable`ML/Global\_attributes#contenteditable) 属性のついた要素などの中に現れます。ふつうキャレットは細い垂直線で、気づきやすくなるように点滅します。既定では黒ですが、このプロパティで色を変更することができます。

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

なお、入力キャレットはキャレットのうちの一種類にすぎません。例えば、多くのブラウザーには「ナビゲーションキャレット」があり、入力キャレットと同様に動きますが、編集できないテキストの中を移動できるものがあります。一方、マウスカーソルが、 `cursor` プロパティが `auto` のときにテキスト上に移動した場合や、 `cursor` プロパティが `text` または `vertical-text` の場合に、キャレットのように見えることがありますが、キャレットではありません (カーソルです)。

構文
--


```css
/\* キーワード値 \*/
caret-color: auto;
caret-color: transparent;
caret-color: currentcolor;

/\* <color> 値 \*/
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0 200 0);
caret-color: hsl(228deg 4% 24% / 80%);

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

### 値

`auto`

ユーザーエージェントはキャレットの適切な色を選択します。これは一般的に `currentcolor` ですが、視認性や周囲のコンテンツとのコントラストを高めるために、ユーザーエージェントが `currentcolor`、背景色、影の色、その他の要因を考慮して、別な色を選択することがあります。

**メモ:** ユーザーエージェントは `auto` の値に `currentcolor` (通常はアニメーション可能) を使用することがありますが、 `auto` はトランジションやアニメーションでは補完されません。

`<color>`

キャレットの色です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | `auto` は仕様通りに計算され、 `<color>` 値は `color` プロパティで定義されたように計算される。 |
| アニメーションの種類 | 色 |

形式文法
----
```

caret-color =   
  auto     |  
  <color>    
  
```

例
-

### 独自のキャレット色の設定

#### HTML


```html
<input value="このフィールドは既定のキャレットを使用します。" size="64" />
<input class="custom" value="キャレットが独自の色になります！" size="64" />
<p contenteditable class="custom">
  この段落は編集可能であり、 同様にキャレットが独自の色です！
</p>
```


#### CSS


```css
input {
  caret-color: auto;
  display: block;
  margin-bottom: 0.5em;
}

input.custom {
  caret-color: red;
}

p.custom {
  caret-color: green;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # caret-color |

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

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

関連情報
----

* `<input>` 要素
* 要素のテキストを編集可能にする HTML の `contenteditable` 属性
* CSS を使用した HTML 要素への色の適用
* `<color>` データ型
* その他の色に関するプロパティ: `color`, `background-color`, `border-color`, `outline-color`, `text-decoration-color`, `text-emphasis-color`, `text-shadow`, `caret-color`, `column-rule-color`
text-decoration-color
=====================

**`text-decoration-color`** は CSS のプロパティで、`text-decoration-line` でテキストに追加された装飾の色を設定します。

色はプロパティ値のスコープにある装飾、すなわち下線、上線、打消し線、それにスペルミスに印をつけるために使われるような波線などに適用されます。

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

CSS はそれぞれの線種ごとに固有の色を指定する仕組みを直接は持っていません。しかしながら、この効果は要素を入れ子にして、それぞれの要素毎に (`text-decoration-line` プロパティで) 異なる線種を適用し、 (`text-decoration-color` で) 線の色を指定することで実現できます。

構文
--


```css
/\* <color> 値 \*/
text-decoration-color: currentcolor;
text-decoration-color: red;
text-decoration-color: #00ff00;
text-decoration-color: rgba(255, 128, 128, 0.5);
text-decoration-color: transparent;

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

### 値

`<color>`

装飾線の色です。

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

テキストの色、テキストが置かれている背景、テキストの装飾線の間のコントラスト比が、弱視の人がページの内容を読むことができるように十分に高いことを確認ことが重要です。色のコントラスト比は、テキストと背景の色の輝度を比較して決定されます。

色だけで意味を伝えるべきではありません。例えば、テキストの色と text-decoration-color の変更だけでは、リンクにフォーカスがあることを示すのに十分ではありません。

* WebAIM: Color Contrast Checker
* MDN "WCAG を理解する ― ガイドライン 1.4 の解説"
* Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
公式定義
----

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

形式文法
----
```

text-decoration-color =   
  <color>    
  
```

例
-

### 基本的な例


```html
<p>
  This paragraph has 
some erroneous text
 inside it that I want to call
  attention to.
</p>
```



```css
p {
  text-decoration-line: underline;
  text-decoration-color: cyan;
}

s {
  text-decoration-line: line-through;
  text-decoration-color: red;
  text-decoration-style: wavy;
}
```

仕様書
---

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

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

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

関連情報
----

* 複数の行内装飾プロパティを一度に設定するときは、代わりに一括指定の `text-decoration` プロパティを使った方が便利かもしれません。
* `<color>` データ型
* 色に関する他のプロパティ: `background-color`, `border-color`, `outline-color`, `text-decoration-color`, `text-emphasis-color`, `text-shadow`, `caret-color`, `column-rule-color`
* CSS を使用した HTML 要素への色の適用
offset-rotate
=============

Baseline 2023
-------------

Newly availableSince August 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`offset-rotate`** は CSS のプロパティで、要素が `offset-path` に沿って配置された場合の向き/方向を定義します。

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

**メモ:** 初期のころの仕様書では、このプロパティを `motion-rotation` と呼んでいました。

構文
--


```css
/\* パスの方向に従い、任意で角度を追加 \*/
offset-rotate: auto;
offset-rotate: auto 45deg;

/\* パスの方向に従うが、 auto とは逆の方向を向く \*/
offset-rotate: reverse;

/\* パスの位置に関係なく、決められた回転を維持する \*/
offset-rotate: 90deg;
offset-rotate: 0.5turn;

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


`auto`

要素は正方向の X 軸から見た `offset-path` 方向の角度で回転します。これが既定値です。

``<angle>``

要素は指定された回転角によって、時計方向に固定値で回転変換されます。

`auto <angle>`

`auto` に `<angle>` が続いた場合、その角度が `auto` の計算値に加算されます。

`reverse`

要素は `auto` と同様に回転しますが、反対方向を向きます。 `auto 180deg` の値を指定したのと同等です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | 座標変換可能要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | <angle>, <basic-shape>, <path()> の何れかとして |

形式文法
----
```

offset-rotate =   
  [ auto | reverse ]  ||  
  <angle>               
  
```

例
-

### オフセットパスに沿って要素の方向を設定

#### HTML


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


#### CSS


```css
div {
  width: 40px;
  height: 40px;
  background: #2bc4a2;
  margin: 20px;
  clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%);
  animation: move 5000ms infinite alternate ease-in-out;

  offset-path: path("M20,20 C20,50 180,-10 180,20");
}
div:nth-child(1) {
  offset-rotate: auto;
}
div:nth-child(2) {
  offset-rotate: auto 90deg;
}
div:nth-child(3) {
  offset-rotate: 30deg;
}

@keyframes move {
  100% {
    offset-distance: 100%;
  }
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| Motion Path Module Level 1 # offset-rotate-property |

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

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

関連情報
----

* `offset`
* `offset-anchor`
* `offset-distance`
* `offset-path`
* `offset-position`
<absolute-size>
===============

**`<absolute-size>`** は CSS のデータ型で、絶対サイズキーワードを記述します。このデータ型は `font` の一括指定と `font-size` プロパティで使用します。

フォントサイズのキーワードは、 HTML の非推奨の `size` 属性に対応します。下記の HTML size 属性の節を参照してください。

構文
--
```

<absolute-size> = xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large
```

### 値

`<absolute-size>` データ型は、下記の一覧から選んだキーワード値を使って定義します。

`xx-small`

絶対サイズ `medium` の 60% のサイズです。非推奨の `size="1"` に対応します。

`x-small`

絶対サイズ `medium` の 75% のサイズです。

`small`

絶対サイズ `medium` の 89% のサイズです。非推奨の `size="2"` に対応します。

`medium`

ユーザーの推奨フォントサイズです。この値は中央の値として参照されます。 `size="3"` に対応します。

`large`

`medium` よりも 20% 大きな絶対サイズです。非推奨の `size="4"` に対応します。

`x-large`

`medium` よりも 50% 大きな絶対サイズです。非推奨の `size="5"` に対応します。

`xx-large`

`medium` の 2 倍の大きさの絶対サイズです。非推奨の `size="6"` に対応します。

`xxx-large`

`medium` の 3 倍の大きさの絶対サイズです。非推奨の `size="7"` に対応します。

解説
--

それぞれの `<absolute-size>` キーワードの値は、`medium` サイズや端末の解像度などの個々の端末の特性に相対したサイズになります。ユーザーエージェントは各フォントのフォントサイズの表を保持しており、 `<absolute-size>` キーワードがインデックスになっています。

CSS1 (1996) では、隣接するキーワード値のインデックス間の拡大率は 1.5 でしたが、これは大きすぎました。 CSS2 (1998) では、隣接するキーワード値インデックス間の拡大率は 1.2 になりましたが、これは小さな値において課題が残りました。隣接する絶対的な大きさのキーワード間を単一の固定比率にすることは問題があることが分かったので、固定比率の推奨はなくなりました。読み取り可能な唯一の推奨は、最小のフォントサイズが `9px` を下回らないことです。

以下の表は、それぞれの `<absolute-size>` キーワード値における拡大係数、`<h1>` から `<h6>` の見出しとの対応、非推奨の HTML の `size` 属性との対応を挙げています。

| `<absolute-size>` | xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| 拡大率 | 3/5 | 3/4 | 8/9 | 1 | 6/5 | 3/2 | 2/1 | 3/1 |
| HTML の見出し | h6 |  | h5 | h4 | h3 | h2 | h1 |  |
| HTML の `size` 属性 | 1 |  | 2 | 3 | 4 | 5 | 6 | 7 |

### HTML の size 属性

HTML でフォントのサイズを設定する `size` 属性は非推奨です。属性値は `1` から `7` までの整数または相対値でした。相対値の場合は、整数の前に `+` または `-` をつけたもので、それぞれフォントサイズを大きくしたり小さくしたりするものでした。 `+1` の値は `size` を 1 つ大きくする意味、 `-2` は 2 つ小さくする意味で、計算値は最小で `1`、最大で `7` となります。

例
-

### キーワード値の比較


```html
<ul>
  <li class="xx-small">font-size: xx-small;</li>
  <li class="x-small">font-size: x-small;</li>
  <li class="small">font-size: small;</li>
  <li class="medium">font-size: medium;</li>
  <li class="large">font-size: large;</li>
  <li class="x-large">font-size: x-large;</li>
  <li class="xx-large">font-size: xx-large;</li>
  <li class="xxx-large">font-size: xxx-large;</li>
</ul>
```



```css
li {
  margin-bottom: 0.3em;
}
.xx-small {
  font-size: xx-small;
}
.x-small {
  font-size: x-small;
}
.small {
  font-size: small;
}
.medium {
  font-size: medium;
}
.large {
  font-size: large;
}
.x-large {
  font-size: x-large;
}
.xx-large {
  font-size: xx-large;
}
.xxx-large {
  font-size: xxx-large;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # valdef-font-size-absolute-size |

関連情報
----

* CSS の `<relative-size>` データ型
* CSS の `font` および `font-size` プロパティ
* CSS フォントモジュール
CSS 名前空間
========

**CSS 名前空間** (CSS Namespaces) は、 CSS の中で XML 名前空間を指定できるようにするための CSS モジュールです。

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

### アットルール

* `@namespace`
仕様書
---

| Specification |
| --- |
| CSS Namespaces Module Level 3 # declaration |

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

### @namespace ルール

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
inset-block-start
=================

**`inset-block-start`** は CSS のプロパティで、要素における先頭からの論理的なオフセットを定義し、要素の書字方向やテキストの向きに従って物理的な内部位置に対応付けられます。 `top`, `right`, `bottom`, `left` のいずれかのプロパティに、 `writing-mode`, `direction`, `text-orientation` で定義された値に従って対応します。

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

構文
--


```css
/\* <length> 値 \*/
inset-block-start: 3px;
inset-block-start: 2.4em;

/\* 包含ブロックの幅または高さに対する <percentage> 値 \*/
inset-block-start: 10%;

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

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

### 値

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

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | 位置指定要素 |
| 継承 | なし |
| パーセント値 | 包含ブロックの論理的な高さ |
| 計算値 | 方向が論理的である以外はボックスのオフセット、 `top`, `right`, `bottom`, `left` と同じ |
| アニメーションの種類 | length または パーセント値, calc(); |

形式文法
----
```

inset-block-start =   
  auto                 |  
  <length-percentage>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

### ブロック方向の先頭のオフセットの設定

#### HTML


```html
<div>
  <p class="exampleText">テキストの例</p>
</div>
```


#### CSS


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

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


#### 結果

仕様書
---

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

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

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

関連情報
----

* 内部位置を定義する他のプロパティ: `inset-block-end`, `inset-inline-start`, `inset-inline-end`
* 対応する物理的プロパティ: `top`, `right`, `bottom`, `left`
* `writing-mode`, `direction`, `text-orientation`
CSS フローレイアウト
============

*通常フロー* (Normal Flow) 、またはフローレイアウトは、レイアウトに変更が加えられる前にブロック要素やインライン要素がページに表示される方法です。このフローは本質的に、共に動作するすべてのものの組み合わせで、レイアウトの中で互いについてを知っています。いったん何かが*フローの外*に出ると、独立して動作します。

通常フローでは、**インライン**要素はインライン方向、つまり文書の書字方向に従って、文の中で言葉が表示される方向に表示されます。**ブロック**要素は、文書の書字方向の中で、段落として一つが他の物の後に表示されます。従って英語では、インライン要素は左から始まり、一つが他の物の後に表示され、ブロック要素は上から始まり、ページの下に向かいます。

基本的な例
-----

以下の例はブロック及びインラインレベルボックスの例を示します。緑色の枠線がある二つの要素がブロックレベルで、他の物の下に表示されます。

最初の文は青い背景をもつ span 要素を含んでいます。これはインラインレベルで、文の中に表示されます。

ガイド
---

* 通常フローでのブロック及びインラインレイアウト
* フロー内とフローの外
* Formatting Contexts Explained
* フローレイアウトと書字方向
* フローレイアウトとオーバーフロー
リファレンス
------

### 用語集の記事

* ブロック (CSS)

1. CSS
2. CSS リファレンス
ruby-align
==========

**`ruby-align`** は CSS のプロパティで、ベースに対するさまざまなルビの配分を定義します。


```css
/\* キーワード値 \*/
ruby-align: start;
ruby-align: center;
ruby-align: space-between;
ruby-align: space-around;

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

構文
--

### 値

`start`

ルビをベーステキストの始点に揃えることを示すキーワードです。

`center`

ルビをベーステキストの中央に揃えることを示すキーワードです。

`space-between`

ルビの要素の範囲内に配分するよう、スペースを付加することを示すキーワードです。

`space-around`

ルビの要素の範囲内に配分するよう、スペースを付加することを示すキーワードです。また、ルビの周囲にもスペースを付加します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `space-around` |
| 適用対象 | ルビベース、ルビ注釈、ルビベースコンテナー、ルビ注釈コンテナー |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

ruby-align =   
  start          |  
  center         |  
  space-between  |  
  space-around     
  
```

例
-

### ルビをベーステキストの先頭に揃える

#### HTML


```html
<ruby>
  <rb>確認用の長いテキスト</rb>
  <rp>（</rp><rt>短いルビ</rt><rp>）</rp>
</ruby>
```


#### CSS


```css
ruby {
  ruby-align: start;
}
```


#### 結果

### ルビをベーステキストの中央に揃える

#### HTML


```html
<ruby>
  <rb>確認用の長いテキスト</rb>
  <rp>（</rp><rt>短いルビ</rt><rp>）</rp>
</ruby>
```


#### CSS


```css
ruby {
  ruby-align: center;
}
```


#### 結果

### ルビ要素の範囲内にスペースを配分する

#### HTML


```html
<ruby>
  <rb>確認用の長いテキスト</rb>
  <rp>（</rp><rt>短いルビ</rt><rp>）</rp>
</ruby>
```


#### CSS


```css
ruby {
  ruby-align: space-between;
}
```


#### 結果

### ルビ要素内および周囲にスペースを配分する

#### HTML


```html
<ruby>
  <rb>確認用の長いテキスト</rb>
  <rp>（</rp><rt>短いルビ</rt><rp>）</rp>
</ruby>
```


#### CSS


```css
ruby {
  ruby-align: space-around;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Ruby Annotation Layout Module Level 1 # ruby-align-property |

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

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

関連情報
----

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