CSS3：calc()ファンクションを使って位置を指定する

最近まで知らなかったんですが、calc()というファンクションをご存知でしょうか？CSSで計算式を実装可能にする便利なもので、「パーセンテージの指定だと微調整が効かない〜」「position指定だとレスポンシブの時に条件分岐させるのがめんどくさい〜」といった問題をがつっと解決してくれる優れもの。ありがとうCSS3。とはいえ、まだまだサポート状況もまちまちなので、順を追って説明していこうと思います。

KEY SENTENCE

[1] calc()の対応状況

[2] calc()の実装方法

[3] calc()の実用例

[1] calc()の対応状況

とりあえず一覧を。

IE	IE9よりサポート
Chrome	Chrome19より25まで-webkit-のベンダー識別子付きで先攻実装 Chrome26よりサポート
Firefox	Firefox4より15まで-moz-のベンダー識別子付きで先攻実装 Firefox16よりサポート
Safari	Safari6.0より-webkit-のベンダー識別子付きで先攻実装 Safari6.1, Safari7.0よりサポート
Opera	Opera15よりサポート
iOS	iOS6.0より6.1まで-webkit-のベンダー識別子付きで先攻実装 iOS7よりサポート
Android	Android4.4よりサポート

[2] calc()の実装方法

.{
width : 49% ; /* IE8以下とAndroid4.3以下用フォールバック */
width : -webkit-calc(50% – 25px) ;
width : calc(50% – 25px) ;
}

上記は、IE8以下とAndroid 4.3以下の標準ブラウザでは横幅49%が、calc()対応環境下では横幅50%-25pxが適応されます。これだけ見てもらえば分かる通り、グリッドレイアウトなんかでも重宝しそうですよね。

width, margin, padding, font-size, border-width, background-position, text-shadow, transform : rotate()などなどcalc()ファンクションは、CSS内で<長さ>、<周波数>、<角度>、<時間>、<数量>、<整数値> のいずれかの値を用いる場所ならどこでも使用可能です。

calc() 内での計算には以下の式が利用可能です。

+	加算
–	減算
*	乗算（引数の少なくとも1つは <数量> でなければならない。）
/	除算（右の引数は <数量> でなければならない。）

%とpxなど異なる単位同士での計算や、計算順序を決定するために括弧を用いることも、またcalc() 内部で別の calc() を用いることも可能です。

参照元：W3G

[3] calc()の実用例

実際にうちで使いそうなパターンを考えてみました。

positionのセンター配置

#sample {
position : relative ;
}
#sample>.class {
width : 50px ;
height : 50px ;
position : absolute ;
top : 48% ;
top : calc(50% – 25px) ;
top : -webkit-calc(50% – 25px) ;
left : 48% ;
left : calc(50% – 25px) ;
left : -webkit-calc(50% – 25px) ;
}

グリッドレイアウトの指定に

.row {
width : 100% ;
position : relative ;
}
.row:after {
content: ” ” ;
display: block ;

clear: both ;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, {
float : left ;
}
.col-1 {
width : 100% ;
}
.col-2 {
width : 50% ;
}
.col-3 {
width : calc(100% / 3) ;
}
.col-4 {
width : 25% ;
}
.col-5 {
width : 20% ;
}
.col-6 {
width : calc(100% / 6) ;
}