サイト全体が少しズレていると思った時はありませんか？CSSやHTMLを見直しても原因がわからない場合にはブラウザが原因となっている時があります。
対処方法は簡単なので、ページボリュームに左右されないデザインにする方法をマスターしておきましょう。
サイト全体がずれる原因
まずはサイト全体がずれる原因ですが、それはスクロールバーが表示されるページとされないページとの差が原因です。
通常、ブラウザでホームページを見る時に、サイトの長さが長いサイトには最初からスクロールバーが表示されています。
しかし、ページの長さが足りないページだとスクロールバーが表示されないので、その分表示領域が広がって、指定したデザインにならない場合があるというわけです。
サイト全体のズレの対処方法
ページの高さが長い場合にスクロールバーが表示され、サイト全体がずれる現象の対処方法メモです。
まずは、一画面で収まる内容のセンタリングされたページと、スクロールが必要なページとでは、スクロール幅分レイアウトがずれる現象が起きるので、スクロールバーを常に表示させる方法で対応できます。
CSSでスクロールバーを常に使う指定をしましょう。
html{ overflow-y:scroll; }これだけでホトンドノケースでは問題なくズレを解消できますが、CSSの変更をしたくない場合には、全ページの高さを確保してしまう事です。
単純に、全ページのコンテンツ量を増やすわけですが、簡単ではありませんよね。
常に表示されるサイドバー等を使って主流の画面領域以上になるぐらいまでコンテンツを詰め込んでしまえば対処できるかもしれません。
まとめ
モバイルではスクロールバーは表示されないので気づきにくい部分ですが、PCからだと違和感を感じるスクロールバーによって生じるデザインのズレのお話でした。
細かい部分かもしれませんが、せっかく作り込まれたデザインをガタっとさせてしまうのはもったいないですよね。
今日も知識欲は止まらない。
