logoNext.js
ドキュメントブログ学習

レイアウトの仕上げ

これまで、CSS Modules などの概念を説明するために、最小限のReactとCSSコードのみを追加してきました。データフェッチングについての次のレッスンに進む前に、ページのスタイリングとコードを仕上げましょう。

components/layout.module.cssの更新

まず、components/layout.module.cssを開き、レイアウトとプロフィール画像のためのより洗練されたスタイルに以下の内容で置き換えてください：

.container {
  max-width: 36rem;
  padding: 0 1rem;
  margin: 3rem auto 6rem;
}
 
.header {
  display: flex;
  flex-direction: column;
  align-items: center;
}
 
.backToHome {
  margin: 3rem 0 0;
}

styles/utils.module.cssの作成

次に、複数のコンポーネントで再利用可能なCSSユーティリティクラス（テキストスタイル用）を作成しましょう。

styles/utils.module.cssという新しいCSSファイルを作成し、以下の内容を追加します：

.heading2Xl {
  font-size: 2.5rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.05rem;
  margin: 1rem 0;
}
 
.headingXl {
  font-size: 2rem;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.05rem;
  margin: 1rem 0;
}
 
.headingLg {
  font-size: 1.5rem;
  line-height: 1.4;
  margin: 1rem 0;
}
 
.headingMd {
  font-size: 1.2rem;
  line-height: 1.5;
}
 
.borderCircle {
  border-radius: 9999px;
}
 
.colorInherit {
  color: inherit;
}
 
.padding1px {
  padding-top: 1px;
}
 
.list {
  list-style: none;
  padding: 0;
  margin: 0;
}
 
.listItem {
  margin: 0 0 1.25rem;
}
 
.lightText {
  color: #666;
}

これらのユーティリティクラスはアプリケーション全体で再利用可能で、global.cssファイルでも使用できます。ユーティリティクラスはCSSセレクターの記述方法（例：グローバルスタイル、CSSモジュール、Sassなど）ではなく、アプローチを指します。ユーティリティファーストCSSについて詳しく学びましょう。

components/layout.jsの更新

3番目に、components/layout.jsを開き、以下のコードで内容を置き換えてください。Your Nameを実際の名前に変更します：

import Head from 'next/head';
import Image from 'next/image';
import styles from './layout.module.css';
import utilStyles from '../styles/utils.module.css';
import Link from 'next/link';
 
const name = 'Your Name';
export const siteTitle = 'Next.js Sample Website';
 
export default function Layout({ children, home }) {
  return (
    <div className={styles.container}>
      <Head>
        <link rel="icon" href="/favicon.ico" />
        <meta
          name="description"
          content="Learn how to build a personal website using Next.js"
        />
        <meta
          property="og:image"
          content={`https://og-image.vercel.app/${encodeURI(
            siteTitle,
          )}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
        />
        <meta name="og:title" content={siteTitle} />
        <meta name="twitter:card" content="summary_large_image" />
      </Head>
      <header className={styles.header}>
        {home ? (
          <>
            <Image
              priority
              src="/images/profile.jpg"
              className={utilStyles.borderCircle}
              height={144}
              width={144}
              alt=""
            />
            <h1 className={utilStyles.heading2Xl}>{name}</h1>
          </>
        ) : (
          <>
            <Link href="/">
              <Image
                priority
                src="/images/profile.jpg"
                className={utilStyles.borderCircle}
                height={108}
                width={108}
                alt=""
              />
            </Link>
            <h2 className={utilStyles.headingLg}>
              <Link href="/" className={utilStyles.colorInherit}>
                {name}
              </Link>
            </h2>
          </>
        )}
      </header>
      <main>{children}</main>
      {!home && (
        <div className={styles.backToHome}>
          <Link href="/">← Back to home</Link>
        </div>
      )}
    </div>
  );
}

新しく追加された内容：

  • ページの内容を説明するためのmetaタグ（og:imageなど）
  • タイトルと画像のサイズを調整するブール値のhomeプロップ
  • homeがfalseの場合、下部に「Back to home」リンクを追加
  • priority属性でプリロードされるnext/imageを使用した画像

pages/index.jsの更新

最後に、ホームページを更新しましょう。

pages/index.jsを開き、以下の内容で置き換えてください：

import Head from 'next/head';
import Layout, { siteTitle } from '../components/layout';
import utilStyles from '../styles/utils.module.css';
 
export default function Home() {
  return (
    <Layout home>
      <Head>
        <title>{siteTitle}</title>
      </Head>
      <section className={utilStyles.headingMd}>
        <p>[自己紹介をここに記入]</p>
        <p>
          （これはサンプルウェブサイトです -{' '}
          <a href="https://nextjs.org/learn">Next.jsチュートリアル</a>で同様のサイトを構築できます。）
        </p>
      </section>
    </Layout>
  );
}

次に、[自己紹介をここに記入]を自己紹介に置き換えてください。以下は著者のプロフィールの例です：

例

以上です！これでレイアウトコードが完成し、データフェッチングのレッスンに進む準備が整いました。

このレッスンを締めくくる前に、Next.jsのCSSサポートに関連する便利なテクニックについて次のページで説明します。

グローバルスタイル

Previous Page

スタイリングのヒント

Next Page

On this page