nimata

2015.06.10

cssで計算ができる、calc()が便利そう

可変する幅から一定の幅だけ少なく設定したい！

最近は、レスポンシブでコーディングする機会がとても多くなってきています。
上記のようなことをしたい、という状況も少なからずあるのではないでしょうか。

cssで書くと以下のような感じです。

/* こういうことがしたい */
.box{
  width: 100% - 50px;
}

当然ですが、上記ではうまくいきません。
しかし、cssの関数「calc()」を使うと実装できます！

/* これならできる */
.box{
  width: calc(100% - 50px);
}

calc()の()の中で、四則計算ができます。しかも、数値の単位が混ざっていてもOKです。
パッと思いつく使いどころは、
「要素のwidthからpadding分を除く」や、
「固定幅の要素と、可変幅の要素をならべる」などでしょうか。

cssで数値を指定するものには、calcが使用できます。
widthやheightはもちろん、background-positionやfont-sizeなどもOKです。

サポートしているブラウザは、IE9以上、iOS7以上、Android4.4以上です。

ベンダープレフィックス付きで対応するブラウザもあります。この辺りは必要に応じて対応ですね。
サポートしていないブラウザに関しては、フォールバックを利用して表示させます。
以下のようになります。

/* calc()をサポートしていないブラウザには */
.box{
  width: 95%;
  width: -moz-calc(100% - 50px);
  width: -webkit-calc(100% - 50px);
  width: calc(100% - 50px);
}

使いどころの例で出したものに関しては、box-sigingを使用したり、floatやpositionなど駆使して実装することも可能だと思います。
絶対にこれが正しい！という方法は無いと思いますし、引き出しを多く持って、状況に応じて柔軟に使い分けられるようにしたいですね。

Recommend