装飾する（footer部分）

Tweet

footer部分を装飾する

そろそろ終わりが見えてきました。最後のフッター部分です。まずhtmlを確認しましょう。

<div id="footer">
	<p id="copyright">Copyright &copy; <a href="http://taghtml.com">taghtml</a> All Rights Reserved.</p> 
</div>

次にスタイルを設定していきます。

フッター上部に仕切り線としてborder-topを利用しつつ、marginとpaddingで余白の調整を行います。

#footer {
	margin-top: 30px;
	border-top: 3px solid #745850;
	padding-top: 20px;
	padding-bottom: 20px;
}

#copyright {
	text-align: center;
}
#copyright a{
	text-decoration: none;
}

確認してみよう

その他、marginやpaddingで余白の微調整をしたものをf2cホームページにアップロードしました。実際に見てみましょう。以上で完成になります。

完成したサンプル文書

ここまで読んで下さった皆様へ

長くお付き合い頂き、ありがとうございました。