熊本県でWeb、EC、IoTなら株式会社クロコロール

Kuroko Blog

クロコブログ

CSS「calc()」があまりに便利すぎる件

こんにちは、クロコのケンです。
今日はCSSで計算式を使える「calc()」を紹介します。

使い方

例)

指定できるデータタイプは<length>(距離), <frequency>(周波数), <angle>(角度), <time>(時間), <number>(実数), <integer>(整数)です。
加算・減算・乗算・除算が使えます。
特に割り切れない除算なんか便利ですね。

例えば子要素の幅が親要素の1/6だったのを1/7にしたい時は

…と割る数を変更すればいいだけです。意味が明白な上いちいち計算しなくていいですし修正が容易になります。

異なる単位間でも計算できる

例)

px・%・em・rem・vh・vwなどあらゆる単位間の計算ができます。
便利にも程がありますね。

入れ子も可能

もう何でもありか。

使えるプロパティ

width以外にもheight・padding・margin・font-size・background-positionなど単位を表すあらゆるプロパティに使えます。

対応ブラウザ

各ブラウザの対応状況

Opera mini以外のモダンブラウザは余程古いバージョンじゃなければサポートしていますね。
非サポートブラウザへの対応としては静的な値を別途指定しておくといいでしょう。

まとめ

「calc()」が実力を発揮するのはやはりレスポンシブデザインの時ではないでしょうか。
実は自分はわりと最近までこの「calc()」を知りませんでした。それまではレスポンシブ案件の場合ひたすら「%」でコーディングしてました。
よくそれでやってこれたなと今となっては思います。

レスポンシブデザインが当たり前の昨今、「calc()」はコーディングに必須とも言えるでしょう。
それではみなさんも良きコーディングライフを。


The following two tabs change content below.

クロコのケン

株式会社クロコロールで主にコーディングを担当しています。 まだまだ見習いの身です…

«

»

CATEGORY

Google Photography MakeShop NEWS CSS/HTML Wordpress Amazon Yahoo!ショッピング Other