Jun. 16th,2021
＃
“calc()”関数
“calc()”関数を使用するとCSSの値を加法(“+”)、減法(“-”)、乗法(“*”)、除法(“/”)を用いた数式で表すことができます。
“calc()”関数は以下の値が使用できる場所で使用できます。
- “<length>”値
- “<frequency>”値
- “<angle>”値
- “<time>”値
- “<flex>”値
- “<resolution>”値
- “<percentage>”値
- “<number>”値
- “<integer>”値
“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>
ほそやかに清げなる君たちの直衣姿。をかしげなる童女の、表の袴などわざとにはあらで、ほころびがちなる汗袗ばかり着て、卯槌・薬玉など長くつけて、高欄のもとなどに、扇さし隠して居たる。
薄様の草子のいとつややかにて、紐の吹きなびかされたる、いとをかし。
白き組の細き。帽額に白き札つきて、碇の緒、組の長きなどつけて引きありくも、をかしうなまめきたり。
五月の節の菖蒲の立ち並み給へるに奉れる、いみじうなまめかし。取りて、腰にひきつけつつ、舞踏し、拝し給ふも、いとめでたし。
紫の紙を包み文にて、房の君たちも、いとなまめかし。
＃
