Containerを使っていても要素を幅いっぱいに表示する方法

親要素から子要素をはみ出させて画面いっぱいに表示をしたい場合の方法について解説

bootstrapを使っている場合やwordpressのテーマで bootstrapが使われている場合ページを作ろうとすると親要素（.container）がある、という場合に背景を画像いっぱいに出そうとしてもうまくいかないことがあります。

本当は幅いっぱいに背景や要素を表示したいけれど、要素がコンテナ内に入っている・・。子要素をはみ出させ画面いっぱいに表示したい！と思った事ありませんか？

一部のセクションにこんな風に背景画像や色をいれていきたいとします。

[speech_balloon_left1 user_image_url=”https://notebook.starrylabo.com/wp-content/themes/rebirth_free001/img/common/no_avatar.png” user_name=””]他の部分はコンテナ内に収めたいけどここだけは背景を幅いっぱいにしたいな[/speech_balloon_left1]

通常、コンテンツを内包している要素には　width を数値で指定します。
親要素に width が指定されていると、子要素に .container-fluid クラスを追加したり width: 100%; を指定しても、下記のようにコンテンツと画面幅の間に余白ができてしまいます。

[speech_balloon_left1 user_image_url=”https://notebook.starrylabo.com/wp-content/themes/rebirth_free001/img/common/no_avatar.png” user_name=””]背景の幅がコンテナ内に入っちゃった・・[/speech_balloon_left1]

これは子要素が親要素の 『width』 の影響を受けてしまっており、親要素の幅の内でしか子要素を表示させる事が出来ないためなのです。

bootstrap の .container の画面表示幅は、初期値は最大1170pxに設定されているので、子要素は最大1170pxに収まり背景を画面いっぱいに表示させる事ができません。

今回紹介する方法を使う事で子要素を親要素からはみ出して画面いっぱいに表示させる事が可能になります。

そんな時に使える、子要素を幅いっぱいに表示する方法便利な方法をご紹介します。

コピペでOK！HTMLとCSS

HTML

<div class="container">
　<div class="fluid"> 画面いっぱいにする親要素
 　　<div class="container fluid-inner"> 
 　　表示コンテンツ
 　　</div>
　</div>
</div>

css

.fluid{
 width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background-img(url:)
    padding: 0 20px;
}
.fluid-inner{
 margin: 0 auto;
 padding: 0 10px;
}

これで幅いっぱいに画像が表示されます。

まとめ

他にも色々方法はあると思いますがこちらは比較的簡単な方法です。クラスを指定してコードをコピペするだけなのでコードについてよく分からない方でもも簡単に設定できます。コンテナの中に入っちゃうけど要素を画面いっぱいで使いたいよ～！という方は一度試してみてください。

「Containerを使っていても要素を幅いっぱいに表示する方法」でした。