《angle【角度】》《color【色】》
《counter【カウンタ】》
《integer【整数】》《length【長さ】》《number【数値】》
《percentage【パーセンテージ】》
《position【位置】》
《string【文字列】》《url【URL】》

《angle【角度】》

メモ

  • 単位付きの角度
  • 0 の場合、単位の省略可 (但し、CSS3では単位の省略不可)
  • 次の単位が指定可能
    単位1周
    deg360°0deg
    360deg
    90deg180deg270deg
    -90deg
    gradグラード400grad0grad
    400grad
    100grad200grad300grad
    -100grad
    radラジアン
    (PI【円周率 (π)】)
    0rad
    約 6.283185307179586rad
    約 1.570796326794897rad約 3.141592653589793rad 約 4.71238898038469rad
    約 -1.570796326794897rad
    turn ターン1turn0turn0.25turn0.5turn0.75turn

関連


《color【色】》

メモ

関連


《counter【カウンタ】》

メモ

構文 (※記述方法)

構文

《counter【カウンタ】》
counter ( <identifier【カウンタ識別子】>  [, <list-style-type【リストマーカー種類】> ] )
counters ( <identifier【カウンタ識別子】>, 《string【セパレータ】》  [, <list-style-type【リストマーカー種類】> ] )

関連


《integer【整数】》

メモ

  • 整数値
  • 範囲の規定なし (環境依存)
    • 狭い場合、-32,768 ~ 32,767 (-215 ~ 215-1)
    • 広い場合、-134,217,728 ~ 134,217,728 (-227 ~ 227-1) または より広範囲
  • プロパティによっては、負数は不許可

関連


《length【長さ】》

メモ

  • 単位付き数値
  • 数値の後に空白を入れずに単位
  • 0 の場合、単位の省略可
  • 負数・小数点数も記述可能 (プロパティ依存)
  • 単位は大文字・小文字の区別なし

単位

単位相対 / 絶対説明
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)
q1/4ミリメートル (1q = 1/4mm = 1/40cm)

関連


《number【数値】》

メモ

  • 整数 及び 小数
  • 範囲の規定なし

関連


《percentage【パーセンテージ】》

メモ

  • パーセンテージ (%) 指定
  • 数値の後に空白を入れずに%

<div style="font-size: 20px;">
  Font (20px)
  <span style="font-size: 80%;">Font (80%)</span>
  <span style="font-size: 150%;">Font (150%)</span>
</div>

Font (20px) Font (80%) Font (150%)

関連


《position【位置】》

メモ

構文 (※記述方法)

構文

《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【パーセンテージ】》

関連


《string【文字列】》

メモ

  • 文字列定義
    • " (ダブルクォーテーション) または ' (シングルクォーテーション) で囲む
    • 文字列内で同じクォーテーションを使用する場合、エスケープシーケンス (\" または \')で記述
  • 改行:\00000a・\00000A (後ろが16進数でない場合、\a~\0000a・\A~\0000A も可)
    • content【コンテンツ】プロパティで使用する場合、 white-space【ホワイトスペース処理】プロパティ値を pre・pre-wrap・pre-line のどれかに指定
  • 文字参照:改行と同様に \hhhhhh 形式 (例:& → \000026)
  • 複数行の記述:行末に \ (次の行が続くとみなす)

<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【URL】》 url ( 《string【文字列】》 )
《url【URL】》 url ( 《string【文字列】》 <url-modifier>* )

関連