blob: bc888d89f260ca9338e78b3b3110a8d1fb0b19fb (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
---
title: CSS カスケード入門
slug: Web/CSS/Cascade
tags:
- CSS
- Reference
- カスケード
- ガイド
- スタイル
- スタイルシート
- レイアウト
translation_of: Web/CSS/Cascade
---
{{CSSRef}}
**カスケード**は、異なるソースから来るプロパティ値を組み合わせる方法を定義するアルゴリズムです。これは*カスケーディング*スタイルシートという名前で強調されているように、 CSS の中心を占めるものです。この記事では、カスケードとは何か、 {{Glossary("CSS")}} の[宣言](/ja/docs/Web/API/CSSStyleDeclaration)をカスケードする順番、そしてウェブ開発者にどのように影響するかを説明します。
## どの CSS エンティティがカスケードに関係するか
CSS 宣言のみが、つまりプロパティ/値の組だけが、カスケードに加わります。つまり、宣言以外のエンティティを含む[アット規則](/ja/docs/Web/CSS/At-rule)、例えば*記述子*を含む {{ cssxref("@font-face")}} などは、カスケードには加わりません。これらの場合、カスケードには全体としてのアット規則のみがカスケードに加わります。ここで、 `@font-face` は [`font-family`](/ja/docs/Web/CSS/@font-face/font-family) 記述子で識別されます。いくつかの `@font-face` 規則に同じ記述子が定義されていた場合は、全体から見て、最も適切な `@font-face` が考慮されます。
大部分のアット規則 — {{cssxref("@media")}}、{{cssxref("@document")}}、{{cssxref("@supports")}} の中など — に含まれる宣言はカスケードに加わりますが、 {{cssxref("@keyframes")}} に含まれる宣言は加わりません。 `@font-face` と同様に、アット規則全体のみがカスケードアルゴリズムによって選択されます。
最後に、 {{cssxref("@import")}} および {{cssxref("@charset")}} は特定のアルゴリズムに従い、カスケードアルゴリズムには影響を与えないことに注意してください。
## CSS 宣言のオリジン
CSS カスケードアルゴリズムの役割は、 CSS プロパティの正しい値を決定するために CSS 宣言を選択することです。 CSS 宣言は、**{{anch("User-agent stylesheets", "ユーザーエージェントスタイルシート")}}**、**{{anch("Author stylesheets", "ページ作成者スタイルシート")}}**、**{{anch("User stylesheets", "ユーザースタイルシート")}}**など、さまざまなものに由来します。
スタイルシートの起源はこのように異なりますが、その範囲は重複しています。これを実現するために、カスケードアルゴリズムが相互作用を定義しています。
### ユーザーエージェントスタイルシート
ブラウザーには、任意の文書に既定のスタイルを提供する基本的なスタイルシートがあります。これらのスタイルシートには**ユーザーエージェントスタイルシート**と呼ばれています。実際のスタイルシートを使用するブラウザーもあれば、コードでシミュレートするブラウザーもありますが、最終的な結果は同じです。
ブラウザーによっては、ユーザーがユーザーエージェントスタイルシートを変更することができます。ユーザーエージェントスタイルシートに関するいくつかの制約は HTML 仕様書によって設定されていますが、ブラウザーにはまだ多くの自由度があります。つまり、ブラウザーごとに大きな違いがあります。開発プロセスを簡素化するために、ウェブ開発者は多くの場合、 CSS リセットスタイルシートを使用して、特定のニーズに合わせて変更を開始する前に、共通のプロパティ値を既知の状態にします。
### 作成者スタイルシート
**作成者スタイルシート**は、スタイルシートの最も一般的な種類です。これらは、特定のウェブページまたはサイトのデザインの一部としてスタイルを定義するスタイルシートです。ページの作成者は、1つ以上のスタイルシートを使用して文書のスタイルを定義します。スタイルシートは、ウェブサイトの外観 (テーマ) を定義します。
### ユーザースタイルシート
ウェブサイトのユーザー (または読者) は、ユーザーの希望に合わせて使い勝手を調整するように設計された独自の**ユーザースタイルシート**を使用して、多くのブラウザーでスタイルを上書きすることを選択できます。
## カスケード順
カスケードアルゴリズムは、文書の各要素の各プロパティに適用する値を見つける方法を決定します。
1. 最初に、さまざまな起源からすべての規則をフィルタリングして、特定の要素に適用されるルールのみを保持します。つまり、セレクターが指定された要素と一致し、適切な `media` アット規則の一部である規則を意味します。
2. 次に、これらの規則をその重要度、つまり、 `!important` が後に続くかどうか、およびその起源に従って並べ替えます。カスケードは上流から下流に向けて行われます。つまり、ユーザー定義のスタイルシートによる `!important` の値は、ユーザーエージェントスタイルシートによる通常の値よりも優先されます。
| | 起源 | 重要度 |
| --- | -------------------- | ------------ |
| 1 | ユーザーエージェント | 通常 |
| 2 | ユーザー | 通常 |
| 3 | 作成者 | 通常 |
| 4 | アニメーション | |
| 5 | 作成者 | `!important` |
| 6 | ユーザー | `!important` |
| 7 | ユーザーエージェント | `!important` |
| 8 | トランジション | |
3. 同等の場合は、[詳細度](/ja/docs/Web/CSS/Specificity)を考慮してどれを選択するかを考慮します。
## スタイルの初期化
コンテンツがスタイルの変更を終えた後、スタイルを既知の状態に戻す必要が出てくることがあります。これは、アニメーションやテーマの変更などの場合に起こります。 CSS プロパティの {{cssxref("all")}} を使うと、 CSS 内の (ほぼ) すべてのものを既知の状態に素早く戻すことができます。
`all` では、すべてのプロパティを、初期状態 (既定)、カスケードの前のレベルから引き継いだ状態、特定のオリジン (ユーザーエージェントスタイルシート、作成者スタイルシート、ユーザースタイルシート)、さらにはプロパティの値を完全にクリアする状態のいずれかにすぐに戻すことができます。
## CSS アニメーションとカスケード
[CSS アニメーション](/ja/docs/Web/CSS/CSS_Animations)は、 {{cssxref("@keyframes")}} アット規則を使用して、状態間のアニメーションを定義します。キーフレームはカスケードされません。つまり、 CSS は常に単一の {{cssxref("@keyframes")}} から値を取得し、複数の値を混在させることはありません。
複数のキーフレームが適用された場合は、最も重要な文書で定義されている最新のものを選択しますが、すべてを組み合わせることはありません。
## 例
さまざまなオリジンにまたがる CSS の複数のソースを含む例を見てみましょう。ここには、ユーザーエージェントスタイルシート、 2 つの作成者スタイルシート、ユーザースタイルシート、および HTML 内のインラインスタイルがあります。
**ユーザーエージェント CSS:**
```css
li { margin-left: 10px }
```
**作成者 CSS 1:**
```css
li { margin-left: 0 } /* これは初期化 */
```
**作成者 CSS 2:**
```css
@media screen {
li { margin-left: 3px }
}
@media print {
li { margin-left: 1px }
}
```
**ユーザー CSS:**
```css
.specific { margin-left: 1em }
```
**HTML:**
```html
<li class="specific">1<sup>st</sup></li>
<li>2<sup>nd</sup></li>
</ul>
```
この場合、 `li` および `.specific` 規則内の宣言を適用する必要があります。 `!important`として宣言されている宣言はないため、優先順位は、ユーザースタイルシートまたはユーザーエージェントスタイルシートの前の作成者スタイルシートです。
ここでは 3 つの宣言が競合しています。
```css
margin-left: 0
```
```css
margin-left: 3px
```
```css
margin-left: 1px
```
最後のものは (画面上で) 無視され、最初の 2 つは同じセレクターを持つため、同じ詳細度があります。したがって、次に選択されるのは同じ詳細度のうちの最後のものです。
```css
margin-left: 3px
```
カスケードアルゴリズムは詳細度アルゴリズムの前に適用されるため、ユーザー CSS で定義された宣言はより高い詳細度を持ちますが、選択されないことに注意してください。
## 仕様書
| 仕様書 | 状態 | コメント |
| ------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------------------------------------------------------------- |
| {{SpecName("CSS4 Cascade")}} | {{Spec2("CSS4 Cascade")}} | プロパティをカスケードレベルに戻すことができる {{CSSxRef("revert")}} キーワードを追加。 |
| {{SpecName("CSS3 Cascade")}} | {{Spec2("CSS3 Cascade")}} | カスケードオリジンの上書きを削除。 W3C 標準で使用されなかったため。 |
| {{SpecName("CSS2.1", "cascade.html", "the cascade")}} | {{Spec2("CSS2.1")}} | |
| {{SpecName("CSS1", "#the-cascade", "the cascade")}} | {{Spec2("CSS1")}} | 初回定義 |
## 関連情報
- [とても簡単な CSS カスケードの紹介](/ja/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance)
- {{CSS_Key_Concepts}}
|
