便利CSS関数「calc」

すっかりWeb情報の人と化している「たま」です。
今回も、使いこなせると便利なCSSをご紹介いたします！

レスポンシブサイトで難しいのは、幅によって変わるサイズ感に合わせて、欲しい場所に欲しいサイズの要素を配置すること。
以前ご紹介した「clamp」は最小値と中間値、最大値を指定できる便利なCSS関数でしたが、「calc」も使いこなせると指定がとても簡単になります。

「calc」はCSSの値の中で四則演算ができる関数です。
足し算…「+」
引き算…「-」
掛け算…「*」
割り算…「/」

例えば幅の指定ではこのように。
width : calc ( 100px + 20px );

この記載であれば120pxで表示されます。

px以外にも様々な単位での計算も可能です。
calcは単純な計算よりも、相対単位との組み合わせで真価を発揮すると思っています。
私が良く使うのは%やvwとpxの組み合わせです。

例えば、
画面100%に対し両端に5vwずつの余白を持たせ、
中に2つのdivを横並びに表示、
divの間には10pxの感覚を空けたいという場合のdiv一つ分の幅は?
レスポンシブサイトは画面のサイズが変わると幅が変化してしまいます。
pxや%といった一つの単位だけで解決しないこの指定、
calcで指定するとすれば…

width : calc ( (100% – (5vw * 2) – 10px) / 2 );

「calc(50% – 2.5vw – 5px)」としても良いのですが、計算元が何の数字かがわかる計算にしておくと、後から修正などで混乱しないので良いでしょう。

足し算や引き算の場合、前後に半角スペースを入れる必要があります。
忘れると、表示がおかしくなってしまう場合もあり要注意。
時間や角度などの指定にも使えるので、是非使いこなしたいCSS関数です。