Home » 初級ホームページ作成講座 » positionレイアウトホームページ作成講座|#container部分
HTMLファイル指定部分
<body> <div id="wrapper"> <!--header部分--> <div id="header"> *** ヘッダー部分 *** </div> <!--header部分終わり--> <!--container 基点--> <div id="container"> <!--contents部分--> <div id="contents"> *** コンテンツ部分 *** </div> <!--contents部分終わり--> <!--sidebar部分--> <div id="sidebar"> *** サイドバー部分 *** </div> <!--sidebar部分終わり--> </div> <!--container部分終わり--> <!--footer部分--> <div id="footer"> *** フッター部分 *** </div> <!--footer部分終わり--> </div> </body>
CSSの解説
/*-------------------------containerの指定*/
#container {
position: relative;
width: 100%;
margin: 0;
padding: 0;
}
この要素(ボックス)が以降のコンテンツ部分とサイドバー部分の基点になります。(#containerを基準に#contents,#sidebarを配置します。positionレイアウトの要です。)
- position: relative;
-
相対配置指定です。
- width: 100%;
-
この指定を忘れないようにして下さい。
実際のサンプル
- Previous #header部分
- #contents部分 Next


