「calc()」の利点

pxや、%, em, rem, vw, vhなどの相対単位を使っても、
異なる単位間で計算することができる「calc()」での使用法です。

「calc()」は2つの利点があります。
1.異なる単位で計算することが可能です。例えば、相対単位(vw, vhや%),
絶対単位(px)を組み合わせることができます。
2.ブラウザでの値が動的になり、ビューポートの変更に合わせて適応できます。

.exsample{
    width: calc(100% - 10px);
}

calc()」の実装例: 要素のセンタリング

要素をボックス内で上下左右、中央にセンタリングすることができます。

.exsample {
    position: absolute
    top: calc(50% - 100px);
    left: calc(50% - 100px);
}

上記の例では縦、横ともに100pxのボックスの場合上下中央の配置となります。

admin

cl0606

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です