calc()がすごい便利！値を計算式で指定できる！

• 2018-12-11
• 未分類

こんにちは！
本日はWEBサイトを作る上で
便利なCSSを見つけたので紹介したいと思います。

自動計算をしてくれる、calc()がすごい便利です！
しかも対応ブラウザがopera mini以外すべて
サポートされています。（バージョンによって使えないものはございますが…）

これは使うしかないです！
よく自分が使うものとしては、メニューなど横並びで
均等の横幅にしたい時のものを一つ紹介したいと思います。

■HTML

<div class=”test”>

<ul>

<li>test1</li>

<li>test2</li>

<li>test3</li>

<li>test4</li>

</ul>

</div>

■CSS

.test ul li{

display:inline-block;

width:calc(100%/4);

}
■表示
背景を灰色とボーダーの黒をたして、わかりやすくしました。
自動で同じ幅（4等分）を計算してくれました！楽です！

width:calc(100%/何等分にしたいか);

是非使ってみてください。