ちょっと来週頭まで仕事が詰まっている感じ。ぬむむ。
先々週あたりから、サイトのデザインをいじくっているわけですが、前は表示が崩れなかったのに、現在表示が崩れて見える環境の方もいるかもしれません。そのことについて少し。
変える前のデザインも今のデザインも、メニュー２つに本文１つの３カラムの形式でサイトを作っています。これは< table > を使ってレイアウトするのではなく、CSSを使って実現しています。
３カラムとか２カラムをCSSを使って行う方法は、floatを使ってメニューに本文を回り込ませる方法と、positionを使って余白部分にメニューを貼り付ける方法の２つがあります。
方法の詳細については、CSSを使った段組の作成のコツというページが詳しいかも。
古いデザインの時には、posisionを使用，新しいデザインの現在はfloatを使用しています。
今週は忙しくてあれなのだけど、休みに少し修正を行う予定なので、それぞれの方法を使ってみて思ったことを少しまとめておきます。
float使用の場合の特徴
- 左右のメニューと本文の長さのうち、最大のものにあわせやすいので、フッダがきれいに入れられる。
- 回り込み指定なので、メニューに本文が重なることが無く、環境によってもすべての文が表示される。
- 上記の特徴から、表示部分の横幅指定を行っていない場合、回り込めなかった部分がすべて画面下に行ってしまい、レイアウトが崩れる。
- FireFox(NN系すべて？)とIEでは回り込み解除の仕様が違うので、問題が出る場合がある。
position:absolute使用の場合の特徴
- メニュー部分を好きな位置に配置できる
- 反面、position指定した部分の下に回り込むようなフッタブロックを作れないので、本文よりメニューが長い場合にフッタ部分に重なってしまう。
- 上に重ねるように配置するので、場合によっては本文部分に重なってしまい、表示されない部分が出る可能性がある。
- 位置を固定して貼り付けるので、相手の環境によってはメニューの位置がずれる。
こんな感じかな。現在ウィンドウサイズを小さめにした場合や、アイテム表示の一部で本文が画面下に行ってしまうようになってしまってるんですが、回り込みの影響のようです。FireFoxで見たときに回り込みの解除が影響して表示が崩れる問題は、回り込ませる順番を調整すればいけそうですが、もう１つの問題はちょっといや。
そもそもこのサイトfloatを使ったレイアウトに変更した理由は、フッタブロックをきれいに出したいということだけなので、それをうまく回避すればposition:absoluteを使う方式のほう合っていそう。
もう少しの間レイアウト崩れの問題を引きずるかもしれませんが、ご容赦。
コメント