ここでは、ホームページのデザインを研究しています。
今回は横並びメニューで項目移行時にホームページ画面が瞬時横揺れするのを、揺れないようにした記録を残しています。
参考までに
１．項目移行時のページ瞬時横揺れとは
メニュー項目をクリックして、例えば会社概要の中で「経営理念」から「社長あいさつ」に移行すると瞬間、画面が僅かに横揺れするというような状態のことです。
研究結果、ホームページ表示画面の高さがパソコンのディスプレイ表示面内に収まっているメニューページから、ディスプレイ表示面逸脱（ホームページの縦の長さが長くてディスプレイ内に収まらない状況）のメニューページに移行する時に（またはその逆に移行するような時に）一瞬僅かに横揺れすることが分かりました。
この現象は、インターネットソフト（ブラウザ）の特性であり、異常ではないがユーザーとしては一瞬戸惑いを感じるので、メニュー画面が横揺れしないようにせねばなりません。。
２．その対策
windows10では、パソコンのディスプレイ設定（高さ）が初期設定では、1080ピクセルになっています。そこで、今回はホームページの各ページのスタイルシートのcontainerのBOXのheight設定を1500ピクセル以上にしてみました。その結果、ゆれはなくなりました。ご覧ください。
参考 ビィプランニング株式会社様のホームページの場合
３．テクニック
今回、スタイルシートは、各フォルダーごとに配置しています。
今回は、会社概要用フォルダでのスタイルシートのcontainerのボックスのheight=1500px、contentのheight=1000pxにしてみましたが、例えば、別項目では内部の一部のページで、heightが1500pxを超える場合があるかもしれません。その場合はそのフォルダのスタイルシートではcontainerのボックスのheightを最高高さのページのheight+200pxにして、contentのボックスのheightは+100pxにすれば良いのです。
備考
ドリームウイーバーでは、新規のホームページを作る場足、スタイルシートを自在に配置できるようになっています。大まかには、ページごと、フォルダーごと、ホームページごと、という具合にです。そこはホームページの構成によって適切に選択します。今回はフォルダーごとが良さそうなのでそうしました。