横幅いっぱに広がるつもりのheaderとfooterの右端が切れてる時の対処法

ヘッダーの右端が切れてる...

ヘッダーの右端が切れてる...

なんということでしょう… ブラウザの幅を狭めるとヘッダーの右端が見事に切れてます(;^ω^)ヘッダーが切れてるということはもちろんフッターだって…

もちろんフッターの右端も切れてます...

案の定切れてました…orz

このヘッダーやフッターの右端が切れてる状態はブラウザの横幅を狭めないと発見できないので…気がつかないことが多いのですが、もともと画面サイズが小さいスマホやタブレットでアクセスすると…もちろんヘッダーとフッターの背景が切れていますw

本当だったらヘッダーもフッターも右端まで背景が続いて欲しいはずです。今回の記事では、ヘッダーとフッターが右端で切れてる場合の対処法を考えてみます。

目次

発生する条件

ヘッダーとフッターの右端が切れる!

  1. ヘッダーやフッターのwidth(横幅)が指定されていない(横いっぱいに広がる)、もしくはwidthを100%にしてる
  2. 記事部分とサイドバーを包んでるコンテンツエリアのwidthは指定されていて、左右のmarginをautoにすることで中央揃えにしてる
  3. ブラウザの横幅をコンテンツエリアの横幅より小さくして横スクロールバーを表示させる、もしくはスマホやタブレットなど画面の小さい機器で表示させる

解決方法

右端が切れてしまってるヘッダーやフッターのCSSにmin-widthを入れて…margin: autoで中央揃えにしてるコンテンツエリアのwidthと同じ値を入力。

[css]
header,
footer {
min-width: 960px;
}

#contents {
width: 960px;
margin: 0 auto;
}
[/css]

サンプルとしてこんな感じのCSSを載せてみました。
さてさて、こんな感じで自分のサイトを修正してみますと・・・

修正後のヘッダー

ブラウザの横幅を狭めてもヘッダーの右端が切れてません。

修正後のフッターの右端ももちろん切れてません

もちろんフッターの方も修正後は右端が切れてませんね♪最後にスマホやタブレットなどの画面サイズの小さいデバイスで確認してみて、ヘッダーやフッターの右端が切れてなければ問題解決です。

ヘッダーの右端が切れてる...

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

この記事を書いた人

MacとかiPhoneとかApple製品が好きですが、Windows、Android、Alexa、Google Nest Hubなどいろんなガジェットが好き。根っからのキャッシュレス派で、最近は資産運用(株式投資・投資信託)に力を入れてます。

コメント

コメントする

CAPTCHA


目次
閉じる