<percentage>

概要

<percentage> CSS データ型は、パーセンテージ値を表します。多くの CSS プロパティ がパーセンテージ値を受け入れ、親オブジェクトに基づくサイズの定義によく使われます。パーセンテージは パーセンテージ記号 % のすぐ後ろに続く <number> で作られています。CSS の他の単位と同じで、% と数字の間に空白を置きません。

長さのプロパティの多くがパーセンテージを使います。例えば width、margin、padding などです。パーセンテージは font-size でも使われ、親要素の文字サイズに直接関連付けられます。

補間

<percentage> CSS データ型の値はアニメーション用に補間可能です。実数（浮動小数点数）として補間されます。補間速度は アニメーションと結びつけられた timing function で決められます。

例

<div style="background-color:#0000FF;">
  <div style="width:50%;margin-left:20%;background-color:#00FF00;">Width: 50%, Left margin: 20%</div>
  <div style="width:30%;margin-left:60%;background-color:#FF0000;">Width: 30%, Left margin: 60%</div>
</div> 

上の HTML は以下を表示します:

<div style="font-size:18px;">
  Full size text (18px)
  <span style="font-size:50%;">50%</span>
  <span style="font-size:200%;">200%</span>
</div> 

上の HTML は以下を表示します:

仕様書

ブラウザ実装状況