【CSS】calc()でスタイルを計算する

2020年3月17日

cssの基本的な関数のcalc()についてです。元々widthやheightの計算で使用していたりして知ってはいたのですが、色々なプロパティに使用できることは知らなかったため記事を書きます。

よくあるcalc()の使い方

私も一番使用するのは以下みたいにwidthやheightの計算だと思います。以下hogehogeクラスに可変のwidthやheightを当てる際のCSSサンプルです。

.hogehoge1 {
    width: calc(30vw - 20px);
    height: calc(10vh - 10px); 
}

私の場合は画面に対して可変だけどpaddingやmarginが固定値で入っていてvmや%では上手くスタイルを調整できない際に使ったりします。サンプルではvwやvhを使用していますが、もちろん%等も使用できます。

fontなどにも使える

私はこれまでにwidthやheightくらいにしか使っていなかったため、知らなかったのですが、色々なプロパティの計算に使用できるとのことです。フォントも可変にしたりできるようです。先ほどのCSSサンプルにfont-sizeの設定も追加してみました。

.hogehoge2 {
    font-size: calc(20vw / 20);
    width: calc(30vw - 20px);
    height: calc(10vh - 10px); 
}

画面幅を動かすとフォントサイズが変わるはずです。まぁサンプルがあっても良く分からないですよね(笑)

他にもpostion系（topやrightとか）などなど数値を使用するプロパティにはcalc()関数が使用できます。