calc()関数がわからない

Question

HTML・CSSを使って1カラム全幅デザインを作ろうとしたときにこちらのサイトを参考にCSSを追加したのですが

margin:0 calc(50% - 50vw);

この部分がいまいち理解できません。
かっこの中でプロパティの値を計算式で実行することができることは調べて分かったのですが、全幅になる理由が分かりませんでした。
実際に全幅表示は出来たのですが、なぜそうなったか理解できていないので教えていただきたいです。
追加したコードは以下になります。

.container{
position:relative;
margin:0 calc(50% - 50vw);
overflow:hidden;
}

Comments

[m.ts10806]

html,cssはなるべく全てご提示ください

Answer 1

CSSの単位に関して学習すれば自ずと理解できるかと。
今回は、親要素が、bodyだったり、全幅の要素であれば、
.containerも全幅になりますが、
画面全幅より小さい要素が、親だった場合、親からはみ出ます。

• %

親の要素の横幅に対しての比率の大きさ（margin、paddingに当てた場合は、親の横幅に対しての比率となる。heightなどに当てた場合は、親の縦幅に対しての比率となる）

• vw

ビューポート（ブラウザのウィンドウ領域サイズ）の横幅に対しての比率の大きさ

つまり下記のようになります。

親要素： "width: auto"ないし"width: 100%"
横"margin"は、"50%"だが、"- 50vw"で相殺されるので、"0"となる
= 全幅
となる。

親要素： "width: 500px"で
ブラウザ横幅: "1000px"の場合
横"margin"は、"50%"（"250px"）だが、"- 50vw"で、"- 500px"となるので、
= 親横幅 + 500px
となる。
（画面横幅と同じ横幅になる）

つまり、親要素に対して、真ん中に持っていきたいが、
常に画面の横幅と同じ横幅にしておきたい、って時のテクニックと思われます。
ただし、画面に対して、常に真ん中にするには、
親要素も常に真ん中にしておく、（margin: auto;を効かせるとか）にしておかないと、
左寄りになって、左に大きくはみ出ることになるかと思います。