//AdSenseにリンク

【calk】計算値で指定CSS-レスポンシブに便利

Contents
  1. CSS の値を指定する際に計算を行うことができるもの
  2. 使用例

CSS の値を指定する際に計算を行うことができるもの

width, margin, padding, font-size, border-width, background-position, text-shadow, transform : rotate()などcalc()ファンクションは、CSS内で<長さ>、<周波数>、<角度>、<時間>、<数量>、<整数値> のいずれかの値を用いる場所ならどこでも使用可能

足し算

width: calc(10px + 100px);

引き算

width: calc(100% - 30px);

掛け算　引数の少なくとも1つは <数量> 

width: calc(2em * 5);

割り算　右の引数は <数量>

width: calc(100% / 4);

%とpxなど異なる単位同士での計算や、計算順序を決定するために括弧を用いることも、またcalc() 内部で別の calc() を用いることも可能

使用例

％とpxやemなど組み合わせて使用可能

.content {
    float: left;
    width: calc(100% - 50px - 150px);
}
.item {
    font-size: calc(1em + 3px);
}

css