<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 &copy; 有機野菜ドットコム 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;
}