Published on

CSSで四則演算をする

Authors

calcファンクションとは

CSS3で実装された計算用のファンクションで、パーセンテージ指定した値から、指定ピクセル分を引くことができます。 また、面倒な計算をせずとも要素を均等に横並べすることもできます。

例

calc(式)とするだけ。

要素を3つ均等に横並べしたいとき

.col1, .col2, .col3 {
    width : -webkit-calc(100% / 3) ;
    width : calc(100% / 3) ;
}
100% から20px引きたいとき

.hoge {
   width : calc(100% - 20px) ;
}