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で四則計算ができる。それもコンパイルしなくていいぞ！
こちらを参考にさせていただきました。ありがとうございます。
ads
