misallychan.com

雑記。はてブ、口コミ、WEBデザイン、アニメ・漫画についてとか。


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

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

f:id:misallychan:20180316152158p:plain


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


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

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


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



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

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


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



3分割もらくらく

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





書き方は

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

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



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




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

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