美しい CSS レイアウトを作成する際は、ウェブ アプリケーションに配置するすべての要素にサイズを割り当てることから始めます。サイズ指定の単位を組み合わせてサイズを指定できる機能は、ユーザーからのリクエストが特に多かった機能の一つです。たとえば、領域の 50% と固定のスペース（10 px など）を予約できると便利です。calc() プロパティを使用すると、今すぐその設定を行うことができます。この機能は、長さや数値が使用されるすべての場所で使用できます。たとえば、配置や rgb() の色値に使用できます。スタイルシートでさまざまな用途に使用できます。
calc() でできること
calc() プロパティは、スタイルシート内の CSS の長さや数値の任意の場所で使用できます。
レイアウトをより柔軟にするための主な機能は次の 2 つです。
- 割合と絶対値を混在させる。
- サイズ単位を混在させる。
パーセントと絶対単位の組み合わせ
パーセンテージと絶対単位を組み合わせた例を見てみましょう。使用可能な領域の 50% から固定数のピクセルを差し引いて割り当てる場合、次のように記述します。
#foo {
width: calc(50% - 100px);
}
<div id=">;foo"Always 100 pixels less than half the avai<labl>e area/div
背景色が緑の場合、次のように表示されます。
親のサイズを縮小すると、次のように表示されます。
この方法の利点は、コンテンツの右端が常に、そのコンテンツを含む領域の中央の左側から 100 ピクセル離れていることです。このように異なる値型を組み合わせることで、ウェブ アプリケーションは、さまざまなサイズのデバイスのレイアウトを、以前よりもはるかに細かく制御して処理できるようになります。
混合単位
また、異なる測定単位の単位を組み合わせて、結果のサイズを取得することもできます。たとえば、「em」と「px」の単位を組み合わせて、現在のフォントサイズを基準としたサイズを設定できます。
#bar {
height: calc(10em + 3px);
}
値を組み合わせる優れた例については、こちらとこちらをご覧ください。
試してみる
calc() では、+、-、*、/ を使用して値の加算、減算、乗算、除算を行うことができ、さまざまなことが可能になります。calc() は、CSS の長さや数値を使用できる場所であればどこでも使用できます。また、角度と周波数のプロパティに calc() を追加する予定です。長さの calc() プロパティは、Chrome 19（Dev チャンネル ビルド）では -webkit-calc プロパティを使用して、Firefox バージョン 8 以降では -moz-calc プロパティを使用して、Internet Explorer バージョン 9 以降では接頭辞なしで使用できます。ご意見やご感想がございましたら、以下のコメント欄からお寄せください。