ステップ3ーfloa...|独学でWebデザインの勉強をする人のためのまとめサイトです。


WordPressの準備・導入パターンとレンタルサーバー費用相場・比較表
WordPressの始め方、導入パターン・レンタルサーバーの費用相場、おすすめのレンタルサーバーを紹介

マンダラ塗り絵ダウンロードサイト
マンダラや幾何学模様、花、ボタニカルアートの塗り絵を配布中。





floatで作る段組みレイアウト


  • 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)が反対側(右側)に回り込んだ状態。

mainが左寄せになり、後に続く要素が反対側(右側)に回り込んだ

sidebarの指定


#sidebar {
   float: right;/*要素を右寄せにする*/
   width: 320px;/*floatしたので幅を指定する*/
   background-color:yellow;/*背景色はイエロー*/
   height: 500px;/*練習のための仮の高さ指定*/
}

floatプロパティを指定した要素「main」と「sidebar」以降の要素(footer)が回り込み

「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との関係について解説します。




Facebookページに「いいね!」をクリックしていただくと、当サイトの更新情報を受け取ることができるようになります。
ぜひ、「いいね!」していただけると嬉しいです!



Pagetop