positionレイアウトホームページ作成講座

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

スポンサードリンク

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

CSSのコピー

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

HTMLファイル指定部分

<body>
<div id="wrapper">

<div id="header">
*** ヘッダー部分 ***
</div>

<div id="container">

    <div id="contents">
    *** コンテンツ部分 ***
    </div>

    <!--sidebar部分-->
    <div id="sidebar">
    *** サイドバー部分 ***
    </div>

</div>

<div id="footer">
*** フッター部分 ***
</div>

</div>
</body>

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)を設けているだけです。

スポンサードリンク