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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
|
---
title: CSS リファレンス
slug: Web/CSS/Reference
tags:
- CSS
- Guide
- Overview
- Reference
- 'l10n:priority'
translation_of: Web/CSS/Reference
---
<div>{{CSSRef}}</div>
<p>この <strong>CSS リファレンス</strong> は、すべての標準 <a href="/ja/docs/Web/CSS">CSS</a> プロパティ、<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>、<a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>、<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>、<a href="/ja/docs/Web/CSS/CSS_Functions">関数記法</a>、<a href="/ja/docs/Web/CSS/At-rule">アット規則</a> の <a href="#Keyword_index">アルファベット順の索引</a> として利用できます。また、すべての CSS <a href="#Selectors">種類別セレクター</a> の一覧および <a href="#Concepts">重要な CSS の概念</a> の一覧もあります。また、簡単な <a href="#DOM-CSS_CSSOM">DOM-CSS / CSSOM リファレンス</a> も含まれています。</p>
<h2 id="Basic_rule_syntax" name="Basic_rule_syntax">基本的な規則と構文</h2>
<h3 id="Style_rule_syntax" name="Style_rule_syntax">スタイル規則の構文</h3>
<pre class="syntaxbox notranslate"><var>スタイル規則</var> <strong>::=</strong>
<var>セレクターリスト</var> <strong>{</strong>
<var>プロパティリスト</var>
<strong>}</strong>
</pre>
<p>... ここで</p>
<pre class="syntaxbox notranslate"><var>セレクターリスト</var> <strong>::=</strong>
<var>セレクター</var>[<strong>:</strong><var>擬似クラス</var>] [<strong>::</strong><var>擬似要素</var>]
[<strong>,</strong> <var>セレクターリスト</var>]
<var>プロパティリスト</var> <strong>::=</strong>
[<var>プロパティ</var> <strong>:</strong> <var>値</var>] [<strong>;</strong> <var>プロパティリスト</var>]
</pre>
<p>下記の <a href="#Selectors"><em>セレクター</em></a>、<a href="#Pseudo"><em>疑似クラス</em></a>、<em><a href="#Pseudo">疑似要素</a></em> の一覧を参照してください。 各指定<em>値</em>の構文は、各指定<em>プロパティ</em>に定義されたデータ型に依存します。</p>
<h4 id="Style_rule_examples" name="Style_rule_examples">スタイル規則の例</h4>
<pre class="brush: css notranslate">strong {
color: red;
}
div.menu-bar li:hover > ul {
display: block;
}
</pre>
<p>初心者レベルの CSS セレクター構文への入門については、 <a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクターのガイド</a>をご覧ください。規則定義内での <a href="/ja/docs/Web/CSS/syntax">CSS 構文</a> エラーは、その規則全体を無効にするので十分に注意してください。無効な規則はブラウザーにより無視されます。 CSS 規則の定義はすべて (ASCII) <a href="https://www.w3.org/TR/css-syntax-3/#intro">テキストベース</a> であり、DOM-CSS / CSSOM (規則管理システム) は <a href="https://www.w3.org/TR/cssom/#introduction">オブジェクトベース</a> なので注意してください。</p>
<h3 id="At-rule_syntax" name="At-rule_syntax">アット規則構文</h3>
<p>これには多くの異なる構造的な書式があるため、その各構文は <a href="/ja/docs/Web/CSS/At-rule">アット規則</a> のページをご覧ください。</p>
<h2 id="Index" name="Index">索引</h2>
<div class="blockIndicator note">
<p><strong>注:</strong> この索引のプロパティ名には、CSS 標準の名前と異なる <a href="/ja/docs/Web/CSS/CSS_Properties_Reference">JavaScript 名</a> は含まれて<strong>いません</strong>。</p>
</div>
<div>{{CSS_Ref}}</div>
<h2 id="Selectors" name="Selectors">セレクター</h2>
<p>以下は様々な<a href="/ja/docs/Web/CSS/CSS_Selectors">セレクター</a>で、 DOM 内の要素の様々な特徴に基づいた条件付きのスタイル付けを可能にします。</p>
<h3 id="Basic_selectors" name="Basic_selectors">基本セレクター</h3>
<p><strong>基本セレクター</strong>は基礎的なセレクターです。これらは最も基本的なセレクターで、他のより複雑なセレクターを作成するために頻繁に組み合わせられます。</p>
<ul>
<li><a href="/ja/docs/Web/CSS/Universal_selectors">全称セレクター</a> <code>*</code>, <code>ns|*</code>, <code>*|*</code>, <code>|*</code></li>
<li><a href="/ja/docs/Web/CSS/Type_selectors">要素型セレクター</a> <code><var>elementname</var></code></li>
<li><a href="/ja/docs/Web/CSS/Class_selectors">クラスセレクター</a> <code>.<var>classname</var></code></li>
<li><a href="/ja/docs/Web/CSS/ID_selectors">ID セレクター</a> <code>#<var>idname</var></code></li>
<li><a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a> <code>[<var>attr</var>=<var>value</var>]</code></li>
</ul>
<h3 id="Grouping_selectors" name="Grouping_selectors">グループ化セレクター</h3>
<dl>
<dt><a href="/ja/docs/Web/CSS/Selector_list">セレクターリスト</a> <code><var>A</var>, <var>B</var></code></dt>
<dd><code><var>A</var></code> と <code><var>B</var></code> の両方の要素が選択されることを指定します。これは複数の一致する要素をグループ化する方法です。</dd>
</dl>
<h3 id="Combinators" name="Combinators">結合子</h3>
<p><ruby>結合子<rp> (</rp><rt>Combinators) </rt></ruby>は二つ以上の単純セレクターの関係、例えば「<code><var>A</var></code> は <code><var>B</var></code> の子である」や「<code><var>A</var></code> はis <code><var>B</var></code> の子孫である」などを確立するためのセレクターです。</p>
<dl>
<dt><a href="/ja/docs/Web/CSS/Adjacent_sibling_combinator">隣接兄弟結合子</a> <code><var>A</var> + <var>B</var></code></dt>
<dd><code><var>A</var></code> と <code><var>B</var></code> のそれぞれで選択された要素が同じ親を持ち、かつ <code><var>B</var></code> で選択された要素が <code><var>A</var></code> で選択された要素の水平的な直後にあることを指定します。</dd>
<dt><a href="/ja/docs/Web/CSS/General_sibling_combinator">一般兄弟結合子</a> <code><var>A</var> ~ <var>B</var></code></dt>
<dd><code><var>A</var></code> と <code><var>B</var></code> のそれぞれで選択された要素が同じ親を共有しており、かつ <code><var>A</var></code> で選択された要素が <code><var>B</var></code> の前に — ただし直前である必要はありませんが — 来た場合を指定します。</dd>
<dt><a href="/ja/docs/Web/CSS/Child_combinator">子結合子</a> <code><var>A</var> > <var>B</var></code></dt>
<dd><code><var>B</var></code> で選択された要素のうち、 <code><var>A</var></code> で選択された要素の直接の子であるものを指定します。</dd>
<dt><a href="/ja/docs/Web/CSS/Descendant_combinator">子孫結合子</a> <code><var>A</var> <var>B</var></code></dt>
<dd><code><var>B</var></code> で選択された要素のうち、 <code><var>A</var></code>, but is not necessarily a direct child.</dd>
<dt><a href="/ja/docs/Web/CSS/Column_combinator">列結合子</a> <code><var>A</var> || <var>B</var></code> {{Experimental_Inline}}</dt>
<dd><code><var>B</var></code> で指定された要素のうち、 <code><var>A</var></code> で指定された表の列にあるものを指定します。複数の列にまたがる要素は、そのすべての列のメンバーであるとみなされます。</dd>
</dl>
<h3 id="Pseudo" name="Pseudo">擬似クラスと擬似要素</h3>
<dl>
<dt><a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a> <code>:</code></dt>
<dd>選択された要素が特別な状態にあることを指定します。</dd>
<dt><a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a> <code>::</code></dt>
<dd>HTML に含まれていないエンティティを表します。</dd>
</dl>
<div class="blockIndicator note">
<p><strong>関連情報:</strong> <a href="https://www.w3.org/TR/selectors/#overview">Selectors Level 4 仕様書におけるセレクター</a>。</p>
</div>
<h2 id="Concepts" name="Concepts">概念</h2>
<h3 id="Syntax_and_semantics" name="Syntax_and_semantics">構文と意味</h3>
<ul>
<li><a href="/ja/docs/Web/CSS/Syntax">CSS 構文</a></li>
<li><a href="/ja/docs/Web/CSS/At-rule">アット規則</a></li>
<li><a href="/ja/docs/Web/CSS/Cascade">カスケード</a></li>
<li><a href="/ja/docs/Web/CSS/Comments">コメント</a></li>
<li><a href="/ja/docs/Glossary/Descriptor_(CSS)">記述子</a></li>
<li><a href="/ja/docs/Web/CSS/inheritance">継承</a></li>
<li><a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a></li>
<li><a href="/ja/docs/Web/CSS/Specificity">優先度</a></li>
<li><a href="/ja/docs/Web/CSS/Value_definition_syntax">値定義構文</a></li>
<li><a href="/ja/docs/Web/CSS/CSS_Values_and_Units">CSS 単位と値の種類</a></li>
<li><a href="/ja/docs/Web/CSS/CSS_Functions">CSS 関数記法</a></li>
</ul>
<h3 id="Values" name="Values">値</h3>
<ul>
<li><a href="/ja/docs/Web/CSS/actual_value">実効値</a></li>
<li><a href="/ja/docs/Web/CSS/computed_value">算出値</a></li>
<li><a href="/ja/docs/Web/CSS/initial_value">初期値</a></li>
<li><a href="/ja/docs/Web/CSS/resolved_value">解決値</a></li>
<li><a href="/ja/docs/Web/CSS/specified_value">指定値</a></li>
<li><a href="/ja/docs/Web/CSS/used_value">使用値</a></li>
</ul>
<h3 id="Layout" name="Layout">レイアウト</h3>
<ul>
<li><a href="/ja/docs/Web/Guide/CSS/Block_formatting_context">ブロック整形コンテキスト</a></li>
<li><a href="/ja/docs/Web/CSS/box_model">ボックスモデル</a></li>
<li><a href="/ja/docs/Web/CSS/All_About_The_Containing_Block">包含ブロック</a></li>
<li><a href="/ja/docs/Web/CSS/Layout_mode">レイアウトモード</a></li>
<li><a href="/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">マージンの相殺</a></li>
<li><a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a></li>
<li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a></li>
<li><a href="/ja/docs/Web/Guide/CSS/Visual_formatting_model">視覚書式設定モデル</a></li>
</ul>
<h2 id="DOM-CSS_CSSOM" name="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2>
<h3 id="Major_object_types" name="Major_object_types">主なオブジェクトの種類</h3>
<ul>
<li>{{DOMxRef("DocumentOrShadowRoot.styleSheets")}}</li>
<li><code>{{DOMxRef("StyleSheetList", "styleSheets", "", 1)}}[i].{{DOMxRef("CSSRuleList", "cssRules", "", 1)}}</code></li>
<li><code>cssRules[i].{{DOMxRef("CSSRule.cssText", "cssText", "", 1)}}</code> (セレクターとスタイル)</li>
<li><code>cssRules[i].{{DOMxRef("CSSStyleRule.selectorText", "selectorText", "", 1)}}</code></li>
<li>{{DOMxRef("HTMLElement.style")}}</li>
<li><code>HTMLElement.style.{{DOMxRef("CSSStyleDeclaration.cssText", "cssText", "", 1)}}</code> (スタイルのみ)</li>
<li>{{DOMxRef("Element.className")}}</li>
<li>{{DOMxRef("Element.classList")}}</li>
</ul>
<h3 id="Important_methods" name="Important_methods">重要なメソッド</h3>
<ul>
<li>{{DOMxRef("CSSStyleSheet.insertRule()")}}</li>
<li>{{DOMxRef("CSSStyleSheet.deleteRule()")}}</li>
</ul>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li><a href="/ja/docs/Web/CSS/Mozilla_Extensions">Mozilla CSS 拡張</a> (<code style="white-space: nowrap;">-moz-</code> 接頭辞付き)</li>
<li><a href="/ja/docs/Web/CSS/WebKit_Extensions">WebKit CSS 拡張</a> (ほとんどが <code style="white-space: nowrap;">-webkit-</code> 接頭辞付き)</li>
<li><a href="/ja/docs/Web/CSS/Microsoft_Extensions">Microsoft CSS 拡張</a> (<code style="white-space: nowrap;">-ms-</code> 接頭辞付き)</li>
</ul>
<h2 id="External_Links" name="External_Links">外部リンク</h2>
<ul>
<li><a href="https://www.w3.org/TR/CSS/#indices">CSS 目次 (w3.org)</a></li>
</ul>
|
