結構前から存在は知っていましたが積極的に使ってこなかったCSS関数calc()について調べてみました。
calc()って何？
値の設定を計算式で指定できるというCSSの3の関数です。
例えば3列のカード型のレイアウトを作るときに、従来なら下記のように描くところを、
.card{
width: 33.333%;
}
こう書くことが出来ます。
.card{
width:calc(100% / 3);
}
こちらの方が意味もわかりやすいし自分で計算する必要もありません。FlexboxやGrid Layoutと一緒に使うと他人の読解に優しいCSSが書けそうです。
他にも、paddingとbox-sizingで実現させていたような100%から余白を5px取りたいときなども、下記のような記述で実現させることが出来ます。
なんとcalc()は単位の違う値の計算もしれっとこなしてくれます。
.card{
/*1/3のサイズから10px引いた幅を指定。marginで両端に5pxの余白を設ける*/
width: calc(100% / 3 - 10px);
margin:0 5px;
}
現在ではメジャーなブラウザはほとんど対応しています。ちょっとAndroidがまだ不便そうな気もしますが時間の問題でしょう。
サポートブラウザの詳細はこちらでご確認ください。
ちなみに非サポートブラウザでは無視されるので心配な場合はフォールバックを設定しておくのが吉なようです。
.card{
width:33.333%;
width:calc(100% / 3);
}
それとまだIEとEdgeあたりで他のcssとの組み合わせによって生じるバグなどもあるようで、使うときにはブラウザチェックでちょっと気を付けた方が良いかもしれません。
calc()を使ったTips
一番使うのは先述した、100%をx等分したwidth設定だと思いますが、それ以外にも便利そうな使い方があります。
■画面幅に対するフォントサイズの設定
ビューポートに対して100vwに対してfont-sizeを設定。同じ仕様は他のやり方も出来ますがシンプルで素敵です。
html{
font-size: calc(100vw / 30);
}
■画面幅いっぱいの背景デザインで、innerを作るためのDOMを節約
たまにある背景は画面幅いっぱいなんだけど、コンテンツは800pxでセンタリングされてるデザインを実装する際に使える指定です。背景用とコンテンツ用で入れ子にしてコンテンツ用の方に幅指定＆センタリングかけて実装してましたがcalc()だとその必要もなくなります。
これの良いところはコンテンツの親要素で幅を指定していても、子要素だけ幅いっぱいのデザインに出来るところですね。今まで幅いっぱいにの部分だけわざわざ親要素と同列にしてて凄く面倒だったので…。
.contents{
/* 親要素の幅から解放 */
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);
/*親要素の幅分、中身をセンタリング*/
padding-left: calc(50vw - 50%);
padding-right: calc(50vw - 50%);
}
【参考サイト】
[CSS]「calc()」を使うとスゴイ便利！ページのレイアウト、要素やフォントのサイズ指定など実装テクニックのまとめ
今年お世話になったCSSはcalc()関数です。
CSSの便利な機能の「落とし穴」とその対策手法【新機能、そのまま使っていいいの？】
今回はこの辺で！
