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

CSSのcalc()関数でプロパティ値を動的に計算する方法

CSSではcalc()関数を使うことで、プロパティの値を数式として動的に計算できます。%やpxのように単位が異なる値同士でも演算できるため、レスポンシブデザインや柔軟なレイアウトを作る際に非常に便利です。

calc()関数で使用できる演算子

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

注意点として、+と-を使う場合は演算子の前後に半角スペースを必ず入れてください。スペースがないと構文エラーになり、その宣言は無効となります。

実装例

次のコードは、要素の幅を「親要素の幅100%から100pxを引いた値」としてcalc()関数で指定した例です。ブラウザで実際に実行して、ウィンドウ幅を変えながら挙動を確認してみましょう。

<!DOCTYPE html>
<html>
  <head>
    <style>
      #demo {
        position: absolute;
        width: calc(100% - 100px);
        background-color: blue;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>見出し</h1>
    <div id="demo">これはサンプルです！</div>
  </body>
</html>

コードの解説

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

まとめ

calc()関数を活用すれば、固定値と相対値を組み合わせた柔軟なレイアウトを簡単に実現できます。主要なモダンブラウザで広くサポートされているため、実務でも安心して使用できます。

  1. CSSのperspectiveプロパティをアニメーションさせる方法を解説

    CSSのperspective（パースペクティブ）プロパティは、3D変換における奥行きの深さを定義するプロパティです。このプロパティにアニメーションを適用すると、視点の距離が変化することで、要素に動的な立体効果を与えることができます。perspectiveプロパティの基本perspectiveプロパティの値が小さいほど視点が要素に近づき、3D効果が強調されます。逆に値が大きいほど、遠くから見たような自然な奥行き表現になります。この値の変化を@keyframesで定義することで、アニメーションとして実装できます。実装例以下は、perspectiveプロパティにCSSアニメーションを適用するサンプ

  2. CSSのpadding-topプロパティでアニメーションを実行する方法

    CSSでは、padding-topプロパティもアニメーションの対象にすることができます。@keyframesルールの中でpadding-topの値を変化させることで、要素の上側の余白が滑らかに動くアニメーションを作成できます。実装のポイントアニメーションさせたい要素にanimationプロパティを設定します。@keyframes内で、進行度（例：30%）の時点でのpadding-topの値を指定します。アニメーション時間や繰り返し回数は自由に調整可能です。サンプルコード以下のコードでは、3秒間のアニメーションを無限に繰り返し、途中（30%の時点）でpadding-topが60pxまで変化します