<percentage>

<percentage> は CSS のデータ型で、パーセント値による割合を表します。要素の親オブジェクトからの相対的な寸法を定義するためによく使われます。 width、 height, margin, padding、 font-size など、たくさんのプロパティでパーセント値を使うことができます。

メモ: 継承されるのは計算値だけです。親要素のプロパティでパーセント値が使われても、継承したプロパティではパーセント値ではなく、実数値 (<length> 値に向けたピクセル単位の幅など) にのみアクセスできます。

構文

<percentage> データ型は、 <number> とそれに続くパーセント記号 (%) から成ります。任意で、先行して符号 (+ または -) を、負の値が許可されない値であってもすべてのプロパティに付けることができます。他の CSS の数値と同様、記号と数値の間には空白を置きません。

補間

アニメーションをする時、 <percentage> データ型は浮動小数点の実数として補間が行われます。補間の速度は、アニメーションに関連付けられたタイミング関数で定義します。

例

幅と左マージン

<div style="background-color:blue;">
  <div style="width:50%; margin-left:20%; background-color:lime;">
    Width: 50%, Left margin: 20%
  </div>
  <div style="width:30%; margin-left:60%; background-color:pink;">
    Width: 30%, Left margin: 60%
  </div>
</div>

以上の HTML は以下のような出力になります。

フォントの大きさ

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

以上の HTML は以下のような出力になります。

仕様書

仕様書 状態 備考
CSS Values and Units Module Level 4
<percentage> の定義		 編集者草案 目立った変更はなし。
CSS Values and Units Module Level 3
<percentage> の定義		 勧告候補 CSS Level 2 (Revision 1) から目立った変更なし。
CSS Level 2 (Revision 1)
<percentage> の定義		 勧告 CSS Level 1 から変更なし。
CSS Level 1
<percentage> の定義		 勧告 初回定義。

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
<percentage>Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 3Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応