装飾する（footer部分）

footer部分を装飾する

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

HTML

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

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

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

CSS

#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ホームページにアップロードしました。実際に見てみましょう。以上で完成になります。

完成したサンプル文書

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

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

←前のページへ：装飾する（main memu_link部分）