calc() function

概要

calc() を使うと、px・%・em・vw など異なる単位を混在させた計算式をCSSプロパティの値として記述できる。レスポンシブレイアウトでの余白計算や、固定幅と可変幅の組み合わせなど、従来JSで行っていた計算をCSSだけで完結できる。ネストも可能で、他のCSS関数内でも使用できる。

対応ブラウザ

基本構文

.sidebar-layout {
  /* サイドバー幅を引いた残りをメインに */
  width: calc(100% - 250px);
}

.centered-box {
  /* ビューポート中央に配置 */
  margin-top: calc(50vh - 200px);
}

.fluid-padding {
  /* 最小16px、ビューポート幅に応じて拡大 */
  padding: calc(1rem + 2vw);
}

実務での使いどころ

• レイアウト計算

  固定幅のサイドバーを差し引いた残りの幅をメインコンテンツに割り当てる。

• レスポンシブな余白

  remとvwを組み合わせて、画面サイズに応じた流動的なパディングを設定する。

注意点

アクセシビリティ

• calc() で算出したフォントサイズが小さくなりすぎないよう、最小サイズに配慮する。

参考リンク

• MDN Web Docs — calc()
• Can I use — calc()