recursal/MDN huggingface dataset:
column-rule-color
=================

**`column-rule-color`** は CSS のプロパティで、段組みレイアウトで段間に引かれる線（段間罫）の色を設定します。

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

構文
--


```css
/\* <color> 値 \*/
column-rule-color: red;
column-rule-color: rgb(192, 56, 78);
column-rule-color: transparent;
column-rule-color: hsla(0, 100%, 50%, 0.6);

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


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

### 値

`<color>`

段を分割する段間罫の色です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `currentcolor` |
| 適用対象 | 段組み要素 |
| 継承 | なし |
| 計算値 | 色の計算値 |
| アニメーションの種類 | 色 |

形式文法
----
```

column-rule-color =   
  <color>    
  
```

例
-

### 青い段間罫を設定

#### HTML


```html
<p>
  This is a bunch of text split into three columns. The `column-rule-color`
  property is used to change the color 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: solid;
  column-rule-color: blue;
}
```


#### 結果

仕様書
---

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

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

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

関連情報
----

* `<color>` データ型
* 色に関する他のプロパティ: `color`, `background-color`, `border-color`, `outline-color`, `text-decoration-color`, `text-emphasis-color`, `text-shadow`, `caret-color`
* CSS を使った HTML の要素への色の適用
実効値
===

**実効値** (actual value) は CSS プロパティにおいて、すべての必要な推定が適用された後の 使用値 (used value) です。例えば、境界を整数値のピクセル幅でしか描けないユーザーエージェントは、境界の太さを近似値の整数に丸めるかもしれません。

プロパティの実効値の計算
------------

ユーザーエージェントはプロパティの実効値 (最終値) を 4 段階で計算します。

1. 最初に指定値 (specified value) が、カスケード、継承、初期値の使用の何れかによって決定されます。
2. 次に、仕様に従って計算値 (computed value) が計算されます (例えば、 `span` に `position: absolute` が付いていると、 `display` が計算で `block` に変わります)。
3. それから、レイアウトが計算され、結果として使用値になります。
4. 最後に、使用値がローカルの環境の制約によって変換され、結果として実効値になります。
仕様書
---

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

関連情報
----

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

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

**警告:** このプロパティは XUL ボックスモデルの部品を制御するためのものです。古い CSS Flexible Box Layout Module の草稿の '`box-flex`' (このプロパティの元になったもの) または '`-webkit-box-flex`' (草稿の元になったもの) の動作のどちらとも一致しません。現在の標準についての情報はフレックスボックスを参照してください。

**`-moz-box-flex`** および **`-webkit-box-flex`** は CSS のプロパティで、 `-moz-box` または `-webkit-box` が、これを内包するボックスを、包含ボックスのレイアウトの方向で埋めるまで拡張する方法を指定します。


```css
/\* <number> 値 \*/
-moz-box-flex: 0;
-moz-box-flex: 2;
-moz-box-flex: 3.5;
-webkit-box-flex: 0;
-webkit-box-flex: 2;
-webkit-box-flex: 3.5;

/\* Global values \*/
-moz-box-flex: inherit;
-moz-box-flex: initial;
-moz-box-flex: unset;
-webkit-box-flex: inherit;
-webkit-box-flex: initial;
-webkit-box-flex: unset;
```

構文
--

`box-flex` プロパティは `<number>` として指定されます。値が 0 の場合、ボックスは拡張されません。値が 0 より大きい場合は、ボックスは利用可能な空間の比率で拡張されます。

メモ
--

包含ボックスは利用可能な空間を、中のそれぞれの要素におけるフレックス値の比率で拡張します。

フレックス値がゼロになっている中の要素は拡張されません。

フレックス値がゼロではない中の要素が一つしかない場合は、有効な空間を埋めるまで拡張されます。

同じフレックス値を持つ中の要素は、同じ絶対量だけ拡張されます。

フレックス値が要素の `flex` 属性を使用して設定された場合は、このスタイルは無視されます。

包含ボックス内で同じ寸法の XUL 要素を作成するには、包含ボックスの `equalsize` 属性を `always` の値に設定してください。この属性には対応する CSS プロパティはありません。

包含ボックス内のすべての中の要素を同じ寸法にするトリックとしては、すべてに対して固定の寸法 (例えば `height: 0`) と、同じゼロより大きい `box-flex` の値 (例えば `-moz-box-flex: 1`) を設定することです。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | CSS の `display` の値が `-moz-box`, `-moz-inline-box`, `-webkit-box`, `-webkit-inline-box` のいずれかである要素の直接の子要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----

Error: could not find syntax for this item例
-

### box-flex の設定


```html
<!doctype html>
<html>
  <head>
    <title>-moz-box-flex example</title>
    <style>
 div.example {
 display: -moz-box;
 display: -webkit-box;
 border: 1px solid black;
 width: 100%;
 }
 div.example > p:nth-child(1) {
 -moz-box-flex: 1; /\* Mozilla \*/
 -webkit-box-flex: 1; /\* WebKit \*/
 border: 1px solid black;
 }
 div.example > p:nth-child(2) {
 -moz-box-flex: 0; /\* Mozilla \*/
 -webkit-box-flex: 0; /\* WebKit \*/
 border: 1px solid black;
 }
 </style>
  </head>
  <body>
    <div class="example">
      <p>I will expand to fill extra space</p>
      <p>I will not expand</p>
    </div>
  </body>
</html>
```

仕様書
---

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

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

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

関連情報
----

* `box-orient`
* `box-pack`
* `box-direction`
* `flex`
::view-transition
=================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

**`::view-transition`** は CSS の擬似要素で、ビュートランジションのオーバーレイのルートを表します。これはすべてのビュートランジションを含み、他のすべてのページコンテンツの最上位の上に位置します。

ビュートランジションの間、 `::view-transition` はビュートランジションのプロセスで説明されているように、関連する擬似要素ツリーに含まれます。これはこのツリーの最上位ノードであり、 1 つ以上の `::view-transition-group` を子として持ちます。

`::view-transition` は UA スタイルシートでは以下の既定値が指定されています。


```css
html::view-transition {
  position: fixed;
  inset: 0;
}
```


すべての `::view-transition-group` 擬似要素は、ビュートランジションルートに対して相対的に配置されます。

構文
--


```css
::view-transition {
  /\* ... \*/
}
```

例
-


```css
::view-transition {
  background-color: rgba(0, 0, 0, 0.25);
}
```

仕様書
---

| Specification |
| --- |
| CSS View Transitions Module Level 1 # selectordef-view-transition |

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

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

関連情報
----

* ビュートランジション API
* Smooth and simple transitions with the View Transitions API
CSS 色
=====

**CSS 色** (CSS Color) は CSS のモジュールで、色、色の種類、色の混合、透過性、そしてどのようにこれらの色や効果を HTML コンテンツに適用するかを扱います。`<color>` を値として取る CSS プロパティがすべてこのモジュールの一部であるとは限りませんが、このモジュールに依存することがあります。

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

### プロパティ

* `color`
* `color-adjust`
* `opacity`
### データ型

* `<color>`
ガイド
---

CSS を使った HTML 要素への色の適用

様々な種類のコンテンツに CSS を使って色を適用するためのガイドです。色に関するすべての CSS プロパティが関係します。

ツール
---

色選択ツール

このツールは独自の色を簡単に作成、調整、実験することができます。

仕様書
---

| Specification |
| --- |
| CSS Color Module Level 4  |
| CSS Color Module Level 5  |

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

### `color` プロパティ

{{Compat}}### `color-adjust` プロパティ

{{Compat}}### `opacity` プロパティ

{{Compat}}関連情報
----

* 他の仕様書で定義されている色に関するプロパティ: `background-color`, `border-color`, `outline-color`, `text-decoration-color`, `text-emphasis-color`, `text-shadow`, `caret-color`, `column-rule-color`
* CSS では、グラデーションは色ではなく画像です。
:host
=====

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**`:host`** は CSS の 擬似クラスで、その CSS を含むシャドウ DOM のシャドウホストを選択します。 — 言い換えれば、シャドウ DOM の中からカスタム要素を選択できるようにします。

**メモ:** これはシャドウ DOM の外で使われたときには効果がありません。


```css
/\* シャドウのルートホストを選択 \*/
:host {
  font-weight: bold;
}
```

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

構文
--
```

:host
```

例
-

### シャドウホストのスタイル付け

以下のスニペットは、 host セレクターの例 (ライブでも参照してください) から取りました。

この例では、テキストの周りを囲むことができる簡単なカスタム要素 — `<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 { background: rgba(0,0,0,0.1); padding: 2px 5px; }` のルールは、文書中の `<context-span>` 要素 (このインスタンスのシャドウホスト) のすべてのインスタンスにスタイル付けします。

仕様書
---

| 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()`
:picture-in-picture
===================

**`:picture-in-picture`** は CSS の擬似クラスで、現在ピクチャインピクチャモードの要素に一致します。

構文
--
```

:picture-in-picture
```

使用上のメモ
------

`:picture-in-picture` 擬似クラスを使用すると、動画がピクチャインピクチャと従来の表示モードの間で切り替わるときに、コンテンツの大きさ、スタイル、レイアウトを自動的に調整するようにスタイルシートを設定することができます。

例
-

この例では、動画が浮遊ウィンドウで表示されたときにボックスシャドウ付きになります。

### HTML

このページの HTML は次のようになります。


```html
<h1>MDN Web Docs Demo: :picture-in-picture pseudo-class</h1>

<p>
  This demo uses the <code>:picture-in-picture</code> pseudo-class to
  automatically change the style of a video entirely using CSS.
</p>

<video id="pip-video"></video>
```


ID が `"pip-video"` の `<video>` は、ピクチャインピクチャの浮遊ウィンドウに表示されているかどうかで、赤いボックスシャドウを持つか持たないかが変化します。

### CSS

The magic happens in the CSS.


```css
:picture-in-picture {
  box-shadow: 0 0 0 5px red;
}
```

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # pip-state |

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

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

関連情報
----

* Picture-in-picture API
* `HTMLVideoElement.requestPictureInPicture()`
* `HTMLVideoElement.autoPictureInPicture` (en-US)
* `HTMLVideoElement.disablePictureInPicture`
* `Document.pictureInPictureEnabled`
* `Document.exitPictureInPicture()`
* `Document.pictureInPictureElement`
border-right-width
==================

**`border-right-width`** は CSS のプロパティで、要素の右側の境界の幅を設定します。

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

構文
--


```css
/\* キーワード値 \*/
border-right-width: thin;
border-right-width: medium;
border-right-width: thick;

/\* <length> 値 \*/
border-right-width: 10em;
border-right-width: 3vmax;
border-right-width: 6px;

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

### 値

`<line-width>`

明示的な負の値ではない `<length>` またはキーワードで、境界の幅を定義します。キーワードの場合、以下の値のうちの一つでなければなりません。

* `thin`
* `medium`
* `thick`


**メモ:** 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、何れか一つを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `medium` |
| 適用対象 | すべての要素。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| 計算値 | 絶対的な長さ、または `border-right-style` が `none` または `hidden` の場合は `0` |
| アニメーションの種類 | length |

形式文法
----
```

border-right-width =   
  <line-width>    
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
```

例
-

### 境界線の太さの比較

#### HTML


```html
<div>Element 1</div>
<div>Element 2</div>
```


#### CSS


```css
div {
  border: 1px solid red;
  margin: 1em 0;
}

div:nth-child(1) {
  border-right-width: thick;
}
div:nth-child(2) {
  border-right-width: 2em;
}
```


#### 結果

仕様書
---

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

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

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

関連情報
----

* その他の太さに関する境界の CSS プロパティ: `border-bottom-width`, `border-left-width`, `border-top-width`, `border-width`
* 他の右側の境界に関する CSS プロパティ: `border`, `border-right`, `border-right-style`, `border-right-color`
scroll-margin-inline
====================

`scroll-margin-inline` は一括指定プロパティで、インライン方向のスクロールマージンを設定します。

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

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

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

* `scroll-margin-inline-end`
* `scroll-margin-inline-start`
構文
--


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

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

### 値

`<length>`

スクロールコンテナーの対応する辺からの距離です。

解説
--

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

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `scroll-margin-inline-start`: `0`
* `scroll-margin-inline-end`: `0`
 |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `scroll-margin-inline-start`: 指定通り
* `scroll-margin-inline-end`: 指定通り
 |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

scroll-margin-inline =   
  <length>{1,2}    
  
```

例
-

### 簡単なデモ

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

ここでの目的は、水平方向にスクロールする 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: 1rem;
}

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


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

**メモ:** ここでは `scroll-margin` をインライン軸 (この場合は X 軸) の先頭*と*末尾に一度に設定していますが、実際に関係するのは末尾側だけです。例えば `scroll-margin-inline: 0 1rem` や `scroll-margin-inline-end: 1rem` などのように、一辺のみにスクロールマージンを設定しても同様に機能します。

#### 結果

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

仕様書
---

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # propdef-scroll-margin-inline |

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

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

関連情報
----

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

**`mask-border-mode`** は CSS のプロパティで、マスク境界の混合モードを指定します。

構文
--


```css
/\* キーワード値 \*/
mask-border-mode: luminance;
mask-border-mode: alpha;

/\* グローバル値 \*/
mask-border-mode: inherit;
mask-border-mode: initial;
mask-border-mode: repeat;
mask-border-mode: unset;
```

### 値

`luminance`

マスク境界画像の輝度値がマスク値として使用されます。

`alpha`

マスク境界画像のアルファ値がマスク値として使用されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `alpha` |
| 適用対象 | すべての要素。 SVG の場合は `defs` 要素やすべてのグラフィック要素を除いたコンテナー要素に適用される |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

mask-border-mode =   
  luminance  |  
  alpha        
  
```

例
-

### 基本的な使用

このプロパティは、まだどこでも対応されていないようです。このプロパティが対応されるようになれば、マスク境界に使用される混合モードの種類を、輝度値とアルファ値から指定することができるようになります。


```css
mask-border-mode: luminance;
mask-border-mode: alpha;
```

仕様書
---

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask-border-mode |

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

{{Compat}}関連情報
----

* `mask-border`
* `mask-border-outset`
* `mask-border-repeat`
* `mask-border-source`
* `mask-border-width`
プライバシーと :visited セレクター
======================

およそ 2010 年よりも前、 CSS の `:visited` セレクターによって、ウェブサイトがユーザーの閲覧履歴を明らかにし、ユーザーがどのサイトを訪問したかを把握することができました。これは `window.getComputedStyle` およびその他の技術を用いて行われていました。この処理はすばやく実行され、ユーザーがどこを訪れたかを特定できるだけでなく、ユーザーの身元に関する多くの情報を推測することも可能になりました。

この問題を緩和するために、ブラウザーは訪問済みリンクから受け取ることができる情報量を制限されるようになりました。

ちょっとした善意の嘘
----------

ユーザーのプライバシーを保護するために、Firefox や他のブラウザーは特定の状況下でウェブアプリケーションに嘘をつきます。

* `window.getComputedStyle` メソッドや、 `element.querySelector` などの類似の関数は、ユーザーがページ上のリンクを訪れたことがないことを示す値を常に返します。
* `:visited + span` のような兄弟結合子を使用した場合、隣接する要素（この例では `span`）は、リンクが未訪問であるかのようにスタイル付けされます。
* 稀なケースですが、入れ子になったリンク要素を使用していて、一致している要素が履歴の中の存在がテストされているリンクとは異なる場合、要素はリンクが未訪問であるかのようにレンダリングされます。
訪問済みリンクスタイルの制限
--------------

訪問済みリンクの視覚的なスタイルづけを行うことはまだできますが、使えるスタイルは制限されています。訪問済みリンクに用いることができるのは以下のプロパティだけです。

* `color`
* `background-color`
* `border-color` （およびそのサブプロパティ）
* `column-rule-color`
* `outline-color`
* `text-decoration-color`
* `text-emphasis-color`
* `fill` および `stroke` プロパティの色の部分

さらに、訪問済みリンクに設定できるプロパティであっても、未訪問リンクと訪問済みリンク間で不透明度を変えることはできません。これは、別の状況なら、`rgb()` や `hsl()` のカラー値、もしくは `transparent` キーワードを使ってできた操作でした。

制限内でスタイルづけをする方法を、次の例で示します。


```css
:link {
  outline: 1px dotted blue;
  background-color: white;
  /\* background-color の既定値は `transparent` です。異なる値を指定しないと
 :visited での変更が適用されません。 \*/
}

:visited {
  outline-color: orange; /\* オレンジのアウトライン \*/
  background-color: green; /\* グリーンの背景 \*/
  color: yellow; /\* 黄色のテキスト \*/
}
```

ウェブ開発者への影響度
-----------

全体として、ウェブ開発者にそれほど大きな影響はないでしょう。しかしながら、サイトの変更が必要になるような特殊なケースが少しだけあります。

* 背景画像を使ってリンクをスタイルづけし、訪問済みかどうかを表示する方法はもう動作しないでしょう。訪問済みリンクのスタイルには色以外は使えないからです。
* それ以外の透明な色は、 `:visited` セレクター内でスタイル付けした場合には表示されません。
関連情報
----

* CSS の :visited に行われるプライバシー対策 on Mozilla Hacks ブログ翻訳
* Plugging the CSS History Leak on the Mozilla Security Blog
* Preventing attacks on a user's history through CSS :visited selectors
border-left-style
=================

**`border-left-style`** は CSS のプロパティで、要素の左側の `border` における線の形状を設定します。

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

**メモ:** 仕様書では、異なる形状の境界線を角でどの様に接続するかを定義していません。

構文
--


```css
/\* キーワード値 \*/
border-left-style: none;
border-left-style: hidden;
border-left-style: dotted;
border-left-style: dashed;
border-left-style: solid;
border-left-style: double;
border-left-style: groove;
border-left-style: ridge;
border-left-style: inset;
border-left-style: outset;

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


`border-left-style` プロパティは、 `border-style` プロパティで利用できるキーワードのうちの一つで指定します。

公式定義
----

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

形式文法
----
```

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

例
-

### border-left-style の設定

#### HTML


```html
<table>
  <tr>
    <td class="b1">none</td>
    <td class="b2">hidden</td>
    <td class="b3">dotted</td>
    <td class="b4">dashed</td>
  </tr>
  <tr>
    <td class="b5">solid</td>
    <td class="b6">double</td>
    <td class="b7">groove</td>
    <td class="b8">ridge</td>
  </tr>
  <tr>
    <td class="b9">inset</td>
    <td class="b10">outset</td>
  </tr>
</table>
```


#### CSS


```css
/\* 表の外見を定義 \*/
table {
  border-width: 2px;
  background-color: #52e385;
}
tr,
td {
  padding: 3px;
}

/\* border-left-style の例のクラス \*/
.b1 {
  border-left-style: none;
}
.b2 {
  border-left-style: hidden;
}
.b3 {
  border-left-style: dotted;
}
.b4 {
  border-left-style: dashed;
}
.b5 {
  border-left-style: solid;
}
.b6 {
  border-left-style: double;
}
.b7 {
  border-left-style: groove;
}
.b8 {
  border-left-style: ridge;
}
.b9 {
  border-left-style: inset;
}
.b10 {
  border-left-style: outset;
}
```


#### 結果

仕様書
---

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

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

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

関連情報
----

* その他の形状に関する境界のプロパティ: `border-bottom-style`, `border-right-style`, `border-top-style`, `border-style`
* その他の左側の境界に関するプロパティ: `border-left`, `border-left-color`, `border-left-width`
クラスセレクター
========

CSS の**クラスセレクター** (class selector) は、 `class` 属性の内容に基づいて要素を選択します。


```css
/\* class="spacious" であるすべての要素 \*/
.spacious {
  margin: 2em;
}

/\* class="spacious" であるすべての <li> 要素 \*/
li.spacious {
  margin: 2em;
}

/\* "spacious" および "elegant" の両方をクラスリストに含む <li> 要素すべて \*/
/\* 例えば、 class="elegant retro spacious" \*/
li.spacious.elegant {
  margin: 2em;
}
```

構文
--


```css
.クラス名 { スタイルプロパティ }
```


なお、これは以下の`属性セレクター`と等価です。


```css
[class~=クラス名] { スタイルプロパティ }
```

例
-

### CSS


```css
.red {
  color: #f33;
}

.yellow-bg {
  background: #ffa;
}

.fancy {
  font-weight: bold;
  text-shadow: 4px 4px 3px #77f;
}
```

### HTML


```html
<p class="red">この段落は赤い文字です。</p>
<p class="red yellow-bg">この段落は黄色の背景に赤い文字です。</p>
<p class="red fancy">この段落は "fancy" スタイルで赤い文字です。</p>
<p>これは単なる普通の段落です。</p>
```

### 結果

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # class-html |

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

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

関連情報
----

* CSS セレクター
* CSS の学習: セレクター
max-height
==========

**`max-height`** は CSS のプロパティで、要素の最大高を設定します。これは `height` プロパティの使用値が、 `max-height` に指定した値を上回ることを防ぎます。

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

`max-height` は `height` を上書きしますが、 `min-height` は `max-height` を上書きします。

構文
--


```css
/\* <length> 値 \*/
max-height: 3.5em;

/\* <percentage> 値 \*/
max-height: 75%;

/\* キーワード値 \*/
max-height: none;
max-height: max-content;
max-height: min-content;
max-height: fit-content(20em);

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

### 値

`<length>`

`max-height` を絶対的な値で定義します。

`<percentage>`

`max-height` を包含ブロックの高さに対するパーセント値で定義します。

`none`

ボックスの寸法を制限しません。

`max-content`

内容物が推奨する `max-height` です。

`min-content`

内容物の最小の `max-height` です。

`fit-content(`<length-percentage>`)`

利用可能な空白を指定された引数で置き換えた `fit-content` 式を使用します。すなわち、 `min(max-content, max(min-content, 引数))` です。

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

テキストを大きくするためにページを拡大したときに、 `max-height` を設定した要素が切り取られたり、他のコンテンツを覆い隠したりしないことを確認してください。

* MDN WCAG を理解する ― ガイドライン 1.4 の解説
* Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | 非置換インライン要素、テーブルの列、列グループを除くすべての要素 |
| 継承 | なし |
| パーセント値 | パーセント値は、生成ボックスの包含ブロックの高さを基準に計算されます。 包含ブロックの高さが明示的に定義されず (すなわち、コンテンツの高さに依存します)、この要素が絶対位置指定されていない場合は、パーセント値は `none` として扱われます。 |
| 計算値 | 指定されたパーセント値または絶対的な長さ、または `none` |
| アニメーションの種類 | length または パーセント値, calc(); |

形式文法
----
```

max-height =   
  none                                      |  
  <length-percentage [0,∞]>                 |  
  min-content                               |  
  max-content                               |  
  fit-content( <length-percentage [0,∞]> )    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

### パーセント値とキーワード値を用いた max-height の設定


```css
table {
  max-height: 75%;
}

form {
  max-height: none;
}
```

仕様書
---

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # width-height-keywords |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

関連情報
----

* ボックスモデル、 `box-sizing`
* `height`, `min-height`
* 対応する論理的プロパティ: `max-inline-size`, `max-block-size`