• Home
  • Web制作
  • CSSの「calc関数」を使いこなす！計算いらずでレスポンシブも自由自在

CSSの「calc関数」を使いこなす！計算いらずでレスポンシブも自由自在

schedule update
Tags: CSS

CSSの「calc関数」とは？計算式でスタイルを指定できる！

Webサイト制作において、CSSはデザインの要となる要素の一つです。その中でも、近年注目を集めているのが「calc関数」です。

calc関数は、その名の通りCSSの値に計算式を適用できる関数です。これにより、従来はJavaScriptなどを用いなければ実現できなかったような、動的なスタイル指定が可能になります。

例えば、要素の幅を「画面幅の半分から100px引いた値」に設定したい場合、従来であればJavaScriptで画面幅を取得し、計算結果をCSSに反映させる必要がありました。しかし、calc関数を用いることで、CSSのみでこの処理を実現できます。

calc関数のメリット

calc関数を用いるメリットとしては、以下のような点が挙げられます。

  • コードの簡略化：JavaScriptなどを用いることなく、CSSのみで動的なスタイル指定が可能になるため、コードの簡略化に繋がります。
  • 保守性の向上：計算式をCSSに記述することで、後から見た際にもコードの意味を理解しやすくなるため、保守性の向上が見込めます。
  • レスポンシブデザインへの対応：画面幅に応じて要素のサイズを柔軟に変更できるため、レスポンシブデザインの実装に役立ちます。

calc関数の基本的な使い方

calc関数の基本的な構文は以下の通りです。

/* プロパティ名: calc(計算式); */

/* 例 */
width: calc(100% - 20px);

calc関数のカッコ内に計算式を記述することで、その計算結果がCSSのプロパティ値として適用されます。

使用できる演算子

calc関数で利用できる演算子は以下の通りです。

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

使用できる単位

calc関数では、px、%、em、rem、vw、vhなどの単位を組み合わせて計算式を記述することができます。

calc関数の活用例

calc関数は、以下のような場面で活用できます。

1. 要素の幅や高さを動的に変更する

画面幅に合わせて要素の幅を調整する場合などに便利です。

.content {
  width: calc(100% - 300px); /* 画面幅から300px引いた幅 */
}

2. 余白を均等にする

複数の要素を横並びに配置する際に、要素間の余白を均等にしたい場合などに便利です。

.item {
  width: calc((100% - 60px) / 3); /* 3カラムの場合 */
  margin: 0 15px;
}

3. レスポンシブデザインに活用

画面幅に応じて要素のサイズや配置を変更するレスポンシブデザインの実装に役立ちます。

@media screen and (max-width: 768px) {
  .content {
    width: calc(100% - 60px); 
  }
}

calc関数使用時の注意点

便利なcalc関数ですが、いくつか注意点があります。

  1. 演算子と数値の間にはスペースを入れる

    /* 正しい例 */
width: calc(100% - 20px);

/* 間違った例 */
width: calc(100%-20px);

  2. 除算では、除数は必ず数値である必要がある

    /* 正しい例 */
width: calc(100% / 3);

/* 間違った例 */
width: calc(100% / (100% / 3));

  3. 互換性に注意する

    古いブラウザでは、calc関数がサポートされていない場合があります。

まとめ

CSSのcalc関数を活用すれば、複雑な計算もコード上で簡単に表現できます。本記事で紹介した活用例を参考に、ぜひcalc関数を使いこなして、より柔軟で表現力豊かなWebサイト制作に役立てていきましょう。

関連記事