CSS calc関数入門：動的なレイアウトとデザインの秘密兵器

calc関数とは

calc関数とは

calc()関数とは、CSSのプロパティに計算式を指定できる関数です。
例えば、要素の幅をパーセントからピクセルを引いた値にしたり、異なる単位を組み合わせたりできます。calc()関数は、length（距離）、frequency（周波数）、angle（角度）、time（時間）、 number（実数）、integer（整数）などのデータタイプに対応しています。

CSS変数入門：変数で変わるCSSの世界

CSS変数とはCSSのプロパティの値を変数として定義し再利用できるようにする機能です。CSS変数はカスタムプロパティとも呼ばれます。CSS変数を使うとコードの可読性やメンテナンス性が向上します。

calc()関数の基本的な使い方

/* calc()関数はcalc(式)という形で書きます */
/* 要素の幅を100%から50px減算した値に設定します */
width: calc(100% - 50px); 

/* 式には+,-,*,/の四則演算が使えます */
/* 要素の高さを画面の高さの50%に10emを加えた値に設定します */
height: calc(50vh + 10em);

/* 式の中には括弧を入れ子にすることもできます */
/* 要素の上下左右のマージンを、画面の幅から960pxを減算した値を2で割った値に設定します。これにより、要素は中央に配置されます */
margin: calc((100vw - 960px) / 2);

/* 式の中にはCSS変数を使うこともできます */
/* 定義したCSS変数 --gap を 20px に設定し、要素の上下左右のパディングを --gap の2倍に設定します。これにより、要素のパディングは40pxになります */
--gap: 20px;
padding: calc(var(--gap) * 2);

calc()関数を使ってレスポンシブなレイアウトやサイズ指定をする

以下では、calc()関数を使ったサンプルコードとその解説です。

例1: 要素を中央寄せする

/* 親要素にposition: relative;を指定します */
.container {
  position: relative;
  width: 80%;
  height: 500px;
  margin: 0 auto;
  border: 1px solid black;
}

/* 子要素にposition: absolute;とcalc()関数を使って中央寄せします */
.box {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: green;

  /* topとleftに親要素の高さや幅の半分から自分の高さや幅の半分を引いた値を指定します */
  top: calc(50% - 100px);
  left: calc(50% - 100px);
}

See the Pen Untitled by k2zo_o (@k2zo_o) on CodePen.

例2: フォントサイズをビューポート幅に応じて変化させる

/* ルート要素のfont-sizeにビューポート幅いっぱい（100vw）を分子にして計算式を指定します */
html {
font-size: calc(100vw / 30);
}

/* 子要素のfont-sizeにrem単位を使って相対的なサイズ指定をします */
h1 {
font-size: 2rem;
}

p {
font-size: 1rem;
}

See the Pen css-calc2 by k2zo_o (@k2zo_o) on CodePen.

例3: vw, vh, vmin, vmaxと組み合わせて使う

/* vwはビューポート幅の1%に相当する単位です */
div {
width: calc(50vw + 100px); /* ビューポート幅の半分に100px足した値 */
}

/* vhはビューポート高さの1%に相当する単位です */
div {
height: calc(50vh - 50px); /* ビューポート高さの半分から50px引いた値 */
}

/* vminはビューポート幅と高さのうち小さい方の1%に相当する単位です */
div {
font-size: calc(5vmin + 10px); /* ビューポート幅か高さの小さい方の5%に10px足した値 */
}

/* vmaxはビューポート幅と高さのうち大きい方の1%に相当する単位です */
div {
border-radius: calc(10vmax - 20px); /* ビューポート幅か高さの大きい方の10%から20px引いた値 */
}

See the Pen css-cal3 by k2zo_o (@k2zo_o) on CodePen.