【CSSのcalc()って知ってますか？】 パーセントでwidth、heightを指定して固定値のpaddingやmarginを使って100％にぴったり収める
今日もCODEPENでコードやアイディア探し、最近の日課です。
そんな日課を続けていると、あまり知られていないCSSに出会うことがあります。
そして今日はcalc()という超便利なCSS3を知りました。
calcってCalculator(電卓)の略、つまり計算を意味するんですね。
そしてcalc()では四則計算がCSSで出来ます、
calc()を使ってpadding、marignが固定値なのに常に100％に収める
私がcalc()を使いたい現在の目的はこれです。
いままではリキッドデザインにするためには、width49％、padding0.5％ なんて使い方でやってたんですけど。ブロックの間隔はできれば固定でしたいなっと思っていたんですがこれで代用していました、もしくはbox-sizingでやりくり
これがcalc()を使えば 固定値のpadding+パーセントのwidth＝100％にできちゃうんですね
例 左右pading20pxで常に中身を最大にして横幅を合計100％になるようにする
div {
width: calc(100% - 40px);
padding: 0 20px;
}
こういった使い方が出来ます
引き算の他に、足し算、掛け算、割り算も出来ます
割り算だと縦に3分割するときは1つあたり33.333..％になりますが calcを使えばcalc(100％ / 3)しちゃえば良いし割り切れない数値の時にも便利。100÷3ならまだ分かりやすいけど中途半端な数字になってきたら手計算できなくなるので電卓で計算したりしますが そういうのが、CSSできちゃうわけです
対応ブラウザはIE9以上で、他のモダンブラウザでは大体対応しているようです、プレフィックスが必要な物もあるようなので、とりあえず付けとけばいいかなっと。非対応ブラウザ向けには手前に大きめに余白を取ったパーセントで応急措置をすれば一応OK
もともと固定幅で作られていたものを、レスポンシブデザインにするときに前の固定値を上書きする要領でパーセントに置き換えていけば非対応ブラウザだと、固定値の表示になりモダンブラウザならレスポンシブデザインになるというメリットもあるかと思います
参考URL
https://developer.mozilla.org/ja/docs/Web/CSS/calc
https://w3g.jp/blog/tools/css3_calc_function
COMMENT