レスポンシブで%指定したいけど…３分割は割り切れない問題を解決するclac()！！

％指定で横幅とるときに、３分割って難しくないですか？
width:33.333333%とかしたり。margin使って割り切れるようにしたり。大変だった…
んですが今回はその問題を解決するclac()ファンクションをご紹介します。

先日ブレイクポイントを作ってレスポンシブサイトを作ろう的な記事を投稿しました。
www.misallychan.com

横幅はpx指定でなく%指定

レスポンシブサイトの場合、デバイスサイズによって変わるので、どんな横幅にも対応できるよう、パーセントで横幅を指定することがほとんどかと思います。
ただ、３分割ってめっちゃ困りませんか？だって、割り切れない。


でも、そんな悩みも一瞬で解決されます！

clac()で四則計算しよう！

なんと、cssで計算ができてしまうのです・・・・。


それがclacファンクション。

３分割もらくらく

なんと calc(100% / 3);と書くだけで、100%を３で割ってくれるわけです！
つまり、100%÷３。
こんなことができていいの・・ありがとう・・これをCSSに指定するだけなのです。

書き方は

神参考引用（この記事に出会って私の人生は変わった）
code-life.hatenablog.com

.box{
width : 33.33333%;
width : -webkit-calc(100% / 3);
width : calc(100% / 3);
 }

未対応ブラウザ用フォールバックと、ベンダープレフィックスを付け加えて、このような形になります。

％指定で活用しやすいclacを活用しよう

これなら簡単に７分割とか９分割もできちゃいますよね！
他にも、四則計算ができるので、+や-処理もできます。
画期的すぎて泣けます！