CSSのcalcでwidthやheightを指定する方法を解説

 

CSSのcalcで widthやheightを 指定する方法を解説

横幅や高さを「%」や「px」を指定してレイアウトする際に、「100%の幅から5px引いた幅にしたい…」や「コンテナを正確に三等分したい…」こともあるかと思います。

そのようなときは、CSSの「calc関数」を使うと簡単に指定することができます。



calcとは?

calcとは、CSSで「四則演算」が使えるようになる関数のことです。
使用できるのは、足す(+)、引く(-)、掛ける(*)、割る(/)の4種類です。

四則演算を用いて「幅(width)」や「高さ(height)」を指定することで、それぞれ計算して割り出していた数値(プロパティの値)を簡単に計算してくれます。

CSSのcalcに対応しているブラウザ

現在は、ほとんどのブラウザに対応していますが、IE9以前のバージョンはサポートされていませんので、ベンダープレフィックス(-webkit-)を付ける必要があります。

calcを使用できるプロパティ

calcはすべてのプロパティに使用できるわけではありません。
使用できるのは、すべてではありませんが、以下のようなプロパティとなります。

  • width
  • height
  • margin
  • padding
  • border-width
  • font-size
  • text-shadow
  • transform
  • animation
  • transition

これらは、length(距離)、frequency(周波数)、angle(角度)、time(時間)、 number(実数)、integer(整数)のデータ型の値になっています。上記以外にもこれらのデータ型の値であれば使用することができます。

calcの使い方

calcは、様々な使い方ができます。主な使用例をご紹介します。

calcの基本的な使い方

最も基本的なcalcの使い方は以下のようにします。例えば、100%幅を3等分した幅から「5px」だけマイナス(減算)した値が計算されます。

div {
  width: calc(100% / 3 - 5px);
}

上記のように、calc()の「()」の中に計算式を記述していきます。この際、「+、-」を使う場合は、半角スペースを挿入する必要があります。これは、例えば「-5px」とした場合、「負の値」と判断されるためです。「*、/」については、半角スペースは必要ありませんが、ソースの見やすさ、統一性を高めるために記述した方がよいでしょう。

入れ子にする

calcは入れ子にして使うこともできます。

div {
  width: calc(300px * calc(3 / 2 ));
}

ビューポートの単位(vw、vh)を使用する

ビューポートの単位であるvwやvhを使用して計算することもできます。例えば、画面幅の三等分の幅にする場合はこのようになります。

div {
  width: calc(100vw / 3 );
}

レスポンシブでレイアウトを組む際に使用することで、ソースコードの量を大幅に減らすことができます。

文字サイズに使用する

レイアウトだけでなく、文字サイズなどにもcalcを使用することができます。例えば、「画面幅に対して、一行に30文字表示する文字サイズにする」といったことができます。もちろん、マージンなどの影響は受けますので注意は必要です。

div {
  font-size: calc(100vw / 30 );
}

calcの計算の優先順位

calcの計算には「優先順位」があります。小学校で習う通り「加算(+)、減算(-)」よりも「乗算(*)、除算(/)」が優先されます。

div {
  width: calc(100% - 5px / 10 );
}

上記の場合、「100% – 5px」より先に「5px / 10」が計算されます。

括弧を使えば優先順位を変えられる

こちらも学校で習った通り、「括弧()」を使えば、優先順位を変更することができます。

div {
  width: calc((100% - 5px) / 10 );
}

このようにすることで、「100% – 5px」を先に計算することができます。

理解するポイントまとめ

  • calc関数は、CSSで「四則演算」が使えるようにする関数
  • IE9以前のバージョンはサポートされていないためベンダープレフィックスが必要
  • 「加算(+)、減算(-)」よりも「乗算(*)、除算(/)」が優先される
  • 括弧を使うことで計算の優先順位を変更することができる