ステップ 5. ボックスB の子要素に左右マージン
#boxB>* {
margin-right:180px;
margin-left:180px;
}
ボックスBの中の要素に対して、左右それぞれ180pxのマージンを設定する。このマージンのおかげで、ボックスCやボックスDとの重なりを防ぐことができる。ただし、注意が必要な点がある。Internet Explorer（以下、IEと略する）では子要素を指定するためのセレクタとして子セレクタがサポートされてわない。そのため、実際には、子孫セレクタを用いてブロックレベルの要素にスタイルを適用するか、idやclassを持つ追加のdiv要素を導入する必要がある。
このような場面では、CSSのセレクタの使い方に工夫が求められる。IEの制約を回避しつつ、目的のスタイルを実現するために、新たな要素の導入やセレクタの調整が必要だ。これによって、要素間の適切な配置と外観を維持しつつ、クロスブラウザの互換性を確保することができる。
Webデザインや開発においては、異なるブラウザやバージョンに対する対応が重要だ。特に古いバージョンのブラウザでは、最新のCSS機能がサポートされていないことがある。そのため、柔軟な発想と工夫が必要だ。今回のケースでも、IEに対する配慮がデザインの成果を左右する可能性がある。
モダンなWeb開発では、レスポンシブデザインやクロスブラウザ対応が当たり前となっている。新しいテクノロジーの導入だけでなく、古くからあるブラウザにも適切に対応することで、ユーザーエクスペリエンスを向上させることができる。今回の課題も、その一環として、さまざまな側面から工夫を凝らすことが求められる。
メインカラム幅可変、サイドバー幅固定 3カラムのサンプル
サイドバーの左右入れ替え
body {
text-align:center;
}
#container {
width:96%;
margin-left:auto;
margin-right:auto;
text-align:left;
}
#wrapper {
width:100%;
float:right;
margin-left:-180px;
}
#boxD {
width:180px;
float:right;
}
#boxE {
width:100%;
clear:right;
}
#boxB {
width:100%;
float:left;
margin-right:-180px;
}
#boxC {
width:180px;
float:left;
}
#boxB>* {
margin-right: 180px;
margin-left: 180px;
}
margin, float, clear の値の right と left を入れ替えるだけだ。
