【CSS入門】calc関数を使って計算式で値を指定

CSSのcalc() 関数は、異なる単位を持つ値の計算を行うことができる非常に便利な機能です。レスポンシブデザインをはじめ、さまざまな場面で役立つこの関数の使い方を詳しく解説します。

calc()関数の基本

calc() 関数を使用すると、CSS内で直接計算式を書くことができます。これにより、要素のサイズや間隔を動的に調整することが可能になります。基本的な構文は次の通りです。

element {
    property: calc(expression);
}

ここで expression は、加算（+）、減算（-）、乗算（*）、除算（/）を含む計算式です。

使用例: 動的なレイアウト調整

例えば、ビューポートの幅に基づいて幅を調整する場合、以下のように記述します。

.container {
    width: calc(100% - 20px);  /* コンテナから20ピクセルを引いた幅を設定 */
}

このコードは、コンテナの幅をビューポートの幅から20ピクセル引いたサイズに設定します。これは、ページに常に一定のマージンを保ちながら、レスポンシブなレイアウトを実現するのに役立ちます。

使用例: 複雑なレイアウト計算

calc() 関数は、複数の計算を組み合わせることも可能です。たとえば、2つの異なる単位を組み合わせた高度なレイアウト調整に使用できます。

.header {
    height: calc(100vh - 50px + 5%);
}

ここで 100vh はビューポートの高さの100%を意味し、50px と 5% はそれぞれ固定ピクセルと追加のパーセンテージを示しています。

ブラウザの互換性

calc() 関数はほとんどのブラウザでサポートされていますが、使用する際には、古いブラウザでの互換性を確認することが重要です。特にIE9以下ではサポートされていないため、フォールバックのスタイルを用意することが推奨されます。

まとめ

calc() 関数はCSSで直接的な計算が必要な場合に非常に便利です。動的なレイアウト調整や複雑なデザインの実現に役立つこの機能を活用して、より洗練されたスタイルを実現しましょう。デザインの可能性を広げ、ユーザーに適応するウェブページを作成するために、この強力なツールを最大限に活用してください。