MENU

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

Updated / Published

CSS3にcalc()というファンクションがあるのをご存知ですか？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()ファンクションの構文

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

この場合、フォールバックとして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ピクセルだけフォントサイズを大きくしたり小さくしたい場合に

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

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

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

  1. .col1, col3{
  2.     width : 33% ;  /* IE8以下とAndroid4.3以下用フォールバック */
  3. }
  4. .col2{
  5.     width : 34% ;  /* IE8以下とAndroid4.3以下用フォールバック */
  6. }
  7. .col1, .col2, .col3 {
  8.     width : -webkit-calc(100% / 3) ;
  9.     width : calc(100% / 3) ;
  10. }

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

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

  1. .row {
  2. 	padding : 0 40px ;
  3. 	width : 940px ;
  4. 	margin : 0 auto ;
  5. }
  6. .col1 {
  7. 	float : left ;
  8. 	width : 220px ; /* IE8以下は固定*/
  9. }
  10. .col2 {
  11. 	float : right ;
  12. 	width : 700px ; /* IE8以下は固定*/
  13. }
  14. html:root .row{
  15. 	width : auto ;
  16. 	max-width : 940px ;
  17. }
  18. html:root .col1 {
  19. 	width : 23.4042553191% ; /* Android4.3以下用フォールバック */
  20. 	width : -webki-calc(220 / 940 * 100%) ;
  21. 	width : calc(220 / 940 * 100%) ;
  22. }
  23. html:root .col2 {
  24. 	width : 74.4680851064% ; /* Android4.3以下用フォールバック */
  25. 	width : -webkit-calc(700 / 940 * 100%) ;
  26. 	width : calc(700 / 940 * 100%) ;
  27. }

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