Chapter 09

レイアウト作成

tomokiya

ページ全体の配置を整えるための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>
  )
}