Coding Methodology
こんなときは！背景をウィンドウ幅100%に広げる3つのCSSパターン
2022 / 09 / 29
コンテンツエリアは幅1000pxだけど背景はウインドウ幅いっぱいに伸びているようなデザインってことよくありますよね。
そんな時に使えるCSSのテクニックを3つ紹介したいと思います。
セクションの区切りとして背景色を分けるデザインは多いですよね。なるべくシンプルで分かりやすく作りたいところですが、コンテンツ幅を作りつつ背景を付けなければならないのでどういう構造にするか悩ましいところです。
1. シンプルに実装するなら
.bg-area-1 {
padding-inline: calc((100vw - 1000px) / 2);
background-color: lightgreen;
}
こちらはwidthを指定せずに左右のpaddingで幅を作っています。上記は1000pxの場合ですが、シンプルで使い勝手がいいです。
borderやbackgoundで自由に装飾が可能です。
2. 親要素で幅が決められている子要素にするなら
main {
width: 1000px;
margin-inline: auto;
}
main > .bg-area-2 {
position: relative;
inset-inline: 50%;
width: 100vw;
margin-inline: -50vw;
background-color: lightyellow;
}
こちらは幅が決まっている親要素の中の子要素をウインドウ幅100%にするテクニックです。子要素のまま幅を100%に引き伸ばすことができます。構造を変えずに画像などを100%幅に引き伸ばしたい時に重宝します。
また、下記のようにテクニック1と組み合わせることでコンテンツ幅も作ることが可能です。
main {
width: 1000px;
margin-inline: auto;
}
main > .bg-area-2 {
position: relative;
inset-inline: 50%;
width: 100vw;
margin-inline: -50vw;
padding-inline: calc((100vw - 100%) / 2);
background-color: lightyellow;
}
Demo
3. 背景のみを広げるなら
main {
width: 1000px;
margin-inline: auto;
}
main > .bg-area-3 {
border-image: linear-gradient(lightpink,lightpink) fill 0//0 100vw 0 100vw;
}
一つ目と二つ目の方法はコンテンツ自体を広げていましたが、こちらはコンテンツ幅はそのまま背景色（この場合はlightpink）のみをウィンドウ幅100%に広げることが可能です。
Demo
以上、背景をウィンドウ幅100%に広げるCSSのご紹介でした。
ぜひ利用シーンによって使い分けてみてください。
