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

       

こんにちは!
本日は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%/何等分にしたいか);

  • test1
  • test2
  • test3
  • test4

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

\ お電話はこちら / 078-335-6097