CSSの「calc()」が効いてないときに確認したいこと

CSS

今回は、「calc関数」を使っているはずなのにWebサイトに反映されていないときの解決策を書き留めておく。

また、calc()が使えない古いWebブラウザへの対応方法も紹介する。

スポンサーリンク

CSSの関数「calc()」のおさらい

まずは、使い方をさらっとおさらいしておこう。「そんなんわかってるよ」と思う人は飛ばしてもらって構わない。

さて、Webサイトのレイアウトを組み立てているとき、誰しも「ああ、算数の足し算引き算みたいに直感的に値を指定できたら面倒くさくないのに」と思ったことがあるだろう。正直私もそうだ。

それを実現してくれるのがCSS関数「calc()である。

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」。
    いちばん目にする単位である。
  • 相対的な値である「%」「em」。
    Webサイトのレスポンシブ化が標準となっている今ではこちらもよく目にする。
  • 角度の値のひとつである「deg」、秒の単位である「s」。
    こちらは:hoverエフェクトでよく使う。
  • なんの値も後ろに付けないただの数字
    つまり-3,-2,-1,0,1,2,3…etcと言った数字である。
    掛け算や割り算のときは必ずこれを使うので忘れないようにしよう。

カスタマイズの際によく使われているのはこのあたりだろう。

「px」と「s」といった、単位の概念が全く違うもの同士の計算は不可能だが、それを除けばすべて計算することが出来る。

だいたいこんなところだろうか。

ちょっとしたマメ知識

実は、「calc()」の括弧の中に括弧を入れることができる

つまり、こんな式を作ることができる。

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

間違った書き方と正しい書き方を比べてみたら一目瞭然だろう。忘れないようにしておこう。

なぜ半角スペースを開けて書かなければいけないのか疑問に思った人もいるだろう。

理由は単純で、「数字の前にプラスを付けた正の数値」と「数字の前にマイナスを付けた負の数値」が存在するからだ。

つまり、「calc(100%-10px)」と書いた場合、100パーセントとマイナス10ピクセルが連続していると見なされるので無効な式となってしまうのだ。

なお、掛け算の記号である「*(アスタリスク)」や割り算の記号である「/(スラッシュ)」では必要ない。しかし、数式に統一性を持たせることでうっかりミスを防ぐことができるため、半角スペースを開けて入力しよう。

掛け算・割り算のときに単位を付けている

これもよくありがちなミス。掛け算や割り算の「掛ける数」「割る数」には単位を付けてはいけない

間違った書き方
.hoge {
	width: calc(100px / 2px)
}
正しい書き方
.hoge {
	width: calc(100px / 2)
}

違いをよく見くらべてほしい。

掛ける数・割る数に使用していいのは「後ろになんの単位も付けていないただの数字」のみだ

「ただの数字」の正式な名称は、「numberデータ型」という。

「正・負の実数」「ゼロ」「前のゼロを省略した少数値」などが含まれる。

掛け算に単位を付けていい場合

なお場合によっては、掛け算のときのみ掛ける数に単位を付けていい場合がある

掛ける数に単位を使ってもいい例
.hoge {
	width: calc(100 * 2px)
}

このように、掛けられる数に単位が無いときは掛ける数に単位を付けてもよい

ただし、割り算の場合はこの場合でも成立しない

どちらにせよ、掛ける数や割る数には単位を使っちゃいけないと覚えておいた方が間違いが少なくなる。

数字をゼロで割っている

あまり無いとは思うが、まれに打ち間違いでスラッシュの後ろをゼロにしてしまっていたりする。

計算不可能な書き方
.hoge {
	width: calc(100% / 0)
}

数字をゼロで割ることはできない(厳密にはいろいろな解釈があるがここではできないとしておく)ので気を付けよう。

ゼロで割ることの正式名称は「ゼロ除算」という。

なんでゼロで割れないの?割ったらどうなるの?という疑問は様々なWebサイトであったり論文などで解説や議論がなされているので、詳しく知りたい場合は各自で調べてほしい。

そう言えば、最近阪神タイガースの糸井選手が「足してゼロで割る!」なんてことを言っていたことを思い出した。相変わらずな宇宙人ぶりである。

ブラウザのバージョンがcalc()に対応していないときの書き方

もう流石に利用者はいないはずではあるが、calc()関数に対応していない古いWebブラウザのバージョンと、それらに対する対応方法を紹介しておく。

対応していないWebブラウザのバージョンのおおざっぱなまとめ

とりあえず、日本でよく使われている4つのブラウザを記しておく。

  • Internet Explorer:8以前
    そもそも使っちゃいけないような気がする。
  • Safari:6以前
    古いiPhoneでインターネットサーフィンをしている人もいるかもしれない(快適とは程遠いと思うが)。
  • Chrome:25以前
    約7年前のバージョンになる。流石に無理がある。
  • Firefox:15以前
    アドオン共々バッサリ切り捨てる大規模なアップデートがあったため、バージョンを戻している人もいるかもしれない。
    しかしいくら何でも2012年のバージョンにまで戻す人はいないと思うが。

だいたいこの4つだろう。常識的に考えて使っている人はほぼいないはずだ。

Opera Miniは全バージョンで対応していない

古いブラウザにも対応する書き方

さて、本来なら古いブラウザのことなど考えなくてもよいだろう。

しかし、細かいことが気になってしかたがないときはこのように表記しよう。

ほぼ全ての場合に対応する書き方
.hoge {
	width: 33.33%;
	width: -webkit-calc(100% / 3);
	width: -moz-calc(100% / 3);
	width: calc(100% / 3);
}

これが全てのブラウザに対応した書き方となる。今回は.hogeを全体の3分の1サイズにしたいときを仮定した。

CSSは下のものが上のものを上書きするという性質を持っている。そして、そもそも対応していないプロパティは反映されない。それらの性質を踏まえた書き方だ。

コード解説
  • まずは、Opera Miniのように完全非対応のブラウザへの対処だ。
    これは仕方がないので33.33%と書くしかない。
  • ChromeやSafariは「-webkit-」をcalcの前に付ける。
    グーグル系ブラウザとアップルはこのベンダープレフィックスを使用する。
  • Firefoxは「-moz-」をcalcの前に付ける。
    モジラ系ブラウザはこのベンダープレフィックスを使用する。
  • 最後は普通に書いて終わり。

ベンダープレフィックスとは、正式実装前のプロパティを使うときに付ける接頭辞である。

ただし、超新しいものをバンバン取り込んでWebサイト作り込むことでもしない限り、通常は古いブラウザを最低限サポートするために使うことのほうが多いだろう。

そして、WebサイトのAMP化が推し進められている今、ベンダープレフィックスをゴテゴテ付けることはスタイルシートの容量を大きくする原因にもなってしまう

なので、最低限の使用に留めておきたい。

古いブラウザにも対応する方法がわかっただろうか?

私としては、スタイルシートを節約する面も含めて、ベンダープレフィックス付きのcalcは書かなくてもいいと考えている。

calc()を使うときに気を付けておきたいことまとめ

最後に、注意する点をまとめておいた。

必ず数字と記号の間には半角スペースを開けよう

掛けたり割ったりするときは単位を付けないようにしよう

ゼロで割らないようにしよう

この3つに気を付けてcalc()関数を使おう。

ぼーっとしていると、打ち間違いがあったりするので。


今回は、Webサイトのレイアウトをデザインするうえで欠かせない「calc()」の説明を、忘備録の意味も込めてまとめておいた。

この記事が役に立てばうれしい。