<length-percentage>

<length-percentage> は CSS のデータ型で、 length または <percentage> が取りうる値を表します。

構文

この型に利用できる個々の構文の詳細は、 length および <percentage> の文書を参照してください。

calc() での使用

許可されている型として <length-percentage> が指定されているところでは、これはパーセント値が長さとして解決されるので、 calc() の式で利用することができます。したがって、以下のすべての値が width で利用できます。

width: 200px
width: 20%
width: calc(100% - 200px)

仕様書

仕様書 状態 備考
CSS Values and Units Module Level 4
<length-percentage> の定義		 編集者草案  
CSS Values and Units Module Level 3
<length-percentage> の定義		 勧告候補 <length-percentage> を定義。 calc() を追加

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
<length-percentage>Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 3Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
Q unit
実験的
Chrome 完全対応 63Edge 未対応 なしFirefox 完全対応 49IE 未対応 なしOpera 完全対応 50Safari 未対応 なしWebView Android 完全対応 63Chrome Android 完全対応 63Firefox Android 完全対応 49Opera Android 完全対応 46Safari iOS 未対応 なしSamsung Internet Android 完全対応 8.0
cap unit
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
ch unitChrome 完全対応 27Edge 完全対応 12Firefox 完全対応 1
補足
完全対応 1
補足
補足 From Firefox 1 to Firefox 3, ch was the width of the M character.
補足 From Firefox 1 to Firefox 3, ch did not work with border-width and outline-width CSS properties.
IE 完全対応 9Opera 完全対応 20Safari 完全対応 7WebView Android 完全対応 ≤37Chrome Android 完全対応 27Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 7Samsung Internet Android 完全対応 1.5
ex unitChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
ic unit
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
lh unit
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
mozmm unit
実験的非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 4 — 59IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 4 — 59Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
rem unitChrome 完全対応 4Edge 完全対応 12Firefox 完全対応 3.6IE 完全対応 9Opera 完全対応 11.6Safari 完全対応 4.1WebView Android 完全対応 2Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 12Safari iOS 完全対応 4Samsung Internet Android 完全対応 1.0
rlh unit
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
vb unit
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
vh unitChrome 完全対応 20Edge 完全対応 12Firefox 完全対応 19IE 完全対応 9Opera 完全対応 20Safari 完全対応 6WebView Android 完全対応 ≤37Chrome Android 完全対応 25Firefox Android 完全対応 19Opera Android 完全対応 ありSafari iOS 完全対応 6Samsung Internet Android 完全対応 1.5
vi unit
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
vmax unitChrome 完全対応 26Edge 完全対応 16Firefox 完全対応 19
補足
完全対応 19
補足
補足 Starting with version 21, viewport-percentage lengths are invalid in @page.
IE 未対応 なしOpera 完全対応 15Safari 完全対応 6.1WebView Android 完全対応 1.5Chrome Android 完全対応 26Firefox Android 完全対応 19
補足
完全対応 19
補足
補足 Starting with version 21, viewport-percentage lengths are invalid in @page.
Opera Android 完全対応 14Safari iOS 完全対応 6.1Samsung Internet Android 完全対応 1.5
vmin unitChrome 完全対応 26Edge 完全対応 12
完全対応 12
完全対応 12
代替名
代替名 非標準の名前 vm を使用しています。
Firefox 完全対応 19
補足
完全対応 19
補足
補足 Starting with version 21, viewport-percentage lengths are invalid in @page.
IE 完全対応 10
完全対応 10
完全対応 9
代替名
代替名 非標準の名前 vm を使用しています。
Opera 完全対応 15Safari 完全対応 6.1WebView Android 完全対応 ≤37Chrome Android 完全対応 26Firefox Android 完全対応 19
補足
完全対応 19
補足
補足 Starting with version 21, viewport-percentage lengths are invalid in @page.
Opera Android 完全対応 14Safari iOS 完全対応 6.1Samsung Internet Android 完全対応 1.5
vw unitChrome 完全対応 20Edge 完全対応 12Firefox 完全対応 19
補足
完全対応 19
補足
補足 Starting with version 21, viewport-percentage lengths are invalid in @page.
IE 完全対応 9Opera 完全対応 20Safari 完全対応 6WebView Android 完全対応 ≤37Chrome Android 完全対応 25Firefox Android 完全対応 19
補足
完全対応 19
補足
補足 Starting with version 21, viewport-percentage lengths are invalid in @page.
Opera Android 完全対応 ありSafari iOS 完全対応 6Samsung Internet Android 完全対応 1.5

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
非標準の名前を使用しています。
非標準の名前を使用しています。
関連トピック