それマグで!

知識はカップより、マグでゆっくり頂きます。 takuya_1stのブログ

習慣に早くから配慮した者は、 おそらく人生の実りも大きい。

CSSの記述を柔軟にするcalc

css にCalcがあるのを教えてもらいました。

/* property: calc(expression) */
width: calc(100% - 80px);

具体的には MDNに記載があります。

四則演算が可能

MDNを見る限りでは、

width: calc(100% - 80px);
width: calc(100% + 80px);
width: calc(10% * 8 );
width: calc(100% / 8 );

などとと+―×÷が可能なようですね。

長さはPxに変換された後に計算されるようです。

今後、ちょっと細いところを調べてみたいと思います。

広告を非表示にする