どうも7noteです。横スクロールした時に、背景色が切れてしまう問題の解決方法

PC表示の際に、画面幅が少し小さめの時に横スクロールされると、ヘッダーの背景が見切れてブサイクに写ってしまう問題の解決方法について。

特にヘッダーなどが見切れてしまうケースが多いので、今回はヘッダーを例に解説。

例）崩れたデザイン

index.html

<header>
ここがヘッダー。
</header>

<div class="box">
1000pxのコンテンツ。
</div>

style.css

header {
  width: 100%;        /* 常に画面幅いっぱいに表示 */
  min-width: 1000px;  /* ここが肝。最大幅のコンテンツと同じ幅を指定。 */
  background: #ddd;   /* 背景色をグレーに。 */
}

.box {
  width: 1000px;      /* 幅を1000pxに指定 */
  height: 200px;      /* 高さを200pxに指定 */
  background: #F99;   /* 背景をピンクに指定 */
  margin: 0 auto;     /* コンテンツを中央寄せ */
}

解説

問題が起こっている原因は、1000px(下のコンテンツ)よりもヘッダーのほうが短くなってしまう事です。

一番シンプルな対策として、ヘッダーの最低幅を下のコンテンツと同じ幅を指定することで対応できます。

まとめ

細かいところですが、忘れずに修正したいところの1つです。
気づきにくいので、修正されないまま公開されないよう気をつけたいポイントの1つかなと思います。

おそまつ！