このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

calc()”関数CSS Values and Units Module Level 3 で追加

記事Jun. 16th,2021
計算式で値を表すCSSの関数、“calc()”について
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

calc()”関数

calc()”関数を使用するとCSSの値を加法(“+”)、減法(“-”)、乗法(“*”)、除法(“/”)を用いた数式で表すことができます。

calc()”関数は以下の値が使用できる場所で使用できます。

calc()”関数の引数となる数式の計算結果が値として使用されます。

calc()”関数を“calc()”関数や他の数学関数の中に入れ子にした場合には入れ子にされた“calc()”関数は括弧(“(”と“)”)として扱われます。

使用例

.width-100p { width: 100%;}
.width-100p-a50px { width: calc(100% + 50px);}
.width-100p-s50px { width: calc(100% - 50px);}
.width-100p-m2 { width: calc(100% * 2);}
.width-100p-d2 { width: calc(100% / 2);}
<p class="width-100p">
ほそやかに清げなる君たちの直衣姿。をかしげなる童女の、表の袴などわざとにはあらで、ほころびがちなる汗袗ばかり着て、卯槌・薬玉など長くつけて、高欄のもとなどに、扇さし隠して居たる。
</p>

<p class="width-100p-a50px">
薄様の草子のいとつややかにて、紐の吹きなびかされたる、いとをかし。
</p>

<p class="width-100p-s50px">
白き組の細き。帽額に白き札つきて、碇の緒、組の長きなどつけて引きありくも、をかしうなまめきたり。
</p>

<p class="width-100p-m2">
五月の節の菖蒲の立ち並み給へるに奉れる、いみじうなまめかし。取りて、腰にひきつけつつ、舞踏し、拝し給ふも、いとめでたし。
</p>

<p class="width-100p-d2">
紫の紙を包み文にて、房の君たちも、いとなまめかし。
</p>

ほそやかに清げなる君たちの直衣姿。をかしげなる童女の、表の袴などわざとにはあらで、ほころびがちなる汗袗ばかり着て、卯槌・薬玉など長くつけて、高欄のもとなどに、扇さし隠して居たる。

薄様の草子のいとつややかにて、紐の吹きなびかされたる、いとをかし。

白き組の細き。帽額に白き札つきて、碇の緒、組の長きなどつけて引きありくも、をかしうなまめきたり。

五月の節の菖蒲の立ち並み給へるに奉れる、いみじうなまめかし。取りて、腰にひきつけつつ、舞踏し、拝し給ふも、いとめでたし。

紫の紙を包み文にて、房の君たちも、いとなまめかし。

仕様書

定義されている仕様書
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告候補(CR) 作業草稿(WD)
calc()
定義なし

定義なし

定義あり

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク