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

Loading

スポンサードリンク

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

CSSのコピー

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

HTMLファイル指定部分

<body>
<div id="wrapper">

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

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

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

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

</div>
</body>

CSSの解説

/*-------------------------contentsの指定*/
#contents {
  width: 600px;
  float: right;
  margin: 0;
  padding: 0;
}

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

width: 600px;

コンテンツ部分の横幅を指定しています。

float: right;

回り込みの指定です。今回は#contentsを右側に配置しています。(いわゆる左サイドバータイプ)

左側に配置したい場合は float: left; と指定します。[参考までに]floatとwidthはセットで覚えましょう。floatを指定する時はwidht指定を忘れない。

実際のサンプル

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

今回、記事部分は600pxとしていますが全体の幅が800pxなので、サイドバー部分は800px-600pxで200pxがマックスです。レイアウトを決める際はコンテンツ部分とサイドバー部分が全体の幅を超えないように心がけましょう。

スポンサードリンク