前回の記事ではNext.jsでのプロジェクトの実行までを行いました。
https://devpediacode.com/information/AI/3780dee0-14c4-5042-af67-2841b0742c9c
今回の記事では、Next.jsアプリケーションにスタイルを適用する「CSS Styling」の章を学んでいきたいと思います。
第2章
グローバルCSS
global.css は、Next.js アプリケーション全体に適用される グローバルな CSS スタイルシートです。
/app/ui フォルダの中に global.css というファイルがあります。
このファイルは、ウェブサイト全体の見た目を整えるためのCSSスタイルをまとめて書くためのものです。
例えば、以下のような設定を行うことができます。
- CSSリセット: ブラウザによって異なる初期設定をリセットし、デザインの差異をなくします。
- リンクスタイル: ウェブサイト内のリンクの色や下線を統一します。
global.css は、ウェブサイトを構成するどのパーツからも読み込むことができますが、通常は最上位の階層（Next.jsの場合はルートレイアウト）で読み込むのが一般的です。
具体的には、/app/layout.tsx ファイルに global.css を読み込む記述を追加します。
これにより、ウェブサイト全体のデザインが global.css で指定された通りになります。
では、実際にアプリケーションにグローバルスタイルを追加していきます。
/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>
);
}
開発サーバーがまだ動いている状態で、変更を保存し、ブラウザでプレビューしてみましょう。
実行結果は次のようになります：
スタイルが適用されたページで、ロゴ「Acme」、説明文、ログインリンクがあります。
しかし、CSSルールを追加していないのに、どこからスタイルが来たのでしょうか？
global.cssを確認すると、いくつかの@tailwindディレクティブがあります。
/app/ui/global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
今回のプロジェクトに反映しているのは、Tailwind CSSです。
Tailwind CSSは、ユーティリティファーストのCSSフレームワークで、事前に定義されたクラスを使って効率的にスタイリングを行えるツールです。
global.cssファイル内で@tailwindディレクティブが使用されており、それがページ全体にスタイルを適用されています。
次に、Tailwindを使った例を試します。
/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モジュールとclsxライブラリについて学んでいきます。
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ファイル内でスタイルをインポートし、div要素に追加したTailwindクラスをstyles.shapeに置き換えます。
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} />
// ...
)
}
clsxライブラリを使えば、アプリケーション内で動的にクラス名を変更したい場合、clsxライブラリを使用することで効率的にスタイリングを行えます。
例えば、InvoiceStatusというコンポーネントがあり、そのステータスが「pending（保留中）」または「paid（支払い済み）」のどちらかだとします。
ステータスが「paid」の場合は緑色に、ステータスが「pending」の場合は灰色にしたいとします。
このようなケースでは、clsxを使ってクラス名を状態に応じて動的に切り替えることができます。
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',
}
)}
>
{status}
</span>
);
}
今回作成したプロジェクトの/app/ui/invoices/status.tsxを見ることでソースコードを確認できます。
以上で第2章になります。
第3章では、フォントと画像の最適化について学びます。