CSS<percentage> データ型は、パーセントによる割合を表します。要素の親オブジェクトからの相対的な寸法を定義するためによく使われます。 widthheight, margin, paddingfont-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 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 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

ドキュメントのタグと貢献者

最終更新者: mfuji09,