cssでレスポンシブに幅や高さを計算できるcalc()が便利

プロモーションが含まれています

cssでレスポンシブに幅や高さを計算できるcalc()が便利

レスポンシブにコンテンツの幅をwidth:100%で指定するとpaddingやborder分はみ出るのを簡単に防げるcalc()の使い方

css関連記事

関連記事をもっとみる

なぜ幅をwidth:100%で指定するとはみ出るのか?

cssの決まりで、ボックスモデルというものがあります。

ボックスモデル

chromeでF12を押すと出てきますね。

幅をwidth:100%で指定すると上の図でのcontentsの範囲が幅100%になるため、
その要素にpaddingやborderをつけると100%を超えてしまうのではみ出るという現象が起きてしまいます。

calc()とは?

width: calc(100% - 22px);

上のように書くと、
例えば左右にpaddingが10px、borderが1pxある要素をwidth:100%に指定したいとき、
このままだとはみ出しますが、calc()を使うと100%から22px引いた値をwidthに適用することができます。

四則演算ができるから複雑な計算もできる

margin-right: calc((1200px - 193px * 6) / 5);

式だけ見ても意味不明ですが、こんなふうにも使えます。
幅が1200pxの要素の中に幅が193pxの画像を6枚並べたい場合、画像間のmarginは?
って言われてもピクセルで指定するなら計算しなくてはいけないのでめんどくさいですよね!

そんな時は1200px - 193pxの画像6枚分、画像の間隔5か所分を求めると答えはわからなくてもちゃんと表示されます。

最後の画像にmargin-right:0;を指定すれば完成です。

こんな感じで計算をしてくれるので微調整の手間が省けて便利ですね!

コメント

タイトルとURLをコピーしました