こんにちは！
「いまだにママにお弁当を作ってもらっている」でおなじみ、アラサーコーダーの愛はらです。
※会社の人達には自分でお弁当を作っていることにしてるので、くれぐれも内緒でお願いしますよ！！
さて、そんな令和No.1親孝行息子の僕が本日お届けするのは
「横スクロール時に要素の背景色が無くなる問題」
です！
「…なにそれ」という声が聞こえてくる前に、百聞は一見にしかず！
ということでさっそく見ていきましょう！
どのような現象？
こちらはよくあるシングルカラムのレイアウトです。
・ヘッダー、フッターの幅はディスプレイに対して100%
・メインコンテンツは幅1000pxで固定
と、ここまでは何の問題もないのですが、
こちらの横幅を縮めてみます。
セクション部分を1000pxで固定しているため、当然横幅が1000pxになるとそれ以上は縮まずに横スクロールバーが出ます。
ではこの横スクロールバーを右にずらしてみましょう。
….ゴゴゴゴゴゴゴ
愛はら「我不要求这个（私はこれを求めていません）」
すみません、絶望のあまり思わず中国語がでてしまいました。人生楽しくないです。
というように、本来であればヘッダー、フッター部分も横スクロール時に
キレイに表示させたいのですが背景色が消えてしまいます。
一体、なにが原因なのでしょうか…？
背景色が消える原因は幅指定
この現象の原因は「ヘッダー・フッターに横幅の指定をしていないから。」です。
ヘッダー・フッターの幅指定が無いために、ブラウザの表示領域分の幅しか
確保されず『横スクロールすると背景が途中で切れる』というわけです。
なにそれ、、、はっ..はじめて聞いたンゴ。
背景色を表示させるには？
この現象を直す方法は下記です。
① ヘッダー・フッターにコンテンツエリアと同じmin-widthをかけて幅を確保する（オススメ）
② bodyにoverflow-x: hidden;をかけて横スクロールをださない（かなりパワープレイ）
③ 幅を決め打ちしないで可変レイアウトにする（工数爆増）
方法①で解決しよう！
やり方は単純で表示されていない要素（今回はヘッダー・フッター）にコンテンツ部分と同じ分min-width(1000px)をかけます。
では確認してみましょう。
….ゴゴゴゴゴゴゴ
愛はら「….我在寻找它（私はこれを求めてました）」
すみません、興奮のあまり思わず中国語がでてしまいました。
無事、解決しました！yeahhhhhh！人生楽しいです！
※②、③は今回のテーマからそれてしまうので割愛します。
まとめ
いかがでしたでしょうか？
僕はディレクターさんからご指摘をいただき、はずかしながらはじめてこの現象を知りました。
11インチPCのようにディスプレイが小さい端末からの閲覧もしっかりと考えていかなきゃいけないなぁ～、と強く思う愛はらなのでした。
それではっ！
0
0