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

Loading

スポンサードリンク

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

CSSのコピー

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

HTMLファイル指定部分

<body>
<div id="wrapper">

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

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

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

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

</div>
</body>

CSSの解説

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

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

width: 180px;

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

float: left;

回り込みの指定です。今回は#sidebarを左側に配置しています。左サイドバータイプ

右側に配置したい場合は float: right; と指定します。この時コンテンツ部分の指定はfloat: left;とします。[参考までに]floatとwidthはセットで覚えましょう。floatを指定する時はwidht指定を忘れない。

実際のサンプル

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

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

もちろん200pxでもよいのですが、このコンテンツをご覧の方はスタイルシートによるホームページ作成が初めてである、または初歩段階である事を考慮して180pxとさせてもらいました。200pxより小さくした事のメリットは下記の通りです。

  1. #contentsと#sidebarとの間に、自然な形で余白(20px)を設けている。

    慣れないうちにmarginやpadding指定をすると、おそらくレイアウト崩れの原因になると思います。

  2. #contentsと#sidebar内に記述する要素や要素の指定によって、指定している横幅を超えてもレイアウトを崩す確率が少なくなる。

    例えば#sidebarは180pxですがborder指定をした際など、182pxとなっても20pxの余白があるのでカバーしてくれます。これが200pxでborder指定をした場合はレイアウトが崩れます。

参考：レイアウトが崩れるの原因

スポンサードリンク