CSS「calc()」があまりに便利すぎる件

こんにちは、クロコロールの熊田です。
今日はCSSで計算式を使える「calc()」を紹介します。

1 使い方
2 異なる単位間でも計算できる
3 入れ子も可能
4 使えるプロパティ
5 対応ブラウザ
6 まとめ

使い方

例）

.contents1 {
    width: calc(100px + 50px);
}
.contents2 {
    width: calc(1000px - 400px);
}
.contents3 {
    width: calc(300px * 3);
}
.contents4 {
    width: calc(100% / 3);
}
.contents5 {
    width: calc(50vw / 120 * 11);
}

指定できるデータタイプは<length>（距離）, <frequency>（周波数）, <angle>（角度）, <time>（時間）, <number>（実数）, <integer>（整数）です。
加算・減算・乗算・除算が使えます。
特に割り切れない除算なんか便利ですね。

例えば子要素の幅が親要素の1/6だったのを1/7にしたい時は

.child {
    width: calc(100% / 7);
}

…と割る数を変更すればいいだけです。意味が明白な上いちいち計算しなくていいですし修正が容易になります。

異なる単位間でも計算できる

例）

.contents1 {
    width: calc(100% - 100px);
}
.contents2 {
    width: calc(50% + 10em);
}

px・%・em・rem・vh・vwなどあらゆる単位間の計算ができます。
便利にも程がありますね。

入れ子も可能

.contents1 {
    width: calc(100% - calc(10px / 3));
}

もう何でもありか。

使えるプロパティ

width以外にもheight・padding・margin・font-size・background-positionなど単位を表すあらゆるプロパティに使えます。

対応ブラウザ

各ブラウザの対応状況

Opera mini以外のモダンブラウザは余程古いバージョンじゃなければサポートしていますね。
非サポートブラウザへの対応としては静的な値を別途指定しておくといいでしょう。

.contents1 {
    width: 140px; /* 非サポートブラウザ用 */
    width: calc( 100% / 128 * 14 );
}

まとめ

「calc()」が実力を発揮するのはやはりレスポンシブデザインの時ではないでしょうか。
実は自分はわりと最近までこの「calc()」を知りませんでした。それまではレスポンシブ案件の場合ひたすら「%」でコーディングしてました。
よくそれでやってこれたなと今となっては思います。

レスポンシブデザインが当たり前の昨今、「calc()」はコーディングに必須とも言えるでしょう。
それではみなさんも良きコーディングライフを。

この記事を書いた人
最新の記事

熊田賢太郎

株式会社クロコロールのコーディングを担当。デジタルハリウッドを卒業後、クロコロールに入社。HTML、CSS、JavaScript、Jquery、PHPの言語を使用。現在は、WordPressエンジニアとして、Webサイト制作、既存サイトのカスタマイズやリニューアル、テーマの制作、サイトのWordPress化、カスタム投稿作成、保守などを担当。