ブラウザを縮小させた時にレイアウトが崩れてしまいます。

Question

ブラウザを縮小させると、全画面で表示させたときと異なって、レイアウトが崩れてしまいます。レイアウトをまったく崩さない、つまり縮小しても変化しないような設定にしたいのですが、それは可能ですか？

Answer 1

・ブラウザを縮小する＝ブラウザウィンドウの幅や高さを狭くする

・縮小しても変化しない＝コンテンツサイズが拡大縮小せず、レイアウトも変化せず、狭くしたブラウザウィンドウからはみ出した領域はスクロールで表示させる

という認識であってますか？

であれば、普通にpx単位で固定レイアウトにすればいいだけの話ですね。

もしレスポンシブで構築していて、横幅を狭くした時にレイアウトが崩れると言うのであれば、ブレイクポイントごとのスタイル指定が間違っているということなので、正しく%の計算をするなどの対策が必要かと思われます。

状況がちょっとふんわりし過ぎなので、もう少し具体的に質問されるとより適切な回答が得られると思いますよ。

Answer 2

ブラウザのサイズを変えたらレイアウトが崩れるっていうことは、要素の位置が変わっているっていうことですよね。cssで要素の位置を指定するとき、相対的な位置で指定するとブラウザの大きさを変更するとそれに伴い相対的に要素の位置が変わるんではないでしょうか。コードを見てないので何とも言えませんが、例えばcssのrelativeとかで要素の位置を指定している場合、画像を縮小したらブラウザの中で位置が相対的に変動します。cssでabsoluteというように絶対位置で指定してあげれば、ブラウザを縮小しても要素は移動せずそのままブラウザの外に消えていくだけとなります。

Answer 3

書かれているHTMLやCSSにもよるので一概には言えませんが、サイズ指定を%ではなくpxにすると
そのElementのサイズはブラウザのサイズに影響を受けず固定になります。
（はみ出す部分はスクロールになります）

また、レスポンシブWebデザインなどを取り入れてみてはいかがでしょうか？

Answer 4

１つの画像ファイル（１ページを画像で表現したもの）と、クリッカブルマップ（画像にリンクを張る仕組み）で構成すると、絶対にレイアウトがくずれません。

１つの画像が表示されるだけという単純極まりないレイアウトなので、崩れないです。