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

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

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

CSSのコピー

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

Page Top

HTMLファイル指定部分

<body>
<div id="wrapper">
<!--header部分-->
<div id="header">
*** ヘッダー部分 ***
</div>
<!--header部分終わり-->
<!--contents部分-->
<div id="contents">
*** コンテンツ部分 ***
</div>
<!--contents部分終わり-->
<!--sidebar部分-->
<div id="sidebar">
*** サイドバー部分 ***
</div>
<!--sidebar部分終わり-->
<!--footer部分-->
<div id="footer">
*** フッター部分 ***
</div>
<!--footer部分終わり-->
</div>
</body>

Page Top

CSSの解説

/*-------------------------footerの指定*/
#footer {
  text-align: center;
  clear: both;
  margin: 0;
  padding: 0.5em 0;
}
text-align: center;

文字を中央寄せ（センタリング）に指定しています。状況に応じて変更して下さい。

clear: both;

回り込みの解除指定です。

padding: 0.5em 0;

上下に余白を設けています。

実際のサンプル

Page Top

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

#footer部分とコンテンツ部分やサイドバー部分との余白を指定したい場合は、#contentsと#sidebarの方へ下方向の余白を設けます。#footerに上方向の余白を指定しても効果はありません。

/*-------------------------footerの指定*/
#footer {
  text-align: center;
  clear: both;
  margin: 30px 0 0; ----- これでは余白はうまれません
  padding: 0.5em 0;
}

-----------------------------------------------------
-----------------------------------------------------
正解

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

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

/*-------------------------footerの指定*/
#footer {
  text-align: center;
  clear: both;
  margin: 0;
  padding: 0.5em 0;
}

Page Top

page top ボタン