CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのcalc()関数の使い方を徹底解説！動的な値の計算で柔軟なレイアウトを実現しよう

CSSのcalc()関数を使うと、プロパティの値を計算式で指定できます。パーセンテージやピクセルなど異なる単位を混在させて演算できるため、画面幅に応じた柔軟なレイアウトを簡単に実現できます。

calc()関数とは？

calc()は、CSS内で四則演算（+、-、*、/）を行うための関数です。例えば「幅いっぱいから固定の余白分を引いたサイズ」や「コンテナ幅に応じて可変する高さ」などを、JavaScriptに頼らずCSSだけで表現できます。

基本的な構文は以下のとおりです。

width: calc(100% - 100px);

この例では、親要素の幅（100%）から100pxを引いた値が要素の幅として適用されます。

使用例：calc()でレスポンシブな幅を指定する

次のコードでは、width: calc(100% - 100px) を使って、画面幅から100pxを差し引いた幅を持つボックスを作成しています。実際にコードを実行して、ブラウザのウィンドウ幅を変えながら挙動を確認してみてください。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #demo {
            position: absolute;
            width: calc(100% - 100px);
            background-color: blue;
            text-align: center;
         }
      </style>
   </head>
   <body>
      <h1>Heading One</h1>
      <div id = "demo">This is it!</div>
   </body>
</html>

コードのポイント

  • position: absolute; … 要素を絶対配置にしています。
  • width: calc(100% - 100px); … 親要素の幅から100pxを引いた値を幅に設定します。
  • background-color: blue; … 背景色を青にして、幅の変化が視覚的にわかるようにしています。

calc()を使う際の注意点

  • + と - の演算子の前後には必ずスペースが必要です。 例：calc(100% - 100px) は有効ですが、calc(100%-100px) は無効になります。
  • * と / の片方は数値である必要があります。 例えば calc(100px * 2) は有効ですが、calc(100px * 50%) は無効です。
  • ネスト（入れ子）が可能です。 calc(100% - calc(20px * 2)) のように、calc()の中に別のcalc()を書くこともできます。
  • 使用できる単位： px、em、rem、%、vw、vhなど、さまざまな単位を組み合わせられます。

まとめ

calc()関数を活用すれば、固定値と相対値を組み合わせた柔軟なレイアウトをCSSだけで実現できます。マージンやパディングの調整、グリッドレイアウトのカラム幅の計算など、応用範囲は非常に広いので、ぜひ日常のコーディングに取り入れてみてください。

  1. CSSのrotate()関数の使い方 – 要素を回転させる方法を解説

    CSSのrotate()関数とは？CSSのrotate()関数は、要素を回転させるための変換関数です。transformプロパティと組み合わせて使用し、指定した角度だけ要素を回転させることができます。引数には回転角度を指定します。単位はdeg（度）やrad（ラジアン）などが利用可能で、正の値を指定すると時計回りに、負の値を指定すると反時計回りに回転します。指定できる角度の単位deg（度）：360degで1回転rad（ラジアン）：約6.28rad（2π）で1回転grad（グラード）：400gradで1回転turn（回転数）：1turnで1回転使用例以下の例では、複数の段落要素を表示し、そのうちの

  2. CSS rgba()関数の使い方を解説！透明度付きの色指定方法と実例

    rgba()関数とはCSSのrgba()関数は、赤（Red）、緑（Green）、青（Blue）の3原色に加えて、アルファ（Alpha）チャンネルによる透明度を含めたRGBAカラーバリューを定義するための関数です。アルファ値は色の不透明度を表し、0.0〜1.0の範囲の数値で指定します。1.0が完全に不透明な状態、0.0が完全に透明な状態を意味します。基本的な構文は以下のとおりです。rgba(red, green, blue, alpha)red / green / blue：各色成分を0〜255の整数、またはパーセンテージで指定します。alpha：不透明度を0.0（完全に透明）〜1.0（完全に不