CSSで親要素の幅を超えて子要素を画面幅いっぱいにする

0

スマートフォンのデザインではあまり要求されないのですが、PCのデザインのみたまに「ここだけ、幅いっぱいに背景を引いてほしい」という要望があります。レスポンシブでなければ、ただマイナスマージンを使用して広げてあげればOKです。しかし、今はレスポンシブでないのが珍しいですね。

子要素を親要素の幅を超えて画面いっぱいにするCSS

calcと幅の単位であるvwを使います。
上記を簡単に説明。

calc
レイアウトやサイズ指定に計算式を使えるようにしてくれる
vw
ウィンドウサイズからの割合を指定できる

サンプル

CODE

// html
<div style="background-color: rgba(255,255,0,1);width: 200px;margin: 20px auto">
    PARENT DIV
    <div class="over-width" style="background-color: rgba(255,0,255,.5)">
        CHILD DIV
    </div>
    PARENT DIV
</div>

// CSS
.over-width {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

 

使用上の注意

確かに画面幅いっぱいに子要素がなるのですが、注意点もいくつか。適用できない場合は、素直に親要素から表に出してあげたほうが早いと思います。

中心点が親要素の中心

つまり、親要素が画面幅の中央に無いと子要素もずれてしまいます。

スクロールバーの計算

縦に長いページだとブラウザ右にスクロールバーがでてしまいます。その分は計算してあげないと下部に横スクロールバーがでてしまいます。
一番外側の要素にoverflow: hidden;することでも横スクロールバーを回避できます。

POSITIONを使用した場合

positionを使用しても実現可能です。上記のような注意点はやはりありますが、コーディング上調整しやすい方を選択するといいと思います。

// position version
.over-width-position {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

 

CSS/SASSのおすすめ書籍

CSSやSCSSは基本がわかればあとはGoogle先生で調べた方が早いと思います。CSSの仕組みやSASSの使い方だけわかれば基本はOKです。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座
htmlの基礎から学べるのでおすすめ

Web制作者のためのSassの教科書
SASSの基本が学べます。

LINEで送る