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

#sidebar部分｜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の解説

/*-------------------------sidebarの指定*/
#sidebar {
  width: 180px;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
}

サイドバー部分の要素です。

width: 180px;

サイドバー部分の横幅を指定しています。

position: absolute;

絶対配置指定です。この絶対配置指定の基準は#containerです。

top: 0; left: 0;

基準の#containerに対して上から0px、左から0pxに配置という事です。

実際のサンプル

右側に配置したい場合は下記のようにします。

/*-------------------------contentsの指定*/
#contents {
  margin: 0 0 0 200px;
  padding: 0;
}

/*-------------------------sidebarの指定*/
#sidebar {
  width: 180px;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
}

----------------------------------------------
変更後
----------------------------------------------

/*-------------------------contentsの指定*/
#contents {
  margin: 0 200px 0 0;
  padding: 0;
}

/*-------------------------sidebarの指定*/
#sidebar {
  width: 180px;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 620px; もしくは right: 0;
}

#contentsで右側にサイドバー分の余白を指定、サイドバーの配置を左からなら620px、右からなら0で配置。

ホームページ作成のポイント

前頁で#contents部分を600pxとしたので、今回サイドバー部分は200pxでは,,,,

もちろん200pxで正解です。今回はサイドバーを180px にする事で、#contentsと#sidebarとの間に、自然な形で余白(20px)を設けているだけです。

Page Top

page top ボタン