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
|
---
title: All in a page
slug: CSS-2_Quick_Reference/All_in_a_page
tags:
- CSS
- CSS2_Quick_Reference
- CSS_2.1
translation_of: Web/CSS/Reference
translation_of_original: CSS-2_Quick_Reference/All_in_a_page
---
<p>
</p><p>この文書は、初心者からエキスパートまでのための CSS-2 仕様のクイックリファレンスです。スタイルプロパティは簡単な文法で書かれています。
</p>
<h3 id=".E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9.E3.83.A2.E3.83.87.E3.83.AB"> ボックスモデル </h3>
<p><small>
<b>margin-top : <i>length</i> | <i>percentage</i> | <i>auto</i>;</b><br>
<b>margin-right : <i>length</i> | <i>percentage</i> | <i>auto</i>;</b><br>
<b>margin-bottom : <i>length</i> | <i>percentage</i> | <i>auto</i>;</b><br>
<b>margin-left : <i>length</i> | <i>percentage</i> | <i>auto</i>;</b><br>
<b>margin : <i>margin-top</i> <i>margin-right</i> <i>margin-bottom</i> <i>margin-left</i>;</b><br>
</small></p><p><b>padding-top : <i>length</i> | <i>percentage</i>;</b><br>
<b>padding-right : <i>length</i> | <i>percentage</i>;</b><br>
<b>padding-bottom : <i>length</i> | <i>percentage</i>;</b><br>
<b>padding-left : <i>length</i> | <i>percentage</i>;</b><br>
<b>padding : <i>padding-top</i> <i>padding-right</i> <i>padding-bottom</i> <i>padding-left</i>;</b><br>
</p><p><b>border-top-width : thin | medium | thick | <i>length</i>;</b><br>
<b>border-right-width : thin | medium | thick | <i>length</i>;</b><br>
<b>border-bottom-width : thin | medium | thick | <i>length</i>;</b><br>
<b>border-left-width : thin | medium | thick | <i>length</i>;</b><br>
<b>border-width : thin | medium | thick | <i>length</i>;</b><br>
</p><p><b>border-top-color : <i>color</i> | transparent;</b><br>
<b>border-right-color : <i>color</i> | transparent;</b><br>
<b>border-bottom-color : <i>color</i> | transparent;</b><br>
<b>border-left-color : <i>color</i> | transparent;</b><br>
<b>border-color : <i>border-top-color</i> <i>border-right-color</i> <i>border-bottom-color</i> <i>border-left-color</i>;</b><br>
</p><p><b>border-top-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;</b><br>
<b>border-right-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;</b><br>
<b>border-bottom-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;</b><br>
<b>border-left-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;</b><br>
<b>border-style : <i>border-top-style</i> <i>border-right-style</i> <i>border-bottom-style</i> <i>border-left-style</i>;</b><br>
</p><p><b>border-top : <i>border-width</i> <i>border-style</i> <i>border-color</i>;</b><br>
<b>border-right : <i>border-width</i> <i>border-style</i> <i>border-color</i>;</b><br>
<b>border-bottom : <i>border-width</i> <i>border-style</i> <i>border-color</i>;</b><br>
<b>border-left : <i>border-width</i> <i>border-style</i> <i>border-color</i>;</b><br>
<b>border : <i>border-width</i> <i>border-style</i> <i>border-color</i>;</b><br> </p>
<h3 id=".E8.A6.96.E8.A6.9A.E7.9A.84.E6.A7.8B.E6.88.90.E3.83.A2.E3.83.87.E3.83.AB"> 視覚的構成モデル </h3>
<p><small>
<b>display : none | inline | block | inline-block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | tablefooter-group | table-row | table-column-group | table-column | table-cell | table-caption;</b><br>
</small></p><p><b>position : static | relative | absolute | fixed;</b><br>
</p><p><b>top : <i>length</i> | <i>percentage</i> | auto;</b>
<b>right : <i>length</i> | <i>percentage</i> | auto;</b>
<b>bottom : <i>length</i> | <i>percentage</i> | auto;</b>
<b>left : <i>length</i> | <i>percentage</i> | auto;</b>
</p><p><b>float : left | right | none;</b><br>
<b>clear : none | left | right | both;</b><br>
</p><p><b>z-index : auto | <i>integer</i>;</b><br>
</p><p><b>direction : ltr | rtl;</b><br>
<b>unicode-bidi : normal | embed | bidi-override;</b><br> </p>
<h3 id=".E8.A6.96.E8.A6.9A.E7.9A.84.E6.A7.8B.E6.88.90.E3.81.AE.E8.A9.B3.E7.B4.B0"> 視覚的構成の詳細 </h3>
<p><small>
<b>width : <i>length</i> | <i>percentage</i> | auto;</b>
<b>min-width : <i>length</i> | <i>percentage</i>;</b>
<b>max-width : <i>length</i> | <i>percentage</i> | none;</b>
</small></p><p><b>height : <i>length</i> | <i>percentage</i> | auto;</b>
<b>min-height : <i>length</i> | <i>percentage</i>;</b>
<b>max-height : <i>length</i> | <i>percentage</i> | none;</b>
</p><p><b>line-height : normal | <i>number</i> | <i>length</i> | <i>percentage</i>;</b>
</p><p><b>vertical-align : baseline | sub | super | top | text-top | middle | bottom | text-bottom | <i>percentage</i> | <i>length</i>;</b><br> </p>
<h3 id=".E8.A6.96.E8.A6.9A.E5.8A.B9.E6.9E.9C"> 視覚効果 </h3>
<p><small>
<b>overflow : visible | hidden | scroll | auto;</b><br>
</small></p><p><b>clip : <i>rect(top,right,bottom,left)</i> | auto;</b><br>
</p><p><b>visibility : visible | hidden | collapse;</b><br> </p>
<h3 id=".E3.83.AA.E3.82.B9.E3.83.88"> リスト </h3>
<p><small>
<b>list-style-type : disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | none;</b><br>
<b>list-style-image : <i>uri</i> | none;</b><br>
<b>list-style-position : inside | outside;</b><br>
<b>list-style : <i>list-style-type</i> <i>list-style-position</i> <i>list-style-image</i>;</b>
</small>
</p>
<h3 id=".E3.82.AB.E3.83.A9.E3.83.BC.E3.81.A8.E8.83.8C.E6.99.AF"> カラーと背景 </h3>
<p><small>
<b>color : <i>color</i>;</b><br>
</small></p><p><b>background-color : <i>color</i> | transparent;</b><br>
<b>background-image : <i>uri</i> | none;</b><br>
<b>background-repeat : repeat | repeat-x | repeat-y | no-repeat;</b><br>
<b>background-attachment : scroll | fixed;</b><br>
<b>background-position : {{ mediawiki.external('<i>percentage</i> | <i>length</i> | left | center | right') }} {{ mediawiki.external('<i>percentage</i> | <i>length</i> | top | center | bottom') }} ;</b><br>
<b>background : <i>background-color</i> <i>background-image</i> <i>background-repeat</i> <i>background-attachment</i> <i>background-position</i>;</b><br> </p>
<h3 id=".E3.83.95.E3.82.A9.E3.83.B3.E3.83.88"> フォント </h3>
<p><small>
<b>font-family: <i>family-name</i> | <i>generic-family</i>, <i>family-name</i> | <i>generic-family</i>, ... ;</b><br>
<b>font-style: normal | italic | oblique; </b><br>
<b>font-variant: normal | small-caps; </b><br>
<b>font-weight: normal | bold | bolder | lighter | 100 | ... | 900;</b><br>
<b>font-size: <i>absolute-size</i> | <i>relative-size</i> | <i>length</i> | <i>percentage</i>; </b><br>
<b>font: {{ mediawiki.external('<i>font-style</i> <i>font-variant</i> <i>font-weight</i>') }} <i>font-size</i> {{ mediawiki.external('<i>/line-height</i>') }} <i>font-family</i>;</b>
</small>
</p>
<h3 id=".E3.83.86.E3.82.AD.E3.82.B9.E3.83.88"> テキスト </h3>
<p><small>
<b>text-indent : <i>length</i> | <i>percentage</i>;<br></b>
<b>text-align : left | right | center | justify ;<br></b>
<b>text-decoration : none | {{ mediawiki.external(' underline overline line-through blink ') }};<br></b>
<b>text-transform : capitalize | uppercase | lowercase | none;<br></b>
<br>
<b>letter-spacing : normal | <i>length</i>;<br></b>
<b>word-spacing : normal | <i>length</i>;<br></b>
<b>white-space : normal | pre | nowrap | pre-wrap | pre-line;<br></b>
</small></p><p>
</p>
<h3 id=".E8.A1.A8.E7.B5.84.E3.81.BF"> 表組み </h3>
<p><small>
<b>caption-side : top | bottom;</b><br>
</small></p><p><b>table-layout : auto | fixed;</b><br>
</p><p><b>vertical-align : baseline | top | bottom | middle;</b><br>
</p><p><b>border-collapse : collapse | separate;</b><br>
<b>border-spacing : <i>length</i> {{ mediawiki.external('<i>length</i>') }};</b><br>
</p><p><b>empty-cells : show | hide;</b><br> </p>
<h3 id=".E3.83.A6.E3.83.BC.E3.82.B6.E3.82.A4.E3.83.B3.E3.82.BF.E3.83.95.E3.82.A7.E3.83.BC.E3.82.B9"> ユーザインタフェース </h3>
<p><small>
<b>cursor : {{ mediawiki.external('<i>uri</i>') }} {{ mediawiki.external(' auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | swresize | s-resize | w-resize| text | wait | help ') }}, ...;</b><br>
</small></p><p><b>outline-color : <i>color</i> | invert;</b><br>
<b>outline-style : <i>border-style</i>;</b><br>
<b>outline-width : <i>border-width</i>;</b><br>
<b>outline : <i>outline-color</i> <i>outline-style</i> <i>outline-width</i>;</b><br> </p>
<h3 id=".E5.8D.98.E4.BD.8D"> 単位 </h3>
<p><small>
<b>相対単位 : em, ex, px</b>
</small></p>
<ul><li> em : 1 em はフォントサイズと等しい
</li><li> ex : 1 ex はフォントの "x" の高さと等しい
</li><li> px : ピクセル
</li></ul>
<p><b>絶対単位 : in, cm, mm, pt, pc</b>
</p>
<ul><li> in : インチ
</li><li> cm : センチメートル
</li><li> mm : ミリメートル
</li><li> pt : ポイント {{ 訳注() }}
</li><li> pc : パイカ {{ 訳注() }}
</li></ul>
<p><b>カラーの単位 : #336699, #fa5, rgb(127,255,0), rgb(40%,50%,60%)</b>
</p>
<ul><li> #306090 : 十六進数で赤が 30、緑が 60、青が 90。
</li><li> #fa5 : 十六進数で赤が FF、緑が AA、青が 55。
</li><li> rgb(127,255,0) : 赤が 127、緑が 255、青が 0。
</li><li> rgb(40%,50%,60%) : 赤が 40%、緑が 50%、青が 60%。
</li></ul>
<p>
</p>
<h3 id=".E3.82.BB.E3.83.AC.E3.82.AF.E3.82.BF"> セレクタ </h3>
<p><small>
<b>型セレクタ</b><br>
<code>h1 { text-decoration: underline; }</code><br>
</small></p><p><b>クラスセレクタ</b><br>
<code>.myclass { text-decoration: underline; }</code><br>
</p><p><b>一意セレクタ</b><br>
<code>#myid { text-decoration: underline; }</code><br>
</p><p><b>子孫セレクタ</b><br>
<code>#mainpage h1 { text-decoration: underline; }</code><br>
</p><p><b>リンク擬似クラスセレクタ</b><br>
<code>a:link { color: blue; }</code><br>
<code>a:visited { color: purple; }</code><br>
</p><p><b>動的擬似クラスセレクタ</b><br>
<code>a:hover { text-decoration: underline; }</code><br>
<code>a:active { color: #666666; }</code><br>
<code>a:focus { outline: 1px dashed red; }</code><br>
</p><p><b>印刷用擬似要素セレクタ</b><br>
<code>p:first-line { font-weight: bold; }</code><br>
<code>p:first-letter { font-size: 2em; }</code><br>
</p><p><b>コンテンツ擬似要素セレクタ</b><br>
<code>p:before { content: "["; }</code><br>
<code>p:after { content: "]"; }</code><br>
</p><p><b>子セレクタ</b><br>
<code>#title > p { font-weight: bold; }</code><br>
</p><p><b>first-child 擬似クラスセレクタ</b><br>
<code>p:first-child { margin-top: 0; }</code><br>
</p><p><b>隣接セレクタ</b><br>
<code>h1 + p { font-style: italic; }</code><br>
</p><p><b>属性セレクタ</b><br>
<code>option{{ mediawiki.external('selected') }} { color: #ff0000; }</code><br>
<code>input{{ mediawiki.external('type=\"password\"') }} { color: #cccccc; }</code><br>
<code>a{{ mediawiki.external('rel~=\"next\"') }} { background: #ffffff; }</code><br>
<code>*{{ mediawiki.external('lang|=\"en\"') }} { color: red; }</code><br> </p>
<div class="noinclude">
</div>
{{ languages( { "en": "en/CSS-2_Quick_Reference/All_in_a_page", "fr": "fr/Pr\u00e9cis_CSS_2/Tout_en_un" } ) }}
|
