CSSで計算式を可能にするcalc()ファンクション

CSS3calc()というファンクションがあるのをご存知ですか?CSSにおいて計算式を可能にしてくれる便利なcalc()ファンクションのサポート状況や使い方について紹介します。

「横幅にパーセンテージ値を用いつつ、その横幅から指定ピクセル(px)分だけ引けたら...」こんなことを思われたことがあると思います。それをCSS拡張メタ言語を使うわけでもなく、CSS単独で実現できてしまうのがcalc()ファンクションです。

参考:Mathematical Expressions: 'calc()'

calc()ファンクションの実装状況

IE
IE9よりサポート
Chrome
Chrome19より25まで-webkit-のベンダー識別子付きで先攻実装
Chrome26よりサポート
Firefox
Firefox4より15まで-moz-のベンダー識別子付きで先攻実装
Firefox16よりサポート
Safari
Safari6.0より-webkit-のベンダー識別子付きで先攻実装
Safari6.1, Safari7.0よりサポート
Opera
Opera15よりサポート
iOS
iOS6.0より6.1まで-webkit-のベンダー識別子付きで先攻実装
iOS7よりサポート
Android
Android4.4よりサポート

IE9からサポートしていたのですが、ChromeやSafariのサポートが中々進まなかったことから、便利ながらも影が薄いような感じで、注目を集めることがなかったファンクションだったのですが、今ではそれなりのサポート環境になっています(参考:Can I use calc() as CSS unit value?)。

iOSとSafariはごく最近のサポートになることを考えると、-webkit-のベンダー識別子のみを付ける必要があります。

calc()ファンクションの構文

.sample{
   width : 98% ; /* IE8以下とAndroid4.3以下用フォールバック */
   width : -webkit-calc(100% - 20px) ;
   width : calc(100% - 20px) ;
}

この場合、フォールバックとしてIE8以下とAndroid 4.3以下の標準ブラウザには.sampleの横幅に98%が適用され、calc()ファンクションに対応する環境では100% - 20pxの横幅が適用されます。便利!ってなりませんか。

width, margin, padding, font-size, border-width, background-position, text-shadow, transform : rotate()などなどcalc()ファンクションは、CSS内で<長さ>、<周波数>、<角度>、<時間>、<数量>、<整数値> のいずれかの値を用いる場所ならどこでも使用可能です。

calc() 内での計算には以下の式が利用可能です。

+
加算
-
減算
*
乗算(引数の少なくとも1つは <数量> でなければならない。)
/
除算(右の引数は <数量> でなければならない。)

%とpxなど異なる単位同士での計算や、計算順序を決定するために括弧を用いることも、またcalc() 内部で別の calc() を用いることも可能です。

calc()ファンクションの便利な使い方例

親要素よりnピクセルだけフォントサイズを大きくしたり小さくしたい場合に

/*3pxだけ大きくする*/
.sample {
    font-size : 105% ; /* IE8以下とAndroid4.3以下には近似値の指定でフォールバック */
    font-size :  -webkit-calc(1em + 3px) ;
    font-size : calc(1em + 3px) ;
}
/*3pxだけ小さくする*/
.sample2 {
    font-size : 95% ; /* IE8以下とAndroid4.3以下には近似値の指定でフォールバック */
    font-size : -webkit-calc(1em - 3px) ;
    font-size : calc(1em - 3px) ;
}

これならフォントサイズ指定にもピクセルが大活躍。

3つずつなどパーセンテージ値で割り切れない場合に

.col1, col3{
    width : 33% ;  /* IE8以下とAndroid4.3以下用フォールバック */
}
.col2{
    width : 34% ;  /* IE8以下とAndroid4.3以下用フォールバック */
}
.col1, .col2, .col3 {
    width : -webkit-calc(100% / 3) ;
    width : calc(100% / 3) ;
}

3分割などの割り切れない数字でもこれならきっちり。

固定幅レイアウトをレスポンシブなレイアウトにしたい場合に

.row {
	padding : 0 40px ;
	width : 940px ;
	margin : 0 auto ;
}
.col1 {
	float : left ;
	width : 220px ; /* IE8以下は固定*/
}
.col2 {
	float : right ;
	width : 700px ; /* IE8以下は固定*/
}
html:root .row{
	width : auto ;
	max-width : 940px ;
}
html:root .col1 {
	width : 23.4042553191% ; /* Android4.3以下用フォールバック */
	width : -webki-calc(220 / 940 * 100%) ;
	width : calc(220 / 940 * 100%) ;
}
html:root .col2 {
	width : 74.4680851064% ; /* Android4.3以下用フォールバック */
	width : -webkit-calc(700 / 940 * 100%) ;
	width : calc(700 / 940 * 100%) ;
}

固定幅だったレイアウトも簡単にレスポンシブなレイアウトに。

Updated / Published