要素の幅を画面いっぱいにしたり、親要素より広くする方法(CSS)

CSS

サイトを作っていくなかで、
この部分だけ背景色変えたいんだよねー、とか
このスライダーは幅100%にしてね、のようなリクエストがあったときに
「あ、、そもそも親要素が幅100%じゃない、、」という場面てあると思います。

そんな時に使えるCSSテクニックをご紹介します!

子要素の幅を画面幅いっぱいにする方法

「width: 100vw;」「margin: 0 calc(50% – 50vw);」を指定する

See the Pen Untitled by Fuu (@fuw) on CodePen.

「width: 100vw;」の解説

100%だと親要素の幅いっぱいまでしかなりませんが、「vw」(ビューポートの幅を基準とする単位)を使って、100vwとすると親要素関係なく画面幅いっぱいにまで広げられます。
ちなみに10vwは画面幅の10%ということになります。

「margin: 0 calc(50% – 50vw);」の解説

一言でいうと「親要素幅の50%分右にずらしてから、画面幅の50%分左にずらしている」状態です。

①まず「50%」を指定して、親要素幅の50%分右側にずらします。
こうすることで、左の始点が画面の半分の地点になります。

②次に「50vw」を指定することで、画面幅の50%分左にずらして左右中央の位置にしています。


画面幅いっぱいではなく固定値にする方法

「max-width」で幅指定する

「親要素との幅の差の半分」をマイナス値にして左右余白に設定する

サンプルの場合、親要素が「width: 70vw;」で子要素が「max-width: 90vw;」なので
「(90vw – 70vw) ÷ 2 = 10vw 」となり、これをマイナス値にして設定すればOKです。

See the Pen Untitled by Fuu (@fuw) on CodePen.

タイトルとURLをコピーしました