要素を三分割する魔法のCSSファンクション！？

Webサイトをマークアップしているとデザインによって三分割する場面があります。

これまでは下記のようにCSSを記述してました。

li{ 
	width : 33.33333% ;  
}

しかし、もっと綺麗な記述方法はないのかと調べてると発見！！

この方法は3分の1のように指定できる【calc()ファンクション】というのがありました。

 

[対応ブラウザ]

  • IE9以降
  • Chrome19より25まで-webkit-のベンダー識別子付きで先攻実装（Chrome26よりサポート）
  • Firefox4より15まで-moz-のベンダー識別子付きで先攻実装（Firefox16よりサポート）
  • Safari6.0より-webkit-のベンダー識別子付きで先攻実装（Safari6.1, Safari7.0よりサポート）

 

[記述方法]

li{ 
	width:33.33333%; /* 未対応ブラウザ用 */ 
	width:-webkit-calc(100% / 3); /* ベンダープレフィックス */ 
	width:calc(100% / 3) ; 
}

これだけで綺麗に三分割が可能になります！ん～便利(*’▽’)/

ページの先頭へ