CSS3、calc()を使えば、長さ、数量、角度などを計算式で指定することができる

2017年9月17日

幅や高さを指定する場合「パーセントからpxを引きたい」といったようなことができる夢のような呪文です。(大げさ)

実際に当サイトで使用しているCSSがこちら

CSS

  1. .l-body {
  2.     display: -webkit-flex;
  3.     display: flex;
  4. }
  5. .l-content {
  6.     width: calc(100% – 240px – 1em);
  7.     max-width: 780px;
  8. }
  9. .l-sidebar {
  10.     width: 240px;
  11. }

サイドバーの領域は240px固定にし、メインのコンテンツエリアは画面サイズにもよりますが100%からサイドバーの領域とマージン分を引いたサイズになるように指定しています。

calc()内での計算には + – * / が使用できます。
calc()内でさらにcalc()を使用したり、()を使用することもできます。

参考:Can I use