フッターを作る
サイトのフッターをつくる。ついにここまで来たかと思うとちょっと感動してる(笑)
material-uiのiconsを使ってマテリアルデザインを使う場合はimgタグは使わないかな。
<a href="#"> <InstagramIcon /> </a>
流石に慣れてきたのでものの1時間ぐらいで綺麗にできた。良かった。
import React from 'react'; import './style.css'; import InstagramIcon from '@material-ui/icons/Instagram'; import FooterLogo from './images/product-logo.png' const FooterMain = () => { return( <footer> <div class="footer-inner container-inner"> <div> <img class="footer-logo" src={FooterLogo} /> </div> <div> <a href="#"> <InstagramIcon /> </a> </div> <ul class="footer-link"> <a href="#"> <li>運営会社</li> </a> <a href="#"> <li>利用規約</li> </a> <a href="#"> <li>プライバシーポリシー</li> </a> <a href="#"> <li>お問い合わせ</li> </a> </ul> <p class="footer-copyright">©️ 2020 SAMPLE ALL Rights Reserved.</p> </div> </footer> ); } export default FooterMain
footer { text-align: center; background: #fff; padding: 0; } .footer-inner { display: flex; justify-content: space-between; align-items: center; } .container-inner { max-width: 1280px; margin: 0 auto; } .footer-logo { width: 120px; margin-bottom: 0; } .footer-link { display: flex; margin: 0; list-style: none; padding: 0; font-weight: bold; } .footer-link a { font-size: 12px; text-decoration: none; color: #000000; } .footer-link li { margin-right: 16px; margin-bottom: 0px; } .footer-copyright { margin: 0; font-size: 10px; color: #000000; }
とりあえずページはあらかたできたから、次はヘッダーと最初のページを改良しようかな。