Home » 初級ホームページ作成講座 » positionレイアウトホームページ作成講座｜#container部分

#container部分｜positionレイアウトホームページ作成講座

CSSデザインサンプルのホームページ制作の流れをご確認下さい。

CSSのコピー

下記ソースをコピーして下さい。

Page Top

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>

Page Top

CSSの解説

/*-------------------------containerの指定*/ 
#container {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}

この要素(ボックス)が以降のコンテンツ部分とサイドバー部分の基点になります。(#containerを基準に#contents,#sidebarを配置します。positionレイアウトの要です。)

position: relative;

相対配置指定です。

width: 100%;

この指定を忘れないようにして下さい。

実際のサンプル

Page Top

page top ボタン