2カラムレイアウトの概要とスタイルシート

1カラムレイアウトで作成したソースを引き継いで、2カラムレイアウトに挑戦します。

1カラムレイアウトの時は、コンテナの中に、ヘッダ、コンテンツ、フッタと3つのグループを作成しました。
今度は、2カラムレイアウトの実現のため、サイドバーというグループを1つ追加作成します。

レイアウトは以下の図のようになります。

2カラム

コンテンツ部分の右横にサイドバーが追加されていることがわかります。
このサイドバーの横の長さを250pxにします。全体の(コンテナの)横の長さは750pxですから、
コンテンツ部分の横幅は500pxとなります。

スタイルシートにこの変更を適用させてみましょう。
コンテナ、ヘッダ、フッタ部分に変更は無いので割愛します。



#content {

float:left;
width:440px;
padding:30px;
background-color:#ffffff;
}

#sidebar {
float:right;
width:250px;
}


※コンテンツの横の長さがwidth:500pxではなく、width:440pxとなっているのは、次の行でpadding:30pxと指定しているためです。1カラムレイアウト作成の時に余白の設定をしていました。

※padding:30px;の意味は、コンテンツ部分の上下左右に余白を30px設定するという意味でした。したがって、左の余白30px、右の余白30px、あわせて60pxを500pxから引いた値(440px)となっています。
paddingやmarginなどのプロパティを使用していない状態であれば、素直にwidth:500px指定でOKです。

サイドバーを右側に、コンテンツ部分を左側に設置するために、上記ソースの中で『float』プロパティを使用しています。コンテンツ側では、float:leftで左側、サイドバー側では、float:right;で右側に配置される仕組みとなっています。(floatに関するくわしい説明は後述します。)

これでスタイルシートの編集はいったん終了です。

次回は、メインページのテンプレートにサイドバーの部分を追記します。

次のページ >> メインページのテンプレートの修正と画面確認

▲ページトップへ