calcを使ってCSSだけで計算しよう!

この記事は約1分で読めます。
広告

「1920px」を2で割ると。。。。僕は馬鹿だからすぐには答えは出ない。
——–12分経過———-
「960px」か。
ふぅ。
頭使いすぎちゃったから一回寝なきゃだな。
こんな頭やだ。。。
嫌だからCSSに計算してもらおう!
ドラえもん的にCSSの使って計算してもらうんだ。
例えばさっき12分かかった「1920px」を2で割るのはCSSでこう書ける。

.doraemon {
  width: calc(1920/2);
}

これで「width: 960px」と同じ感じになる。
この「calc」が最も便利に使えるのが前回の記事の「flex」を使う時。
割り切れない数や、計算が面倒な数、なんでも「calc」で書けちゃう。
例えば4つの要素を横並びにする時、下記みたいな感じで「%」を式の中に入れても計算できちゃうのが便利で嬉しいよね。

.flex li {
  width: calc(92%/4);
}

対応状況はこんな感じ。
全部OK(ie11)以外。
もう最近ie11を気にしなくていいと思っているけど実際どうなんだろう?

エンデ・バタローをフォローする
CSS

埼玉県北本市に住み始めて2年目。

前は東京都の京王線沿線に。
その前は神戸の三宮に。
その前は名古屋の八事霊園の近くに住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30代(男)です。

フロントエンドを始めて9年目になります。
最近は、ずっとwordpressをいじっており
エディタはVSCodeに乗り換え、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
広告
初めてのブログ

コメント

タイトルとURLをコピーしました