このチャプターの目次
ページ全体の配置を整えるためのLayoutコンポーネントを作成していきます。
Layoutコンポーネントを各ページで用いることで、全ページで共通したスタイリングを適用できます。
コーディング
コンポーネント
srcフォルダの下にcomponentsというフォルダを作成し、layout.jsというファイルを作成します。
引数として受け取っているchildrenは、このコンポーネントの子要素を表します。
例えば、<Layout><Hoge/></Layout>の場合の<Hoge/>コンポーネントがchildrenにあたります。
// src/components/layout.js
import React from "react"
import "../styles/layout.css"
const Layout = ({ children }) => {
return (
<div className="layout">
<main>{children}</main>
</div>
)
}
export default Layout
スタイリング
srcフォルダの下にstylesというフォルダを作成し、layout.cssというファイルを作成します。
/* src/styles/layout.css */
.layout {
margin: 0 auto;
max-width: 960px;
padding: 0 1.1rem 1.45rem;
}
Layoutコンポーネントの読み込み
作成したLayoutコンポーネントを親要素として使うことで、ページ内全体のスタイルを整えます。
// /src/pages/index.js
import React from "react"
import Layout from "../components/layout"
export default function Home() {
return (
<Layout>
<div>Hello world!</div>
</Layout>
)
}