CSS calc() の使い方徹底解説

CSSで柔軟なデザインを実現する際に便利な calc() 関数。
その基本的な使い方から、実際の活用例まで詳しく解説します。

1. calc() とは？

calc() は、CSSで算術演算を使用できる便利な関数です。
ピクセル（px）、パーセンテージ（%）、ビュー幅（vw）、エム（em）など、
異なる単位を組み合わせて計算できます。

例:

width: calc(100% - 50px);

上記では、全体の幅から50pxを引いた値が設定されます。

基本的な構文

calc() の基本的な構文は次の通りです：

calc(式)

サポートされる演算子。

• 加算（+）
• 減算（-）
• 乗算（*）
• 除算（/）

注意: 演算子の前後にはスペースが必要です。
以下は無効なコードの例です。

/* 無効なコード */
width: calc(100%-50px);

calc() の使用例

フォントサイズの調整

異なるデバイスや解像度に応じて、フォントサイズを動的に調整することができます。

font-size: calc(16px + 1vw);

基本のフォントサイズを16pxに設定し、デバイス幅の1%分を追加。

レイアウトでの幅や高さの計算

要素の親要素や他の要素と相対的なサイズを指定する場合に便利です。

例1: 固定値と割合の組み合わせ

width: calc(50% - 20px);

親要素の幅の50%から20pxを引いた幅を設定。

例2: 高さの計算

height: calc(100vh - 100px);

ビューポートの高さから100pxを引いた高さを設定。

マージンやパディングの動的計算

calc() を使うことで、動的に余白を計算できます。

padding: calc(10px + 2vw);

固定の10pxにビュー幅の2%を追加。

注意点とベストプラクティス

ブラウザサポート

calc() は主要なブラウザでサポートされています。
ただし、古いブラウザでは動作しない場合があるため注意が必要です。

演算子のスペース

演算子の前後には必ずスペースを入れるようにしましょう。

単位の混在

異なる単位を混ぜて使用する場合、どの単位で計算されるかを意識する必要があります。

実際のコード例

以下は、calc() を使ったレスポンシブなカードデザインの例です：

<div class="card">
  <h2>カードタイトル</h2>
  <p>カードの内容がここに入ります。</p>
</div>

.card {
  width: calc(100% - 40px);
  padding: calc(10px + 1vw);
  font-size: calc(14px + 0.5vw);
  margin: 20px auto;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
}

このコードでは、以下を実現しています。

カードの幅を親要素の100%から40px引いた値に設定

パディングとフォントサイズをビュー幅に応じて調整

まとめ

calc() を活用することで、固定値と柔軟な値を組み合わせたデザインが可能になります。
レスポンシブなデザインを効率的に実現するために、ぜひ活用してみてください。

Favorite