menu
menu

キーワード検索

 

前月(5月)の人気記事トップ10

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 2 - ) 【CSS】CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  4. ( 4 - ) 【Mac】MacにInkscapeをインストール
  5. ( 9 ↑) 【jQuery】jQueryでドロップダウンメニュー
  6. (10 ↑) 【CSS】スマホサイト向け横にスクロールするナビゲーション
  7. ( 6 ↓) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( - ↑) 【CSS】レスポンシブデザインのブレークポイントは⁉
  9. ( 7 ↓) 【CSS】CSSだけでブロック要素の表示非表示(トグルボタン)
  10. ( 5 ↓) 【HTML5】スマホサイトの作成・基本編
このエントリーをはてなブックマークに追加

【CSS】CSSで関数が使えるって知ってました⁉️

【CSS】CSSでcalc()関数が使えるって知ってました⁉️

こんにちは(・∀・)

前回の【CSS】CSSでも変数が使えるって知ってました⁉に続いて、知ってました⁉️シリーズ第2弾。

「CSSでcalc()関数が使えるって知ってました⁉️」です。

calc()関数

calc()関数でCSSの値に計算式を入れることができます。値に「calc()」を記述したら「()」の中に式を記述します。


E {
  width(プロパティー): calc(10px + 5px)(計算式);
}

数値だけではなく「%」や「vw」や「vh」などの相対値や「px」などの絶対値などの単位を含めることもでき、異なる単位同士で計算することもできます。

四則演算

計算式は四則演算で計算します。

加算(足す)
+
減算(引く)
-
乗算(掛ける)
*
除算(割る)
/

注意点として、加算(+)と減算(-)の演算子の前後は必ずスペースで区切ります。

乗算(*)と除算(/)の演算子の前後のスペースは任意ですが、統一性を持たせる意味でもスペースで区切った方が良いと思います。


E {
  width: calc(10px + 5px);
}

calc()計算式のサンプルです。


.sample1 {
  width: calc(100vw + 20px);
}
.sample2 {
  width: calc(100vh - 20%);
}
.sample3 {
  width: calc(50% * 2);
}
.sample4 {
  width: calc(100px / 2);
}
計算順位

calc()関数の四則計算での優先順位は、
括弧「()」があれば、括弧「()」の中が最優先。
次に2乗や3乗などの累乗計算。
その次が「積」や「商」の計算(左から順)。
最後に、「和」や「差」を計算(左から順)。

次の例では1000px - 200 - 5という計算式になります。


E {
  width: calc(1000px - 10 * 20 - 10 / 2);
}

加算(+)減算(-)を優先させたい場合などに括弧「()」を使用します。


E {
  width: calc((1000px - 10) * (20 - 10) /2);
}

また、乗算(*)を使用する場合、1つは「数量」である必要があり、除算(/)を使用する場合、演算子の右の値が「数量」である必要があります。

calc()計算式の中にcalc()計算式を入れ子にすることもできます。


E {
  width: calc(1000px / calc(30% * 2));
}

が、単純な括弧「()」式と同じ意味になります。


E {
  width: calc(1000px / (30% * 2));
}
サンプルデモ

div.boxの横幅の計算を自動でお願いする。


.container{
  width: 100%;
  display: flex;
}
.container div{
  width: calc(100% / 3);
  height: 50px;
}
div.box1{
  background: lightblue;
}
div.box2{
  background: pink;
}
div.box3{
  background: lightgray;
}
Result
box1
box2
box3

 

上の3つのdiv要素(box1〜3)は「calc()」関数で計算して横幅を出しています。

可変なので親要素の幅(ブラウザ幅)を縮めても横幅を再計算して表示してくれます。

レスポンシブデザインでのレイアウトにぴったりな関数ですね。


参考

【CSS初心者入門】calc関数とは何?使い方も解説!

  • cal()関数 CSS3 四則演算
このエントリーをはてなブックマークに追加