今回は、「calc関数」を使っているはずなのにWebサイトに反映されていないときの解決策を書き留めておく。
また、calc()が使えない古いWebブラウザへの対応方法も紹介する。
CSSの関数「calc()」のおさらい
まずは、使い方をさらっとおさらいしておこう。「そんなんわかってるよ」と思う人は飛ばしてもらって構わない。
さて、Webサイトのレイアウトを組み立てているとき、誰しも「ああ、算数の足し算引き算みたいに直感的に値を指定できたら面倒くさくないのに」と思ったことがあるだろう。正直私もそうだ。
それを実現してくれるのがCSS関数「calc()」である。
calc()の使い方
calcはこのように表記することができる。
.hoge-base {
width: 700px;
}
.hoge {
width: 100%;
}
.hoge-1 {
width: 100px;
}
.hoge-2 {
width: 225px;
}
.hoge-3 {
width: calc(100% - 100px - 225px);
}.hoge-3の幅は100%から100pxと225pxを引いた相対的な値となる。
つまり、「幅700pxの.hoge-base」にぴったり収まる「幅100%の.hoge」の中に絶対値pxと相対値%が混在している3つの要素を隙間なく並べることができるのだ。
hoge-1
100px
hoge-2
225px
hoge-3
「100% – 100px – 225px」%
上のデモを見るとよくわかるだろう。絶対的な値で指定された要素と、画面サイズによって幅が変わる相対的な要素を綺麗に並べることができた。
カッコ内で使える数学記号と数字の単位
ついでに「calc()」の半角括弧の中で使用できる記号と値も記載する。
まずは記号から見て行こう。
calc関数では、加減乗除の4種類を使うことが出来る。
使用できる記号については上の通り、小学校のときに習う算数が全部使えると覚えておこう。
数値もいくつか紹介しておく。
おおよそ全ての値を使うことができるが、すべてを列挙するのはキリがないので割合する。
カスタマイズの際によく使われているのはこのあたりだろう。
「px」と「s」といった、単位の概念が全く違うもの同士の計算は不可能だが、それを除けばすべて計算することが出来る。
だいたいこんなところだろうか。
ちょっとしたマメ知識
実は、「calc()」の括弧の中に括弧を入れることができる。
つまり、こんな式を作ることができる。
.hoge {
width: calc(100% - (200px - 50px + 100px) - (70px - 20px))
}このように、100パーセントから引きたいピクセルを計算する時にわかりやすくまとめたり、（A足すB）割る2といった式を作ったりできる。
calc()がおかしいときに確認したいこと
それでは、本題に移りたい。
calc()を使っているはずなのに、なぜか計算結果が反映されてない。デベロッパーツールで確認すると打ち消し線が引かれてプロパティが無効化されている……そんなときに見直すポイントを解説する。
半角スペースを開けるのを忘れている
一番多いのはコレ。数学記号と数字の間は常に半角スペースを開けなければならない。
.hoge {
width: calc(10px+600px-100px)
}.hoge {
width: calc(10px + 600px - 100px)
}間違った書き方と正しい書き方を比べてみたら一目瞭然だろう。忘れないようにしておこう。
掛け算・割り算のときに単位を付けている
これもよくありがちなミス。掛け算や割り算の「掛ける数」「割る数」には単位を付けてはいけない。
.hoge {
width: calc(100px / 2px)
}.hoge {
width: calc(100px / 2)
}違いをよく見くらべてほしい。
掛ける数・割る数に使用していいのは「後ろになんの単位も付けていないただの数字」のみだ。
掛け算に単位を付けていい場合
なお場合によっては、掛け算のときのみ掛ける数に単位を付けていい場合がある。
.hoge {
width: calc(100 * 2px)
}このように、掛けられる数に単位が無いときは掛ける数に単位を付けてもよい。
ただし、割り算の場合はこの場合でも成立しない。
どちらにせよ、掛ける数や割る数には単位を使っちゃいけないと覚えておいた方が間違いが少なくなる。
数字をゼロで割っている
あまり無いとは思うが、まれに打ち間違いでスラッシュの後ろをゼロにしてしまっていたりする。
.hoge {
width: calc(100% / 0)
}数字をゼロで割ることはできない（厳密にはいろいろな解釈があるがここではできないとしておく）ので気を付けよう。
ブラウザのバージョンがcalc()に対応していないときの書き方
もう流石に利用者はいないはずではあるが、calc()関数に対応していない古いWebブラウザのバージョンと、それらに対する対応方法を紹介しておく。
対応していないWebブラウザのバージョンのおおざっぱなまとめ
とりあえず、日本でよく使われている4つのブラウザを記しておく。
だいたいこの4つだろう。常識的に考えて使っている人はほぼいないはずだ。
古いブラウザにも対応する書き方
さて、本来なら古いブラウザのことなど考えなくてもよいだろう。
しかし、細かいことが気になってしかたがないときはこのように表記しよう。
.hoge {
width: 33.33%;
width: -webkit-calc(100% / 3);
width: -moz-calc(100% / 3);
width: calc(100% / 3);
}これが全てのブラウザに対応した書き方となる。今回は.hogeを全体の3分の1サイズにしたいときを仮定した。
CSSは下のものが上のものを上書きするという性質を持っている。そして、そもそも対応していないプロパティは反映されない。それらの性質を踏まえた書き方だ。
古いブラウザにも対応する方法がわかっただろうか？
私としては、スタイルシートを節約する面も含めて、ベンダープレフィックス付きのcalcは書かなくてもいいと考えている。
calc()を使うときに気を付けておきたいことまとめ
最後に、注意する点をまとめておいた。
必ず数字と記号の間には半角スペースを開けよう。
掛けたり割ったりするときは単位を付けないようにしよう。
ゼロで割らないようにしよう。
この3つに気を付けてcalc()関数を使おう。
ぼーっとしていると、打ち間違いがあったりするので。
今回は、Webサイトのレイアウトをデザインするうえで欠かせない「calc()」の説明を、忘備録の意味も込めてまとめておいた。
この記事が役に立てばうれしい。
