calc()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
calc()
は CSS の関数で、 CSS のプロパティ値を指定する際に計算を行うことができるものです。 <length>
、<frequency>
、<angle>
、<time>
、<percentage>
、<number>
、<integer>
が利用できる場所ならば使用できます。
試してみましょう
構文
/* プロパティ: calc(式) */
width: calc(100% - 80px);
calc()
関数は1つの式を引数として取り、式の結果が値として使用されます。式は以下の演算子を組み合わせたもので、標準的な演算子の優先順位の規則を使用します。
式のオペランドは任意の <length>
構文の値にすることができます。式の中のそれぞれの値に異なる単位を使用することもできます。必要に応じて、計算の順番を設定するために括弧を使用することもできます。
メモ
+
演算子と-
演算子は前後にホワイトスペースを置く必要があります。たとえば、calc(50% -8px)
と記述した場合、パーセント表記と負の長さが連続しているものとみなされ、無効な式となるからです。calc(50% - 8px)
はパーセント表記、減算記号、長さの順に並んでいるものと解釈されます。また、calc(8px + -50%)
は長さ、加算記号、負のパーセント表記の順に並んでいるものと解釈されます。*
演算子と/
演算子には前後のホワイトスペースは必要ありませんが、こちらにもホワイトスペースを用いて記述ルールに一貫性を持たせておくことは認められており、推奨されています。- ゼロで除算を行うと、 HTML パーサーで生成されるエラーになります。
- 自動レイアウトおよび固定レイアウトのテーブルで列・列グループ・行・行グループ・セルの幅や高さに対してパーセンテージを含む数式を指定すると、
auto
が指定されたものとして扱います。 calc()
関数は入れ子にすることができ、内側のものは単なる括弧として扱われます。
形式文法
アクセシビリティの考慮
calc()
を使用してテキストの大きさを制御する場合は、一方の値が相対的な長さの単位になることを確認してください。
h1 {
font-size: calc(1.5rem + 3vw);
}
これによって、ページが拡大縮小されたときにテキストの大きさが変化します。
整数での使用
calc()
は <integer>
が求められる場面で使用することができ、その値は次のように、最も近い整数に丸められます。
.modal {
z-index: calc(3 / 2);
}
これによって最終的に .modal
は z-index
の値は 2 になります。
メモ: Chrome ブラウザーでは現在のところ、整数が求められる場面で calc()
から返される一部の値を受け付けません。例えば、結果が整数になる場合であっても割り算は受け付けません。すなわち、 z-index: calc(4 / 2);
は受け付けられません。
例
余白をつけてオブジェクトを画面に配置する
calc()
でマージン設定を持つボックス配置がしやすくなります。この例では CSS でウィンドウを横切るように広がるバナーを作ります。バナーの両側とウィンドウの縁は 40 ピクセル空けます。
.banner {
position: absolute;
left: 40px;
width: calc(100% - 80px);
border: solid black 1px;
box-shadow: 1px 2px;
background-color: yellow;
padding: 6px;
text-align: center;
box-sizing: border-box;
}
<div class="banner">これはバナーです!</div>
フォームフィールドの大きさを自動的に隅に合うように調整
calc()
はフォーム要素のサイズ変更にも利用できます。適切なマージンを維持しながら、コンテナの縁を突き破らないように、利用できるスペースいっぱいに広げます。
いくらかの CSS を見てみましょう。
input {
padding: 2px;
display: block;
width: calc(100% - 1em);
}
#formbox {
width: calc(100% / 6);
border: 1px solid black;
padding: 4px;
}
ここで、フォームはウィンドウの取り得る幅の 1/6 を使うように指定しています。それから、入力項目が必ず妥当なサイズを持つように再度 calc()
を使い、コンテナーの幅 - 1em の幅になるように指定します。次の HTML でこの CSS を使います。
<form>
<div id="formbox">
<label>何か入力:</label>
<input type="text" />
</div>
</form>
入れ子の calc()
と CSS 変数
calc()
で CSS 変数 を使用することもできます。以下のコードを見てみてください。
.foo {
--widthA: 100px;
--widthB: calc(var(--widthA) / 2);
--widthC: calc(var(--widthB) / 2);
width: var(--widthC);
}
すべての変数が展開された後、 widthC
の値は calc( calc( 100px / 2) / 2)
になります。この値が .foo の width プロパティに割り当てられたとき、内部にあるすべての calc()
は (入れ子の深さにかかわらず) 単なる括弧になり、width
プロパティの値は最終的に calc( ( 100px / 2) / 2)
、すなわち 25px
になります。要するに、calc()
の内部にある calc()
は単なる括弧と同等です。
仕様書
Specification |
---|
CSS Values and Units Module Level 4 # calc-func |
ブラウザーの互換性
BCD tables only load in the browser