HTML&CSS

CSSで背景を画面幅いっぱいに表示させる方法

ヘッダーなどを作成する際に幅の最大値は指定するが、背景は画面幅いっぱいに表示したいという場合は多いですよね。そんな時に自分がよくやったミスをメモしておきます。

幅の最大値は指定するが、背景は画面幅いっぱいに表示したいとは?

最初に「幅の最大値は指定するが、背景は画面幅いっぱいに表示したい」ってどんなこと?っていうことを共有しておきたいと思います。

これは自分のブログのヘッダーメニュー(2019/9/8現在)の感じで、ヘッダーメニューの幅の最大値より画面幅が大きければ背景のみが広がり、小さければヘッダーメニューが画面幅に合うというものです。

OKパターン

See the Pen
background-width_OK
by Jyu2 (@Jyu2)
on CodePen.

NGパターン

自分がよくやるNGパターンですが、背景は親要素である.headerにつけないといけないものを.containerに背景を指定してしまいます。

See the Pen
background-width_NG
by Jyu2 (@Jyu2)
on CodePen.

hedaerだとhedaerタグがあるのでまだなんとか気づいたりしますが、Topの背景画像とかで同様のことをやろうとするとよくはまってしまいます・・・。(.containerの親要素(wrapper)を作ってない)

まとめ

  • 背景はコンテナ(container)ではなくラッパー(warpper)につける(warpper:親、container:子)
  • widthとmax-widhtの指定は逆(widthにpx、max-widthに%)でも同じ結果になる
ABOUT ME
Jyu2
【PC1台で稼ぐブロガー兼Webエンジニアを目指し中】IT情報やWebサービス、アプリなどの情報を発信/SIerで10年以上勤務→ストレスMAXで休職中→ブログとWebの学習を行い脱サラ計画中/ #30DAYSトライアル 1st完了→2nd実施中 / 日々の学習内容をブログにアウトプット / まずは月収5万円を目指す