はじめてのHTML・CSS講座（4日目）

<div class="totop"><a href="#top">トップへ戻る</a></div>

.totop {
    text-align: right;
    width: 960px;
    margin: 0 auto;
}

.totop a {
    display: inline-block;
    background-color: #37af57;
    padding: 10px;
    text-decoration: none;
    color: #fff;
}

注）上記のようにトップへ戻るを実装すると、上のニュースのセクションと近づきすぎであることがわかります。.news_inner のmarginが下に40px 必要ですので足しておきましょう。

<footer>
    <div class="footer_nav">
        <ul>
            <li><a href="">おすすめ商品</a></li>
            <li><a href="">販売会社</a></li>
            <li><a href="">ニュース</a></li>
            <li><a href="">お申込み</a></li>
        </ul>
    </div>
    <div class="copy"><small>Copyright &cｏpy; 有機野菜ドットコム All Right Reserved.</small></div>
</footer>

CSS

footer{
    background-color: #37af57;
}
.footer_nav ul{
    width: 960px;
    margin: 0 auto;
    padding: 40px 0;
    display: flex;
    justify-content: center;
}
.footer_nav li a{
    color: #fff;
    text-decoration: none;
    padding: 0 10px;
    border-right: 1px solid #fff;
}
.footer_nav li:last-child a{
    border-right: none;
}
.copy{
    text-align: center;
    color: #fff;
}