percentage

概要

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

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

注記: 継承されるのは計算値だけです。親要素のプロパティでパーセンテージが使われても、継承した側ではパーセンテージ値ではなく、実数値( <length> 値に充てた pixel 単位の幅のように)だけでアクセスできます。

補間

<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 は以下を表示します:

Width: 50%, Left margin: 20%
Width: 30%, Left margin: 60%
<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 は以下を表示します:

Full size text (18px) 50% 200%

仕様書

仕様書 策定状況 コメント
CSS Values and Units Module Level 3 勧告候補 CSS Level 2 (Revision 1) から重要な変更無し
CSS Level 2 (Revision 1) 勧告 CSS Level 1 から変更無し
CSS Level 1 勧告  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 1.0 1.0 (1.0) <=5.0 yes 1.0 (85)
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート yes yes yes yes yes

関連情報

Document Tags and Contributors

Contributors to this page: sosleepy, ethertank
最終更新者: ethertank,
サイドバーを隠す