ＣＳＳ応用編

-4　CSS TIP 段組レイアウト

設定の違いで検証してみる

段組レイアウトを実現するためのプロパティは、floatとpositionです。
このプロパティには　それぞれ一長一短があります。
ここでは、float プロパティを使用して、段組レイアウトを作成する際の、過去の失敗例（苦笑）に基づき理解した考え方をご紹介します。
事例は単純化していますが、段組を抱える親要素などとの関係から、複雑になる点もあることをご承知おきください。

絶対値で全要素を固定した場合

それぞれのボックスの幅と、段組部分のfloatを設定してみます。
ページ幅(container)：700px　左部幅(menu)：200px　右部幅(main)：500px
　　　#container { width : 700px ; }

　　　#menu　　　{ width : 200px ; float : left ; }

　　　#main 　　　{ width : 500px ; float : left ; }

段組レイアウトサンプル

検証した　IE6.0、Firefox1.5、Opera9.01、NN7.1、いずれのブラウザでも同様の表示ができました。
ただ、この絶対値指定の問題点として、ウインドウ幅の狭い環境で閲覧した時に、横スクロールが出て使い勝手が悪くなる場合があります。

相対値で段組部分を固定した場合

上記、横スクロールの問題を解消するために、今度は相対値で設定してみます。
ページ幅(container)：未設定　左部幅(menu)：20%　右部幅(main)：80%

　　　#menu　　　{ width :20% ; float : left ; }

　　　#main 　　　{ width :80% ; float : left ; }

段組レイアウトサンプル

検証した　IE6.0、Firefox1.5、Opera9.01、NN7.1、いずれのブラウザでも同様の表示ができました。
ただ、この相対値指定の問題点として、ウインドウ幅の可変に従い影響を受け、維持したいレイアウトが崩れる場合があります。

幅を可変させたくない左部のみ絶対値で固定した場合

上記、レイアウト崩れの問題を解消するために、今度は可変させたくない左部メニュー部分を絶対値指定で固定してみます。
ページ幅(container)：700px　左部幅(menu)：200px　右部幅(main)：未設定
　　　#container { width : 700px ; }

　　　#menu　　　{ width :200px ; float : left ; }

　　　#main 　　　{ float : left ; }

段組レイアウトサンプル

IE6.0で表示させた場合、想定通りの設定ができています。
全体幅700pxに応じて、mainボックス内のテキストは自動改行されています。
ここで、安心してレイアウト仕様が完成した、と思ったのが失敗でした…。

段組レイアウトサンプル

IE6.0以外のブラウザ、ここではFirefox1.5、Opera9.01、NN7.1、いずれのブラウザでも、上記の通り、左部メニューボックスに回り込んで欲しいメイン部分が、左部の下に表示されてしまいます。
IE6.0以外のブラウザでの表示が、設定通りで正しいのですが、これでは意図した通りのレイアウトにならないことが解ります。

右部にマージン設定した場合

そこで、右部を左部横に回り込ませると同時に　マージンを設定してみます。
ページ幅(container)：700px　左部幅(menu)：200px　右部幅(main)：未設定
　　　#container { width : 700px ; }

　　　#menu　　　{ width :200px ; float : left ; }

　　　#main 　　　{ margin-left : 200px; }

段組レイアウトサンプル

検証した　IE6.0、Firefox1.5、Opera9.01、NN7.1、いずれのブラウザでも同様の表示ができました。
この例では　全体幅を700pxの固定値にしていますが、相対値設定にすれば各々のウインドウサイズに応じて可変しますし、レイアウトを崩したくない左部メニュー部分に絶対値を指定することと右部の左側余白（マージン）設定をすることで、環境に応じた崩れないレイアウトが　実行できると思われます。