ＣＳＳ作成編
-5 ページレイアウト
レイアウト設計時の注意
前項で述べたボックスモデルの解釈で、おのおののボックスに名前をつけましたので、その後の手順として例を挙げます。
上図の場合、menuボックスとtextボックスをfloatプロパティで左右に段組みさせています。
このように段組みさせた場合には 直下のfooterボックスに 回り込み解除のclearプロパティを設定させる必要があります。
floatプロパティを段組みに利用するためには ボックス幅を指定する必要があるので、必然的に固定幅のレイアウトになります。
上図のcontainerは、ページ全体を制御するためにすべてのボックスを囲んだ箱です。
また、floatプロパティはブラウザにより若干不具合が見られることが多いので、確実に配置したい場合はpositionプロパティを使用する方法もあります。
positionプロパティを使用する絶対配置の段組みにも欠点があり、内容が増えて下方に長くなった場合に、例の様に下方にfooterボックスがあるとその上に重なってしまうケースがでてきます。
レイアウトの計画に見合ったプロパティを選択する必要があると言えます。
レイアウトを確定してから おのおののボックス内のデザインの詳細を設定するため、CSSソースを記述していきます。
ブラウザ環境による表示の差について度々触れておりますが、ページレイアウトのベースが環境に左右されるのは大きな問題です。
意図したレイアウトが大きく崩れるケースがあるからです。
どのような環境にも対応できる様にするためには、現状 完全CSS化はなかなか難しいことのようです。
表示の崩れを防ぐため、ブラウザによる実装差異の散見されるプロパティを避けて かなり限定したプロパティを使用しなければならないケースもあることでしょう。
そのような問題があるため、ページ全体のレイアウトには従来通りテーブルタグを使用してCSSではデザインだけを施し レイアウトの表示の乱れを防ぐ「ハイブリッドデザイン」という手法も活用できます。
全体構造はテーブルタグを使用するため、ページ表示は環境に左右されません。
細部のデザイン設定には非推奨タグを避け あくまでもCSSで指定していきます。
その様な手法のため、いずれ完全CSS化が図れる様に環境が整備された時も簡単な修正で済むので、現状の様な過渡期には有効な方法といえます。
