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で2度休職からの復帰→ブログとWebの学習を行い脱サラ計画中/日々の学習内容をブログにアウトプット/ブログで収益1万円/月は達成/次は5万円/月を目指す/