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

メモ

• 単位付きの角度
  • 0 の場合、単位の省略可 (但し、CSS3では単位の省略不可)
  • 次の単位が指定可能

    単位		１周	例
    			上	右	下	左
    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()【単一カウンタ】・counters()【複数カウンタ】 を指定
• カウンタ操作
  • カウンタリセット： counter-reset【カウンタ リセット】
  • カウンタ更新：counter-increment【カウンタ更新】
• カウンタの使用方法については、 counter-reset【カウンタ リセット】・counter-increment【カウンタ更新】 を参照

構文 (※記述方法)

関連

メモ

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

関連

メモ

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

単位

関連

メモ

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

関連

メモ

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

例

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

関連

メモ

• 位置の指定
  • background-position【背景画像位置】の値として定義
  • 《percentage【パーセンテージ】》 と 《length【長さ】》 は負数も指定可

構文 (※記述方法)

関連

メモ

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

例

<style>
.str { color: red; }
.str:before { content: "(前１行目)\a(前２行目)\
\00000a(前３行目)";
white-space: pre; color: blue; }
.str:after { content: "(後１行目)\A(後２行目)\
\00000A(後３行目)";
white-space: pre; color: blue; }
</style>

<span class="str">文字列</span>

関連

メモ

• 画像等のリソースの位置
  • 絶対位置・相対位置 どちらも可

構文 (※記述方法)

関連