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

Loading

スポンサードリンク

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

CSSのコピー

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

HTMLファイル指定部分

<body>
<div id="wrapper">

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

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

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

</div>

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

</div>
</body>

CSSの解説

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

記事部分(コンテンツ)の要素です。

width: 180px;

左側に200pxの余白を設けています。これは後に指定するサイドバーの横幅分です。

実際のサンプル

スポンサードリンク