フォントサイズや余白のサイズを計算して指定することができるcalc。とても便利ですよね。
calcを使えば横幅を３つに均等に分けたい時など、33.33…%と割り切れない数字を100% / 3と書いたり、画面幅に合わせて幅を変更したい時などに役に立ちます。
上記のような簡単な計算なら良いのですが、少し複雑な計算をしようとすると動かなくなってしまうこと、よくあるのではないでしょうか。
原因はcalcの単位の付け方にあります。
そんなcalcの単位の付け方についてまとめました。
calcが動かない時の解決策
まずcalcが動かなくなった時の原因をみましょう。
原因は2つあります。
- 演算子の前後にスペースがない
- 単位の付け方が間違っている
今回のメインは単位の付け方ですが、その前に式の書き方の部分で間違っている可能性もあります。
calcは演算子の前後にスペースを開けなければ機能しません。
まずこのミスを犯してないか確認しましょう。
例えば以下のような書き方はアウトです。
calc(100%-50px);
これは100%と-「マイナス演算子」の間にスペースがありません。50pxとの間にもです。
正しくはこうなります。
calc(100% - 50px);
こちらがクリアできても、動かない場合は、単位の付け方が間違っている可能性が高いです。
calcの単位の付け方のルール
足し算と引き算の場合
- 足し算と引き算の場合は計算する両方の値に単位をつけます。単位は別々でも構いません。
例
calc(100% + 50px);OK
calc(100vw – 50px);OK
calc(100% + 50);NG
calc(100 – 50);NG
掛け算の場合
- 掛け算の場合はどちらか片方の値にのみ単位を付けます。かける方かけられる方、単位は問いません。
例
calc(100% * 5);OK
calc(100 * 5em);OK
calc(100% * 5px);NG
calc(100 * 5);NG
割り算の場合
- 割り算の場合は割られる方にのみ単位を付けます。割る方、つまり右側には単位を付けてはいけません。
例
calc(100% / 5);OK
calc(100 / 5px);NG
calc(100 / 5);NG
calc(100% / 5px);NG
条件付きの特別ルール
足し算引き算にはある条件下で適応される特別ルールがあります。
- 足し算引き算の計算で完結しない
- 計算式をカッコで囲う
この2つの条件が揃うと単位を付けなくても計算をすることができるようになります。
このルールは計算式が複雑になると必要になります。
例題
基本的なルールは想像できるでしょう、ですが、特別ルールについてはピンときずらいので、例題を用いて使い方と、単位の付与の手順・コツを解説します。
今回題材にするのはこちらです。
こちらは一定の範囲内で画面サイズに比例してフォントを大きくする方法をまとめた記事です。このcalc式を題材とします。
計算式はこちらになります。
calc(20 + (40 - 20) * (100vw - 320) / (960 - 320));
もちろんこのままでは動きません。
こちらを計算させたい場合どのように単位を与えれば良いでしょうか。
単位はpxを使用します。
100vwの部分は画面幅を与えたいのでここに単位を与えることは確定です。
考える手順
計算を最小単位に分ける
↓
計算の順に番号をつける
↓
単位が確定してしまう箇所を探し、計算が成り立つように単位を付与する
↓
計算の順が後ろものもから計算が成り立つように単位を付与する
計算を最小の単位に分ける/順番をつける
この2つは同時にできます。
単位が確定してしまう箇所を探し計算が成り立つように単位を付与する
今回の場合は画面幅を計算に入れたいので、100vw – 320の部分の単位が確定となってしまいます。
ですので、まずここを計算ができるように単位を付与しましょう。
引き算の場合は両方に単位を付与しなければなりませんのでこうなります。
100vw – 320px
calc(20 + (40 - 20) * (100vw - 320px) / (960 - 320));
どの単位をつけるかはその計算によります。今回はpxしか使いません。
計算の順が後ろのものから計算が成り立つように単位を付与する
【6番の計算から考えます】
6番の計算は20と5番を計算して出てきた答えを足しています。
足し算は両方に単位を付与しなければいけないので、20にpxを付けます。
5番の部分は下の階層の計算で単位を付与すれば5番も単位が付与されたことになりますので下層の計算で単位を付けます。
【次に5番の計算を考えます】
5番の計算は4番と3番の計算の答えを割ったものです。
割り算ですので、割られる数は単位を付け、割る数は単位を付けてはいけません。
割られる数の方は下層の計算があるので飛ばします。
割る数は下層の計算がないのでこちらを先に行いましょう。
【3番の計算を考えます】
3番の計算は5番の計算の割る数となります。
ですので3番の計算に単位を付与してしまうと、5番の計算が成り立たなくなってしまいます。
こんな時に使えるのが、特別ルール。
足し算、引き算で完結していないですのでカッコで囲えば単位を付与することなく計算をすることができます。
なので、こちらはそのままですね
【4番の計算を考えます】
4番の計算は1番の計算と2番の計算の答えを掛けたものです。
掛け算はどちらかに単位を付与しなければならないのですが、すでに2の計算は単位の付与が確定しています。
となると、計算を成り立たせるために1番の計算に単位を付与することはできなくなります。
ですので、こちらも特別ルールを使いましょう。
以上で全ての計算が成り立ったので完成です。
calc(20px + (40 - 20) * (100vw - 320px) / (960 - 320));
まとめ
- 足し算と引き算の場合は計算する両方の値に単位をつけます。単位は別々でも構いません。
- 掛け算の場合はどちらか片方の値にのみ単位を付けます。かける方かけられる方、単位は問いません。
足し算引き算にはある条件下で適応される特別ルールがあります。
- 足し算引き算の計算で完結しない
- 計算式をカッコで囲う
この2つの条件が揃うと単位を付けなくても計算をすることができるようになります。
計算の手順
計算を最小単位に分ける
↓
計算の順に番号をつける
↓
単位が確定してしまう箇所を探し、計算が成り立つように単位を付与する
↓
計算の順が後ろものもから計算が成り立つように単位を付与する
