« Wireless LAN | トップページ | 親指シフト »

2005年2月13日

CSS での段組

ホームページを見ているブラウズ環境は、Mac OS 9.1 でブラウザは、IE 5.17 になります。
実は、IE で見ると結構問題になるブログサイトが有ります。

多くは段組が崩れて、段落ち(もしくはサイドバー落ち)になっている、または1番最後に回り込みが解除されずに、フッダーが右に飛びだしてしまっています。

段落ち(サイドバー落ち)に関しては、自分でも CSS を利用してサイドを構築した際になみました。原因は「width」のブラウザによる解釈の違いだそうです。「あそぼ〜!」さんのサイトで、解説されています。

サイドバーが落ちるのは、左のサイドバー(#left)と中央の記事部分(#center)と右のサイドバー(#right)の幅の合計が、#containarの中に収まらない時に、右側のサイドバーが下に落ちてしまいます。

とのことです。
サイドバーを落とさない。その1
サイドバーを落とさない。その2
が参考になります。

また、CSS で段組をする場合、float タグを使って段組をする場合、float での回り込みを解除(clear="all")しなければ、次の要素が右に付いてしまします。もしくは他にもう少しスマートな方法が有ればと思いますが・・・。

Windows の IE だけで動作確認されている方は問題にならないと思いますが、Mac の IE では問題になります。ぜひとも上記2点の対応を考えて頂ければと思います。

最後の CSS で段組をする際に参考なるサイトを紹介しておきます。
スタイルシート(CSS)による段組の作成
スタイルシートでマルチカラム・デザインを実現する方法
tableを使用しない段組:CSSによるマルチカラムデザインについての考察

|

« Wireless LAN | トップページ | 親指シフト »

「web覚書き」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/6981/2913899

この記事へのトラックバック一覧です: CSS での段組:

« Wireless LAN | トップページ | 親指シフト »