CSS「calc」の使い方

11月になり、日にちが経ちますが…

気温もだんだん変化が感じられる頃、朝と夕は少し冷えるぐらいの気温になってきてますね…

木の葉っぱの色もだんだんと色が変わってきてますね。

街の周りを見回すとそろそろクリスマスシーズンの準備をしている店舗が見かけるようになりましたね。

秋の季節を感じられる頃、気温の変化の差が激しい中、インフルエンザ予防としてワクチンが不足しているみたいですが、体調管理はしっかりしてくださいね。

さてと、話題に戻して…

CSS「calc」の使い方

CSSで数学の四則演算(足し算・引き算・掛け算・割り算)を可能にする関数です。

calc()関数は現在ほとんどのメジャーブラウザにおいてサポートされています。

calc

デモ
https://developer.mozilla.org/ja/docs/Web/CSS/calc

よく使われる、レスポンシブ対応の中に「display:flex;」を使ったときに、子要素に「width:calc(100% / 3 – 10px);」に使われることが増えてきてるかと思います。

calc()」の使い方の注意事項があります。

四則演算を記述するときは間に半角を開けておいてください。

そのままくっついて入力すると反映ができませんので、気を付けてください。

世の中のWeb技術が日々に進歩しているので、技術を向上してお客様に満足を得られるように頑張っていきましょう。

ではまた!

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Leonard-Blogをもっと見る

今すぐ購読し、続きを読んで、すべてのアーカイブにアクセスしましょう。

続きを読む