ウサヲブログ  HOME

ウェブ制作に関わる備忘録などを綴ります

このページの位置: HomeCSS「CSSのcalc()を使うことについて」の記事

CSSのcalc()を使うことについて

ウサヲです。
いざって時に助かるものをアップして残しておこうシリーズ。
calcを使うことについて。

calcとは

四則演算を可能にし、width やmarginなどのサイズ指定を柔軟に設定できる優れモノ

基本の使い方

  • calc()の中に計算式を入れる
  • 計算式の中に(カッコ)が使える
  • 計算の優先基準は学校で習うのと同じ
  • 足し算と引き算の演算子の前後には必ず空白を入れること
  • 単位も使える
  • 異なる単位の計算もできる

使える単位

px, %, em, rem, vw, vhなど。場合によるが単位無しで数値もOK

どんな時に使う?

  • 計算式の右辺または左辺のうち、一方が固定長であり、もう一方が可変長である時にとても役立つ。(まどろっこしい言い方だな)
  • あるブロック要素のwidth(など)を設定する時、のmarginを除いた(あるいは加えた)エリアをwidth(など)として設定したい時とか。
  • レスポンシブデザインにも対応できるようにする時に、vwを使いつつ常に一定のmarginを設定したい時とか。

・・・ひどい表現だな、わかるかウサヲめ。
これはもう実戦でじゃんじゃん使ってその便利さを味わってモノにするしか習得することはできないであろう・・。

コメントを残す

日本語でお願いします。「テスト投稿」のような短い文は無視されます。

TOP