優れた 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 available area</div>
背景色が緑の場合、次のようになります。
親のサイズを縮小すると、次のようになります。
ここでの長所は、コンテンツの右端が、コンテンツを含む領域の中央から左に 100 ピクセルになることを常にわかっていることです。このように異なる値の型を組み合わせることができるため、ウェブ アプリケーションは、異なるサイズのデバイスで以前よりもはるかに細かくレイアウトを処理できます。
ミキシング単位
もう 1 つの優れた点は、異なる測定値の単位を組み合わせて結果のサイズを取得できる点です。たとえば、「em」単位と「px」単位を組み合わせて、現在のフォントサイズに応じたサイズを設定できます。
#bar {
height: calc(10em + 3px);
}
値の組み合わせの例については、こちらとこちらをご覧ください。
試してみる
calc() では、+、-、*、/ を使用して値の加算、減算、乗算、除算を行い、あらゆる可能性を実現できます。calc() は、CSS の長さまたは数値が使用できる場所で使用できます。また、近いうちに角度プロパティと周波数プロパティに calc() を追加する作業を進めています。長さの calc() プロパティは、Chrome 19（Dev チャンネルのビルド）では -webkit-calc プロパティを使用して使用できるようになりました。Firefox のバージョン 8 以降では -moz-calc プロパティを使用し、Internet Explorer バージョン 9 以降ではプレフィックスなしで利用できます。以下のコメント欄からご意見、ご感想をお寄せください。