

CSSのパーセンテージ
““<percentage>”値”とは?
“<percentage>”値は何らかの基準単位に対する相対的な大きさを表します。
“<percentage>”値は実数(“<number>”値)とそれに続くパーセント記号(“%”)で表されます。
“<percentage>”値は常に何らかの基準単位を“100%”とした時の相対量を表します。何を基準とするかはプロパティごとに定義されています。例えば、同じ要素に適用される他のプロパティの値や祖先要素に適用されている同じプロパティの値、包括ブロックの大きさなどが基準になります。
“<percentage>”値が使用できる場所では“calc()”関数などを用いた数学的表現が使用できます。
数学的表現について詳しくはこちら。
数学的表現
“<percentage>”値の補間による出力結果(“Vresult”)は“(1 - p) * Va + p * VB”で表されます。
“<percentage>”値の加算による出力結果(“Vresult”)は“Va + VB”で表されます。
仕様書
CSS Values and Units Module Level 3
Numeric Data Types|Mixing Percentages and Dimensions
CSS Values and Units Module Level 4
Numeric Data Types|Mixing Percentages and Dimensions
定義されている仕様書
![]() |
![]() |
![]() |
![]() |
|
---|---|---|---|---|
![]() | ![]() | ![]() | ![]() | |
<percentage> | ![]() ![]() |
![]() ![]() |
![]() ![]() |
![]() ![]() |
パーセンテージと寸法
“<length-percentage>”
指定可能な値が“<length-percentage>”値として表される場所では“<percentage>”値と“<length>”値をどちらも使用することができます。
「“<length-percentage>”値」ではなく、そのまま単に「“<percentage>”値と“<length>”値で指定可能」と表される場合もありますが、意味は同じです。
“<length-percentage>”値の計算値は算出された“<length>”値になります。
“<length-percentage>”値が使用できる場所では“calc()”関数などで“<length>”値と“<percentage>”値を混ぜた計算が認められます。
“<frequency-percentage>”
指定可能な値が“<frequency-percentage>”値として表される場所では“<percentage>”値と“<frequency>”値をどちらも使用することができます。
「“<frequency-percentage>”値」ではなく、そのまま単に「“<percentage>”値と“<frequency>”値で指定可能」と表される場合もありますが、意味は同じです。
“<frequency-percentage>”値の計算値は算出された“<frequency>”値になります。
“<frequency-percentage>”値が使用できる場所では“calc()”関数などで“<frequency>”値と“<percentage>”値を混ぜた計算が認められます。
“<angle-percentage>”
指定可能な値が“<angle-percentage>”値として表される場所では“<percentage>”値と“<angle>”値をどちらも使用することができます。
「“<angle-percentage>”値」ではなく、そのまま単に「“<percentage>”値と“<angle>”値で指定可能」と表される場合もありますが、意味は同じです。
“<angle-percentage>”値の計算値は算出された“<angle>”値になります。
“<angle-percentage>”値が使用できる場所では“calc()”関数などで“<angle>”値と“<percentage>”値を混ぜた計算が認められます。
“<time-percentage>”
指定可能な値が“<time-percentage>”値として表される場所では“<percentage>”値と“<time>”値をどちらも使用することができます。
「“<time-percentage>”値」ではなく、そのまま単に「“<percentage>”値と“<time>”値で指定可能」と表される場合もありますが、意味は同じです。
“<time-percentage>”値の計算値は算出された“<time>”値になります。
“<time-percentage>”値が使用できる場所では“calc()”関数などで“<time>”値と“<percentage>”値を混ぜた計算が認められます。
“<number-percentage>”
指定可能な値が“<number-percentage>”値として表される場所では“<percentage>”値と“<number>”値をどちらも使用することができます。
「“<number-percentage>”値」ではなく、そのまま単に「“<percentage>”値と“<number>”値で指定可能」と表される場合もありますが、意味は同じです。
“<number-percentage>”値の計算値は算出された“<number>”値になります。
“<number-percentage>”値が使用できる場所では“calc()”関数などで“<number>”値と“<percentage>”値を混ぜた計算が認められます。