CSSで計算ができちゃうcalc()関数の使い方

CSSで計算ができちゃうcalc

CSSでコーディングをしている時、「px」や「%」を使ってコンテンツ幅や高さのサイズ指定している人は多いと思いますが、CSS3の「calc()」関数を使うと、プロパティの値を計算式で求められるのでとっても便利です。

calc()関数の使い方

横並び表示

実際に使い方をみていきたいと思います。

下記は、横幅100%に対して要素を横並びにしている例です。割り切れない数字でも簡単に3分割してくれます。

See the Pen CSS3 calc() by uquico (@uquico) on CodePen.

因みに、calc()関数を使っている箇所はこんな感じになっています。

li {
  width: 33.3% /* 非対応ブラウザー用 */
  width: -webkit-calc(100% / 3);
  width: calc(100% / 3);
}

横並び表示(marginあり)

次は、上記とやっていることはほとんど同じですが、両端揃えにしてマージンを指定しています。

See the Pen CSS3 calc() working on by uquico (@uquico) on CodePen.

margin-right: 2%;と指定して最後の要素のみ「0」指定にしています。

li {
  width: 32%; /* 非対応ブラウザー用 */
  width: -webkit-calc((100% / 3) - calc(4% / 3));
  width: calc((100% / 3) - calc(4% / 3));
}

Font sizeに使用してみる

下記は、viewportを基準値として、その幅を「40」で割った数値がフォントサイズになるように指定しています。

See the Pen calc() : font-size by uquico (@uquico) on CodePen.

font-size: calc(100vw / 40);

calc()関数のサポートブラウザについてはこちらで確認してください。以上、CSS3のcalc()関数の使い方の紹介でした。

Leave a Comment