<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() を追加 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
| デスクトップ | モバイル | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
<length-percentage> | Chrome 完全対応 1 | Edge 完全対応 12 | Firefox 完全対応 1 | IE 完全対応 3 | Opera 完全対応 3.5 | Safari 完全対応 1 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile 完全対応 12 | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
cap unit | Chrome 未対応 なし | Edge 未対応 なし | Firefox 未対応 なし | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Edge Mobile 未対応 なし | Firefox Android 未対応 なし | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
ch unit | Chrome 完全対応 27 | Edge 完全対応 12 | Firefox
完全対応
1
| IE 完全対応 9 | Opera 完全対応 20 | Safari 完全対応 7 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile 完全対応 12 | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 7.1 | Samsung Internet Android 完全対応 あり |
ex unit | Chrome 完全対応 あり | Edge 完全対応 12 | Firefox 完全対応 あり | IE 完全対応 4 | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile 完全対応 12 | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
ic unit | Chrome 未対応 なし | Edge 未対応 なし | Firefox 未対応 なし | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Edge Mobile 未対応 なし | Firefox Android 未対応 なし | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
lh unit | Chrome 未対応 なし | Edge 未対応 なし | Firefox 未対応 なし | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Edge Mobile 未対応 なし | Firefox Android 未対応 なし | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
mozmm unit | Chrome 未対応 なし | Edge 未対応 なし | Firefox 未対応 4 — 59 | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Edge Mobile 未対応 なし | Firefox Android ? | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
Q unit | Chrome 完全対応 63 | Edge 未対応 なし | Firefox 完全対応 49 | IE 未対応 なし | Opera 完全対応 50 | Safari 未対応 なし | WebView Android 完全対応 63 | Chrome Android 完全対応 63 | Edge Mobile 未対応 なし | Firefox Android 完全対応 49 | Opera Android 完全対応 46 | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
rem unit | Chrome 完全対応 4 | Edge 完全対応 12 | Firefox 完全対応 3.6 | IE 完全対応 9 | Opera 完全対応 11.6 | Safari 完全対応 4.1 | WebView Android 完全対応 2 | Chrome Android 完全対応 あり | Edge Mobile 完全対応 12 | Firefox Android 完全対応 4 | Opera Android 完全対応 12 | Safari iOS 完全対応 4 | Samsung Internet Android 完全対応 あり |
rlh unit | Chrome 未対応 なし | Edge 完全対応 あり | Firefox 未対応 なし | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Edge Mobile 完全対応 あり | Firefox Android 未対応 なし | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
vb unit | Chrome 未対応 なし | Edge 未対応 なし | Firefox 未対応 なし | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Edge Mobile 未対応 なし | Firefox Android 未対応 なし | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
vh unit | Chrome 完全対応 20 | Edge 完全対応 12 | Firefox 完全対応 19 | IE 完全対応 9 | Opera 完全対応 20 | Safari 完全対応 6 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile 完全対応 12 | Firefox Android 完全対応 19 | Opera Android 完全対応 あり | Safari iOS 完全対応 6 | Samsung Internet Android 完全対応 あり |
vi unit | Chrome 未対応 なし | Edge 未対応 なし | Firefox 未対応 なし | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Edge Mobile 未対応 なし | Firefox Android 未対応 なし | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
vmax unit | Chrome 完全対応 26 | Edge ? | Firefox 完全対応 19 | IE 未対応 なし | Opera 完全対応 20 | Safari 完全対応 あり | WebView Android 完全対応 1.5 | Chrome Android 完全対応 あり | Edge Mobile ? | Firefox Android 完全対応 19 | Opera Android 未対応 なし | Safari iOS 完全対応 4 | Samsung Internet Android 完全対応 あり |
vmin unit | Chrome 完全対応 20 | Edge ? | Firefox 完全対応 19 | IE
完全対応
10
| Opera 完全対応 20 | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile ? | Firefox Android 完全対応 19 | Opera Android 未対応 なし | Safari iOS 完全対応 6 | Samsung Internet Android 完全対応 あり |
vw unit | Chrome 完全対応 20 | Edge 完全対応 12 | Firefox 完全対応 19 | IE 完全対応 9 | Opera 完全対応 20 | Safari 完全対応 6 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile 完全対応 12 | Firefox Android 完全対応 19 | Opera Android 完全対応 あり | Safari iOS 完全対応 6 | Samsung Internet Android 完全対応 あり |
Viewport-percentage lengths invalid in @page | Chrome ? | Edge ? | Firefox 完全対応 21 | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android 完全対応 21 | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
1in is always equal to 96px | Chrome 完全対応 あり | Edge ? | Firefox 完全対応 4 | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実装状況不明
- 実装状況不明
- 実験的。動作が変更される可能性があります。
- 実験的。動作が変更される可能性があります。
- 非標準。ブラウザー間の互換性が低い可能性があります。
- 非標準。ブラウザー間の互換性が低い可能性があります。
- 実装ノートを参照してください。
- 実装ノートを参照してください。
- 非標準の名前を使用しています。
- 非標準の名前を使用しています。