【calk】計算値で指定CSS-レスポンシブに便利
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);
}
ディスカッション
コメント一覧
まだ、コメントがありません