単位 | 1周 | 例 | ||||
---|---|---|---|---|---|---|
上 | 右 | 下 | 左 | |||
deg | 度 | 360° | 0deg 360deg | 90deg | 180deg | 270deg -90deg |
grad | グラード | 400grad | 0grad 400grad | 100grad | 200grad | 300grad -100grad |
rad | ラジアン | 2π (PI【円周率 (π)】) | 0rad 約 6.283185307179586rad | 約 1.570796326794897rad | 約 3.141592653589793rad | 約 4.71238898038469rad 約 -1.570796326794897rad |
turn | ターン | 1turn | 0turn | 0.25turn | 0.5turn | 0.75turn |
色 | 説明 |
---|---|
カラーキーワード (大文字・小文字の区別なし) | 基本色名 (16+1色) ・拡張色名 (147色・重複9色) |
RGB 16進 (0 ~ f) 指定 | #RGB |
RGB 16進 (00 ~ ff) 指定 | #RRGGBB ・Web Safe カラー (216色) |
RGB 指定 | rgb(R, G, B) |
RGB パーセント指定 | rgb(R%, G%, B%) |
RGBA指定 | rgba(R, G, B, A) |
RGBA パーセント指定 | rgba(R%, G%, B%, A) |
HSL指定 | hsl(H, S, L) |
HSLA指定 | hsla(H, S, L, A) |
透明色 | transparent |
親要素継承 | currentColor |
システムカラー | 非推奨 (ButtonFace 等) |
構文 | |
---|---|
《counter【カウンタ】》 | counter ( <identifier【カウンタ識別子】> [, <list-style-type【リストマーカー種類】> ] ) counters ( <identifier【カウンタ識別子】>, 《string【セパレータ】》 [, <list-style-type【リストマーカー種類】> ] ) |
単位 | 相対 / 絶対 | 説明 |
---|---|---|
ch | 相対単位 | 数字 '0' の横幅 |
em | 要素のフォントサイズ | |
ex | 小文字 'x' の高さ | |
rem | ルート要素のフォントサイズ | |
vh | ビューポートの高さの 1% | |
vmax | ビューポートの高さまたは幅の、最大値の 1% | |
vmin | ビューポートの高さまたは幅の 最小値の 1% | |
vw | ビューポートの幅の 1% | |
cm | 絶対単位 | センチメートル (1cm = 96px / 2.54) |
in | インチ (1in = 2.54cm = 96px) | |
mm | ミリメートル (10mm = 1cm) | |
pc | パイカ (1pc = 1/6in = 12pt) | |
pt | ポイント (1pt = 1/72in) | |
px | ピクセル (1px = 1/96in) | |
q | 1/4ミリメートル (1q = 1/4mm = 1/40cm) |
<div style="font-size: 20px;">
Font (20px)
<span style="font-size: 80%;">Font (80%)</span>
<span style="font-size: 150%;">Font (150%)</span>
</div>
構文 | |
---|---|
《position【位置】》 | [ [ 《percentage【パーセンテージ】》 | 《length【長さ】》 | left【左辺】 | center【中央】 | right【右辺】 ] [ 《percentage【パーセンテージ】》 | 《length【長さ】》 | top【上辺】 | center【中央】 | bottom【下辺】 ] ?] | [ [ left【左辺】 | center【中央】 | right【右辺】 ] || [ top【上辺】 | center【中央】 | bottom【下辺】 ] ] |
《position【位置】》 | [ [ left【左辺】 | center【中央】 | right【右辺】 | top【上辺】 | bottom【下辺】 | 《length-percentage》 ] | [ left【左辺】 | center【中央】 | right【右辺】 | 《length-percentage》 ] [ top【上辺】 | center【中央】 | bottom【下辺】 | 《length-percentage》 ] | [ center【中央】 | [ left【左辺】 | right【右辺】 ] 《length-percentage》? ] &&[ center【中央】 | [ top【上辺】 | bottom【下辺】 ] 《length-percentage》? ] ] |
《length-percentage》 | 《length【長さ】》 | 《percentage【パーセンテージ】》 |
<style>
.str { color: red; }
.str:before { content: "(前1行目)\a(前2行目)\
\00000a(前3行目)";
white-space: pre; color: blue; }
.str:after { content: "(後1行目)\A(後2行目)\
\00000A(後3行目)";
white-space: pre; color: blue; }
</style>
<span class="str">文字列</span>
文字列
構文 | |
---|---|
《url【URL】》 | url ( 《string【文字列】》 ) |
《url【URL】》 | url ( 《string【文字列】》 <url-modifier>* ) |