CSS上での計算を行うためのルールについて教えてください。

色々と調べてみるのですが、単位をまたいで？の計算方法についての明確なルールが見つからず、よくわからないままなので、お詳しい方アドバイスを頂けますと幸いです。

CSS上で計算を行う際に、
cal(計算式);　を使って指定を行うと思うのですが、この計算式の中で単位を付ける付けないの仕組みが良くわからず悩んでおります。
例えば、

width:calc(50px * 20px - 5px);

の様に単純な計算であれば、そのまま単位も含めた計算を書いて結果は、　95px　の幅を算出できると思います。また、以下の様に、

width:calc(100% - 50px);

などの場合にも、相対的に閲覧しているデバイスからの100％から50pxが引かれた幅が指定され、こちらも問題無いと思います。

ただ、私の中で問題となっているのは、例えば相対的な位置を計算したく、pxの指定から%を取得する際の指定方法が分かりません。
簡単ですが、以下の指定があった場合、この絶対指定の位置を相対指定に変える計算をCSS上で行う場合です。
※今回#container 側の高さの相対化は無視して頂いて大丈夫です。

#container {
position:relative;
height:5000px;
}
#point {
position:absolute;
top:1500px;
left:0;
}

<div id="container">
<div id="point">この位置を相対的に指定したい</div>
</div>

計算としては、
1500px/5000px*100 = 30%　が相対指定の際の設定になるかと思うのですが、これをCSS上で以下の様に指定しても、計算が反映されません。

#point {
position:absolute;
top:calc(1500px / 5000px * 100); ←この指定
top:calc(1500 / 5000 * 100); ←または、この指定
top:calc(1500px / 5000px * 100%); ←または、この指定
left:0;
}

しかしながら、これらの指定を以下の内容にすると正常に計算が反映されます。

top:calc(1500 / 5000 * 100%);

なぜ、最初のpx分部の単位を削除することで正常に計算が行われるのでしょうか？
逆にpxという指定がない事で、単位に迷い、この方が正常に計算できなくなるような気がするのですが…。

この辺りの単位の付け方や、計算式のルールなどお詳しいからいらっしゃいましたら是非ともアドバイスをお願いいたします。
宜しくお願いいたします。

No.2 ベストアンサー 回答者： fujillin 回答日時： 2022/08/15 16:25

こんにちは

詳しいわけではありませんが・・

＞1500px / 5000px
は、比率を計算したいはずなので、結果は無単位の値になるはずですから、「1500 / 5000」が妥当なのではないでしょうか？

一方で、calcの計算での、乗算、除算には単位の有無に関して制限があります。
　・乗算は一方の項のみ単位付き
　・除算は分子のみ単位付き
が許されています。
https://developer.mozilla.org/ja/docs/Web/CSS/calc

上記に合致するような計算式にしようとすると、ご提示の「正常に計算できる」例になると思います。
意味合い的にはおかしいかもですが、
　1500% / 5000 * 100
としても、正しく（？）解釈されます。

この回答へのお礼

有難うございます。

>>＞1500px / 5000px
は、比率を計算したいはずなので、結果は無単位の値になるはずですから、「1500 / 5000」が妥当なのではないでしょうか？

なるほどです、元々単位がpxとしてついていたので、pxで計算を進めなければと思っておりました。確かに比率の計算になるので、単位云々は関係がないかもです…。

>>一方で、calcの計算での、乗算、除算には単位の有無に関して制限があります。
リンク有難うございます、こちら再度確認してみたいと思います。
やはりきっちりとルールがあるのですね、見つけれずにおりました…。

>>意味合い的にはおかしいかもですが、
　1500% / 5000 * 100

確かに、分子のみという事なので、こちらでも正常に計算ができました。
まだ府に落とし切れていないのですが、仕様を確認しながら色々と試してみたいと思います。
大変感謝申し上げます、有難うございました！

お礼日時：2022/08/15 20:05

No.3 回答者： t_fumiaki 回答日時： 2022/08/15 20:00

>>この場合の除算の右側というのは、5000px が対象なのでしょうか？

そうです。a/bのbの事です。

No.1 回答者： t_fumiaki 回答日時： 2022/08/15 16:22

文法規約上出来ません。

「除算/の右側は <number>(1,2,3等の値) でなければなりません。」
と言う規約ですから仕方ありません。

なので、calc(1500 / 5000 * 100%);は有効です。
calc(1500px / 5000px * 100); は無効です。

この回答へのお礼

有難うございます！！！
>>「除算/の右側は <number>(1,2,3等の値) でなければなりません。」

なるほどです、初めて知りました。
再度の質問で大変恐縮ですが、この場合の除算の右側というのは、5000px が対象なのでしょうか？

もしそうだとすると、左側の1500pxはpxついていてもいいのでしょうか？
いずれにしましても、単位が無いのに計算ができるとう意味が良くわからないのですが…。

もしこれらの仕様が確認できるページが御座いましたらお伺いしたく思います。
大変参考になりました。㎜

お礼日時：2022/08/15 19:57