CSS3の「calc」を使うとwidth(幅)などに計算式を入れることができて便利

CSS3の「calc」を使うとwidth(幅)などに計算式を入れることができて便利
  • このエントリーをはてなブックマークに追加
  • 887

    follow us in feedly

CSSを使って幅を指定する時に、単純にpxや%表記で指定することはよくあると思いますが、CSS3の「calc」を使うと計算式を入れることができます。calcというのは英語で「演算」という意味ですね。

余談ですがgoogleで「calc」といれて検索すると、検索結果に電卓が出てきますよ。

スポンサーリンク

サポートブラウザは?

IEについても9からサポート対象です。他のChromeやsafariといった主要ブラウザについても全て対応済みなので使いやすいと思います。古いバージョンのブラウザに対しては-webkit-を付与することで利用できます。以下一例です。

/* 例 */
width: -webkit-calc(50px + 50px);
width: calc(50px + 50px);

calcの書き方について

計算自体は四則演算すべてできるようになっていて

足す +
引く
掛ける *
割る /

を使って計算することができます。これは普段の計算でもよく使うので簡単ですね。

calcの具体的な使い方

実際にいくつか例を元に使ってみたいと思います

基本的な計算

何か足したり、引いたりしたいという時にはこのような書き方になります。

See the Pen boGxoP by tatsuya nakafuji (@handywebdesign) on CodePen.

全て同じ幅になるように設定してみましたが、このように普段でも使うような計算式で数値を設定することができます。

パーゼンテージ(%)も使える

使えるのはpxや数値だけでなく、パーセンテージ(%)も使えます

See the Pen calcを使った実例2 by tatsuya nakafuji (@handywebdesign) on CodePen.

自分でわざわざ計算して指定する必要がない分、指定が楽になります。この書き方だと全体幅は100%で可変するため、その可変したサイズに合わせてboxの数値も動的に変わります。

かっこの入れ子も使える

通常の計算でもよく出てくる、入れ子の計算も同様に使えます。入れ子になる部分にもcalc表記を入れます。

See the Pen calcを使った実例3 by tatsuya nakafuji (@handywebdesign) on CodePen.

ビューポート幅の単位「vw」と組み合わせるともっと便利に

CSSの単位でvw(viewport width)というのがあるんですが、これを使うとビューポート幅に合わせた設定もできます

See the Pen calcを使った実例4 by tatsuya nakafuji (@handywebdesign) on CodePen.

基準となるviewport幅が100vwとなります。上の例だとその幅を50で割った数値を文字サイズに指定しています。なので幅にあわせて文字サイズが調整されます(幅が広くなると、文字も大きくなるという具合)スマホサイトに適してますね。

widthやfont-size以外にも使えます

widthやfont-size以外にもcalcは使えます。例のようにpaddingやbackground-position、他にもheightやtransformにも使えます。

/* 一例 */ 
padding: calc(1vw + 6px);
background-position: calc(100% - 10px) calc(100% - 30px);

length(距離)・frequency(周波数)・angle(角度)・time(時間)・ number(実数)・integer(整数)のCSSのデータ型で使用できるようになっているので、探せばまだまだ使えるものはあると思います。

というわけで、CSSで計算式を入れることができるcalcの使い方でした。ぜひ使ってみてください。

スポンサーリンク