最近、センター寄せのデザインをコーディングすることが多いのだが、短いページから長いページにリンクしたときに、ページがガクッと左にずれてしまうことがある。

これはブラウザーでも特にFirefoxでよくお目にかかることだが、Firefoxの場合、短いページではブラウザーのスクロールバーが表示されないが、長いページになると自動的にブラウザーのスクロールバーが表示されてしまうことが原因で、スクロールバーの幅分、左にずれてしまうので、ページがガクッと動いて見えるわけだ。

そこで、このずれを解消するやり方としては、ブラウザーのスクロールバーを常に表示するようにしてやれば良いので、以下のようなCSSを記述するだけでOK。

html {
overflow-y:scroll;
}

意外と簡単に解決できることでお客さんに突っ込まれずにすむのはうれしい。