章2

CSSスタイリング

現在、ホームページにはスタイルが適用されていません。Next.jsアプリケーションをスタイリングするさまざまな方法を見てみましょう。

この章では...

取り上げるトピックは以下の通りです

アプリケーションにグローバルCSSファイルを追加する方法。

2つの異なるスタイリング方法: TailwindとCSSモジュール。

`clsx`ユーティリティパッケージでクラス名を条件付きで追加する方法。

グローバルスタイル

`/app/ui`フォルダーを見ると、`global.css`というファイルがあります。このファイルを使用して、アプリケーション内の**すべて**のルートにCSSルールを追加できます。例えば、CSSリセットルール、リンクなどのHTML要素に対するサイト全体のスタイルなどです。

アプリケーションのどのコンポーネントでも`global.css`をインポートできますが、通常はトップレベルのコンポーネントに追加するのが良い慣習です。Next.jsでは、これがルートレイアウトです（詳細については後述します）。

`/app/layout.tsx`に移動し、`global.css`ファイルをインポートして、アプリケーションにグローバルスタイルを追加します

/app/layout.tsx

import '@/app/ui/global.css';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

開発サーバーがまだ実行されている状態で、変更を保存し、ブラウザでプレビューしてください。ホームページは次のようになります

しかし、ちょっと待ってください。CSSルールを追加していないのに、スタイルはどこから来たのでしょうか？

`global.css`の中を見ると、いくつかの`@tailwind`ディレクティブがあることに気づくでしょう

/app/ui/global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind

Tailwindは、Reactコードにユーティリティクラスを直接記述することで、開発プロセスを高速化するCSSフレームワークです。

Tailwindでは、クラス名を追加して要素をスタイリングします。例えば、`"text-blue-500"`を追加すると、`

`のテキストが青くなります

<h1 className="text-blue-500">I'm blue!</h1>

CSSスタイルはグローバルに共有されますが、各クラスは個々の要素に単独で適用されます。これは、要素を追加または削除しても、個別のスタイルシートの管理、スタイルの衝突、またはアプリケーションの規模拡大に伴うCSSバンドルサイズの増加を心配する必要がないことを意味します。

`create-next-app`を使用して新しいプロジェクトを開始すると、Next.jsはTailwindを使用するかどうかを尋ねます。`yes`を選択すると、Next.jsは必要なパッケージを自動的にインストールし、アプリケーションでTailwindを構成します。

`/app/page.tsx`を見ると、例でTailwindクラスを使用していることがわかります。

/app/page.tsx

import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
 
export default function Page() {
  return (
    // These are Tailwind classes:
    <main className="flex min-h-screen flex-col p-6">
      <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
    // ...
  )
}

Tailwindを初めて使う方でもご心配なく。時間を節約するため、使用するコンポーネントはすべて既にスタイリング済みです。

Tailwindを試してみましょう！以下のコードをコピーし、`/app/page.tsx`内の`

`要素の上に貼り付けてください

/app/page.tsx

<div
  className="relative w-0 h-0 border-l-[15px] border-r-[15px] border-b-[26px] border-l-transparent border-r-transparent border-b-black"
/>

従来のCSSルールを記述したり、スタイルをJSXから分離したりしたい場合は、CSS Modulesが優れた代替手段です。

CSSモジュール

CSS Modulesを使用すると、一意のクラス名を自動的に作成することでCSSをコンポーネントにスコープできるため、スタイルの衝突を心配する必要がありません。

このコースではTailwindを引き続き使用しますが、CSSモジュールを使用して上記のクイズと同じ結果を達成する方法を少し見てみましょう。

`/app/ui`内に、`home.module.css`という新しいファイルを作成し、以下のCSSルールを追加します

/app/ui/home.module.css

.shape {
  height: 0;
  width: 0;
  border-bottom: 30px solid black;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

次に、`/app/page.tsx`ファイル内でスタイルをインポートし、追加した`

/app/page.tsx

import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
import styles from '@/app/ui/home.module.css';
 
export default function Page() {
  return (
    <main className="flex min-h-screen flex-col p-6">
      <div className={styles.shape} />
    // ...
  )
}

変更を保存し、ブラウザでプレビューしてください。以前と同じ図形が表示されるはずです。

TailwindとCSSモジュールは、Next.jsアプリケーションをスタイリングする最も一般的な2つの方法です。どちらを使用するかは好みの問題であり、同じアプリケーションで両方を使用することもできます！

`clsx`ライブラリを使用したクラス名の切り替え

状態やその他の条件に基づいて要素を条件付きでスタイリングする必要がある場合があります。

`clsx`は、クラス名を簡単に切り替えることができるライブラリです。詳細についてはドキュメントをご覧ください。基本的な使用法は以下の通りです

`status`を受け取る`InvoiceStatus`コンポーネントを作成するとします。`status`は`'pending'`または`'paid'`のいずれかです。
`'paid'`の場合は色を緑に、`'pending'`の場合は色をグレーにしたいとします。

次のように`clsx`を使用してクラスを条件付きで適用できます

/app/ui/invoices/status.tsx

import clsx from 'clsx';
 
export default function InvoiceStatus({ status }: { status: string }) {
  return (
    <span
      className={clsx(
        'inline-flex items-center rounded-full px-2 py-1 text-sm',
        {
          'bg-gray-100 text-gray-500': status === 'pending',
          'bg-green-500 text-white': status === 'paid',
        },
      )}
    >
    // ...
)}

その他のスタイリングソリューション

これまでに説明したアプローチに加えて、Next.jsアプリケーションは以下を使用してスタイリングすることもできます

`.css`および`.scss`ファイルをインポートできるSass。
styled-jsx、styled-components、およびemotionなどのCSS-in-JSライブラリ。

詳細については、CSSドキュメントをご覧ください。

CSSスタイリング

グローバルスタイル

Tailwind

CSSモジュール

`clsx`ライブラリを使用したクラス名の切り替え

その他のスタイリングソリューション

チャプターを完了しました2