- 公開日
- 更新日
CSS「calc()」があまりに便利すぎる件
こんにちは、クロコロールの熊田です。
今日はCSSで計算式を使える「calc()」を紹介します。
使い方
例)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.contents1 { width: calc(100px + 50px); } .contents2 { width: calc(1000px - 400px); } .contents3 { width: calc(300px * 3); } .contents4 { width: calc(100% / 3); } .contents5 { width: calc(50vw / 120 * 11); } |
指定できるデータタイプは<length>(距離), <frequency>(周波数), <angle>(角度), <time>(時間), <number>(実数), <integer>(整数)です。
加算・減算・乗算・除算が使えます。
特に割り切れない除算なんか便利ですね。
例えば子要素の幅が親要素の1/6だったのを1/7にしたい時は
1 2 3 |
.child { width: calc(100% / 7); } |
…と割る数を変更すればいいだけです。意味が明白な上いちいち計算しなくていいですし修正が容易になります。
異なる単位間でも計算できる
例)
1 2 3 4 5 6 |
.contents1 { width: calc(100% - 100px); } .contents2 { width: calc(50% + 10em); } |
px・%・em・rem・vh・vwなどあらゆる単位間の計算ができます。
便利にも程がありますね。
入れ子も可能
1 2 3 |
.contents1 { width: calc(100% - calc(10px / 3)); } |
もう何でもありか。
使えるプロパティ
width以外にもheight・padding・margin・font-size・background-positionなど単位を表すあらゆるプロパティに使えます。
対応ブラウザ
Opera mini以外のモダンブラウザは余程古いバージョンじゃなければサポートしていますね。
非サポートブラウザへの対応としては静的な値を別途指定しておくといいでしょう。
1 2 3 4 |
.contents1 { width: 140px; /* 非サポートブラウザ用 */ width: calc( 100% / 128 * 14 ); } |
まとめ
「calc()」が実力を発揮するのはやはりレスポンシブデザインの時ではないでしょうか。
実は自分はわりと最近までこの「calc()」を知りませんでした。それまではレスポンシブ案件の場合ひたすら「%」でコーディングしてました。
よくそれでやってこれたなと今となっては思います。
レスポンシブデザインが当たり前の昨今、「calc()」はコーディングに必須とも言えるでしょう。
それではみなさんも良きコーディングライフを。
The following two tabs change content below.
熊田 賢太郎
株式会社クロコロールのコーディングを担当。デジタルハリウッドを卒業後、クロコロールに入社。HTML、CSS、JavaScript、Jquery、PHPの言語を使用。現在は、WordPressエンジニアとして、Webサイト制作、既存サイトのカスタマイズやリニューアル、テーマの制作、サイトのWordPress化、カスタム投稿作成、保守などを担当。
最新記事 by 熊田 賢太郎 (全て見る)
- Google Mapのマーカーを好きな画像に変更する。 - 2024年1月15日
- ブラウザ別に適用させるCSSハック - 2023年12月26日
- RSSフィードが読み込めない!原因は… - 2021年11月10日