Coding Methodology

こんなときは!背景をウィンドウ幅100%に広げる3つのCSSパターン

2022 / 09 / 29

コンテンツエリアは幅1000pxだけど背景はウインドウ幅いっぱいに伸びているようなデザインってことよくありますよね。
そんな時に使えるCSSのテクニックを3つ紹介したいと思います。

こんなときは!背景をウィンドウ幅100%に広げる3つのCSSパターン

セクションの区切りとして背景色を分けるデザインは多いですよね。なるべくシンプルで分かりやすく作りたいところですが、コンテンツ幅を作りつつ背景を付けなければならないのでどういう構造にするか悩ましいところです。

CODING FACTORYのサイトもウインドウ幅いっぱいに背景が伸びているデザインです。

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

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

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

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

以上、背景をウィンドウ幅100%に広げるCSSのご紹介でした。
ぜひ利用シーンによって使い分けてみてください。

一覧に戻る

CODING FACTORYのWebサイトにご訪問いただき、ありがとうございます!サイトの改善や情報発信に活かすために、個人情報保護方針に基づいたCookieの取得と利用のご同意をお願いいたします!
個人情報保護方針の詳細