Home » 初級ホームページ作成講座 » floatレイアウトホームページ作成講座|#footer部分
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>
CSSの解説
/*-------------------------footerの指定*/
#footer {
text-align: center;
clear: both;
margin: 0;
padding: 0.5em 0;
}
- text-align: center;
-
文字を中央寄せ(センタリング)に指定しています。状況に応じて変更して下さい。
- clear: both;
-
回り込みの解除指定です。
- padding: 0.5em 0;
-
上下に余白を設けています。
実際のサンプル
ホームページ作成のポイント
#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;
}
- Previous #sidebar部分
- ソースの確認 Next


