【CSS】calcはレスポンシブ対応に便利！

calcとは

calc()とは，プロパティの値を指定する際に計算式を使うことが出来る関数のことです。

単位を揃える必要はなく，px，%，rem，vwなどの相対単位でも，異なる単位の計算式で値を指定することができます。

これは，レスポンシブ対応の時に非常に便利な点です。

なお，calcは calculation（計算）の略称です。

使い方

• 計算式では，四則演算（加算+，減算-，乗算*，除算/）が使用できます。

• 演算子（+，-，*，/）を半角スペースで区切ります。※乗算や除算の式では，半角スペースで区切ることは必須ではありません。

• 単位を用いた加算や減算は，必ず単位のある数値同士で計算します。

• 乗算や除算として用いる値は，単位を付けてはいけません。

• 入れ子でも使用できます。

calcの使用例

widthを指定

例えば，「width: calc(100% - 50px);」と設定してみましょう。

これは，ページの横幅100％から50pxを引いた値を表しています。

HTML

<div class="box">
    <p>ボックス</p>
</div>

CSS

.box {
  margin: 0 auto;
  border: solid 1px #000;
  width: calc(100% - 50px);
}
.box p {
  text-align: center;
}

そうすると，ブラウザのウインドウ幅を変えても，常に横幅100％から50pxを引かれた状態になっています。

font-sizeを指定

ビューポートに対する文字の大きさをcalcで調整してみましょう。

ビューポートとは
ブラウザで表示される領域のことで，パソコンとスマホでは大きく異なります。
そのため，レスポンシブ対応としてビューポートを考慮して幅や大きさを指定する必要があります。

今回は「font-size: calc(100vw / 30);」と設定します。

HTML

<div class="box">
    <p>ボックス</p>
</div>

CSS

html {
  font-size: calc(100vw / 30);
}
.box {
  margin: 0 auto;
  border: solid 1px #000;
  width: calc(100% - 50px);
}
.box p {
  text-align: center;
}

calcで設定したことにより，ブラウザのウインドウ幅を変えても常に設定した割合で文字の大きさが変化しています。

また，100vw÷30=3.333…vwのような割り切れない値を計算式で指定することができるのは嬉しいでポイントですね。

入れ子を使う

.box {
  width: calc(100% - calc(100vw / 20));
}

まとめ

calcを使う利点は主に以下の3つです。

• レスポンシブ対応の幅や大きさを指定できる

• 割り切れない値も計算式で指定できる

• 計算過程が明白になる