HTML/CSS

コンテナ(インナー)から解放して幅いっぱいに要素を広げる

 

コンテナ内にある要素を横幅いっぱいに広げたい。という状況。

いろんなサイトを見ていると、セクションによって幅いっぱいに広がっている部分とそうでない部分があったり、柔軟に対応する必要があります。

今回は、コンテナ内にある要素を横幅いっぱいに広げる方法について紹介します。

 

ネガティブマージンを使って広げる

 

See the Pen
3カラムボックス+幅いっぱいの背景
by kei (@kei_01011)
on CodePen.


今回は、カード型ボックスの横並びレイアウトで、インナー内に収まっていますが、背景の要素のみが横幅いっぱいに広がっています。

※全画面で表示してご覧ください。

 

ここでポイントとなるのが以下のコード

margin:calc(50% - 50vw);

 

 

calc関数は、プロパティ値に計算式を使わせてくれる便利なやつです。

しかし、50%-50vwとは何事でしょうか?・・

 

calc(50% – 50vw)でコンテナから解放せよ

そもそも%とは、親要素を基準とした割合を表す単位です。

vw(ビューポート)は、ウィンドウの横幅を基準とした割合を表す単位。

 

この計算結果を左右のマージンに適用するものです。

翻訳すると、

「要素の横幅の半分から、ウィンドウの横幅の半分を引いた分マージンをとる」

という意味になりますね。

 

うん

 

ちょっと何言ってるかわからないですね。

 

例えば、ビューポート(ウィンドウの横幅)が1400px

親要素の横幅が1000pxとしましょう。

この場合の、50%-50vwは、「500px-700px」となりますね。

 

つまり、-200pxのネガティブマージンを左右に適用するということになり、コンテナから要素がはみ出して表示されるということです。

 

こちらのサイトがわかりやすく開設されています。