画面幅いっぱいに背景色を敷くCSS実装 | 第1回全体を囲まない方法

画面幅いっぱいに背景色を敷くCSS実装第1回全体を囲まない方法

ブラウザのウィンドウの幅いっぱいに背景色を敷くことは、一見、簡単そうですが、意外と難航する場面があります。画面いっぱいに背景色を敷く方法のひとつとして全体を囲まない方法を紹介します。

カテゴリー: HTML/CSS >; HTML/CSSの実践

2022年10月6日発行

著者坂巻翔大郎フロントエンド・エンジニア

画面幅いっぱいに背景色を敷くCSS実装シリーズの記事一覧

画面幅全体に背景色を敷く

画面幅（ブラウザのウィンドウの幅）いっぱいに背景色を敷くことは、簡単にできそうに思えます。特筆することはありませんが、次のように指定します。

<body>
  <div class="Box">幅いっぱい</div>
</body>

body {
  margin: 0;
}
.Box {
  height: 300px;
  background: tomato;
}

.Boxはdiv要素で、デフォルトでdisplay: block;のため、親（厳密には包含ブロック）に収まり切るだけの幅になります。上記の場合、背景色はbody要素と同じ幅、つまり画面幅いっぱいになります。

逆に考えると、このCSSでは幅が画面幅いっぱいでない要素の中に入った場合、画面幅いっぱいにはできません。

固定幅のdiv要素を親に持つdiv要素

<body>
  <div class="Wrapper">
    <div class="Box">幅いっぱい</div>
  </div>
</body>

親要素の幅が固定されている

body {
  margin: 0;
}
.Wrapper {
  width: 50%;
  margin: 0 auto;
}
.Box {
  height: 300px;
  background: tomato;
}

あたりまえに思えるかもしれませんが、親が画面幅よりも小さければ子も画面幅いっぱいにはなりません。この理屈から考えると、背景色を画面幅いっぱいに敷こうとすると意外と面倒なものです。

頻出するレイアウトとして「基本的にはコンテンツの最大幅は一定で中央寄せ」というものがあります。そういったものを作るときに、全体をまるっと囲む要素を用意して、その要素の幅を固定して中央寄せにします。ただそのようにしてしまうと、その子要素の中の特定の要素だけ画面幅いっぱいにするのが難しくなります。

<body>
  <div class="Wrapper">
    <div class="Box">親の幅と同等のコンテンツ</div>
    <div class="Box2">
      画面幅いっぱいに背景色を敷きたいコンテンツ 
    </div>
    <div class="Box">親の幅と同等のコンテンツ</div>
  </div>
</body>

body {
  margin: 0;
}
.Wrapper {
  width: 50%;
  margin: 0 auto;
}
.Box {
  background-color: tomato;
}
.Box2 {
  width: 100%;
  background-color: blue;
}

本記事では、画面幅いっぱいに背景色を敷くための方法を、いくつか解説します。それぞれの特徴を理解し、場面にあわせて使えるようになりましょう。

全体を囲まない方法

冒頭にもあるとおり、親の幅が画面幅いっぱいであれば、その子は画面幅いっぱいにできます。ですので、いつでも幅いっぱいにできるように、基本的には幅が固定された要素で全体を囲まないようにします。

次のコード例のように、全体を幅が固定された要素で囲ってしまうと、画面幅いっぱいにしづらくなります。

幅が固定された要素で全体を囲んでしまう例

<body>
  <div class="Wrapper">
    <div class="Box">親の幅と同等のコンテンツ</div>
    <div class="Box2">画面幅いっぱいに背景色を敷きたいコンテンツ ...</div>
    <div class="Box">親の幅と同等のコンテンツ</div>
  </div>
</body>

全体を囲んでしまう時のCSS例

body {
  margin: 0;
}
.Wrapper {
  width: 50%;
  margin: 0 auto;
}
.Box {
  background-color: tomato;
}
.Box2 {
  background-color: blue;
}

これを囲まないように変更します。

幅が固定された要素で全体を囲まないようにした例

<body>
  <div class="Box">親の幅と同等のコンテンツ</div>
  <div class="Box2">
    <div class="Box2_Item">
      画面幅いっぱいに背景色を敷きたいコンテンツ 
    </div>
  </div>
  <div class="Box">親の幅と同等のコンテンツ</div>
</body>

全体を囲まない時のCSS例

body {
  margin: 0;
}
.Box {
  width: 50%;
  margin: 0 auto;
  background-color: tomato;
}
.Box2 {
  background-color: blue;
}
.Box2_Item {
  width: 50%;
  margin: 0 auto;
}

幅を一定にするための全体をまるっと囲む要素は用意せず、必要な時だけ幅を指定します。画面幅いっぱいに背景色を敷く要素には幅指定ができないので、その子要素で幅指定や中央寄席などをする必要があり入れ子が増えます。この方法は、ピクセルグリッドの会社サイトで使われています。たとえば「会社情報」のページの「会社概要」のグレーの背景色がその箇所です。

サイトは背景色の敷き方が見やすいように縮小表示しています（2022年10月6日現在）。

全体を囲まない方法のメリット

1番のメリットは、特に難しいことをしていないということです。マークアップを見れば、何をしているかがわかりやすいということはとても大事です。

全体を囲まない方法のデメリット

この方法は次のことを守る必要があります。

全体を囲む要素を用意しない
固定したい幅の値を都度都度指定する

固定したい値については、その値を1ヶ所で管理できるようにしておく必要があるため、工夫が必要です。

会社サイトでは.maxw-956というユーティリティクラスを作成して必要に応じて付与する形をとっています。

会社サイトの簡易版

<div class="maxw-956 lr-center">親の幅と同等のコンテンツ</div>
<div class="bg-pale-1">
  <div class="maxw-956 lr-center">
    画面幅いっぱいに背景色を敷きたいコンテンツ
  </div>
</div>
<div class="maxw-956 lr-center">親の幅と同等のコンテンツ</div>

.maxw-956 {
  max-width: 956px;
}
.lr-center {
  margin-left: auto;
  margin-right: auto;
}
.bg-pale-1 {
  background-color: #f0f2ee;
}

画面幅いっぱいに背景色を敷きたい要素には特に幅を指定せず.bg-pale-1を指定します。最大幅を指定したい要素には、最大幅を956pxにするユーティリティクラスの.maxw-956と、要素を中央揃えにする.lr-centerを指定します。それらを組み合わせ、「画面幅いっぱいに背景色を敷いた親要素」中に、「最大幅を指定した要素」を置くことでで、画面幅いっぱいに背景色が敷かれ、中の要素は中央に配置されるようになります。

*注：ユーティリティクラス

ユーティリティクラスは、.buttonや.cardのようにクラスが指定される要素の内容と密接に紐付きません。.text-xsや.text-gray-600のように「このクラスを指定するとどうなるのか」というCSSのプロパティ名をもとにした命名がされています。詳しくは次の記事を参照してください。

Tailwind CSSで始めるユーティリティファーストCSS 第1回 Tailwind CSSの特徴と使い方

ユーティリティクラスを使わない場合は、Sassの変数や、次のようにカスタムプロパティを使って値を1カ所で管理できるようにしておくと良いでしょう。

<div class="Box1">親の幅と同等のコンテンツ</div>
<div class="Box2">
  <div class="Box2_Item">
    画面幅いっぱいに背景色を敷きたいコンテンツ
  </div>
</div>
<div class="Box1">親の幅と同等のコンテンツ</div>

カスタムプロパティを使ったCSS

:root {
  --base-max-width: 956px;
}
.Box1 {
  width: var(--base-max-width);
  margin: 0 auto;
}
.Box2 {
  background-color: #f0f2ee;
}
.Box2_Item {
  width: var(--base-max-width);
  margin: 0 auto;
}

まず、--base-max-widthというカスタムプロパティを用意し、幅の指定を1箇所で管理することで、一括で変更しやすくします。そして幅の指定をしたいところではwidth: var(--base-max-width);と述します。

背景色を敷かない中央寄せの要素は.Box1というセレクタを指定します。背景色を敷きつつ、中の要素は中央寄席にしたい要素は.Box2の中に.Box2_Itemを入れ子にします。

ここまでのまとめ

幅が固定された要素で全体を囲まないことが前提です。すでに全体を囲む要素があったりするような場合は、この方法は使えません。

次回はこのようにすでに全体を囲む要素があった場合に使える負のマージンを使う方法を紹介します。