css3のcalc()で計算

この記事は2015年1月21日に書かれたもので、内容が古い可能性がありますのでご注意ください。

jsで%からpx分引くことができないかと調べてみたらcssで可能との記事が。
それscssでは?と思ったがれっきとしたcss3のcalc()で計算が可能とのこと。
まったく知らなかったので少し調べて見ました。

調べて見るとPCでは使えそうなレベルです。
スマホサイトは少しつらいですが、対応しているブラウザは以下となります。

ブラウザ 対応状況 備考
IE IE9~
Chrome Chrome26~ -webkit-付きならChrome19~から
Firefox Firefox16 -moz-付きならFirefox4~から
Safari Safari6.1
7.0~
-webkit-付きならSafari6.0~から
Opera Opera15~
iOS iOS7~ -webkit-付きならiOS6.0~から
Android Android4.4~

自分は減算することが目的で探しましたが、加算・乗算・除算もできるとのこと。
使い方は以下を参照。

css

.hoge {
	width: 98%; /* IE8以下とAndroid4.3以下用 */
	width: -webkit-calc(100% - 20px);
	width: calc(100% - 20px);
}

PCサイトだとsafariが最近のサポートなので-webkitはつけておいたほうがいいとの事。
IE9~でPCサイトオンリーならだいぶ使えそうですね。

参考
CSSで計算式を可能にするcalc()ファンクション
calc()を使うとCSSで四則計算ができる。それもコンパイルしなくていいぞ!
こちらを参考にさせていただきました。ありがとうございます。

Tweet about this on TwitterShare on FacebookShare on Google+Pin on PinterestShare on TumblrPrint this pageEmail this to someone

ads

ページトップへ

© hifi-dev All Rights Reserved.
kenboh
profile
kenboh

follow