- floatで作る段組みレイアウト講座
ステップ3ーfloatで作る段組みレイアウト mainとsidebarを横に並べる
それでは、「main」と「sidebar」を段組み(横並び)にしていきます。
段組み(横並び)にするには、floatプロパティを使います。
「div要素」に「floatプロパティ」を指定する場合は、同時に「widthプロパティ」で横幅を指定する必要があります。
これを踏まえて、「main」と「sidebar」の指定は以下のようになります。
mainの指定
#main { float: left;/*要素を左寄せにする*/ width: 760px;/*floatしたので幅を指定する*/ background-color: red;/*背景色はレッド*/ height: 500px;/*練習のための仮の高さ指定*/ }
mainが左寄せになり、後に続く要素(sidebar)が反対側(右側)に回り込んだ状態。
sidebarの指定
#sidebar { float: right;/*要素を右寄せにする*/ width: 320px;/*floatしたので幅を指定する*/ background-color:yellow;/*背景色はイエロー*/ height: 500px;/*練習のための仮の高さ指定*/ }
「main」と「sidebar」を左右に寄せた(floatした)ため、floatプロパティを指定した要素「main」と「sidebar」以降の要素(footer)が回り込みます。
floatは浮いているという意味があり、その言葉通り「main」と「sidebar」が浮いているという感じのイメージです。
これを解決するために、「footer」に回り込み解除の指定をします。
回り込みを解除するには、解除したい要素にclearプロパティを設定します。
footerの指定
#footer { clear:both;/*回り込みを解除*/ background-color:pink;/*背景色はピンク*/ height:50px;/*高さ*/ }
これで、floatで作る段組みレイアウトの完成です。
ここまでのCSSをまとめると以下になります。
@charset "utf-8"; #wrapper{ margin:0 auto;/*レイアウト全体をページの中央寄せにする*/ width:1100px;/*全体の横幅*/ background-color:gray; } #header { background-color:blue;/*背景色はブルー*/ height:100px;/*高さ*/ } #main { float: left;/*要素を左寄せにする*/ width: 760px;/*floatしたので幅を指定する*/ background-color: red;/*背景色はレッド*/ height: 500px;/*練習のための仮の高さ指定*/ } #sidebar { float: right;/*要素を右寄せにする*/ width: 320px;/*floatしたので幅を指定する*/ background-color:yellow;/*背景色はイエロー*/ height:500px;/*練習のための仮の高さ指定*/ } #footer { clear:both; background-color:pink;/*背景色はピンク*/ height:50px;/*高さ*/ }
→デモサイトを見る
次回は、左右のカラムを入れ替える方法とHTMLとの関係について解説します。