サイト下部に表示するフッターを作成していきましょう。
コーディング
コンポーネント
// src/components/footer.js
import React from "react"
import "../styles/footer.css"
export default function Footer() {
return (
<footer className="footer">
© {new Date().getFullYear()} Dev Blog
</footer>
)
}
スタイリング
/* styles/footer.css */
.footer {
color: #595959;
text-align: center;
}
フッターの読み込み
// src/components/layout.js
import React from "react"
import "../styles/layout.css"
import Header from "./header"
import Footer from "./footer"
const Layout = ({ children }) => {
return (
<div className="layout">
<Header />
<main>{children}</main>
<Footer />
</div>
)
}
export default Layout