HOME

ABOUT

ARCHIVES

CONTACT

css3

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) ;
}

うちで使うとしたら上記2つ場合くらいでしょうか。
微調整に非常に有効そうなので、日々使いどころを探していきたいですね。
使い方が増えた場合はまた更新していきます。