本日はCSS3の超便利な関数calc()を紹介します。
calc()ってなんだ？
CSSで四則演算ができる関数です。
calc()で四則演算ができるメリットって？
- ボックスを均等な幅かつ可変サイズで、余白は固定pxで並べたい時
- 左右に20pxの余白を取りつつ画面いっぱいに要素を表示したい時
- 固定幅のボックス+可変幅のボックスを横並びにしたい時
等に自分で計算する必要がなくなります。
レスポンシブデザインなWebサイトが増えた今、かなり使い勝手がよく便利な関数です！
calc()の使い方
数値を指定したいプロパティの中にcalc()を入れるだけ！
数字で指定するプロパティならどこでも使える(はず)
使い方の例
こんな感じ
.parent{
width:100%;
padding:0 20px;
}
/* 親要素が取っている余白からはみ出して画面いっぱいに表示させたい時とか */
.child{
margin: 0 -10px;
width: calc(100% + 20px);
}これで指定した要素の幅が自動的に100%＋20pxになるように計算してくれます。
使える式
calc()で使える式は
- 足し算( + )
- 引き算( – )
- 乗算( * )
- 除算( / )
以上の4種類です。
足し算と引き算の前後はスペースあけないとエラーになります。
乗算と除算はあけなくても大丈夫ですが、私は時々こんがらがるので一律空けてます。
除算を使うとき、計算式の右側に入れられるのは数字だけです。
乗算を使うときもどちらか片方の数値が単位のない数字でないといけません。
ここに「em」や「vw」など何かしら単位を入れたら表示が崩れるのでやめておきましょう。
入れ子の計算もOK！
calc()は入れ子の計算もできます。
例えば4つのカラムを並べ、間の余白は20pxずつ取りながら、最初のカラムと最後のカラムは両端に並べたい時などに便利です。
HTML
<div class="parent">
<div class="child">
<p>箱です</p>
</div>
<div class="child">
<p>箱です</p>
</div>
<div class="child">
<p>箱です</p>
</div>
<div class="child">
<p>箱です</p>
</div>
</div>CSS
.parent{
background: gray;
margin:auto;
overflow:hidden;
padding:10px;
width:100%;
}
.child{
background: white;
float:left;
text-align:center;
width:calc((100% - 60px) / 4);
}
/* 最初の要素以外に左マージンを追加 */
.child + .child{
margin-left: 20px;
}表示
こういう時は大体FlexBoxのjustify-contentでspace-betweenを使うと思いますが、事情があってFloatしか使えない時等に便利です。
各ブラウザのサポート状況
ほぼすべてのブラウザが完全対応しており、2019年10月現在の時点ではベンダープレフィックスも必要なさそうです。
今は未対応ブラウザのサポートも終了しておりますので、どんどこ使っていきたいところです。
しかし…
IE11でcalc()関数を使用したページを表示する場合、表示が崩れることがあります。
.parent{
display: flex;
flex-wrap: wrap;
}
.child{
width: calc(100% / 3);
}と表記した場合、他のブラウザでは要素が3等分されて表示されるのですが、IE11ではカラム落ちしてしまいます。
IEではcalc()関数を使う際に、割り切れない数字で割ろうとすると、数字が繰り上がってしまうようです。
この場合は100を3で割ろうとしたため、表示が崩れてしまいました。
この場合
.child{
width: calc((100% / 3) - .01px);
}と記載する事で回避できます。
(でもなんかイヤなんですよねえ)
その他にも
- 入れ子の式が正しく機能しない時がある
- calc(% + vw)の形式で記述すると正常に計算できない
- transformの値でcalcを使うと効かない
等々…
どんどん出てくる(ヽ’A`)
calc()以外のバグも
IEは徐々にシェアが落ちているところですが、依然日本では10%以上のシェアがあり、まだ無視できない状況です。
さらにWindows10のIE11は2025年まで正式サポートされるため、向こう5年はIEを考慮してコーディングする必要があります。
とはいえ便利なオプションである事には変わりないので、IEにも対応した記述にする、そもそもWebサイトの対応ブラウザからIEを外す等で対策してください。
