2019.11.18

フロントエンド

幅や高さの計算ならCSS3のcalc()関数が便利

この記事は、2019年11月18日に編集し、約 5 分で読めます。

こんにちは。ぐうたらコーダーのKAGです。
本日はCSS3の超便利な関数calc()を紹介します。

calc()ってなんだ？

CSSで四則演算ができる関数です。

calc()で四則演算ができるメリットって？

• ボックスを均等な幅かつ可変サイズで、余白は固定pxで並べたい時
• 左右に20pxの余白を取りつつ画面いっぱいに要素を表示したい時
• 固定幅のボックス+可変幅のボックスを横並びにしたい時

等に自分で計算する必要がなくなります。

レスポンシブデザインなWebサイトが増えた今、かなり使い勝手がよく便利な関数です！

calc() - CSS: カスケーディングスタイルシート | MDN

calc() は CSS の関数で、 CSS のプロパティ値を指定する際に計算を行うことができるものです。 、、、、、、 が利用できる場所ならば使用できます。

developer.mozilla.org

calc()の使い方

数値を指定したいプロパティの中にcalc()を入れるだけ！
数字で指定するプロパティならどこでも使える(はず)

使い方の例

こんな感じ

.parent{
  width:100%;
  padding:0 20px;
}

/* 親要素が取っている余白からはみ出して画面いっぱいに表示させたい時とか */
.child{
  margin: 0 -10px;
  width: calc(100% + 20px);
}

これで指定した要素の幅が自動的に100%＋20pxになるように計算してくれます。

使える式

calc()で使える式は

• 足し算( + )
• 引き算( – )
• 乗算( * )
• 除算( / )

以上の4種類です。

入れ子の計算も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月現在の時点ではベンダープレフィックスも必要なさそうです。

今は未対応ブラウザのサポートも終了しておりますので、どんどこ使っていきたいところです。

Can I use... Support tables for HTML5, CSS3, etc

"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

caniuse.com

しかし…

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%以上のシェアがあり、まだ無視できない状況です。

Desktop Browser Market Share Japan | Statcounter Global Stats

This graph shows the market share of desktop browsers in Japan based on over 5 billion monthly page views.

gs.statcounter.com

さらにWindows10のIE11は2025年まで正式サポートされるため、向こう5年はIEを考慮してコーディングしなければいけません。イカれてやがる…

とはいえ便利なオプションである事には変わりないので、IEにも対応した記述にする、そもそもWebサイトの対応ブラウザからIEを外す等で対策してください。