Chapter 13

フッターの作成

tomokiya

サイト下部に表示するフッターを作成していきましょう。

コーディング

コンポーネント

// 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